DBC22-951: Fix focus state of buttons and mobile menu navigation (#242)

bcgov · Jan 17, 2024 · 292a587 · 292a587
1 parent 9bc28aa
commit 292a587
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/src/frontend/src/Components/Filters.js b/src/frontend/src/Components/Filters.js
@@ -104,7 +104,7 @@ export default function Filters(props) {
   return (
     <div className="filters-component">
       <Button
-        variant="outline"
+        variant="primary"
         className={'map-btn open-filters' + (open ? ' open' : '')}
         aria-label="open filters options"
         onClick={() => {

diff --git a/src/frontend/src/Components/Filters.scss b/src/frontend/src/Components/Filters.scss
@@ -1,13 +1,6 @@
 @import "../styles/variables.scss";
 
 button.btn.open-filters {
-  border: 1px solid $Type-Link;
-  border-radius: 4px;
-  box-shadow: 0px 1.9368422031402588px 4.3578948974609375px 0px #00000021;
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: $Type-Link;
-
   svg {
     margin-right: 8px;
   }
@@ -16,6 +9,12 @@ button.btn.open-filters {
     background: $Type-Link;
     color: #FFFFFF;
   }
+
+  // &:focus {
+  //   border-color: #8099b3;
+  //   outline: 0;
+  //   box-shadow: 0 0 0 0.25rem rgba(1, 51, 102, 0.25);
+  // }
 }
 
 .filters {

diff --git a/src/frontend/src/Header.scss b/src/frontend/src/Header.scss
@@ -42,19 +42,23 @@
 
 
 		&:not(.collapsed) {
+			.line {
+				margin-left: 6px;
+			}
+
 			.line1 {
 			display: block;
 			transform: rotate(45deg);
-		}
-
-		.line2 {
-			opacity: 0;
-		}
-
-		.line3 {
-			display: block;
-			transform: rotate(-45deg);
-		}
+			}
+		
+			.line2 {
+				opacity: 0;
+			}
+		
+			.line3 {
+				display: block;
+				transform: rotate(-45deg);
+			}
 		}
 
 		&:focus {

diff --git a/src/frontend/src/styles/bootstrap-customizations.scss b/src/frontend/src/styles/bootstrap-customizations.scss
@@ -40,7 +40,9 @@ $danger: $Error;
   }
 
   &:active, &:focus {
-    outline: 2px solid $Focus;
+    outline: 1px solid $Focus;
+    border: rgb(46, 93, 215) solid 2px;
+    background-color: hsla(0, 0%, 60%, 0.15);
   }
 }
 
@@ -56,8 +58,9 @@ $danger: $Error;
 
   &:active, &:focus, &.active, &.focus, &.show {
     color: $Grey110;
-    border-color: $Focus;
-    background: none;
+    outline: 1px solid $Focus;
+    border: rgb(46, 93, 215) solid 2px;
+    background-color: hsla(0, 0%, 60%, 0.15);
   }
 }
 
@@ -75,6 +78,15 @@ $danger: $Error;
   }
 }
 
+//Hamburger menu
+.navbar-toggler {
+  &:focus {
+    outline: 1px solid $Focus;
+    border: rgb(46, 93, 215) solid 2px;
+    background-color: hsla(0, 0%, 60%, 0.15);
+  }
+}
+
 // Tabs
 .nav-tabs {
   border: none;