Styling reminders

src/components/Reminders/AddEditReminder.jsx

@@ -121,7 +121,7 @@ export default function AddEditReminder({ className }) {
                 placeholder="Describe the Reminder"
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
-                maxLength={10}
+                maxLength={35}
               />
             </div>
 
@@ -136,7 +136,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 name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select name='category' className='input-field bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 ' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
@@ -157,7 +157,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 name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select name='mode' className='input-field bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 ' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>

src/components/Reminders/ReminderTable.jsx

@@ -142,7 +142,7 @@ export default function ReminderTable({ className }) {
                     <td className="text-right py-4 px-2">
                       <button
                         type="button"
-                        className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
+                        className="btn-gradient lg:flex hidden w-[55px] h-[40px] rounded-full text-white justify-center items-center"
                       >
                         Edit
                       </button>