Merge pull request #64 from mattpriestleydev/feature/new_crown_logo

Update keycloak theme with new tudor crown logo
UKHomeOffice · Apr 17, 2024 · a287c29 · a287c29
2 parents c608f33 + 09937ed
commit a287c29
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,7 +37,8 @@ jspm_packages
 .node_repl_history
 
 # Built files
-govuk/login/resources/
+govuk/login/resources/css/
+govuk/login/resources/vendor/
 govuk-cop/login/resources/css/
 govuk-internal/login/resources/
 dist/

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,49 +1,50 @@
-mariadb:
-  container_name: mariadb
-  image: mariadb:10.4.8
-  ports:
-  - "3306"
-  environment:
-    MYSQL_DATABASE: "keycloak"
-    MYSQL_PASSWORD: "password"
-    MYSQL_RANDOM_ROOT_PASSWORD: "yes"
-    MYSQL_USER: "keycloak"
+services:
+  mariadb:
+    container_name: mariadb
+    image: mariadb:10.4.8
+    ports:
+    - "3306"
+    environment:
+      MYSQL_DATABASE: "keycloak"
+      MYSQL_PASSWORD: "password"
+      MYSQL_RANDOM_ROOT_PASSWORD: "yes"
+      MYSQL_USER: "keycloak"
 
-keycloak:
-  container_name: keycloak
-  image: quay.io/ukhomeofficedigital/keycloak:v15.0.2
-  ports:
-  - "8080:8080"
-  links:
-  - mariadb
-  - maildev
-  volumes:
-  - ./.docker-compose/keycloak.env:/etc/secrets/keycloak.env
-  - ./govuk/:/opt/jboss/keycloak/themes/govuk/
-  - ./govuk-internal/:/opt/jboss/keycloak/themes/govuk-internal/
-  - ./govuk-internal-cba/:/opt/jboss/keycloak/themes/govuk-internal-cba/
-  - ./govuk-internal-dq/:/opt/jboss/keycloak/themes/govuk-internal-dq/
-  - ./govuk-cop/:/opt/jboss/keycloak/themes/govuk-cop/
-  - ./hmpo-lev/:/opt/jboss/keycloak/themes/hmpo-lev/
-  - ./govuk-social-providers/:/opt/jboss/keycloak/themes/govuk-social-providers/
-  - ./govuk-drt/:/opt/jboss/keycloak/themes/govuk-drt/
-  - ./govuk-rscas/:/opt/jboss/keycloak/themes/govuk-rscas/
-  environment:
-    DB_VENDOR: "mariadb"
-    MARIADB_PORT: "3306"
-    KEYCLOAK_ENVIRONMENT: "/etc/secrets/keycloak.env"
-    KEYCLOAK_PASSWORD: "admin"
-    KEYCLOAK_USER: "admin"
-    MYSQL_PORT_3306_TCP_ADDR: "mariadb"
-    MYSQL_PORT_3306_TCP_PORT: "3306"
-    WAIT_ON_ADDR: "mariadb"
-    WAIT_ON_PORT: "3306"
-  command:
-  - -b 0.0.0.0 --server-config=standalone.xml
+  keycloak:
+    container_name: keycloak
+    image: quay.io/ukhomeofficedigital/keycloak:v15.0.2
+    ports:
+    - "8080:8080"
+    links:
+    - mariadb
+    - maildev
+    volumes:
+    - ./.docker-compose/keycloak.env:/etc/secrets/keycloak.env
+    - ./govuk/:/opt/jboss/keycloak/themes/govuk/
+    - ./govuk-internal/:/opt/jboss/keycloak/themes/govuk-internal/
+    - ./govuk-internal-cba/:/opt/jboss/keycloak/themes/govuk-internal-cba/
+    - ./govuk-internal-dq/:/opt/jboss/keycloak/themes/govuk-internal-dq/
+    - ./govuk-cop/:/opt/jboss/keycloak/themes/govuk-cop/
+    - ./hmpo-lev/:/opt/jboss/keycloak/themes/hmpo-lev/
+    - ./govuk-social-providers/:/opt/jboss/keycloak/themes/govuk-social-providers/
+    - ./govuk-drt/:/opt/jboss/keycloak/themes/govuk-drt/
+    - ./govuk-rscas/:/opt/jboss/keycloak/themes/govuk-rscas/
+    environment:
+      DB_VENDOR: "mariadb"
+      MARIADB_PORT: "3306"
+      KEYCLOAK_ENVIRONMENT: "/etc/secrets/keycloak.env"
+      KEYCLOAK_PASSWORD: "admin"
+      KEYCLOAK_USER: "admin"
+      MYSQL_PORT_3306_TCP_ADDR: "mariadb"
+      MYSQL_PORT_3306_TCP_PORT: "3306"
+      WAIT_ON_ADDR: "mariadb"
+      WAIT_ON_PORT: "3306"
+    command:
+    - -b 0.0.0.0 --server-config=standalone.xml
 
