Merge branch '4.5' into 5

client/src/styles/_base.scss

@@ -1,8 +1,8 @@
-.realme_widget, .realme_button, .realme_popup_position, .realme_login, .realme_create_account, .whats_realme, .realme_link, .realme_popup, .realme_find_out_more {
+.realme_widget, .realme_button, .realme_popup_position, .realme_login, .realme_create_account, .realme_link, .realme_popup, .realme_find_out_more {
   position: relative;
 }
 
-.realme_login_lockup img, .realme_arrow_top_left .arrow, .realme_arrow_top_right .arrow, .realme_popup_wrapper, .realme_arrow_side_left .arrow, .realme_arrow_side_right .arrow, .realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock {
+.realme_login_lockup img, .realme_arrow_top_left .arrow, .realme_arrow_top_right .arrow, .realme_popup_wrapper, .realme_arrow_side_left .arrow, .realme_arrow_side_right .arrow, .realme_icon_find_out_more, .realme_icon_link {
   position: absolute;
 }
 
@@ -38,11 +38,11 @@
   vertical-align: bottom;
 }
 
-.realme_button, .realme_button_padding, .realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock {
+.realme_button, .realme_button_padding, .realme_icon_find_out_more, .realme_icon_link {
   display: block;
 }
 
-.realme_icon_find_out_more, .realme_icon_link, .realme_icon_padlock, .realme_icon_new_window, .realme_text_icon_new_window {
+.realme_icon_find_out_more, .realme_icon_link, .realme_icon_new_window, .realme_text_icon_new_window {
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: 0 0;
@@ -59,7 +59,7 @@
   border-style: solid;
 }
 
-.realme_icon_padlock, .realme_icon_new_window {
+.realme_icon_new_window {
   _overflow: hidden;
   /*ie6*/
 }
@@ -74,11 +74,10 @@
 	-----------------------------------------------------
 */
 .realme_widget {
+background-color: $brand-color-main-contrast;
+color: $brand-color-text;
   padding: 0.76923em 1.07692em;
-  border-color: transparent;
-  /* The border-color is modified by each theme */
   font-family: sans-serif;
-  color: inherit;
   font-size: 13px;
   /* Set font-size explicitly to avoid cascade from the page. */
   line-height: 1.53846;
@@ -94,11 +93,10 @@
   font-family: sans-serif;
 }
 
-.realme_widget .realme_login, .realme_widget .realme_create_account, .realme_widget .whats_realme, .realme_widget .realme_link {
-  color: #2c5897;
+.realme_widget .realme_login, .realme_widget .realme_create_account, .realme_widget .realme_link {
+  color: $brand-color-main-accessible;
 }
-.realme_widget .realme_login:hover, .realme_widget .realme_create_account:hover, .realme_widget .whats_realme:hover, .realme_widget .realme_link:hover, .realme_widget .realme_login:active, .realme_widget .realme_create_account:active, .realme_widget .whats_realme:active, .realme_widget .realme_link:active {
-  color: #204170;
+.realme_widget .realme_login:hover, .realme_widget .realme_create_account:hover, .realme_widget .realme_link:hover, .realme_widget .realme_login:active, .realme_widget .realme_create_account:active, .realme_widget .realme_link:active {
   text-decoration: underline;
   border: 0;
 }

client/src/styles/_buttons.scss

@@ -1,26 +1,15 @@
 .realme_button {
+  cursor: pointer;
   line-height: 1;
   margin-top: 1px;
-  cursor: pointer;
-  color: white;
-  border-width: 1px;
-  border-style: solid;
-  background-color: #3871ae;
-  background-repeat: repeat-x;
-  /* Things that fancy browsers get */
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3a78bb), color-stop(100%, #3871ae));
-  background-image: -webkit-linear-gradient(#3a78bb, #3871ae);
-  background-image: -moz-linear-gradient(#3a78bb, #3871ae);
-  background-image: -o-linear-gradient(#3a78bb, #3871ae);
-  background-image: linear-gradient(#3a78bb, #3871ae);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  border-color: #1d5794;
+  color: $brand-color-main-contrast;
+  background-color: $brand-color-main-accessible;
+  border-radius: $btn-border-radius;
+  border: none;
   -webkit-appearance: none;
   -webkit-border-image: none;
+  font-size: 1.107692308rem;
+  line-height: 1.2em;
 
   /**
    * Added for SilverStripe module:
@@ -31,14 +20,18 @@
   text-align: left;
   padding: 0;
 }
-.realme_button:hover, .realme_button:focus {
-  background-color: #2f5f93;
-  background-image: none;
-  color: #fff;
-  border-color: #103154;
-}
 
 .realme_button_padding {
-  color: #fff;
-  padding: 0.92308em 2.53846em 0.92308em 1.23077em;
+  display: flex;
+  align-items: center;
+  padding: 1em 1.25em;
+}
+
+.realme_button_login-icon {
+    display: inline-block;
+    background-image: url('../images/RealMe-Face-Symbol_White.svg');
+    background-repeat: no-repeat;
+    margin-right: 0.5em;
+    height: 2em;
+    width: 2em;
 }

client/src/styles/_icons.scss

@@ -17,22 +17,10 @@
   /*ie6*/
 }
 
-.realme_icon_padlock {
-  top: 0;
-  right: 1em;
-  width: 11px;
-  height: 100%;
-  background-image: url('../images/padlock-white.png');
-  background-position: right center;
-  _height: 3em;
-  /*ie6*/
-}
-
 .realme_icon_new_window {
   background-image: url('../images/icon-new-window-white.png');
   width: 9px;
   height: 9px;
-  margin-left: 5px;
   vertical-align: baseline;
   position: relative;
   *top: -0.2em;

client/src/styles/_links.scss

@@ -2,14 +2,6 @@
   padding-right: 1.2em;
 }
 
-.whats_realme {
-  float: left;
-}
-
-.realme_btn_margin {
-  margin-left: 45px;
-}
-
 .realme_link {
   text-decoration: none;
 }

client/src/styles/_popup.scss

@@ -194,11 +194,10 @@
   padding-left: 1em;
   margin-bottom: 1em;
 }
-.realme_popup a {
-  color: #2c5897;
-}
-.realme_popup a:hover, .realme_popup a:active {
-  color: #204170;
+.realme_popup a,
+.realme_popup a:hover,
+.realme_popup a:active {
+  color: $brand-color-main-accessible;
 }
 
 .realme_popup_title,

client/src/styles/_typography.scss

@@ -1,10 +1,15 @@
-.realme_widget .realme_title {
+.realme_title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 1.230769231em;
-  font-family: sans-serif;
-  font-weight: bold;
-  /* 16px */
+  font-size: 2.3125rem;
+  font-family: inter, sans-serif;
+  font-weight: 300;
+  line-height: 1.46;
+  color: $brand-color-main;
+}
+
+.realme_title_brand {
+    font-weight: 800;
 }
 
 .realme_mini_title {
@@ -43,7 +48,7 @@
 
 .realme_secondary_login {
   padding-right: 2.76923em;
-  background-image: url('../images/logo-simple-login.png');
+  background-image: url('../images/RealMe-Face-Symbol_Web-RGB.svg');
   background-repeat: no-repeat;
   background-position: right center;
 }

client/src/styles/_variables.scss

@@ -0,0 +1,7 @@
+// See the brand guidelines at https://developers.realme.govt.nz/how-to-integrate/application-design-and-branding-guide/realme-new-page-elements/
+$brand-color-main: #FF2C00;
+$brand-color-main-accessible: #D64309;
+$brand-color-main-contrast: white;
+$brand-color-text: black;
+
+$btn-border-radius: 1rem;

client/src/styles/bundle.scss

@@ -1,8 +1,8 @@
+@import 'variables';
 @import 'base';
 @import 'typography';
 @import 'buttons';
 @import 'components';
 @import 'links';
 @import 'popup';
 @import 'icons';
-@import 'themes';

package.json

@@ -15,7 +15,6 @@
   "devDependencies": {
     "@silverstripe/eslint-config": "^1.0.0",
     "@silverstripe/webpack-config": "^2.0.0",
-    "copy-webpack-plugin": "^11.0.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^5.0.0"
   },

templates/SilverStripe/RealMe/Authenticator/LoginForm.ss

@@ -39,18 +39,17 @@ or directly in your css, e.g. .realme_popup {width: 450px}
 <% end_if %>
 
 <div class="realme_widget realme_primary_login realme_theme_{$RealMeWidgetTheme}">
-    <h2 class="realme_title">Login with RealMe®</h2>
+    <h2 class="realme_title">Login with <span class="realme_title_brand">RealMe</span></h2>
 
     <p class="realme_info">
-        To access the $ServiceName1, you need a RealMe login. If you’ve used a RealMe login somewhere else, you can use
-        it here too. If you don’t already have a username and password, just select Login and choose to create one.
+        To access the $ServiceName1, you need a RealMe login. If you've used a RealMe login somewhere else, you can use
+        it here too. If you don't already have a username and password, just select Login and choose to create one.
     </p>
 
     <div class="realme_login_lockup">
         <form $FormAttributes>
             <% if $Actions %>
-                <img src="$resourceURL('silverstripe/realme:client/dist/images/RealMe-logo@2x.png')" alt="RealMe" width="42" height="42">
-                <div class="realme_btn_margin">
+                <div>
                 <% loop $Actions %>
                     $Field
                 <% end_loop %>
@@ -62,7 +61,7 @@ or directly in your css, e.g. .realme_popup {width: 450px}
         </form>
     </div>
     <div class="realme_popup_position">
-        <a class="js_toggle_popup whats_realme" href="https://www.realme.govt.nz" target="_blank" rel="noopener noreferrer">What’s RealMe?</a>
+        <a class="js_toggle_popup realme_link whats_realme" href="https://www.realme.govt.nz" target="_blank" rel="noopener noreferrer">What's RealMe?</a>
         <div class="realme_popup_wrapper realme_arrow_top_left">
             <!-- realme_popup -->
             <div class="realme_popup">

templates/SilverStripe/RealMe/Authenticator/LoginForm/RealMeAssertForm.ss

@@ -39,13 +39,12 @@ or directly in your css, e.g. .realme_popup {width: 450px}
 <% end_if %>
 
 <div class="realme_widget realme_assert realme_theme_{$RealMeWidgetTheme} no_touch" style="z-index: 1;">
-    <h2 class="realme_title">Prove your identity with RealMe</h2>
+    <h2 class="realme_title">Prove your identity with <span class="realme_title_brand">RealMe</span></h2>
     <p class="realme_info">If you have verified your identity with RealMe you can securely prove who you are, right now.</p>
 
     <div class="realme_login_lockup">
         <form $FormAttributes>
             <% if $Actions %>
-                <img src="$resourceURL('silverstripe/realme:client/dist/images/RealMe-logo@2x.png')" alt="RealMe" width="42" height="42">
                 <div class="realme_btn_margin">
                     <% loop $Actions %>
                         $Field
@@ -59,7 +58,7 @@ or directly in your css, e.g. .realme_popup {width: 450px}
     </div>
 
     <div class="realme_popup_position">
-        <a class="js_toggle_popup link whats_realme" href="https://www.realme.govt.nz" target="_blank" rel="noopener noreferrer">What’s RealMe?</a>
+        <a class="js_toggle_popup link realme_link whats_realme" href="https://www.realme.govt.nz" target="_blank" rel="noopener noreferrer">What’s RealMe?</a>
 
         <div class="realme_popup_wrapper realme_arrow_side_left">
             <!-- realme_popup -->

templates/SilverStripe/RealMe/Authenticator/LoginForm/RealMeLoginButton.ss

@@ -1,4 +1,6 @@
 <span class="realme_button_padding">
-    $Label
-    <% if ShowNewWindowIcon %><span class="realme_icon_new_window"></span><% end_if %> <span class="realme_icon_padlock"></span>
+    <span class="realme_button_login-icon"></span>
+    <span class="realme_button_login-text">
+        $Label <% if $ShowNewWindowIcon %><span class="realme_icon_new_window"></span><% end_if %></span>
+    </span>
 </span>

templates/SilverStripe/RealMe/Authenticator/LoginForm_secondary.ss

@@ -43,7 +43,7 @@ or directly in your css, e.g. .realme_popup {width: 450px}
     <a href="{$BaseHref}Security/login#RealMeLoginForm_LoginForm" class="realme_login realme_pipe">Login <span class="realme_icon_link"></span></a>
     <a href="https://www.account.realme.govt.nz/account/" class="realme_create_account realme_pipe">Create <span class="realme_icon_link"></span></a>
     <div class="realme_popup_position">
-        <a id="popup_trigger" href="http://www.realme.govt.nz" target="_blank" class="link whats_realme">?</a>
+        <a id="popup_trigger" href="http://www.realme.govt.nz" target="_blank" class="realme_link whats_realme">?</a>
         <div class="realme_popup_wrapper realme_arrow_top_left">
             <!-- realme_popup -->
             <div class="realme_popup">