From 373f022aa46ee988f8f693c2fd2b4f2045a1a08d Mon Sep 17 00:00:00 2001
From: Alec Turnbull <alec.turnbull@dc.gov>
Date: Wed, 22 May 2024 17:18:33 -0500
Subject: [PATCH 1/5] temp

---
 app/javascript/css/main.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index 54e907e75a9..2a81b02b4f7 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -285,6 +285,15 @@ ul.list-right-section li {
   font-size: 1em;
 }
 
+.badge-success, .vertically-centered-row .badge{
+  background-color: #F2FFF4;
+  border-radius: 10px;
+  border: 1px solid #027314;
+  color: var(--default-font-color);
+  font-size: 16px;
+  font-weight: 600;
+}
+
 .float-end {
   float: inline-end;
 }

From c8763a7e39fc9a457b3b0c5b90a300266c96d3a2 Mon Sep 17 00:00:00 2001
From: Alec Turnbull <alec.turnbull@dc.gov>
Date: Wed, 22 May 2024 18:01:46 -0500
Subject: [PATCH 2/5] improve ridp status badges

---
 app/javascript/css/colors.scss |  4 ++++
 app/javascript/css/main.scss   | 27 ++++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/javascript/css/colors.scss b/app/javascript/css/colors.scss
index cd3c9666296..6a2ed887097 100644
--- a/app/javascript/css/colors.scss
+++ b/app/javascript/css/colors.scss
@@ -23,6 +23,10 @@
   --success-tint: hsl(130, 61%, 86%);
   --warning-color: hsl(44, 100%, 45%);
   --warning-tint: hsla(51, 100%, 94%, 1);
+  --danger-shade: hsl(0, 100%, 91%);
+  --success-shade: hsl(129, 100%, 97%);
+  --warning-shade: hsl(51, 100%, 94%);
+  --warning-border: hsl(50, 100%, 50%);
   --error-shade: hsl(0, 68%, 32%);
   --error-color: hsl(0, 69%, 38%);
   --error-tint: hsl(0, 80%, 86%);
diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index 2a81b02b4f7..f680f1750b4 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -285,13 +285,34 @@ ul.list-right-section li {
   font-size: 1em;
 }
 
