From cb063b5363464b69b34cef29761005c1d83986a3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 12 Oct 2022 15:25:40 -0400
Subject: [PATCH] WIP update styles per Rachel request.

---
 .../date-picker/date-picker.vue               | 60 ++++++++++---------
 src/styles/common-error-styles.scss           |  3 -
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index e4e098dba..cf7a0c38e 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -42,7 +42,7 @@
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
           <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span></label>
-          <div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
+          <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
@@ -148,39 +148,39 @@
           <input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
           <label class="selectable-day" for="oct-27"><span>27</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
           <label class="selectable-day" for="oct-28"><span>28</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
           <label class="selectable-day" for="oct-29"><span>29</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-30" />
           <label class="selectable-day" for="nov-30"><span>30</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
           <label class="selectable-day" for="oct-31"><span>31</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-1" />
           <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-2" />
           <label class="future-day selectable-day" for="nov-2"><span>2</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-3" />
           <label class="future-day selectable-day" for="nov-3"><span>3</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-4" />
           <label class="future-day selectable-day" for="nov-4"><span>4</span></label>
         </div>
-        <div class="grid-item radio-wrapper future-day">
+        <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-5" />
           <label class="future-day selectable-day" for="nov-5"><span>5</span></label>
         </div>
@@ -227,6 +227,8 @@ export default {
   .month-year {
     grid-area: 1 / 1 / 2 / 4;
     text-transform: uppercase;
+    font-weight: 300;
+    letter-spacing: .75px;
   }
   .legend {
     grid-area: 1 / 4 / 2 / 6;
@@ -278,9 +280,11 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      &:focus {
-        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-        background-color: $blue;
+      &:focus,
+      &:focus-visible {
+        border: 2.5px solid $blue;
+        box-shadow: none;
+        background-color: $blue-100;
         color: $white;
       }
     }
@@ -316,9 +320,9 @@ export default {
           &:after {
             background-color: $white;
           }
-        }
-        + .first-of-month {
-          color: $white;
+          + .first-day {
+            color: $white;
+          }
         }
       }
       &:checked + label {
@@ -328,9 +332,6 @@ export default {
         &:after {
           background-color: $white;
         }
-        + .first-of-month {
-          color: $white;
-        }
       }
       &:checked + label p,
       &:checked + label span {
@@ -338,21 +339,15 @@ export default {
       }
     }
 
-    .first-of-month {
+    .first-day {
       position: absolute;
       font-size: 9px;
+      font-weight: 500;
       color: $gray-600;
       top: 0;
       z-index: 1;
     }
 
-    .current-day {
-      &.selectable-day {
-        + .first-of-month {
-          color: $blue;
-        }
-      }
-    }
 
     label {
       position: relative;
@@ -388,6 +383,9 @@ export default {
           position: absolute;
           top: 28px;
         }
+        + .first-day {
+          color: $blue;
+        }
       }
 
       &.future-day {
@@ -414,8 +412,10 @@ export default {
           }
         }
         cursor: pointer;
-        + .first-of-month {
-          color: $white;
+        &.current-day {
+          + .first-day {
+            color: $white;
+          }
         }
       }
 
@@ -423,6 +423,8 @@ export default {
         display: none;
       }
 
+
+
     }
   }
 }
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 9eda216b7..3d4771ff5 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -47,9 +47,6 @@ html {
             background-color: $blue-100;
             box-shadow: 0px 0px 0px 4px $red-200;
           }
-          span {
-            color: $red;
-          }
         }
       }
     }