Merge pull request #535 from cornell-dti/dka34/Select-Styling-Fix

Fixing the styling issue in Students page etc
cornell-dti · Oct 5, 2024 · 661966e · 661966e
2 parents 5eb347e + 60067ef
commit 661966e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/frontend/src/components/RideModal/Pages/RideTimes.tsx b/frontend/src/components/RideModal/Pages/RideTimes.tsx
@@ -194,6 +194,7 @@ const RideTimesPage: React.FC<RideTimesProps> = ({
                 },
               })}
               aria-required="true"
+              className={cn(styles.dateStyle)}
             />
             {errors.date?.type === 'required' && (
               <p className={styles.error}>Please enter a date</p>
@@ -211,6 +212,7 @@ const RideTimesPage: React.FC<RideTimesProps> = ({
               {...register('repeats', {
                 required: 'Please select a repeat option',
               })}
+              className={cn(styles.selectInputContainer, styles.selectInput)}
             >
               {repeatOptions.map((option) => (
                 <option key={option.id} value={option.id}>
@@ -228,6 +230,7 @@ const RideTimesPage: React.FC<RideTimesProps> = ({
             <Input
               id="pickupTime"
               type="time"
+              className={cn(styles.timeStyle)}
               {...register('pickupTime', {
                 required: true,
                 validate: (pickupTime: string) => {
@@ -250,6 +253,7 @@ const RideTimesPage: React.FC<RideTimesProps> = ({
             <Input
               id="dropoffTime"
               type="time"
+              className={cn(styles.timeStyle)}
               {...register('dropoffTime', {
                 required: true,
                 validate: (dropoffTime: string) => {

diff --git a/frontend/src/components/RideModal/ridemodal.module.css b/frontend/src/components/RideModal/ridemodal.module.css
@@ -25,9 +25,9 @@
 }
 
 /* Input styles */
-input[type='date'],
-input[type='time'],
-select {
+.dateStyle,
+.timeStyle,
+.selectInputContainer {
   width: 100%;
   padding: 0.75rem;
   font-size: 1rem;
@@ -37,16 +37,8 @@ select {
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-input[type='date']:focus,
-input[type='time']:focus,
-select:focus {
-  outline: none;
-  border-color: #80bdff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
 /* Styled select */
-select {
+.selectInput {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;