From 02c94fd439b938eb020fbf0c755ad6d30b0b6256 Mon Sep 17 00:00:00 2001
From: William Medders <wmedders21@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:41:00 -0500
Subject: [PATCH] use scss color variables instead of hex strings

---
 client/app/styles/_commons.scss               |   8 +-
 client/app/styles/_variables.scss             |   1 +
 .../ConfirmWorkOrderModal.test.js.snap        | 154 ------------------
 3 files changed, 5 insertions(+), 158 deletions(-)

diff --git a/client/app/styles/_commons.scss b/client/app/styles/_commons.scss
index 99b7e79d7e8..fa9bb5affe3 100644
--- a/client/app/styles/_commons.scss
+++ b/client/app/styles/_commons.scss
@@ -734,7 +734,7 @@ form {
 }
 
 .cf-file-input-container {
-  border: 1px dashed #adadad;
+  border: 1px dashed $color-gray-dark;
   display: block;
   margin-top: .5rem;
   margin-bottom: 2rem;
@@ -745,8 +745,8 @@ form {
 }
 
 .cf-file-input-container-selected {
-  border: 1px dashed #adadad;
-  background-color: lightcyan;
+  border: 1px dashed $color-gray-dark;
+  background-color: $color-teal-lightest;
   display: flex;
   position: relative;
   text-align: center;
@@ -757,7 +757,7 @@ form {
 
 .cf-file-container-selected-container {
   background: none;
-  border: 2px solid gold;
+  border: 2px solid $color-gold;
   padding: 2px;
   margin-top: 5px;
   margin-bottom: 10px;
diff --git a/client/app/styles/_variables.scss b/client/app/styles/_variables.scss
index de40d3d3c3c..d12663cad67 100644
--- a/client/app/styles/_variables.scss
+++ b/client/app/styles/_variables.scss
@@ -19,3 +19,4 @@ $cf-drop-shadow: 1px 1px 5px 0 $cf-drop-shadow-color;
 $white: #ffffff;
 $prototype-mark: #fad980;
 $prototype-highlight: #94bfa2;
+$color-teal-lightest: #E6F9FD
diff --git a/client/test/app/hearings/components/transcriptionProcessing/__snapshots__/ConfirmWorkOrderModal.test.js.snap b/client/test/app/hearings/components/transcriptionProcessing/__snapshots__/ConfirmWorkOrderModal.test.js.snap
index 59114306a50..7d9f58f9de8 100644
--- a/client/test/app/hearings/components/transcriptionProcessing/__snapshots__/ConfirmWorkOrderModal.test.js.snap
+++ b/client/test/app/hearings/components/transcriptionProcessing/__snapshots__/ConfirmWorkOrderModal.test.js.snap
@@ -138,157 +138,3 @@ exports[`ConfirmWorkOrderModal matches snapshot 1`] = `
   </div>
 </div>
 `;
-
-exports[`ConfirmWorkOrderModal matches snapshot 2`] = `
-<div>
-  <div
-    data-css-1k03ilb=""
-    style="border: 2px solid; border-color: #d6d7d9; margin: 3rem;"
-  >
-    <h1>
-      Confirm work order summary
-    </h1>
-    <ul
-      style="list-style-type: none; margin-top: -3rem;"
-    >
-      <li>
-        <p
-          style="font-weight: bold;"
-        >
-          Work Order:
-        </p>
-        <p>
-          BVA-2024-0001
-        </p>
-      </li>
-      <li>
-        <p
-          style="font-weight: bold;"
-        >
-          Return date:
-        </p>
-        <p>
-          08/27/2024
-        </p>
-      </li>
-      <li>
-        <p
-          style="font-weight: bold;"
-        >
-          Contractor:
-        </p>
-        <p>
-          Real Contractor
-        </p>
-      </li>
-    </ul>
-    <div
-      style="display: inline-block; border-top: 1px solid; margin-top: 3rem; width: 95%; margin-left: 3rem; border-bottom: 1px solid; border-color: #d6d7d9; padding: 2rem 0px;"
-    >
-      <h2
-        style="margin-left: 0rem;"
-      >
-        Number of files: 
-        1
-      </h2>
-      <table
-        style="width: 100%; margin-top: -2rem;"
-      >
-        <tr>
-          <th />
-          <th>
-            Docket Number
-          </th>
-          <th>
-            First Name
-          </th>
-          <th>
-            Last Name
-          </th>
-          <th>
-            Types
-          </th>
-          <th>
-            Hearing Date
-          </th>
-          <th>
-            RO
-          </th>
-          <th>
-            VLJ
-          </th>
-          <th>
-            Appeal Type
-          </th>
-        </tr>
-        <tr>
-          <td>
-            1
-            .
-          </td>
-          <td
-            style="font-weight: bold;"
-          >
-            H1234-5678
-          </td>
-          <td>
-            John
-          </td>
-          <td>
-            Smith
-          </td>
-          <td>
-            <span
-              style="color: rgb(227, 28, 61);"
-            >
-              AOD
-            </span>
-            ,
-             
-            Original
-          </td>
-          <td>
-            06/04/2024
-          </td>
-          <td>
-            Waco
-          </td>
-          <td>
-            Judy
-          </td>
-          <td>
-            AMA
-          </td>
-        </tr>
-      </table>
-    </div>
-    <div
-      style="display: flex; justify-content: space-between; margin-right: 3rem; padding-top: 3rem;"
-    >
-      <a
-        href=""
-      >
-        Cancel
-      </a>
-      <div>
-        <span>
-          <button
-            class="usa-button usa-button-secondary usa-button"
-            type="button"
-          >
-            Modify work order
-          </button>
-        </span>
-        <span>
-          <button
-            class="cf-submit usa-button"
-            type="button"
-          >
-            Dispatch work order
-          </button>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;