improve ridp status badges (#3884)

* temp * improve ridp status badges * improve encapsulation * rename of vars * rename vars 2.0
ideacrew · May 29, 2024 · 7338a6a · 7338a6a
1 parent 983fcc0
commit 7338a6a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git 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-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%);
   --error-tint: hsl(0, 80%, 86%);

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
@@ -285,6 +285,28 @@ ul.list-right-section li {
   font-size: 1em;
 }
 
+.badge-status {
+  border-radius: 10px;
+  color: var(--default-font-color);
+  font-size: 16px;
+  font-weight: 600;
+
+  &.badge-success {
+    background-color: var(--success-status-tint);
+    border: 1px solid var(--success-color);
+  }
+
+  &.badge-danger {
+    background-color: var(--danger-status-tint);
+    border: 1px solid var(--enrollment-status-red);
+  }
+
+  &.badge-warning {
+    background-color: var(--warning-status-tint);
+    border: 1px solid var(--warning-border);
+  }
+}
+
 .float-end {
   float: inline-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
@@ -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">