-maildev:
-  container_name: maildev
-  image: djfarrelly/maildev:1.1.0
-  ports:
-  - "8081:80"
-  - "25"
+  maildev:
+    container_name: maildev
+    image: djfarrelly/maildev:1.1.0
+    ports:
+    - "8081:80"
+    - "25"
diff --git a/govuk-drt/login/template.ftl b/govuk-drt/login/template.ftl
@@ -54,9 +54,9 @@
               rel="stylesheet"/><!--<![endif]-->
         <!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-        <link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1"
+        <link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico"
               type="image/x-icon"/>
-        <link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1"
+        <link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg"
               color="#0b0c0c">
         <link rel="apple-touch-icon-precomposed" sizes="152x152"
               href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
@@ -122,7 +122,7 @@
             <div class="header-global">
                 <div class="header-logo">
                     <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
-                        <img src="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown_invert_trans.png?0.22.1"
+                        <img src="${url.resourcesPath}/assets/crown-invert-logo.svg"
                              width="36" height="32" alt=""> GOV.UK
                     </a>
                 </div>

diff --git a/govuk-internal-dq/login/template.ftl b/govuk-internal-dq/login/template.ftl
@@ -48,8 +48,8 @@
     <!--[if gte IE 9]><!--><link href="${url.resourcesPath}/vendor/govuk_template/stylesheets/fonts.css?0.22.1" media="all" rel="stylesheet" /><!--<![endif]-->
     <!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-    <link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1" type="image/x-icon" />
-    <link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1" color="#0b0c0c">
+    <link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico" type="image/x-icon" />
+    <link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg" color="#0b0c0c">
     <link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-120x120.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-76x76.png?0.22.1">

diff --git a/govuk-internal/login/template.ftl b/govuk-internal/login/template.ftl
@@ -48,8 +48,8 @@
     <!--[if gte IE 9]><!--><link href="${url.resourcesPath}/vendor/govuk_template/stylesheets/fonts.css?0.22.1" media="all" rel="stylesheet" /><!--<![endif]-->
     <!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-    <link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1" type="image/x-icon" />
-    <link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1" color="#0b0c0c">
+    <link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico" type="image/x-icon" />
+    <link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg" color="#0b0c0c">
     <link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-120x120.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-76x76.png?0.22.1">

diff --git a/govuk-social-providers/login/template.ftl b/govuk-social-providers/login/template.ftl
@@ -48,8 +48,8 @@
     <!--[if gte IE 9]><!--><link href="${url.resourcesPath}/vendor/govuk_template/stylesheets/fonts.css?0.22.1" media="all" rel="stylesheet" /><!--<![endif]-->
     <!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-    <link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1" type="image/x-icon" />
-    <link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1" color="#0b0c0c">
+    <link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico" type="image/x-icon" />
+    <link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg" color="#0b0c0c">
     <link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-120x120.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-76x76.png?0.22.1">
@@ -109,7 +109,7 @@
         <div class="header-global">
           <div class="header-logo">
             <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
