From bdfb4bbf8aceeadd477e145791d3734cb6796582 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 7 Oct 2022 16:31:49 -0400
Subject: [PATCH 01/13] WIP date picker

---
 .../date-picker/date-picker.vue               | 456 ++++++------------
 1 file changed, 158 insertions(+), 298 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 28d433289..2bbd1bad5 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -1,147 +1,151 @@
 <template>
   <div id="app">
     <fieldset>
-      <legend class="d-flex justify-content-center">Date Picker</legend>
+      <legend class=" sr-only">Date Picker</legend>
       <div class="grid-container">
+        <div class="month-year body-small d-flex align-items-center ps-3 small">{{currentMonth}} {{currentYear}}</div>
+        <div class="legend caption d-flex align-items-center justify-content-end"><span class="legend-circle me-1"></span> &equals; Available</div>
+        <div class="nav-back ps-3"><button></button></div>
+        <div class="nav-forward pe-3"><button></button></div>
         <!-- Do the days of the weeek need to be read? -->
-        <div class="grid-item"><span class="sr-only">Sunday</span>S</div>
-        <div class="grid-item"><span class="sr-only">Monday</span>M</div>
-        <div class="grid-item"><span class="sr-only">Tuesday</span>T</div>
-        <div class="grid-item"><span class="sr-only">Wednesday</span>W</div>
-        <div class="grid-item"><span class="sr-only">Thursday</span>T</div>
-        <div class="grid-item"><span class="sr-only">Friday</span>F</div>
-        <div class="grid-item"><span class="sr-only">Saturday</span>S</div>
+        <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
+        <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
+        <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
+        <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+        <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
+        <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
+        <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
         <div class="grid-item radio-wrapper past-day">
           <input type="radio" name="day-of-month" id="thirtypast" />
           <label for="thirtypast"><span>30</span></label>
         </div>
-        <div class="grid-item radio-wrapper past-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirtyonepast" />
           <label for="thirtyonepast"><span>31</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day first-of-month">
-          <div v-if="isFirstDayOfMonth" class="current-month">OCT</div>
+        <div class="grid-item radio-wrapper">
+          <!-- <div v-if="isFirstDayOfMonth" class="current-month">OCT</div> -->
           <input type="radio" name="day-of-month" id="one" />
           <label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="two" />
           <label for="two"><span>2</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="three" />
           <label for="three"><span>3</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day" :class="[isCurrentDay ? 'current-day' : '']">
-          <div v-if="isCurrentDayDot" class="current-day-dot"></div>
+        <div class="grid-item radio-wrapper" :class="[isCurrentDay ? 'current-day' : '']">
+          <!-- <div v-if="isCurrentDayDot" class="current-day-dot"></div> -->
           <input type="radio" name="day-of-month" id="four" />
           <label for="four"><span>4</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="five" />
           <label for="five"><span>5</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="six" />
           <label for="six"><span>6</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="seven" />
           <label for="seven"><span>7</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eight" />
           <label for="eight"><span>8</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nine" />
           <label for="nine"><span>9</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="ten" />
           <label for="ten"><span>10</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eleven" />
           <label for="eleven"><span>11</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twelve" />
           <label for="twelve"><span>12</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirteen" />
           <label for="thirteen"><span>13</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="fourteen" />
           <label for="fourteen"><span>17</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="fifteen" />
           <label for="fifteen"><span>15</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="sixteen" />
           <label for="sixteen"><span>16</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="seventeen" />
           <label for="seventeen"><span>17</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="eighteen" />
           <label for="eighteen"><span>18</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nineteen" />
           <label for="nineteen"><span>19</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twenty" />
           <label for="twenty"><span>20</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyone" />
           <label for="twentyone"><span>21</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentytwo" />
           <label for="twentytwo"><span>22</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentythree" />
           <label for="twentythree"><span>23</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyfour" />
           <label for="twentyfour"><span>24</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyfive" />
           <label for="twentyfive"><span>25</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentysix" />
           <label for="twentysix"><span>26</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyseven" />
           <label for="twentyseven"><span>27</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentyeight" />
           <label for="twentyeight"><span>28</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="twentynine" />
           <label for="twentynine"><span>29</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirty" />
           <label for="thirty"><span>30</span></label>
         </div>
-        <div class="grid-item radio-wrapper highlighted-day">
+        <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="thirtyone" />
           <label for="thirtyone"><span>31</span></label>
         </div>
@@ -156,9 +160,6 @@
       </div>
     </fieldset>
   </div>
-  <form class="w-100 d-flex justify-content-center mt-5">
-    <input type="date">
-  </form>
 </template>
 
 <script>
