Added rounded edges on select boxes

src/components/Reminders/AddEditReminder.jsx

@@ -5,10 +5,8 @@ import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
 // import { toast } from 'react-toastify';
 
 import InputCom from "../Helpers/Inputs/InputCom";
-
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-
 import usersService from "../../services/UsersService";
 
 
@@ -37,8 +35,8 @@ export default function AddEditReminder({ className }) {
     'member_id': localStorage.getItem('member_id'),
     description: location.state?.reminder.description || '',
     note: location.state?.reminder.note || '',
-    category: location.state?.reminder.code || '',
-    mode: location.state?.reminder.code || '',
+    category: location.state?.reminder.category || '',
+    mode: location.state?.reminder.mode || '',
     'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
     'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
   })
@@ -49,6 +47,7 @@ export default function AddEditReminder({ className }) {
     ))
   }
 
+  
   const getUserMode = async () => {
     try {
       const res = await api.getUserModeCategory('remmode');
@@ -86,21 +85,19 @@ export default function AddEditReminder({ className }) {
       const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder set successfully'})
+        setMessage({status: true, message: 'Reminder successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: `Sorry, couldn't perform action`})
+      setMessage({status: false, message: `Opps, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
     }
   }
-
-  
   
   useEffect(() => {
     getUserMode();
@@ -133,7 +130,7 @@ export default function AddEditReminder({ className }) {
 
              {/* first name and last name */}
              <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
+              <div className="field w-full reminder-select mb-6 xl:mb-0">
                 {/* <InputCom
                   label="Reminder Type"
                   type="text"
@@ -142,19 +139,19 @@ 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-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
                     {category.map((option, index)=>(
-                      <option key={index} className='' value={option.code}>{option.category}</option>
+                      <option key={index} className='' value={option.category}>{option.category}</option>
                     ))
                     }
                   </>
                   }
                 </select>
               </div>
-              <div className="field w-full">
+              <div className="field w-full reminder-select">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -163,12 +160,12 @@ 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-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
                     {mode.map((option, index)=>(
-                      <option key={index} className='' value={option.code}>{option.mode}</option>
+                      <option key={index} className='' value={option.mode}>{option.mode}</option>
                     ))
                     }
                   </>

src/index.css

@@ -712,3 +712,28 @@ TODO: Responsive ===========================
   height: 4.813rem !important;
   transition: all 500ms;
 }
+
+.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); 
+}
+
+.reminder-select select::-ms-expand {
+  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
+}
+
+.reminder-select select option{
+  color: inherit;
+}
+
+/* Target Internet Explorer 9 to undo the custom arrow */
+@media screen and (min-width:0\0) {
+  .reminder-select select {
+      background: none\9;
+      padding: 5px\9;
+  }
+}