final touches

This commit was merged in pull request #53.
This commit is contained in:
Chukwumdiebube
2023-02-11 22:27:56 +01:00
parent ac505a3211
commit 8181fceb6f
2 changed files with 44 additions and 10 deletions
+11 -4
View File
@@ -142,7 +142,7 @@ export default function AddEditReminder({ className }) {
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
<select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<option className='' value="">Select category</option>
{category.length > 0 &&
<>
@@ -163,7 +163,7 @@ export default function AddEditReminder({ className }) {
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
<select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<option className='' value="">Select mode</option>
{category.length > 0 &&
<>
@@ -199,6 +199,7 @@ export default function AddEditReminder({ className }) {
clearIcon={startDate ? null : 'x'}
value={startDate}
onChange={(date) => setStartDate(date)}
calendarIcon={<CalendarIcon />}
/>
</div>
<div className="field w-full">
@@ -213,6 +214,7 @@ export default function AddEditReminder({ className }) {
range="range"
value={endDate}
onChange={(date) => setEndDate(date)}
calendarIcon={<CalendarIcon />}
/>
</div>
</div>
@@ -227,7 +229,7 @@ export default function AddEditReminder({ className }) {
value={reminder.notes}
placeholder="Provide a detailed description of your item."
rows="7"
className="w-full h-full px-7 py-4 border border-light-purple dark:border-[#5356fb29] rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
className="w-full h-full px-7 py-4 border border-light-purple dark:border-[#5356fb29] rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none resize-none"
onChange={onReminderInputChange}
maxLength={250}
/>
@@ -275,4 +277,9 @@ export default function AddEditReminder({ className }) {
</Layout>
</>
)
}
}
const CalendarIcon = () => (<><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-[#374151]">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
</svg>
</>)