From ed5cccfb6adcf171db536ab303534d96023e37f8 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 8 Dec 2025 16:26:03 -0500
Subject: [PATCH] use bootstrap progress element, update styling

---
 .../site-header/progress-bar/progress-bar.vue | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/iss-components/site-header/progress-bar/progress-bar.vue b/src/iss-components/site-header/progress-bar/progress-bar.vue
index 49e2d9a8..d813bbbf 100644
--- a/src/iss-components/site-header/progress-bar/progress-bar.vue
+++ b/src/iss-components/site-header/progress-bar/progress-bar.vue
@@ -5,13 +5,17 @@
         <div class="progress-bar-header">
             <span aria-hidden="true">{{ progress }}%</span>
         </div>
-        <progress
-            class="progress-bar progress-bar-success"
-            :value="progress"
-            max="100"
-            aria-label="Scheduling progress">
-                <div class="progress-bar-middle"></div>
-        </progress>
+        <div class="progress">
+            <div
+                class="progress-bar progress-bar-success"
+                role="progressbar"
+                :aria-valuetext="`Scheduling progress ${progress}%`"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                :style="{ width: progress + '%' }">
+                    <div class="progress-bar-middle"></div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -36,28 +40,41 @@ export default {
 </script>
 <style lang="scss">
     .progress-bar-container {
-        padding: .75rem 0;
         display: flex;
 
         .progress-bar-header {
-            width: 38px;
-            height: 15px;
-            float: left;
-            padding-right: 5px;
-            // color: @color-progress-bar;
-            // font-weight: @font-weight-bold;
-            font-style: normal;
-            font-stretch: normal;
-            font-size: 14px;
-            line-height: 15px;
+            padding-right: 0.3125rem;
+            color: $green;
+            font-weight: 600;
+            font-size: 0.875rem;
+            line-height: 0.9375rem;
             text-align: right;
         }
 
-        .progress-bar {
+        .progress {
             min-width: 17.1875rem;
-            margin-left: .5rem;
+            margin-left: 0;
+            border-radius: $border-radius-pill;
+
+            .progress-bar {
+                background-color: $green;
+
+                .progress-bar-middle {
+                    width: 1.0625rem;
+                    height: 1.0625rem;
+                    position: relative;
+                    float: right;
+                    margin-right: -8.5px;
+                    margin-top: -1px;
+                    border: 0.125rem solid #ffffff;
+                    border-radius: 50%;
+                    background-color: $green;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+                }
+            }
         }
 
+        /*
         .progress {
             height: 10px;
             width: 100%;
@@ -66,7 +83,7 @@ export default {
             border-bottom-left-radius: 7.5px;
             line-height: inherit;
 
-            /* Firefox */
+            /* Firefox
             appearance: none;
             background-color: $blue-100;
             border: 0;
@@ -77,8 +94,9 @@ export default {
                 background-color: $blue;
                 border-radius: $border-radius-pill;
             }
+             */
 
-            /* Webkit */
+            /* Webkit
             -webkit-appearance: none;
             &::-webkit-progress-bar {
                 background-color: $blue-100;
@@ -89,23 +107,7 @@ export default {
                 background-color: $blue;
                 border-radius: $border-radius-pill;
             }
-        }
-
-        .progress {
-            margin-left: .5rem;
-        }
-
-        .progress-bar-middle {
-            position: relative;
-            float: right;
-            margin-right: -8.5px;
-            width: 17px;
-            height: 17px;
-            margin-top: -1px;
-            border: solid 2px; //@progress-bar-outer-color;
-            border-radius: 50%;
-            //background-color: @color-progress-bar;
-            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-        }
+                */
+        /*}*/
     }
 </style>