-.badge-success, .vertically-centered-row .badge{
-  background-color: #F2FFF4;
+.badge-success {
+  background-color: var(--success-shade);
   border-radius: 10px;
-  border: 1px solid #027314;
+  border: 1px solid var(--success-color);
   color: var(--default-font-color);
   font-size: 16px;
   font-weight: 600;
+  inline-size: fit-content;
+}
+
+.badge-danger {
+  background-color: var(--danger-shade);
+  border-radius: 10px;
+  border: 1px solid var(--enrollment-status-red);
+  color: var(--default-font-color);
+  font-size: 16px;
+  font-weight: 600;
+  inline-size: fit-content;
+}
+
+.badge-warning {
+  background-color: var(--warning-shade);
+  border-radius: 10px;
+  border: 1px solid var(--warning-border);
+  color: var(--default-font-color);
+  font-size: 16px;
+  font-weight: 600;
+  inline-size: fit-content;
 }
 
 .float-end {

From 6682b1328110fb6c57da0ddbc6e9c918d4170ca6 Mon Sep 17 00:00:00 2001
From: Alec Turnbull <alec.turnbull@dc.gov>
Date: Wed, 22 May 2024 18:25:11 -0500
Subject: [PATCH 3/5] improve encapsulation

---
 app/javascript/css/main.scss                  | 36 ++++++++-----------
 .../_outstanding_ridp_documents.html.erb      |  2 +-
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index f680f1750b4..23ac8210a42 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -285,34 +285,26 @@ ul.list-right-section li {
   font-size: 1em;
 }
 
-.badge-success {
-  background-color: var(--success-shade);
+.badge-status {
   border-radius: 10px;
-  border: 1px solid var(--success-color);
   color: var(--default-font-color);
   font-size: 16px;
   font-weight: 600;
-  inline-size: fit-content;
-}
 
-.badge-danger {
-  background-color: var(--danger-shade);
-  border-radius: 10px;
-  border: 1px solid var(--enrollment-status-red);
-  color: var(--default-font-color);
-  font-size: 16px;
-  font-weight: 600;
-  inline-size: fit-content;
-}
+  &.badge-success {
+    background-color: var(--success-shade);
+    border: 1px solid var(--success-color);
+  }
 
-.badge-warning {
-  background-color: var(--warning-shade);
-  border-radius: 10px;
-  border: 1px solid var(--warning-border);
-  color: var(--default-font-color);
-  font-size: 16px;
-  font-weight: 600;
-  inline-size: fit-content;
+  &.badge-danger {
+    background-color: var(--danger-shade);
+    border: 1px solid var(--enrollment-status-red);
+  }
+
+  &.badge-warning {
+    background-color: var(--warning-shade);
+    border: 1px solid var(--warning-border);
+  }
 }
 
 .float-end {
diff --git a/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb b/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb
index a01b74414d2..4fb681e5766 100644
--- a/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb
+++ b/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb
@@ -12,7 +12,7 @@
     <% @person.ridp_verification_types.each do |ridp_type| %>
       <div class="w-100 d-flex mb-md-4 col-sm  mt-2 p-0 justify-content-between align-content-center vertically-centered-row" id="<%= ridp_type %>">
         <span class="d-flex align-content-center"><%= ridp_type %></span>
-        <span class="d-flex align-content-center badge badge-lg badge-<%=ridp_type_class(ridp_type, @person)%>" id="status"><%= ridp_status_translated(ridp_type, @person) %></span> <%= pundit_span Family, :updateable? %>
+        <span class="d-flex align-content-center badge badge-status badge-<%=ridp_type_class(ridp_type, @person)%>" id="status"><%= ridp_status_translated(ridp_type, @person) %></span> <%= pundit_span Family, :updateable? %>
         <div class="d-flex align-content-center">
         <% if current_user.has_hbx_staff_role? && ((ridp_type == 'Identity' && pundit_allow(HbxProfile, :can_access_accept_reject_identity_documents?)) || (ridp_type == 'Application' && pundit_allow(HbxProfile, :can_access_accept_reject_paper_application_documents?))) %>
           <div class="v-type-actions mr-2">

From ce3271eb9ccf51b4f4b19769b1b2518291e1ba14 Mon Sep 17 00:00:00 2001
From: Alec Turnbull <alec.turnbull@dc.gov>
Date: Thu, 23 May 2024 14:52:23 -0500
Subject: [PATCH 4/5] rename of vars

---
 app/javascript/css/colors.scss | 6 +++---
 app/javascript/css/main.scss   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/css/colors.scss b/app/javascript/css/colors.scss
index 6a2ed887097..0ce4970638e 100644
--- a/app/javascript/css/colors.scss
+++ b/app/javascript/css/colors.scss
@@ -23,9 +23,9 @@
   --success-tint: hsl(130, 61%, 86%);
   --warning-color: hsl(44, 100%, 45%);
   --warning-tint: hsla(51, 100%, 94%, 1);
-  --danger-shade: hsl(0, 100%, 91%);
-  --success-shade: hsl(129, 100%, 97%);
-  --warning-shade: hsl(51, 100%, 94%);
+  --danger-tint-2: hsl(0, 100%, 91%);
+  --success-tint-2: hsl(129, 100%, 97%);
+  --warning-tint-2: hsl(51, 100%, 94%);
   --warning-border: hsl(50, 100%, 50%);
   --error-shade: hsl(0, 68%, 32%);
   --error-color: hsl(0, 69%, 38%);
diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index 23ac8210a42..7bf5e2f8800 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -292,17 +292,17 @@ ul.list-right-section li {
   font-weight: 600;
 
   &.badge-success {
-    background-color: var(--success-shade);
+    background-color: var(--success-tint-2);
     border: 1px solid var(--success-color);
   }
 
   &.badge-danger {
-    background-color: var(--danger-shade);
+    background-color: var(--danger-tint-2);
     border: 1px solid var(--enrollment-status-red);
   }
 
   &.badge-warning {
-    background-color: var(--warning-shade);
+    background-color: var(--warning-tint-2);
     border: 1px solid var(--warning-border);
   }
 }

From e94b6d1243e4769c69586703b90dc9577163eb98 Mon Sep 17 00:00:00 2001
From: Alec Turnbull <alec.turnbull@dc.gov>
Date: Fri, 24 May 2024 09:33:09 -0500
Subject: [PATCH 5/5] rename vars 2.0

---
 app/javascript/css/colors.scss | 6 +++---
 app/javascript/css/main.scss   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/css/colors.scss b/app/javascript/css/colors.scss
index 0ce4970638e..eea34eacb29 100644
--- a/app/javascript/css/colors.scss
+++ b/app/javascript/css/colors.scss
@@ -23,9 +23,9 @@
   --success-tint: hsl(130, 61%, 86%);
   --warning-color: hsl(44, 100%, 45%);
   --warning-tint: hsla(51, 100%, 94%, 1);
-  --danger-tint-2: hsl(0, 100%, 91%);
-  --success-tint-2: hsl(129, 100%, 97%);
-  --warning-tint-2: hsl(51, 100%, 94%);
+  --danger-status-tint: hsl(0, 100%, 91%);
+  --success-status-tint: hsl(129, 100%, 97%);
+  --warning-status-tint: hsl(51, 100%, 94%);
   --warning-border: hsl(50, 100%, 50%);
   --error-shade: hsl(0, 68%, 32%);
   --error-color: hsl(0, 69%, 38%);
diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index 7bf5e2f8800..bc9327b6b79 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -292,17 +292,17 @@ ul.list-right-section li {
   font-weight: 600;
 
   &.badge-success {
-    background-color: var(--success-tint-2);
+    background-color: var(--success-status-tint);
     border: 1px solid var(--success-color);
   }
 
   &.badge-danger {
-    background-color: var(--danger-tint-2);
+    background-color: var(--danger-status-tint);
     border: 1px solid var(--enrollment-status-red);
   }
 
   &.badge-warning {
-    background-color: var(--warning-tint-2);
+    background-color: var(--warning-status-tint);
     border: 1px solid var(--warning-border);
   }
 }