update styling and approve visual test

precious-onyenaucheya-ons · precious-onyenaucheya-ons · commit 5a42c2157a94 · 2025-01-30T13:01:11.000Z
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:03c53a0bcd6fe29cd4c9fe59227cc4f2612f00f0a08eb0c2a53d7334c241fcd6
+oid sha256:01959903ca679fada822d0cdbca4b9586a3c88dc41e5573c2d4323228f2fa85e
 size 14266
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:65f329afc04fde5ff5f541b2712b183accab1446bd76d6944042949de4413fab
+oid sha256:4393dc5abf933668beb329d992fa241cc63a0593e1aa4919ba19325818a6df74
 size 9069
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fb39535ce7f5f1affd77107ef3155d32b4197e7b0805065b221d379d05f9e88f
+oid sha256:2533b87bea0a2cb81ef6765fab1a6033a1b6768a6c43c84ec0d7a8475c28e84a
 size 5422
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6b5c02bf52c2bf4ca40b07f2d557a7015c19aafd5f753a8e6b33e8fc252033c1
+size 14808
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4c71e9af0be9102e1d6cc30a3cb97d74751afeaf3ec1b69c2abe75f0dd0edc1
+size 9611
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cb54e407e52ec6bc3519f36e9019f211e5c290b62f547d14ef6122c19d66b539
+size 5964
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -580,6 +580,7 @@ $button-shadow-size: 3px;
         display: flex;
         height: 67px;
         padding: 0 1.5rem;
+        border-bottom: 4px solid rgb(0 0 0 / 0%);
         @include mq(l) {
             height: 72px;
         }
@@ -603,6 +604,16 @@ $button-shadow-size: 3px;
         }
     }
 
+    &--search-icon:focus {
+        background-color: var(--ons-color-focus);
+        border-color: var(--ons-color-black);
+    }
+
+    &--search-icon:hover {
+        background-color: var(--ons-color-focus);
+        border-color: var(--ons-color-text-link-hover);
+    }
+
     &--search-icon:focus & {
         &__inner {
             background: none;
@@ -618,7 +629,9 @@ $button-shadow-size: 3px;
 
     &--search-icon:active,
     &--search-icon[aria-expanded='true'] {
+        border-bottom: none;
         background-color: var(--ons-color-branded-tint);
+        border-color: var(--ons-color-text-link-hover);
     }
 
     &--search-icon:hover &,
