From 0b0b258d49eb33ee50575b42180b93445d92b49e Mon Sep 17 00:00:00 2001
From: Chukwumdiebube <chukwumdiebubeojinta@gmail.com>
Date: Wed, 8 Feb 2023 18:51:12 +0100
Subject: [PATCH] Added rounded edges on select boxes

---
 src/components/Reminders/AddEditReminder.jsx | 10 ++++----
 src/index.css                                | 25 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/Reminders/AddEditReminder.jsx b/src/components/Reminders/AddEditReminder.jsx
index dfc7eae..bc24f50 100644
--- a/src/components/Reminders/AddEditReminder.jsx
+++ b/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";
 
 
@@ -132,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"
@@ -141,7 +139,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-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 &&
                   <>
@@ -153,7 +151,7 @@ export default function AddEditReminder({ className }) {
                   }
                 </select>
               </div>
-              <div className="field w-full">
+              <div className="field w-full reminder-select">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -162,7 +160,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-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 &&
                   <>
diff --git a/src/index.css b/src/index.css
index 0741929..baba928 100755
--- a/src/index.css
+++ b/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;
+  }
+}
\ No newline at end of file