Merge pull request #519 from DFE-Digital/ui-updates

UI updates
DFE-Digital · Oct 16, 2024 · 42308a6 · 42308a6
2 parents d181ba7 + 24f17a3
commit 42308a6
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 59 deletions.
diff --git a/Childrens-Social-Care-CPD/Views/Shared/_HeroBanner.cshtml b/Childrens-Social-Care-CPD/Views/Shared/_HeroBanner.cshtml
@@ -5,7 +5,7 @@
 <section class="app-section-beta app-section-beta__blue govuk-!-margin-bottom-8">
     <div class="dfe-width-container">
         <div class="govuk-grid-row">
-            <div class="govuk-grid-column-two-thirds-from-desktop">
+            <div class="govuk-grid-column-full">
                 <h1 class="body-header-font" data-testid="homepage-header">@Model.Title</h1>
                 <p class="govuk-body govuk-!-font-size-24 body-header-font">@Model.Text</p>
             </div>

diff --git a/Childrens-Social-Care-CPD/package-lock.json b/Childrens-Social-Care-CPD/package-lock.json
diff --git a/Childrens-Social-Care-CPD/package.json b/Childrens-Social-Care-CPD/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@ministryofjustice/frontend": "^1.8.0",
     "dfe-frontend-alpha": "^1.0.1",
-    "govuk-frontend": "^5.2.0",
+    "govuk-frontend": "^5.6.0",
     "jquery": "^3.7.0"
   }
 }
diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_dfe-overrides.scss
@@ -1,6 +1,8 @@
-/* STANDARD COLOURS */
-body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt, dd, tr {
-    font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
+@import url('https://rsms.me/inter/inter.css');
+
+/* STANDARD COLOURS */
+* {
+    font-family: 'Inter', sans-serif !important;
 }
 
 .logo {
@@ -64,6 +66,11 @@ body, p, h1, h2, h3, h4, h5, h6, a, span, div, table, th, td, blockquote, li, dt
     background-color: #003a69;
 }
 
+h1,
+.dfe-heading-xl, .govuk-heading-xl {
+  margin-bottom: 30px !important
+}
+
 .govuk-header__container {
     position: relative;
     margin-bottom: -10px;
@@ -334,7 +341,7 @@ CONTENT TITLE BANNER
 
 .gem-c-contents-list__title {
     color: #0b0c0c;
-    font-family: "GDS Transport", arial, sans-serif;
+    font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -352,7 +359,7 @@ CONTENT TITLE BANNER
 
 @media print {
     .gem-c-contents-list__title {
-        font-family: sans-serif;
+        font-family: 'Inter', sans-serif;
     }
 }
 
@@ -373,7 +380,7 @@ CONTENT TITLE BANNER
 
 .gem-c-contents-list__list, .gem-c-contents-list__nested-list {
     color: #0b0c0c;
-    font-family: "GDS Transport", arial, sans-serif;
+    font-family: 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
@@ -393,7 +400,7 @@ CONTENT TITLE BANNER
 
 @media print {
     .gem-c-contents-list__list, .gem-c-contents-list__nested-list {
-        font-family: sans-serif;
+        font-family: 'Inter', sans-serif;
     }
 }
 

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_mediaelement-player.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_mediaelement-player.scss
@@ -17,7 +17,7 @@ Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-h
 .mejs__container {
     background: #000;
     box-sizing: border-box;
-    font-family: 'Helvetica', Arial, serif;
+    font-family: 'Inter', sans-serif;
     position: relative;
     text-align: left;
     text-indent: 0;

diff --git a/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss b/Childrens-Social-Care-CPD/styles/scss/overrides/_site.scss
@@ -359,6 +359,7 @@
 /* Back to top component - styles taken from Help for Early Years */
 .app-back-to-top {
     margin-top: 60px;
+    font-size: 19px;
 }
 
 .app-back-to-top__icon {