Added Datepicker #53
@@ -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>
|
||||
</>)
|
||||
+33
-6
@@ -23,6 +23,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
@@ -657,7 +658,7 @@ TODO: Responsive ===========================
|
||||
.children-element {
|
||||
left: 0;
|
||||
top: 0;
|
||||
webkit-transform: none;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -685,11 +686,24 @@ TODO: Responsive ===========================
|
||||
border-radius: 7px !important;
|
||||
}
|
||||
|
||||
.dark .react-calendar{
|
||||
background: #11131F;
|
||||
color: #7B818D;
|
||||
border: 1px solid #25284F;
|
||||
}
|
||||
.dark .react-calendar__navigation button:enabled:hover,
|
||||
.dark .react-calendar__navigation button:enabled:focus,
|
||||
.dark .react-calendar__tile:disabled,
|
||||
.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
|
||||
|
||||
.react-calendar__navigation{
|
||||
margin-top: 2px;
|
||||
margin-inline: 2px;
|
||||
}
|
||||
|
||||
.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
|
||||
.dark .react-calendar__tile--active{color: #fff;}
|
||||
|
||||
.react-calendar__navigation button:enabled:hover,
|
||||
.react-calendar__navigation button:enabled:focus{
|
||||
@apply rounded-full transition duration-500
|
||||
@@ -713,13 +727,19 @@ TODO: Responsive ===========================
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
.dark .react-calendar__tile{background: #11131F;}
|
||||
|
||||
.reminder-select select{
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
|
||||
background-position: calc(100% - 0.75rem) center !important;
|
||||
box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2);
|
||||
border: 0.5px solid #E3E4FE;
|
||||
}
|
||||
|
||||
.dark .reminder-select select {
|
||||
border: 0.5px solid #25284F;
|
||||
}
|
||||
|
||||
.reminder-select select::-ms-expand {
|
||||
@@ -740,17 +760,21 @@ TODO: Responsive ===========================
|
||||
|
||||
/* Date Picker */
|
||||
.react-date-picker__wrapper{
|
||||
border: 0;
|
||||
box-shadow: 0 0 0.5em 0 rgb(194 194 194 / 20%);
|
||||
border: 0.5px solid #E3E4FE;
|
||||
padding: 1.25rem;
|
||||
background: #fafafa;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
|
||||
|
||||
.dark .react-date-picker__wrapper{
|
||||
background: #1a3544;
|
||||
background: #11131F;
|
||||
color: #7B818D;
|
||||
}
|
||||
|
||||
.dark .react-date-picker__button svg{stroke: #7B818D;}
|
||||
|
||||
.react-date-picker__calendar .react-calendar{
|
||||
min-height: 18.4rem;
|
||||
}
|
||||
@@ -759,6 +783,9 @@ TODO: Responsive ===========================
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.react-date-picker__inputGroup__input{
|
||||
.react-date-picker__inputGroup__input,
|
||||
.react-date-picker__inputGroup__divider,
|
||||
.react-date-picker__inputGroup__leadingZero{
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
}
|
||||
Reference in New Issue
Block a user