Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve ridp status badges #3884

Merged
merged 6 commits into from
May 24, 2024
Merged

improve ridp status badges #3884

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
373f022
temp
ATBull81 May 22, 2024
c8763a7
improve ridp status badges
ATBull81 May 22, 2024
6682b13
improve encapsulation
ATBull81 May 22, 2024
ce3271e
rename of vars
ATBull81 May 23, 2024
e94b6d1
rename vars 2.0
ATBull81 May 24, 2024
dcee334
Merge branch 'clean-bootstrap-4-upgrade' into 187638343_ridp_pg3
ATBull81 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/javascript/css/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Copy link
Contributor

@charlienparker charlienparker May 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

naming nitpick - these are more tints than shades, right? At least I think "shade" in the context of the other status colors we use for banners is used to color the text. Probably makes more sense to call these "tints". And to emphasize the difference that these are similar but different than our other status colors, calling them something like 'error-tint-2" etc. is probably better IMO

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ce3271e

--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%);
Expand Down
22 changes: 22 additions & 0 deletions app/javascript/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-shade);
border: 1px solid var(--success-color);
}

&.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 {
float: inline-end;
}
Expand Down
2 changes: 1 addition & 1 deletion app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading