From 55ecbb1a494a166a6db5fd6458f06d3ac375be68 Mon Sep 17 00:00:00 2001 From: Jon Kirwan Date: Thu, 6 Feb 2025 14:15:03 +0000 Subject: [PATCH 1/3] Remove browse page blue border style --- app/assets/stylesheets/views/_browse.scss | 11 ----------- app/views/shared/_browse_breadcrumbs.html.erb | 1 - 2 files changed, 12 deletions(-) diff --git a/app/assets/stylesheets/views/_browse.scss b/app/assets/stylesheets/views/_browse.scss index 128deada6..0e22eea01 100644 --- a/app/assets/stylesheets/views/_browse.scss +++ b/app/assets/stylesheets/views/_browse.scss @@ -26,17 +26,6 @@ $browse-header-background-colour: #263135; overflow: auto; } -.browse__breadcrumb-border { - background: govuk-colour("blue"); - height: 10px; -} - -.global-bar-present { - .browse__breadcrumb-border { - height: 0; - } -} - // The header spacings are a work in progress. .browse__header-wrapper { padding-bottom: govuk-spacing(7); diff --git a/app/views/shared/_browse_breadcrumbs.html.erb b/app/views/shared/_browse_breadcrumbs.html.erb index 6c00cc7fb..5bb0cb34f 100644 --- a/app/views/shared/_browse_breadcrumbs.html.erb +++ b/app/views/shared/_browse_breadcrumbs.html.erb @@ -7,7 +7,6 @@
-
<%= render "application/breadcrumbs", { From af40aef9e81cfc4ee7a6c4d08afbc2625e5f458a Mon Sep 17 00:00:00 2001 From: Jon Kirwan Date: Fri, 14 Feb 2025 15:07:40 +0000 Subject: [PATCH 2/3] Update browse header style Apply the `very-light-blue` background colour and remove inverse styles to update the text color from #fff to #0b0c0c. --- app/assets/stylesheets/views/_browse.scss | 21 ++----------------- app/views/browse/index.html.erb | 2 -- app/views/browse/show.html.erb | 2 -- .../show_a_to_z.html.erb | 2 -- .../show_curated.html.erb | 2 -- app/views/shared/_browse_breadcrumbs.html.erb | 4 +--- 6 files changed, 3 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/views/_browse.scss b/app/assets/stylesheets/views/_browse.scss index 0e22eea01..029763e40 100644 --- a/app/assets/stylesheets/views/_browse.scss +++ b/app/assets/stylesheets/views/_browse.scss @@ -1,23 +1,13 @@ @import "govuk_publishing_components/individual_component_support"; -// This dark grey is the background colour for the browse pages. -// -// White text on this background gives a contrast ratio of 13.35 - this meets AA -// and AAA for body and large text. -// -// The focus state's yellow gives a contrast ratio of 9.91 - this meets the AA -// requirement for active user interface components (AAA requirement is not -// defined for this). -// -// Requirements source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast -$browse-header-background-colour: #263135; +$refresh-very-light-blue: #f4f8fb; // This isn't proper BEM - but the convention is to have the view name as the // block part of the class name. Because we need to keep `browse` so this can // be run as an A/B test, we need to use a different class name for each view. .browse__breadcrumb-wrapper, .browse__header-wrapper { - background-color: $browse-header-background-colour; + background-color: $refresh-very-light-blue; } .browse__breadcrumb-wrapper { @@ -30,13 +20,6 @@ $browse-header-background-colour: #263135; .browse__header-wrapper { padding-bottom: govuk-spacing(7); - // A tiny white seam sometimes appears, despite there being no gap between - // this element and the previous element. This shifts the element up by a - // pixel to prevent the seam from appearing and adds padding to reposition the - // content. - border-top: 1px solid $browse-header-background-colour; - margin-top: -1px; - @include govuk-media-query($from: "tablet") { padding-bottom: govuk-spacing(8); padding-top: govuk-spacing(6); diff --git a/app/views/browse/index.html.erb b/app/views/browse/index.html.erb index 1887e7825..2f8e2c7a4 100644 --- a/app/views/browse/index.html.erb +++ b/app/views/browse/index.html.erb @@ -19,14 +19,12 @@ <%= render "shared/browse_header", { margin_bottom: 9 } do %> <%= render "govuk_publishing_components/components/heading", { text: t("browse.title"), - inverse: true, font_size: "xl", margin_bottom: 6, } %> <%= render "govuk_publishing_components/components/lead_paragraph", { text: t("browse.description"), margin_bottom: 2, - inverse: true } %> <% end %> diff --git a/app/views/browse/show.html.erb b/app/views/browse/show.html.erb index 3c4a144f5..0c8394c2c 100644 --- a/app/views/browse/show.html.erb +++ b/app/views/browse/show.html.erb @@ -23,14 +23,12 @@ <%= render "shared/browse_header", { margin_bottom: page.slug == "benefits" ? 7 : 9 } do %> <%= render "govuk_publishing_components/components/heading", { text: page.title, - inverse: true, font_size: "xl", margin_bottom: 6, } %> <%= render "govuk_publishing_components/components/lead_paragraph", { text: page.description, margin_bottom: 2, - inverse: true } %> <% end %> diff --git a/app/views/second_level_browse_page/show_a_to_z.html.erb b/app/views/second_level_browse_page/show_a_to_z.html.erb index b7c9968ef..99847826e 100644 --- a/app/views/second_level_browse_page/show_a_to_z.html.erb +++ b/app/views/second_level_browse_page/show_a_to_z.html.erb @@ -24,14 +24,12 @@ <%= render "govuk_publishing_components/components/heading", { font_size: "xl", heading_level: 1, - inverse: true, margin_bottom: 6, text: page.title, } %> <%= render "govuk_publishing_components/components/lead_paragraph", { text: page.description, margin_bottom: 2, - inverse: true } %> <% end %> diff --git a/app/views/second_level_browse_page/show_curated.html.erb b/app/views/second_level_browse_page/show_curated.html.erb index 2f70eba6e..31937072c 100644 --- a/app/views/second_level_browse_page/show_curated.html.erb +++ b/app/views/second_level_browse_page/show_curated.html.erb @@ -21,14 +21,12 @@ <%= render "govuk_publishing_components/components/heading", { font_size: "xl", heading_level: 1, - inverse: true, margin_bottom: 6, text: page.title, } %> <%= render "govuk_publishing_components/components/lead_paragraph", { text: page.description, margin_bottom: 2, - inverse: true } %> <% end %> diff --git a/app/views/shared/_browse_breadcrumbs.html.erb b/app/views/shared/_browse_breadcrumbs.html.erb index 5bb0cb34f..a2c2c74ae 100644 --- a/app/views/shared/_browse_breadcrumbs.html.erb +++ b/app/views/shared/_browse_breadcrumbs.html.erb @@ -9,9 +9,7 @@
- <%= render "application/breadcrumbs", { - inverse: true - } %> + <%= render "application/breadcrumbs" %>
From a3712e9524ccece6a9d7b0403b152c3a952795b3 Mon Sep 17 00:00:00 2001 From: Jon Kirwan Date: Fri, 14 Feb 2025 15:07:44 +0000 Subject: [PATCH 3/3] Action action link style to use`light_icon` --- app/views/shared/_browse_action_link.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/_browse_action_link.erb b/app/views/shared/_browse_action_link.erb index cd76966c2..2ea85c37c 100644 --- a/app/views/shared/_browse_action_link.erb +++ b/app/views/shared/_browse_action_link.erb @@ -1,5 +1,5 @@ <%= render "govuk_publishing_components/components/action_link", { - dark_large_icon: true, + light_icon: true, margin_bottom: 3, **link, } %>