Minor adjustments to GDS 3 styling

Author: LucaDelBuono

assets/css/hmcts-webchat-gds-v3.css

@@ -1128,7 +1128,7 @@ input[type="number"] {
 
 button,
 input[type="submit"] {
-  background-color: #00823b !important;
+  background-color: #00703c !important;
   background-image: none !important;
   border-color: transparent !important;
   color: #ffffff !important;
@@ -1137,10 +1137,30 @@ input[type="submit"] {
   width: calc(100% - 40px) !important;
 }
 
-button:hover, button:focus,
-input[type="submit"]:hover,
+button:hover,
+input[type="submit"]:hover {
+  background-color: #005a30 !important;
+}
+
+button:focus,
 input[type="submit"]:focus {
-  background-color: #00682f !important;
+  border-color: #ffdd00 !important;
+  box-shadow: inset 0 0 0 1px #ffdd00 !important;
+  outline: 3px solid transparent;
+}
+
+button:focus:not(:active):not(:hover),
+input[type="submit"]:focus:not(:active):not(:hover) {
+  background-color: #ffdd00 !important;
+  border-color: #ffdd00 !important;
+  box-shadow: 0 2px 0 #0b0c0c !important;
+  color: #0b0c0c !important;
+}
+
+button:active,
+input[type="submit"]:active {
+  box-shadow: 0 2px 0 #002d18;
+  outline: 0;
 }
 
 input[type="text"],

assets/javascript/hmcts-webchat.js

@@ -44,7 +44,7 @@ function parseText(text) {
 }
 
 function webchat_init(customParams) {
-    const version = '0.3.4';
+    const version = '0.3.5';
     const requiredParams = [
         'uuid',
         'tenant',

assets/sass/hmcts-webchat-gds-v3.scss

@@ -7,7 +7,7 @@
 @import "node_modules/govuk-frontend-3/govuk/components/label/label";
 @import "node_modules/govuk-frontend-3/govuk/components/textarea/textarea";
 
-$govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
+$govuk-button-colour: govuk-colour("green");; // sass-lint:disable no-color-literals
 $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
 $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
 $govuk-button-text-colour: govuk-colour("white");
@@ -24,10 +24,27 @@ input[type="submit"] {
   margin-top: 10px !important;
   width: calc(100% - 40px) !important;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: $govuk-button-hover-colour !important;
   }
+
+  &:focus {
+    border-color: govuk-colour("yellow") !important;
+    box-shadow: inset 0 0 0 1px govuk-colour("yellow") !important;
+    outline: 3px solid transparent;
+
+    &:not(:active):not(:hover) {
+      background-color: govuk-colour("yellow") !important;
+      border-color: govuk-colour("yellow") !important;
+      box-shadow: 0 2px 0 govuk-colour("black") !important;
+      color: govuk-colour("black") !important;
+    }
+  }
+
+  &:active {
+    box-shadow: 0 2px 0 $govuk-button-shadow-colour;
+    outline: 0;
+  }
 }
 
 input[type="text"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ctsc-web-chat",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "HMCTS CTSC Web Chat",
   "repository": {
     "type": "git",