-              <img src="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown_invert_trans.png?0.22.1" width="36" height="32" alt=""> GOV.UK
+              <img src="${url.resourcesPath}/assets/crown-invert-logo.svg" width="36" height="32" alt=""> GOV.UK
             </a>
           </div>
         </div>

diff --git a/govuk/login/resources/assets/crown-invert-logo.svg b/govuk/login/resources/assets/crown-invert-logo.svg
diff --git a/govuk/login/resources/assets/crown-logo-mask.svg b/govuk/login/resources/assets/crown-logo-mask.svg
diff --git a/govuk/login/resources/assets/crown-logo.svg b/govuk/login/resources/assets/crown-logo.svg
diff --git a/govuk/login/resources/assets/favicon.ico b/govuk/login/resources/assets/favicon.ico
diff --git a/govuk/login/template.ftl b/govuk/login/template.ftl
@@ -48,8 +48,8 @@
     <!--[if gte IE 9]><!--><link href="${url.resourcesPath}/vendor/govuk_template/stylesheets/fonts.css?0.22.1" media="all" rel="stylesheet" /><!--<![endif]-->
     <!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-    <link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1" type="image/x-icon" />
-    <link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1" color="#0b0c0c">
+    <link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico" type="image/x-icon" />
+    <link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg" color="#0b0c0c">
     <link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-120x120.png?0.22.1">
     <link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-76x76.png?0.22.1">
@@ -109,7 +109,7 @@
         <div class="header-global">
           <div class="header-logo">
             <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
-              <img src="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown_invert_trans.png?0.22.1" width="36" height="32" alt=""> GOV.UK
+              <img src="${url.resourcesPath}/assets/crown-invert-logo.svg" width="36" height="32" alt=""> GOV.UK
             </a>
           </div>
         </div>

diff --git a/hmpo-lev/login/template.ftl b/hmpo-lev/login/template.ftl
@@ -48,8 +48,8 @@
 	<!--[if gte IE 9]><!--><link href="${url.resourcesPath}/vendor/govuk_template/stylesheets/fonts.css?0.22.1" media="all" rel="stylesheet" /><!--<![endif]-->
 	<!--[if lt IE 9]><script src="${url.resourcesPath}/vendor/govuk_template/javascripts/ie.js?0.22.1"></script><![endif]-->
 
-	<link rel="shortcut icon" href="${url.resourcesPath}/vendor/govuk_template/images/favicon.ico?0.22.1" type="image/x-icon" />
-	<link rel="mask-icon" href="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown.svg?0.22.1" color="#0b0c0c">
+	<link rel="shortcut icon" href="${url.resourcesPath}/assets/favicon.ico" type="image/x-icon" />
+	<link rel="mask-icon" href="${url.resourcesPath}/assets/crown-logo-mask.svg" color="#0b0c0c">
 	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-152x152.png?0.22.1">
 	<link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-120x120.png?0.22.1">
 	<link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/vendor/govuk_template/images/apple-touch-icon-76x76.png?0.22.1">
@@ -109,7 +109,7 @@
 		<div class="header-global">
 			<div class="header-logo">
 				<a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
-					<img src="${url.resourcesPath}/vendor/govuk_template/images/gov.uk_logotype_crown_invert_trans.png?0.22.1" width="36" height="32" alt=""> GOV.UK
+					<img src="${url.resourcesPath}/assets/crown-invert-logo.svg" width="36" height="32" alt=""> GOV.UK
 				</a>
 			</div>
 		</div>

diff --git a/sass/govuk_elements.scss b/sass/govuk_elements.scss
@@ -27,3 +27,8 @@ $path: "../vendor/govuk_frontend_toolkit/images/";// Path to Frontend Toolkit im
     display: inline;
   }
 }
+
+/* Override the govuk_template_jinja css files with the new crown logo (Kings Tudor Crown) */
+header#global-header #logo {
+	background: url("../assets/crown-logo.svg") no-repeat;
+}