diff --git a/app/components/content/checklist_collage_component.html.erb b/app/components/content/checklist_collage_component.html.erb
index cd6b4a9e60..ef2a1594ec 100644
--- a/app/components/content/checklist_collage_component.html.erb
+++ b/app/components/content/checklist_collage_component.html.erb
@@ -2,7 +2,7 @@
<% checklist.each do |item| %>
- <%= tag.li(safe_join([helpers.fa_icon("check"), tag.strong(item)])) %>
+ <%= tag.li(safe_join([tag.strong(item)])) %>
<% end %>
<%= 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
index f99e88afe4..896fa6afbd 100644
--- 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
index 97eaae65f9..4d5b25a3ac 100644
--- 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
index 7730cb7ea5..389840c663 100644
--- 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
index 769cc9bbde..8f9119f995 100644
--- 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