Merge pull request #885 from uktrade/develop

Update master with reskin work
uktrade · Apr 24, 2023 · 783fbe3 · 783fbe3
2 parents 96242a1 + 2047b5d
commit 783fbe3
Show file tree

Hide file tree

Showing 78 changed files with 9,952 additions and 299 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1056,7 +1056,7 @@ GEM
       i18n (>= 1.6, < 2)
     faraday (1.0.1)
       multipart-post (>= 1.2, < 3)
-    ffi (1.12.2)
+    ffi (1.15.5)
     figaro (1.2.0)
       thor (>= 0.14.0, < 2)
     flipper (0.26.0)
@@ -1225,7 +1225,7 @@ GEM
       rspec-rails (>= 3.0.0)
     raabro (1.4.0)
     racc (1.6.2)
-    rack (2.2.6.2)
+    rack (2.2.6.4)
     rack-protection (2.0.8.1)
       rack
     rack-test (2.0.2)
@@ -1333,7 +1333,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.7)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.3.0)
+    sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
       railties (>= 4.0.0)

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -52,3 +52,4 @@
 //= link transformation/pages/opportunity.css
 //= link transformation/pages/results.css
 //= link export-components/main.css
+//= link_tree ../fonts
diff --git a/app/assets/fonts/FSLucas-Regular.ttf b/app/assets/fonts/FSLucas-Regular.ttf
diff --git a/app/assets/fonts/FSLucas-Regular.woff b/app/assets/fonts/FSLucas-Regular.woff
diff --git a/app/assets/fonts/FSLucas-Regular.woff2 b/app/assets/fonts/FSLucas-Regular.woff2
diff --git a/app/assets/fonts/FSLucas-SemiBold.eot b/app/assets/fonts/FSLucas-SemiBold.eot
diff --git a/app/assets/fonts/FSLucas-SemiBold.otf b/app/assets/fonts/FSLucas-SemiBold.otf
diff --git a/app/assets/fonts/FSLucas-SemiBold.svg b/app/assets/fonts/FSLucas-SemiBold.svg
diff --git a/app/assets/fonts/FSLucas-SemiBold.ttf b/app/assets/fonts/FSLucas-SemiBold.ttf
diff --git a/app/assets/fonts/FSLucas-SemiBold.woff b/app/assets/fonts/FSLucas-SemiBold.woff
diff --git a/app/assets/fonts/FSLucas-SemiBold.woff2 b/app/assets/fonts/FSLucas-SemiBold.woff2
diff --git a/app/assets/images/export-opportunities-header.png b/app/assets/images/export-opportunities-header.png
diff --git a/app/assets/stylesheets/admin/_errors.scss b/app/assets/stylesheets/admin/_errors.scss
@@ -23,7 +23,7 @@
 .notice {
   background-color: #e1e8e8;
   border-color: #aab2b2;
-  color: #333333;
+  color: #212427;
   p {
     font-weight: 500;
   }

diff --git a/app/assets/stylesheets/dit-styleguide-augment/base/_typography.scss b/app/assets/stylesheets/dit-styleguide-augment/base/_typography.scss
@@ -1,6 +1,5 @@
-a {
-  font-family: "Roboto",arial,helvetica,sans-serif;
-}
+$brand-font: "FS Lucas", Arial, Helvetica, Verdana;
+$header-font: "FS Lucas SemiBold", Arial, Helvetica, Verdana;
 
 h1,
 .h1 {
@@ -140,7 +139,7 @@ p.lead {
 /* The below are not used yet */
 
 blockquote {
-  font-family: "Roboto",arial,helvetica,sans-serif;
+  font-family: $brand-font;
 }
 
 button.text {
@@ -150,18 +149,19 @@ button.text {
 	line-height:25px; 
 }
 
-a.link {
-	font-size:18px;
+a, .link {
+  color: #1D70B8;
+	font-size:20px;
 	font-weight:400;
 	line-height:25px;
 }
 
 a.link-default {
-  color: #006ccc;
+  color: #1D70B8;
   cursor: pointer;
   text-decoration: underline;
 }
 
 a.link-default:active, a.link-default:hover {
-  color: #00549f;
+ color: #1D70B8;;
 }
diff --git a/app/assets/stylesheets/dit-styleguide-augment/components/_filters.scss b/app/assets/stylesheets/dit-styleguide-augment/components/_filters.scss
@@ -127,7 +127,7 @@
     &::-webkit-input-placeholder,
     &:-ms-input-placeholder,
     &::-moz-placeholder {
-      font-family: Roboto;
+      font-family: $brand-font;
       font-size: 16px;
       letter-spacing: -0.3px;
       color: $midgrey;

diff --git a/app/assets/stylesheets/dit-styleguide-augment/components/_results.scss b/app/assets/stylesheets/dit-styleguide-augment/components/_results.scss
@@ -34,7 +34,7 @@
       }
     }
   &__icon {
-    color:#333333;
+    color:#212427;
     font-size:13px;
     font-weight:400;
     padding-left: 1.6em;

diff --git a/app/assets/stylesheets/dit-styleguide-augment/settings/_variables.scss b/app/assets/stylesheets/dit-styleguide-augment/settings/_variables.scss
@@ -14,14 +14,14 @@ $flag_red: #b00d23;
 $stone: #dfd5c5;
 $offwhite: #fafafa;
 $white: #ffffff;
-$grey: #333333;
+$grey: #212427;
 $midgrey: #666666;
 $lightgrey: #d8d8d8;
 $greatred: #e41f13;
 $midblue: #00549f;
 $aqua: #007ea3;
 $purple: #4f0b7b;
-$blue_science: #006ccc;
+$blue_science: #1D70B8;
 $blue_denim: #0a55c0;
 
 

diff --git a/app/assets/stylesheets/email.scss b/app/assets/stylesheets/email.scss
@@ -1,10 +1,12 @@
+$brand-font: "FS Lucas", Arial, Helvetica, Verdana;
+
 body {
   margin: 0;
   padding: 0;
   color: red;
   font-size: 14px;
   color: #121212;
-  font-family: Robo, Arial, Helvetica, sans-serif;
+  font-family: $brand-font;
   line-height: 18px;
 }
 

diff --git a/app/assets/stylesheets/export-components/breadcrumbs/breadcrumbs.scss b/app/assets/stylesheets/export-components/breadcrumbs/breadcrumbs.scss
@@ -0,0 +1,3 @@
+.breadcrumb-container {
+    background-color: $color-alternative-background;
+}
diff --git a/app/assets/stylesheets/export-components/cookie-notice/_base.scss b/app/assets/stylesheets/export-components/cookie-notice/_base.scss
@@ -4,7 +4,7 @@
 
 .cookie-notice {
   @include font-med-normal;
-  background-color: $stone-40;
+  background-color: $color-alternative-background;
   padding: 10px 0;
 
   a:focus, button:focus {

diff --git a/app/assets/stylesheets/export-components/header-footer/_common.scss b/app/assets/stylesheets/export-components/header-footer/_common.scss
@@ -15,9 +15,31 @@
 .great-global-header-footer.international .great-global-header-footer-logo {
   margin-top: 11px;
 }
+.great-footer .great-global-header-footer.domestic {
+  padding: 20px 0;
+  height: fit-content;
 
+  >div {
+
+    display: flex;
+    align-items: center;
+
+    p {
+      margin-left: auto;
+    }
+
+    @media only screen and (max-width: 600px) {
+      flex-direction: column;
+      justify-self: unset;
+      align-items: flex-start;
+      p{
+        margin: 0;
+      }
+    }
+  }
+}
 .great-global-header-footer.domestic .great-global-header-footer-logo {
-  margin-top: 15px;
+  height: 30px;
 }
 
 .great-global-header-footer {
@@ -32,6 +54,7 @@
   .great-global-header-footer-logo {
     float: left;
     white-space: nowrap;
+
   }
 
   .great-domestic-international-links {
@@ -57,11 +80,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.great-footer-logo-container,
-.great-footer .great-domestic-international-links {
-  border-bottom: 1px solid $lightened-great-blue;
-}
-
 .great-footer,
 .great-header {
   a:active:focus {

diff --git a/app/assets/stylesheets/export-components/header-footer/_footer.scss b/app/assets/stylesheets/export-components/header-footer/_footer.scss
@@ -21,19 +21,29 @@
 
 .great-footer {
   font-family: $brand-font;
-  background-color: $great-blue;
+  background-color: $color-header-footer;
 
   a {
     font-size: 15px;
     color: $light-grey;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+     &:hover, &:focus, &:active{
+      color: white!important;
+      text-decoration: none;
+    }
   }
 }
 
 .great-footer-links {
-  padding: 30px 0;
+  padding: 80px 0 30px 0;
+
+  @media only screen and (max-width: 640px) {
+  padding: 115px 0 50px 0;
+}
 
   a {
-    font-size: 14px;
+    font-size: 20px;
   }
 
   ul li {
@@ -57,8 +67,8 @@
 }
 
 .great-footer-copyright {
-  font-size: 12px;
-  font-family: $brand-font-alternative;
+  font-size: 18px!important;
+  font-family: $brand-font;
 }
 
 @media (max-width: 640px) {
@@ -72,6 +82,10 @@
       }
     }
 
+    li + li {
+      margin-top: 20px;
+    }
+
     ul,
     ul li,
     ul > div {
@@ -80,11 +94,7 @@
 
     .great-footer-site-links li:first-child a,
     .great-footer-domestic-international-link li a {
-      font-size: 18px;
-    }
-
-    .great-footer-site-links li:first-child {
-      margin-bottom: 15px;
+      font-size: 20px;
     }
 
     .great-footer-domestic-international-link {

diff --git a/app/assets/stylesheets/export-components/header-footer/_header.scss b/app/assets/stylesheets/export-components/header-footer/_header.scss
@@ -66,7 +66,7 @@
         }
 
 		.main-nav.mobile.expanded {
-			background: #4b426d;
+			background: $color-header-footer;
 			// padding: 0 20px 0;
             z-index: 1;
 
@@ -88,7 +88,7 @@
 				background: none;
 				border: 0;
 				color: #fff;
-				font-family: Overpass, Arial, Helvetica, Verdana;
+				font-family: $brand-font;
 				font-size: 18px;
 				letter-spacing: 0;
 				line-height: 16px;
@@ -114,6 +114,10 @@
 		}
 	}
 
+	#mobile-menu-button{
+		font-size: 20px!important;
+	}
+
 	.js-mobile-button {
 		display: none;
 
@@ -124,9 +128,10 @@
 		top: 45px;
 		right: 0;
 		color: $white;
-		background-color: $great-blue;
+		background-color: $color-header-footer;
 		border: 2px solid $white;
 		padding: 10px 45px 10px 10px;
+		font-size: 20px;
 		cursor: pointer;
 
 		&:focus {
@@ -207,10 +212,10 @@
     }
 
     .user-greeting {
-        background: #006ccc;
+        background: #1D70B8;
         color: #fff;
         display: none;
-        font-family: Overpass, Arial, Helvetica, Verdana;
+        font-family: $brand-font;
         font-size: 20px;
         padding: 15px 20px;
     }

diff --git a/app/assets/stylesheets/export-components/header-footer/_js-header.scss b/app/assets/stylesheets/export-components/header-footer/_js-header.scss
@@ -87,7 +87,7 @@
 
   .js-nav-list {
     .link-heading {
-      font-size: 16px;
+      font-size: 20px;
     }
 
     a.link-heading {