Improve styling of sidebar (#17072)

airbytehq · Sep 26, 2022 · 871929d · 871929d
1 parent e3553fe
commit 871929d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.module.scss
@@ -23,4 +23,8 @@ $sidebar-workspace-font-weight: 400;
   text-overflow: ellipsis;
   text-align: center;
   outline: none;
+
+  &:focus-visible {
+    outline: 1px solid colors.$white;
+  }
 }
diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.module.scss b/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.module.scss
@@ -30,7 +30,12 @@
     background-color: colors.$dark-blue-600;
   }
 
-  &:hover:not(.open) {
+  &:focus-visible {
+    outline: 1px solid colors.$white;
+  }
+
+  &:hover:not(.open),
+  &:focus-visible:not(.open) {
     background-color: colors.$dark-blue-800;
   }
 }
@@ -71,7 +76,7 @@
     }
 
     &.active {
-      background-color: colors.$grey-50;
+      background-color: colors.$grey-100;
     }
   }
 }