From e201944b7726d7b278b7ccdd9a0881b259538040 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 13 Feb 2025 19:33:12 -0500
Subject: [PATCH] CASH-153 - new styling

---
 .../date-picker/date-picker-2.vue             | 92 +++++--------------
 1 file changed, 24 insertions(+), 68 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker-2.vue b/src/digital-components/date-picker/date-picker-2.vue
index a1af80723..7a0f4e0cf 100644
--- a/src/digital-components/date-picker/date-picker-2.vue
+++ b/src/digital-components/date-picker/date-picker-2.vue
@@ -750,8 +750,7 @@ export default {
 
         .grid-item {
             text-align: center;
-                                                    // margin: 10px 3px;
-                                                    margin: 0;
+            margin: 0;
             font-size: 0.875rem;
             line-height: 1.5;
 
@@ -810,50 +809,27 @@ export default {
             position: relative;
             display: flex;
             justify-content: center;
-                                                    // align-items: center;
-                                                    align-items: flex-start;
+            align-items: flex-start;
             outline: none;
-                                                    // height: 1.5rem;
-                                                    width: 100%;
-                                                    height: 2.5rem;
+            width: 100%;
             opacity: 1;
-            transition: 
+            transition:
                 height ease 250ms,
                 opacity ease 250ms;
 
-                                                    color: $gray-500;
-                                                    background-color: $gray-100;
-
+            color: $gray-500;
+            background-color: $gray-100;
 
             input[type="radio"] {
                 position: absolute; //override bootstrap
                 height: 0;
                 opacity: 0;
 
-                &: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;
-                    &.current-day {
-                        &:after {
-                            background-color: $white;
-                        }
-                        .first-day {
-                            color: $white;
-                        }
-                    }
-                }
-
                 &:checked + label {
-                    color: $white;
-                    background: $blue;
+                    background: $blue-100;
+                    border: 2px solid $blue;
+                    border-radius: 4px;
+
                     &:after {
                         background-color: $white;
                     }
@@ -882,29 +858,25 @@ export default {
                 position: relative;
                 cursor: pointer;
                 display: flex;
-                                                                    flex-direction: column;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 min-width: 2.5rem;
-                                                                    // width: 2.5rem;
-                                                                    // height: 2.5rem;
-                                                                    min-height: 2.5rem;
-                                                                    width: 100%;
-                                                                    font-size: .75rem;
-                                                                    line-height: 1.2;
-                                                                    justify-content: flex-start;
-                                                                    padding: .25rem;
-                                                                    
+                height: 3rem;
+                width: 100%;
+                font-size: 0.75rem;
+                line-height: 1.2;
+                justify-content: flex-start;
+                padding: 0.25rem;
 
                 span {
-                                                                    margin-top: .25rem;
+                    margin-top: 0.25rem;
                     &.small {
                         font-size: 0.75rem;
                         color: $gray-550;
                     }
                 }
 
-                                                                    // &:hover,
                 &:checked {
                     @include media-breakpoint-up(sm) {
                         box-shadow: 0 0 0 4px transparent;
@@ -930,30 +902,16 @@ export default {
             }
 
             &.selectable-day {
-                                                        background-color: $white;
+                background-color: $white;
                 label {
                     color: $blue;
-                                                        // background-color: $blue-100;
-                                                        // border: 1px solid $blue;
-                                                        // min-width: 2.5rem;
-                                                        // width: 2.5rem;
-                                                        // border-radius: 50%;
-
-                                                        span {
-                                                            // text-underline-offset: 4px;
-                                                            text-decoration: underline;
-                                                        }
 
+                    span {
+                        text-decoration: underline;
+                    }
                 }
             }
-            // &.unavailable-day {
-            //     label {
-            //         color: $gray-500;
-            //         background-color: $gray-100;
-            //         border: none;
-            //         pointer-events: none;
-            //     }
-            // }
+
             &.unavailable-day:not(&.sunday) {
                 label {
                     &::before {
@@ -974,13 +932,11 @@ export default {
 
                     &:after {
                         content: "";
-                                                            margin-top: .2rem;
+                        margin-top: 0.2rem;
                         width: 0.25rem;
                         height: 0.25rem;
                         border-radius: 50%;
                         background-color: $black;
-                                                            // position: absolute;
-                                                            // top: 28px;
                     }
                     .first-day {
                         color: $blue;