@@ -169,6 +170,8 @@ export default {
       dayOfWeek: "Tuesday",
       dayOfMonth: "1st",
       pastMonth: "October",
+      currentMonth: "October",
+      currentYear: "2022",
       isFirstDayOfMonth: true,
       isCurrentDay: true,
       isCurrentDayDot: true,
@@ -178,29 +181,73 @@ export default {
 </script>
 
 <style lang="scss">
-.container {
-  //max-width: 341px;
-  label {
-    display: initial; //Override Bootstrap default
-  }
-  #availableDates label:nth-child(14n):after {
-    content: "\a";
-    white-space: pre;
-  }
-}
-
 .grid-container {
   margin: 0 auto;
-  max-width: 341px;
+  max-width: 414px;
   display: grid;
-  grid-gap: 4px;
-  grid-template-columns: auto auto auto auto auto auto auto;
+  //grid-template-columns: auto auto auto auto auto auto auto;
+  grid-template-columns: repeat(7, 1fr);
   justify-content: center;
   align-items: center;
+  padding: 4px;
 
   .grid-item {
     text-align: center;
-    padding: 4px;
+    margin: 10%;
+  }
+
+  .month-year { grid-area: 1 / 1 / 2 / 4;
+    text-transform: uppercase;
+  }
+  .legend { grid-area: 1 / 4 / 2 / 6;
+    .legend-circle {
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      background-color: $blue-100;
+      border: 1px solid $blue;
+    }
+  }
+  .nav-back { grid-area: 1 / 6 / 2 / 7;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      &:after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 12px;
+        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+  .nav-forward { grid-area: 1 / 7 / 2 / 8;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      &:after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 12px;
+        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+
+  .nav-back,
+  .nav-forward {
+    button {
+      position: relative;
+      border-radius: 50%;
+      width: 28px;
+      height: 28px;
+      background-color: $blue-100;
+      border: 1px solid $blue;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
   .radio-wrapper {
@@ -208,252 +255,65 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    width: 46px;
-    height: 46px;
+    outline: none;
 
-    .current-day-dot {
-      position: absolute;
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;; //override bootstrap
+      height: 0;
+      opacity: 0;
 
-    }
-
-    &.first-of-month {
-      .current-month {
-        position: absolute;
-        font-size: 9px;
-        top: 4px;
-        color: #1574a1;
+      &:focus-visible + label {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
+      &:focus + label,
+      &:checked:focus + label {
+        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+        background-color: $blue;
+        color: $white;
+      }
+      &:checked + label {
+        color: $blue;
+        font-weight: 500;
+        background: $blue-100;
+      }
+      &:checked + label p,
+      &:checked + label span {
+        font-weight: 500;
       }
     }
 
-    &.highlighted-day {
+    label {
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      border-radius: 50%;
+      color: #1574a1;
+      background-color: $blue-100;
+      border: 1px solid $blue;
 
-      input[type="radio"] {
-        position: absolute;
-        // opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #1574a1;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid #1574a1;
-            background-color: #e4f1f7;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-
-        &:focus {
-          + label::before {
-            background-color: #1574a1;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    &.past-day {
-
-      input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #8E9292;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid transparent;
-            background-color: transparent;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-
-        &:focus {
-          + label::before {
-            background-color: transparent;
-          }
-          + label span {
-            color: #1574a1;
-          }
-        }
-
-        &:active {
-          + label::before {
-            background-color: #1574a1;
-          }
-          + label span {
-            color: #fff;
-          }
-        }
-      }
-    }
-
-    &.future-day {
-
-      input[type="radio"] {
-        position: absolute;
-        opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        + label {
-          position: relative;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          color: #4D5151;
-
-          span {
-            z-index: 2;
-          }
-
-          &::before {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid transparent;
-            background-color: transparent;
-            color: #1574a1;
-            width: 40px;
-            height: 40px;
-            z-index: -1;
-          }
-
-          &::after {
-            content: "";
-            position: absolute;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-          }
-        }
-      }
-    }
-
-    &.current-day {
-
-      input[type="radio"] {
-        position: absolute;
-        // opacity: 0;
-        height: 0.1px;
-        width: 0.1px;
-
-        &:after {
-          content: "\A";
-          width:4px;
-          height:4px;
-          border-radius:50%;
-          background: #1574a1;
-          position: absolute;
-          top: 8px;
-          left: -1px;
-          z-index: 1;
-        }
-
-        &:checked {
-          + label::after {
-            background: #1574a1;
-            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-            color: #fff;
-          }
-          + label span {
-            color: #fff;
-          }
-          &:after {
-            background: #fff;
-          }
-        }
-      }
       span {
-        position: relative;
-        top: -.25rem;
+        &.small {
+          font-size: .75rem;
+          color: $gray-550;
+        }
+      }
+
+      &:hover {
+        @include media-breakpoint-up(sm) {
+          box-shadow: 0 0 0 4px $blue-300;
+        }
+        cursor: pointer;
+      }
+      + p {
+        display: none;
       }
     }
   }
-
 }
-
-</style>
+  </style>

From eea0b883a77e064d1ed34f6a1151ae400e5ed00f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Oct 2022 15:44:37 -0400
Subject: [PATCH 02/13] WIP date picker.

---
 .../date-picker/date-picker.vue               | 233 +++++++++++-------
 1 file changed, 147 insertions(+), 86 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 2bbd1bad5..f2db85e42 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <fieldset>
       <legend class=" sr-only">Date Picker</legend>
-      <div class="grid-container">
+      <div class="calendar-grid-container">
         <div class="month-year body-small d-flex align-items-center ps-3 small">{{currentMonth}} {{currentYear}}</div>
         <div class="legend caption d-flex align-items-center justify-content-end"><span class="legend-circle me-1"></span> &equals; Available</div>
         <div class="nav-back ps-3"><button></button></div>
@@ -15,147 +15,146 @@
         <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
         <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
         <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
-        <div class="grid-item radio-wrapper past-day">
-          <input type="radio" name="day-of-month" id="thirtypast" />
-          <label for="thirtypast"><span>30</span></label>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtypast" />
+          <label class="past-day" for="thirtypast"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirtyonepast" />
-          <label for="thirtyonepast"><span>31</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
+          <label class="past-day" for="thirtyonepast"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <!-- <div v-if="isFirstDayOfMonth" class="current-month">OCT</div> -->
-          <input type="radio" name="day-of-month" id="one" />
-          <label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="one" />
+          <label class="highlighted-day selectable-day" for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="two" />
-          <label for="two"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="two" />
+          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="two"><span>2</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="three" />
-          <label for="three"><span>3</span></label>
-        </div>
-        <div class="grid-item radio-wrapper" :class="[isCurrentDay ? 'current-day' : '']">
-          <!-- <div v-if="isCurrentDayDot" class="current-day-dot"></div> -->
-          <input type="radio" name="day-of-month" id="four" />
-          <label for="four"><span>4</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="three" />
+          <label class="highlighted-day selectable-day" for="three"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="five" />
-          <label for="five"><span>5</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="four" />
+          <label class="highlighted-day selectable-day" for="four"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="six" />
-          <label for="six"><span>6</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="five" />
+          <label class="highlighted-day selectable-day" for="five"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="seven" />
-          <label for="seven"><span>7</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="six" />
+          <label class="highlighted-day selectable-day" for="six"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eight" />
-          <label for="eight"><span>8</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="seven" />
+          <label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="nine" />
-          <label for="nine"><span>9</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eight" />
+          <label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="ten" />
-          <label for="ten"><span>10</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nine" />
+          <label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eleven" />
-          <label for="eleven"><span>11</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="ten" />
+          <label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twelve" />
-          <label for="twelve"><span>12</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eleven" />
+          <label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirteen" />
-          <label for="thirteen"><span>13</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twelve" />
+          <label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="fourteen" />
-          <label for="fourteen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
+          <label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="fifteen" />
-          <label for="fifteen"><span>15</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
+          <label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="sixteen" />
-          <label for="sixteen"><span>16</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
+          <label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="seventeen" />
-          <label for="seventeen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
+          <label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="eighteen" />
-          <label for="eighteen"><span>18</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
+          <label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="nineteen" />
-          <label for="nineteen"><span>19</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
+          <label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twenty" />
-          <label for="twenty"><span>20</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
+          <label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyone" />
-          <label for="twentyone"><span>21</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twenty" />
+          <label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentytwo" />
-          <label for="twentytwo"><span>22</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
+          <label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentythree" />
-          <label for="twentythree"><span>23</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
+          <label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyfour" />
-          <label for="twentyfour"><span>24</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
+          <label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyfive" />
-          <label for="twentyfive"><span>25</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
+          <label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentysix" />
-          <label for="twentysix"><span>26</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
+          <label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyseven" />
-          <label for="twentyseven"><span>27</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
+          <label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentyeight" />
-          <label for="twentyeight"><span>28</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
+          <label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="twentynine" />
-          <label for="twentynine"><span>29</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
+          <label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirty" />
-          <label for="thirty"><span>30</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
+          <label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input type="radio" name="day-of-month" id="thirtyone" />
-          <label for="thirtyone"><span>31</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="thirty" />
+          <label class="highlighted-day selectable-day" for="thirty"><span>30</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="0" type="radio" name="day-of-month" id="thirtyone" />
+          <label class="highlighted-day selectable-day" for="thirtyone"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input type="radio" name="day-of-month" id="onefuture" />
-          <label for="onefuture"><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
+          <label class="future-day selectable-day" for="onefuture"><span>1</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input type="radio" name="day-of-month" id="twofuture" />
-          <label for="twofuture"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
+          <label class="future-day selectable-day" for="twofuture"><span>2</span></label>
         </div>
       </div>
     </fieldset>
@@ -175,13 +174,14 @@ export default {
       isFirstDayOfMonth: true,
       isCurrentDay: true,
       isCurrentDayDot: true,
+      isPastDay: true,
     };
   },
 };
 </script>
 
 <style lang="scss">
-.grid-container {
+.calendar-grid-container {
   margin: 0 auto;
   max-width: 414px;
   display: grid;
@@ -208,7 +208,8 @@ export default {
       border: 1px solid $blue;
     }
   }
-  .nav-back { grid-area: 1 / 6 / 2 / 7;
+  .nav-back {
+    grid-area: 1 / 6 / 2 / 7;
     display: flex;
     justify-content: flex-end;
     button {
@@ -221,7 +222,8 @@ export default {
       }
     }
   }
-  .nav-forward { grid-area: 1 / 7 / 2 / 8;
+  .nav-forward {
+    grid-area: 1 / 7 / 2 / 8;
     display: flex;
     justify-content: flex-end;
     button {
@@ -247,6 +249,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;
+        color: $white;
+      }
     }
   }
 
@@ -257,8 +264,7 @@ export default {
     align-items: center;
     outline: none;
 
-    input[type="radio"],
-    input[type="checkbox"] {
+    input[type="radio"] {
       position: absolute;; //override bootstrap
       height: 0;
       opacity: 0;
@@ -271,18 +277,40 @@ export default {
         box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
         background-color: $blue;
         color: $white;
+        &.past-day {
+          box-shadow: none;
+          background-color: transparent;
+          color: $gray-500;
+          font-weight: normal;
+        }
+        &.current-day {
+          &:after {
+            background-color: $white;
+          }
+        }
+        + .first-of-month {
+          color: $white;
+        }
       }
       &:checked + label {
         color: $blue;
-        font-weight: 500;
+        //font-weight: 500;
         background: $blue-100;
       }
       &:checked + label p,
       &:checked + label span {
-        font-weight: 500;
+        //font-weight: 500;
       }
     }
 
+    .first-of-month {
+      position: absolute;
+      font-size: 9px;
+      color: $blue;
+      top: 0;
+      z-index: 1;
+    }
+
     label {
       position: relative;
       cursor: pointer;
@@ -293,9 +321,41 @@ export default {
       height: 40px;
       min-width: 40px;
       border-radius: 50%;
-      color: #1574a1;
-      background-color: $blue-100;
-      border: 1px solid $blue;
+
+      &.past-day {
+        color: $gray-500;
+        background-color: transparent;
+        border: 1px solid transparent;
+        pointer-events: none;
+      }
+
+      &.highlighted-day {
+        color: $blue;
+        background-color: $blue-100;
+        border: 1px solid $blue;
+      }
+
+      &.current-day {
+        &:after {
+          content: '';
+          width: .25rem;
+          height: .25rem;
+          border-radius: 50%;
+          background-color: $blue;
+          position: absolute;
+          top: 28px;
+        }
+      }
+
+      &.future-day {
+
+      }
+
+      &.selectable-day {
+        &:hover {
+          cursor: pointer;
+        }
+      }
 
       span {
         &.small {
@@ -313,6 +373,7 @@ export default {
       + p {
         display: none;
       }
+
     }
   }
 }

From d8cfcab66bfa7c34af6567d007565225b76e450c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Oct 2022 16:00:37 -0400
Subject: [PATCH 03/13] WIP date picker

update hover state, ID's.
---
 .../date-picker/date-picker.vue               | 148 +++++++++---------
 1 file changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index f2db85e42..2c88e8f03 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -16,145 +16,145 @@
         <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
         <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtypast" />
-          <label class="past-day" for="thirtypast"><span>30</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-30" />
+          <label class="past-day" for="sep-30"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
-          <label class="past-day" for="thirtyonepast"><span>31</span></label>
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-31" />
+          <label class="past-day" for="sep-31"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="one" />
-          <label class="highlighted-day selectable-day" for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
+          <label class="highlighted-day selectable-day" for="oct-1"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
           <div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="two" />
-          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="two"><span>2</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
+          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-2"><span>2</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="three" />
-          <label class="highlighted-day selectable-day" for="three"><span>3</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-3" />
+          <label class="highlighted-day selectable-day" for="oct-3"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="four" />
-          <label class="highlighted-day selectable-day" for="four"><span>4</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-4" />
+          <label class="highlighted-day selectable-day" for="oct-4"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="five" />
-          <label class="highlighted-day selectable-day" for="five"><span>5</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-5" />
+          <label class="highlighted-day selectable-day" for="oct-5"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="six" />
-          <label class="highlighted-day selectable-day" for="six"><span>6</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-6" />
+          <label class="highlighted-day selectable-day" for="oct-6"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="seven" />
-          <label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-7" />
+          <label class="highlighted-day selectable-day" for="oct-7"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eight" />
-          <label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-8" />
+          <label class="highlighted-day selectable-day" for="oct-8"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="nine" />
-          <label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-9" />
+          <label class="highlighted-day selectable-day" for="oct-9"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="ten" />
-          <label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-10" />
+          <label class="highlighted-day selectable-day" for="oct-10"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eleven" />
-          <label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-11" />
+          <label class="highlighted-day selectable-day" for="oct-11"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twelve" />
-          <label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-12" />
+          <label class="highlighted-day selectable-day" for="oct-12"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
-          <label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-13" />
+          <label class="highlighted-day selectable-day" for="oct-13"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
-          <label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-14" />
+          <label class="highlighted-day selectable-day" for="oct-14"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
-          <label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-15" />
+          <label class="highlighted-day selectable-day" for="oct-15"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
-          <label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-16" />
+          <label class="highlighted-day selectable-day" for="oct-16"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
-          <label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-17" />
+          <label class="highlighted-day selectable-day" for="oct-17"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
-          <label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-18" />
+          <label class="highlighted-day selectable-day" for="oct-18"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
-          <label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-19" />
+          <label class="highlighted-day selectable-day" for="oct-19"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twenty" />
-          <label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-20" />
+          <label class="highlighted-day selectable-day" for="oct-20"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
-          <label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-21" />
+          <label class="highlighted-day selectable-day" for="oct-21"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
-          <label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-22" />
+          <label class="highlighted-day selectable-day" for="oct-22"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
-          <label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-23" />
+          <label class="highlighted-day selectable-day" for="oct-23"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
-          <label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-24" />
+          <label class="highlighted-day selectable-day" for="oct-24"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
-          <label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-25" />
+          <label class="highlighted-day selectable-day" for="oct-25"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
-          <label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-26" />
+          <label class="highlighted-day selectable-day" for="oct-26"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
-          <label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
+          <label class="highlighted-day selectable-day" for="oct-27"><span>27</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
-          <label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
+          <label class="highlighted-day selectable-day" for="oct-28"><span>28</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
-          <label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
+          <label class="highlighted-day selectable-day" for="oct-29"><span>29</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirty" />
-          <label class="highlighted-day selectable-day" for="thirty"><span>30</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-30" />
+          <label class="highlighted-day selectable-day" for="oct-30"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="thirtyone" />
-          <label class="highlighted-day selectable-day" for="thirtyone"><span>31</span></label>
+          <input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
+          <label class="highlighted-day selectable-day" for="oct-31"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
-          <input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
-          <label class="future-day selectable-day" for="onefuture"><span>1</span></label>
+          <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">
-          <input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
-          <label class="future-day selectable-day" for="twofuture"><span>2</span></label>
+          <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>
     </fieldset>
@@ -295,7 +295,9 @@ export default {
       &:checked + label {
         color: $blue;
         //font-weight: 500;
-        background: $blue-100;
+        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+        background-color: $blue;
+        color: $white;
       }
       &:checked + label p,
       &:checked + label span {
@@ -366,7 +368,9 @@ export default {
 
       &:hover {
         @include media-breakpoint-up(sm) {
-          box-shadow: 0 0 0 4px $blue-300;
+          box-shadow: 0 0 0 4px transparent;
+          background-color: $blue;
+          color: $white;
         }
         cursor: pointer;
       }

From 40e152df2cfc6ca6538f357979774edc082b5df7 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 10 Oct 2022 16:47:05 -0400
Subject: [PATCH 04/13] WIP code cleanup.

---
 src/common-components/date-picker/date-picker.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 2c88e8f03..6d6f566d9 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -196,10 +196,12 @@ export default {
     margin: 10%;
   }
 
-  .month-year { grid-area: 1 / 1 / 2 / 4;
+  .month-year {
+    grid-area: 1 / 1 / 2 / 4;
     text-transform: uppercase;
   }
-  .legend { grid-area: 1 / 4 / 2 / 6;
+  .legend {
+    grid-area: 1 / 4 / 2 / 6;
     .legend-circle {
       border-radius: 50%;
       width: 16px;

From 71f4dcc6632a7eed47cd9759532629a6cd39c26a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 11 Oct 2022 14:43:41 -0400
Subject: [PATCH 05/13] WIP update classes and markup.

---
 .../date-picker/date-picker.vue               | 173 +++++++++++-------
 1 file changed, 104 insertions(+), 69 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 6d6f566d9..5cc274e31 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -16,137 +16,153 @@
         <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
         <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-30" />
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-25" />
+          <label class="past-day" for="sep-25"><span>25</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-26" />
+          <label class="past-day" for="sep-26"><span>26</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-27" />
+          <label class="past-day" for="sep-27"><span>27</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-28" />
+          <label class="past-day" for="sep-28"><span>28</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-29" />
+          <label class="past-day" for="sep-29"><span>29</span></label>
+        </div>
+        <div class="grid-item radio-wrapper">
+          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-30" />
           <label class="past-day" for="sep-30"><span>30</span></label>
         </div>
-        <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-31" />
-          <label class="past-day" for="sep-31"><span>31</span></label>
-        </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
-          <label class="highlighted-day selectable-day" for="oct-1"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+          <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>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-2" />
-          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-2"><span>2</span></label>
+          <label class="selectable-day" for="oct-2"><span>2</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-3" />
-          <label class="highlighted-day selectable-day" for="oct-3"><span>3</span></label>
+          <label class="selectable-day" for="oct-3"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-4" />
-          <label class="highlighted-day selectable-day" for="oct-4"><span>4</span></label>
+          <label class="selectable-day" for="oct-4"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-5" />
-          <label class="highlighted-day selectable-day" for="oct-5"><span>5</span></label>
+          <label class="selectable-day" for="oct-5"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-6" />
-          <label class="highlighted-day selectable-day" for="oct-6"><span>6</span></label>
+          <label class="selectable-day" for="oct-6"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-7" />
-          <label class="highlighted-day selectable-day" for="oct-7"><span>7</span></label>
+          <label class="selectable-day" for="oct-7"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-8" />
-          <label class="highlighted-day selectable-day" for="oct-8"><span>8</span></label>
+          <label class="selectable-day" for="oct-8"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-9" />
-          <label class="highlighted-day selectable-day" for="oct-9"><span>9</span></label>
+          <label class="selectable-day" for="oct-9"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-10" />
-          <label class="highlighted-day selectable-day" for="oct-10"><span>10</span></label>
+          <label class="selectable-day" for="oct-10"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-11" />
-          <label class="highlighted-day selectable-day" for="oct-11"><span>11</span></label>
+          <label class="selectable-day" for="oct-11"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-12" />
-          <label class="highlighted-day selectable-day" for="oct-12"><span>12</span></label>
+          <label class="selectable-day" for="oct-12"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-13" />
-          <label class="highlighted-day selectable-day" for="oct-13"><span>13</span></label>
+          <label class="selectable-day" for="oct-13"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-14" />
-          <label class="highlighted-day selectable-day" for="oct-14"><span>17</span></label>
+          <label class="selectable-day" for="oct-14"><span>14</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-15" />
-          <label class="highlighted-day selectable-day" for="oct-15"><span>15</span></label>
+          <label class="selectable-day" for="oct-15"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-16" />
-          <label class="highlighted-day selectable-day" for="oct-16"><span>16</span></label>
+          <label class="selectable-day" for="oct-16"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-17" />
-          <label class="highlighted-day selectable-day" for="oct-17"><span>17</span></label>
+          <label class="selectable-day" for="oct-17"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-18" />
-          <label class="highlighted-day selectable-day" for="oct-18"><span>18</span></label>
+          <label class="selectable-day" for="oct-18"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-19" />
-          <label class="highlighted-day selectable-day" for="oct-19"><span>19</span></label>
+          <label class="selectable-day" for="oct-19"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-20" />
-          <label class="highlighted-day selectable-day" for="oct-20"><span>20</span></label>
+          <label class="selectable-day" for="oct-20"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-21" />
-          <label class="highlighted-day selectable-day" for="oct-21"><span>21</span></label>
+          <label class="selectable-day" for="oct-21"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-22" />
-          <label class="highlighted-day selectable-day" for="oct-22"><span>22</span></label>
+          <label class="selectable-day" for="oct-22"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-23" />
-          <label class="highlighted-day selectable-day" for="oct-23"><span>23</span></label>
+          <label class="selectable-day" for="oct-23"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-24" />
-          <label class="highlighted-day selectable-day" for="oct-24"><span>24</span></label>
+          <label class="selectable-day" for="oct-24"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-25" />
-          <label class="highlighted-day selectable-day" for="oct-25"><span>25</span></label>
+          <label class="selectable-day" for="oct-25"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-26" />
-          <label class="highlighted-day selectable-day" for="oct-26"><span>26</span></label>
+          <label class="selectable-day" for="oct-26"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
-          <label class="highlighted-day selectable-day" for="oct-27"><span>27</span></label>
+          <label class="selectable-day" for="oct-27"><span>27</span></label>
         </div>
-        <div class="grid-item radio-wrapper">
+        <div class="grid-item radio-wrapper future-day">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
-          <label class="highlighted-day selectable-day" for="oct-28"><span>28</span></label>
+          <label class="selectable-day" for="oct-28"><span>28</span></label>
         </div>
-        <div class="grid-item radio-wrapper">
+        <div class="grid-item radio-wrapper future-day">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
-          <label class="highlighted-day selectable-day" for="oct-29"><span>29</span></label>
+          <label class="selectable-day" for="oct-29"><span>29</span></label>
         </div>
-        <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-30" />
-          <label class="highlighted-day selectable-day" for="oct-30"><span>30</span></label>
+        <div class="grid-item radio-wrapper future-day">
+          <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">
+        <div class="grid-item radio-wrapper future-day">
           <input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
-          <label class="highlighted-day selectable-day" for="oct-31"><span>31</span></label>
+          <label class="selectable-day" for="oct-31"><span>31</span></label>
         </div>
         <div class="grid-item radio-wrapper future-day">
           <input tabindex="0" type="radio" name="day-of-month" id="nov-1" />
@@ -156,6 +172,18 @@
           <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">
+          <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">
+          <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">
+          <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>
       </div>
     </fieldset>
   </div>
@@ -210,20 +238,6 @@ export default {
       border: 1px solid $blue;
     }
   }
-  .nav-back {
-    grid-area: 1 / 6 / 2 / 7;
-    display: flex;
-    justify-content: flex-end;
-    button {
-      &:after {
-        content: "";
-        position: absolute;
-        width: 7px;
-        height: 12px;
-        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-      }
-    }
-  }
   .nav-forward {
     grid-area: 1 / 7 / 2 / 8;
     display: flex;
@@ -238,7 +252,20 @@ export default {
       }
     }
   }
-
+  .nav-back {
+    grid-area: 1 / 6 / 2 / 7;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      &:after {
+        content: "";
+        position: absolute;
+        width: 7px;
+        height: 12px;
+        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
   .nav-back,
   .nav-forward {
     button {
@@ -295,11 +322,15 @@ export default {
         }
       }
       &:checked + label {
-        color: $blue;
-        //font-weight: 500;
-        box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-        background-color: $blue;
         color: $white;
+        background: $blue;
+        box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
+        &:after {
+          background-color: $white;
+        }
+        + .first-of-month {
+          color: $white;
+        }
       }
       &:checked + label p,
       &:checked + label span {
@@ -333,7 +364,7 @@ export default {
         pointer-events: none;
       }
 
-      &.highlighted-day {
+      &.selectable-day {
         color: $blue;
         background-color: $blue-100;
         border: 1px solid $blue;
@@ -352,13 +383,9 @@ export default {
       }
 
       &.future-day {
-
-      }
-
-      &.selectable-day {
-        &:hover {
-          cursor: pointer;
-        }
+        color: $gray-550;
+        background-color: transparent;
+        border: 1px solid transparent;
       }
 
       span {
@@ -368,14 +395,22 @@ export default {
         }
       }
 
-      &:hover {
+      &:hover,
+      &:checked {
         @include media-breakpoint-up(sm) {
           box-shadow: 0 0 0 4px transparent;
           background-color: $blue;
           color: $white;
+          &:after {
+            background-color: $white;
+          }
         }
         cursor: pointer;
+        + .first-of-month {
+          color: $white;
+        }
       }
+
       + p {
         display: none;
       }

From 532d1e663ac265af77981427c11c282652b15519 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 11 Oct 2022 16:55:08 -0400
Subject: [PATCH 06/13] WIP CSS updates.

---
 src/common-components/date-picker/date-picker.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 5cc274e31..e4e098dba 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -341,11 +341,19 @@ export default {
     .first-of-month {
       position: absolute;
       font-size: 9px;
-      color: $blue;
+      color: $gray-600;
       top: 0;
       z-index: 1;
     }
 
+    .current-day {
+      &.selectable-day {
+        + .first-of-month {
+          color: $blue;
+        }
+      }
+    }
+
     label {
       position: relative;
       cursor: pointer;
@@ -383,7 +391,7 @@ export default {
       }
 
       &.future-day {
-        color: $gray-550;
+        color: $gray-600;
         background-color: transparent;
         border: 1px solid transparent;
       }

From 58f059ba4a1ddfa926735aee312af86b8dc103db Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 12 Oct 2022 09:12:42 -0400
Subject: [PATCH 07/13] WIP add error styles.

---
 src/styles/common-error-styles.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index a3c4a6ef8..9eda216b7 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -39,6 +39,20 @@ html {
         box-shadow: 0 0 1px $red;
       }
     }
+    &.grid-item {
+      input[type="radio"] {
+        + label {
+          border: 1px solid $red;
+          &:hover {
+            background-color: $blue-100;
+            box-shadow: 0px 0px 0px 4px $red-200;
+          }
+          span {
+            color: $red;
+          }
+        }
+      }
+    }
     &.ui-radio,
     &.ui-checkbox {
       input[type=checkbox],

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 08/13] 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;
-          }
         }
       }
     }

From deea1abbe3880f482b42104cfb69c2457a74afcd Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 08:18:30 -0400
Subject: [PATCH 09/13] Add styles for first day of month.

---
 src/common-components/date-picker/date-picker.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index cf7a0c38e..6b1996b87 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -167,6 +167,7 @@
         <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 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="nov-2" />
@@ -332,6 +333,9 @@ export default {
         &:after {
           background-color: $white;
         }
+        + .first-day {
+          color: $white;
+        }
       }
       &:checked + label p,
       &:checked + label span {
@@ -417,6 +421,9 @@ export default {
             color: $white;
           }
         }
+        + .first-day {
+          color: $white;
+        }
       }
 
       + p {

From d0ba0aa8ee3491885982206d162f9327aea4e322 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 08:40:10 -0400
Subject: [PATCH 10/13] Code cleanup.

---
 .../date-picker/date-picker.vue               | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 6b1996b87..7bff6191c 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -41,7 +41,9 @@
         </div>
         <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>
+          <label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="oct-1"><span>1</span>
+            <span class="sr-only">October 1st</span>
+          </label>
           <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
@@ -195,15 +197,10 @@ export default {
   name: "datePicker",
   data() {
     return {
-      dayOfWeek: "Tuesday",
-      dayOfMonth: "1st",
-      pastMonth: "October",
       currentMonth: "October",
       currentYear: "2022",
       isFirstDayOfMonth: true,
       isCurrentDay: true,
-      isCurrentDayDot: true,
-      isPastDay: true,
     };
   },
 };
@@ -214,7 +211,6 @@ export default {
   margin: 0 auto;
   max-width: 414px;
   display: grid;
-  //grid-template-columns: auto auto auto auto auto auto auto;
   grid-template-columns: repeat(7, 1fr);
   justify-content: center;
   align-items: center;
@@ -306,6 +302,7 @@ export default {
       &:focus-visible + label {
         box-shadow: 0 0 0 2.5px $blue;
       }
+
       &:focus + label,
       &:checked:focus + label {
         box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
@@ -326,6 +323,7 @@ export default {
           }
         }
       }
+
       &:checked + label {
         color: $white;
         background: $blue;
@@ -337,10 +335,6 @@ export default {
           color: $white;
         }
       }
-      &:checked + label p,
-      &:checked + label span {
-        //font-weight: 500;
-      }
     }
 
     .first-day {
@@ -352,7 +346,6 @@ export default {
       z-index: 1;
     }
 
-
     label {
       position: relative;
       cursor: pointer;
@@ -425,14 +418,10 @@ export default {
           color: $white;
         }
       }
-
       + p {
         display: none;
       }
-
-
-
     }
   }
 }
-  </style>
+</style>

From 204807bf791fadca71f8d1a543f9ba1cf14fa664 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 09:09:42 -0400
Subject: [PATCH 11/13] Code cleanup per Adam comments.

---
 .../date-picker/date-picker.vue               | 86 +++++++++----------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 7bff6191c..121f6ed89 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -16,175 +16,175 @@
         <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
         <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-25" />
+          <input disabled type="radio" name="day-of-month" id="sep-25" />
           <label class="past-day" for="sep-25"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="-2" hidden type="radio" name="day-of-month" id="sep-26" />
+          <input disabled type="radio" name="day-of-month" id="sep-26" />
           <label class="past-day" for="sep-26"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-27" />
+          <input disabled type="radio" name="day-of-month" id="sep-27" />
           <label class="past-day" for="sep-27"><span>27</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-28" />
+          <input disabled type="radio" name="day-of-month" id="sep-28" />
           <label class="past-day" for="sep-28"><span>28</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-29" />
+          <input disabled type="radio" name="day-of-month" id="sep-29" />
           <label class="past-day" for="sep-29"><span>29</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" hidden type="radio" name="day-of-month" id="sep-30" />
+          <input disabled type="radio" name="day-of-month" id="sep-30" />
           <label class="past-day" for="sep-30"><span>30</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-1" />
+          <input 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>
             <span class="sr-only">October 1st</span>
           </label>
           <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" />
+          <input type="radio" name="day-of-month" id="oct-2" />
           <label class="selectable-day" for="oct-2"><span>2</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-3" />
+          <input type="radio" name="day-of-month" id="oct-3" />
           <label class="selectable-day" for="oct-3"><span>3</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-4" />
+          <input type="radio" name="day-of-month" id="oct-4" />
           <label class="selectable-day" for="oct-4"><span>4</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-5" />
+          <input type="radio" name="day-of-month" id="oct-5" />
           <label class="selectable-day" for="oct-5"><span>5</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-6" />
+          <input type="radio" name="day-of-month" id="oct-6" />
           <label class="selectable-day" for="oct-6"><span>6</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-7" />
+          <input type="radio" name="day-of-month" id="oct-7" />
           <label class="selectable-day" for="oct-7"><span>7</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-8" />
+          <input type="radio" name="day-of-month" id="oct-8" />
           <label class="selectable-day" for="oct-8"><span>8</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-9" />
+          <input type="radio" name="day-of-month" id="oct-9" />
           <label class="selectable-day" for="oct-9"><span>9</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-10" />
+          <input type="radio" name="day-of-month" id="oct-10" />
           <label class="selectable-day" for="oct-10"><span>10</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-11" />
+          <input type="radio" name="day-of-month" id="oct-11" />
           <label class="selectable-day" for="oct-11"><span>11</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-12" />
+          <input type="radio" name="day-of-month" id="oct-12" />
           <label class="selectable-day" for="oct-12"><span>12</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-13" />
+          <input type="radio" name="day-of-month" id="oct-13" />
           <label class="selectable-day" for="oct-13"><span>13</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-14" />
+          <input type="radio" name="day-of-month" id="oct-14" />
           <label class="selectable-day" for="oct-14"><span>14</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-15" />
+          <input type="radio" name="day-of-month" id="oct-15" />
           <label class="selectable-day" for="oct-15"><span>15</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-16" />
+          <input type="radio" name="day-of-month" id="oct-16" />
           <label class="selectable-day" for="oct-16"><span>16</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-17" />
+          <input type="radio" name="day-of-month" id="oct-17" />
           <label class="selectable-day" for="oct-17"><span>17</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-18" />
+          <input type="radio" name="day-of-month" id="oct-18" />
           <label class="selectable-day" for="oct-18"><span>18</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-19" />
+          <input type="radio" name="day-of-month" id="oct-19" />
           <label class="selectable-day" for="oct-19"><span>19</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-20" />
+          <input type="radio" name="day-of-month" id="oct-20" />
           <label class="selectable-day" for="oct-20"><span>20</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-21" />
+          <input type="radio" name="day-of-month" id="oct-21" />
           <label class="selectable-day" for="oct-21"><span>21</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-22" />
+          <input type="radio" name="day-of-month" id="oct-22" />
           <label class="selectable-day" for="oct-22"><span>22</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-23" />
+          <input type="radio" name="day-of-month" id="oct-23" />
           <label class="selectable-day" for="oct-23"><span>23</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-24" />
+          <input type="radio" name="day-of-month" id="oct-24" />
           <label class="selectable-day" for="oct-24"><span>24</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-25" />
+          <input type="radio" name="day-of-month" id="oct-25" />
           <label class="selectable-day" for="oct-25"><span>25</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-26" />
+          <input type="radio" name="day-of-month" id="oct-26" />
           <label class="selectable-day" for="oct-26"><span>26</span></label>
         </div>
         <div class="grid-item radio-wrapper">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-27" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-28" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-29" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="nov-30" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="oct-31" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="nov-1" />
+          <input type="radio" name="day-of-month" id="nov-1" />
           <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
           <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="nov-2" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="nov-3" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="nov-4" />
+          <input 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">
-          <input tabindex="0" type="radio" name="day-of-month" id="nov-5" />
+          <input type="radio" name="day-of-month" id="nov-5" />
           <label class="future-day selectable-day" for="nov-5"><span>5</span></label>
         </div>
       </div>
@@ -295,7 +295,7 @@ export default {
     outline: none;
 
     input[type="radio"] {
-      position: absolute;; //override bootstrap
+      position: absolute; //override bootstrap
       height: 0;
       opacity: 0;
 

From 2bfb265291fc95a5ab58496ff6ed57f8b9357a92 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 09:30:50 -0400
Subject: [PATCH 12/13] Moved div to inside label so month name was hoverable
 with label.

Updated CSS accordingly.
---
 .../date-picker/date-picker.vue                  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index 121f6ed89..e07f8d38c 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -43,8 +43,8 @@
           <input 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>
             <span class="sr-only">October 1st</span>
+            <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
           </label>
-          <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="oct-2" />
@@ -168,8 +168,10 @@
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nov-1" />
-          <label class="future-day selectable-day" for="nov-1"><span>1</span></label>
-          <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
+          <label class="future-day selectable-day" for="nov-1"><span>1</span>
+            <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
+          </label>
+
         </div>
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="nov-2" />
@@ -318,7 +320,7 @@ export default {
           &:after {
             background-color: $white;
           }
-          + .first-day {
+          .first-day {
             color: $white;
           }
         }
@@ -331,7 +333,7 @@ export default {
         &:after {
           background-color: $white;
         }
-        + .first-day {
+        .first-day {
           color: $white;
         }
       }
@@ -380,7 +382,7 @@ export default {
           position: absolute;
           top: 28px;
         }
-        + .first-day {
+        .first-day {
           color: $blue;
         }
       }
@@ -414,7 +416,7 @@ export default {
             color: $white;
           }
         }
-        + .first-day {
+        .first-day {
           color: $white;
         }
       }

From 9d1a768234192ca4a734d644ff7410e95754533f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 13 Oct 2022 09:48:28 -0400
Subject: [PATCH 13/13] Add comments.

---
 src/common-components/date-picker/date-picker.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common-components/date-picker/date-picker.vue b/src/common-components/date-picker/date-picker.vue
index e07f8d38c..548ca8d99 100644
--- a/src/common-components/date-picker/date-picker.vue
+++ b/src/common-components/date-picker/date-picker.vue
@@ -39,6 +39,7 @@
           <input disabled type="radio" name="day-of-month" id="sep-30" />
           <label class="past-day" for="sep-30"><span>30</span></label>
         </div>
+        <!-- Use this as the base calendar item -->
         <div class="grid-item radio-wrapper">
           <input 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>
@@ -46,6 +47,7 @@
             <div v-if="isFirstDayOfMonth" class="current-month first-day">OCT</div>
           </label>
         </div>
+        <!-- END -->
         <div class="grid-item radio-wrapper">
           <input type="radio" name="day-of-month" id="oct-2" />
           <label class="selectable-day" for="oct-2"><span>2</span></label>