Fix colour scheme on help

Change-Id: Iade412876c698de80761132026ed35ceb4ccd507 Signed-off-by: Jago Gardiner <jagogardiner@gmail.com>
jagogardiner · Aug 7, 2023 · f96713f · f96713f
1 parent 07bc4de
commit f96713f
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 6 deletions.
diff --git a/.sass-cache/aa4ff48802291156fbea6092a037d888e8941d7f/style.scssc b/.sass-cache/aa4ff48802291156fbea6092a037d888e8941d7f/style.scssc
diff --git a/src/css/style.css b/src/css/style.css
diff --git a/src/css/style.css.map b/src/css/style.css.map
diff --git a/src/help.html b/src/help.html
@@ -31,32 +31,32 @@
                     <div class="justify-content-left">
                         <div class="btn-group-vertical" role="group">
                             <!-- Square button design -->
-                            <button type="button" class="btn-nhs btn-outline-secondary mt-3" id="help1-btn"><svg
+                            <button type="button" class="btn-nhs-help btn-outline-secondary mt-3" id="help1-btn"><svg
                                     xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                     class="bi bi-house" viewBox="0 0 16 16">
                                     <path
                                         d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
                                 </svg>
                                 <br />Help - home</button>
                             </button>
-                            <button type="button" class="btn-nhs btn-outline-secondary mt-3" id="help2-btn"><svg
+                            <button type="button" class="btn-nhs-help btn-outline-secondary mt-3" id="help2-btn"><svg
                                     xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                                     class="bi bi-house" viewBox="0 0 16 16">
                                     <path
                                         d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z" />
                                 </svg>
                                 <br />Patient help</button>
                             </button>
-                            <button type="button" class="btn-nhs btn-outline-secondary mt-3" id="help3-btn"><svg
+                            <button type="button" class="btn-nhs-help btn-outline-secondary mt-3" id="help3-btn"><svg
                                     class="nhsuk-icon nhsuk-icon__plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                     aria-hidden="true" height="34" width="34">
                                     <circle cx="12" cy="12" r="10"></circle>
                                     <path fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10"
                                         stroke-width="2" d="M12 8v8M8 12h8"></path>
                                 </svg>
                                 <br />Drug view help</button>
-                            <button type="button" class="btn-nhs btn-outline-secondary mt-3" id="help4-btn">
-                                <i class="bi bi-graph-up btn-nhs-html"></i>
+                            <button type="button" class="btn-nhs-help btn-outline-secondary mt-3" id="help4-btn">
+                                <i class="bi bi-graph-up btn-nhs-html-help"></i>
                                 <br />Statistics help
                             </button>
                         </div>

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -104,6 +104,33 @@ body {
     width: 80px;
 }
 
+.btn-nhs-help {
+    border: 2px solid $color-nhs-green;
+    background-color: $color-nhs-grey-lighter;
+    // Text colour
+    color: black;
+    // Text size and weight
+    font-size: 0.8rem;
+    font-weight: light;
+
+    // Set svg colour
+    svg {
+        fill: $color-nhs-green;
+    }
+
+    // Hover
+    &:hover {
+        background-color: $color-nhs-green;
+        color: $color-nhs-grey-lighter;
+
+        svg {
+            fill: $color-nhs-grey-lighter;
+        }
+    }
+
+    height: 80px;
+    width: 80px;
+}
 #fader {
     opacity: 0.8;
     background: black !important;
@@ -212,3 +239,19 @@ body {
             }
         }
 }
+
+.btn-nhs-html-help {
+    font-size: 32px;
+    fill: $color-nhs-green;
+    color: $color-nhs-green;
+
+    // Hover
+    &:hover {
+        background-color: $color-nhs-green;
+        color: $color-nhs-grey-lighter;
+
+        svg {
+            fill: $color-nhs-grey-lighter;
+        }
+    }
+}