Merge pull request #3698 from DFE-Digital/update-checklist-tick-colou…

…r-contrast Updated checklist tick icon colour contrast
DFE-Digital · Nov 14, 2023 · 4e69c5a · 4e69c5a
2 parents 5e55c4c + fcce2d8
commit 4e69c5a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 23 deletions.
diff --git a/app/components/content/checklist_collage_component.html.erb b/app/components/content/checklist_collage_component.html.erb
@@ -2,7 +2,7 @@
   <div>
     <ul>
       <% checklist.each do |item| %>
-        <%= tag.li(safe_join([helpers.fa_icon("check"), tag.strong(item)])) %>
+        <%= tag.li(safe_join([tag.strong(item)])) %>
       <% end %>
     </ul>
     <%= link_to(cta[:text], cta[:link], class: "button") if cta.present? %>

diff --git a/app/webpacker/styles/blog.scss b/app/webpacker/styles/blog.scss
@@ -65,6 +65,11 @@
 
     li {
       background-color: $grey;
+      margin-bottom: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
       a {
         display: block;

diff --git a/app/webpacker/styles/components/checklist-collage.scss b/app/webpacker/styles/components/checklist-collage.scss
@@ -17,27 +17,27 @@
   ul {
     position: relative;
     list-style: none;
-    padding-left: 2rem;
+    padding-left: 3.5rem;
+    margin-top: 0;
     margin-bottom: 2 * $indent-amount;
 
     li {
       position: relative;
-      margin: $indent-amount 0;
-
-      &:not(:first-child) {
-        margin-top: 3.5em;
-      }
-
-      .fa-check {
+      margin: 0 0 2em;
+
+      &:before {
+        content: "";
+        background-image: url("../images/icon-tick.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 40px 40px;
+        display: block;
+        width: 30px;
+        height: 30px;
         position: absolute;
-        color: $white;
-        left: -2rem;
-        top: 0;
-        width: 22px;
-        height: 20px;
-        background-color: $yellow;
-        text-align: center;
-        border-top: 3px solid $yellow;
+        margin-left: -3.5rem;
+        border: solid 4px $black;
+        top: -5px;
       }
     }
   }

diff --git a/app/webpacker/styles/header/extra-navigation.scss b/app/webpacker/styles/header/extra-navigation.scss
@@ -25,11 +25,11 @@
 
   &__link a {
     display: inline-block;
-    padding: .6em 1em;
-    line-height: 28px;
+    padding: .75em 1em;
+    line-height: 24px;
 
     @include mq($until: mobile) {
-      padding: .6em .8em;
+      padding: .75em .8em;
     }
 
     .icon {
@@ -79,8 +79,8 @@
     a {
       background-color: $pink;
       margin-left: 1em;
-      padding: .6em $indent-amount / 2;
-      line-height: 28px;
+      padding: .75em;
+      line-height: 24px;
 
       &:hover {
         background-color: $pink-dark;

diff --git a/spec/components/content/checklist_collage_component_spec.rb b/spec/components/content/checklist_collage_component_spec.rb
@@ -35,7 +35,7 @@
   it { is_expected.to have_css("p", text: "content") }
   it { is_expected.to have_css(".images.images-3") }
 
-  it "renders the checlist items" do
+  it "renders the checklist items" do
     checklist.each do |item|
       is_expected.to have_css("ul li", text: item)
     end