- Nav bar updated to look like brand redesign.

StenaIT · Sep 6, 2023 · df44a27 · df44a27
1 parent c5d6392
commit df44a27
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 25 deletions.
diff --git a/packages/panels/src/components/nav-bar/NavBar.module.css b/packages/panels/src/components/nav-bar/NavBar.module.css
@@ -1,6 +1,6 @@
 .navBar {
   /* Theme vars */
-  --swui-navbar-background-color: var(--lhds-color-blue-500);
+  --swui-navbar-background-color: var(--lhds-color-ui-50);
   --swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);
   --swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);
   --swui-navbar-item-background-color-selected-hover: var(

diff --git a/packages/panels/src/components/nav-bar/NavBarButton.module.css b/packages/panels/src/components/nav-bar/NavBarButton.module.css
@@ -1,19 +1,19 @@
 .navBarButton {
   /* Theme vars */
-  --swui-nav-bar-button-text-color: var(--lhds-color-ui-50);
+  --swui-nav-bar-button-text-color: var(--lhds-color-blue-600);
   --swui-nav-bar-button-background-color: transparent;
-  --swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);
-  --swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);
-  --swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);
-  --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);
+  --swui-nav-bar-button-background-color-hover: var(--lhds-color-ui-100);
+  --swui-nav-bar-button-background-color-focus: var(--lhds-color-ui-200);
+  --swui-nav-bar-button-background-color-active: var(--lhds-color-ui-200);
+  --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-200);
   --swui-nav-bar-button-background-color-selected-hover: var(
-    --lhds-color-blue-700
+    --lhds-color-blue-100
   );
   --swui-nav-bar-button-background-color-selected-focus: var(
-    --lhds-color-blue-700
+    --lhds-color-blue-300
   );
   --swui-nav-bar-button-background-color-selected-active: var(
-    --lhds-color-blue-800
+    --lhds-color-blue-200
   );
 
   /* Flatbutton overrrides */

diff --git a/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx b/packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx
@@ -20,7 +20,7 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
   children,
   ...navBarButtonProps
 }) => {
-  const [isOpen, open, close] = useBoolean(false);
+  const [isOpen, , close, toggle] = useBoolean(false);
 
   return (
     <Popover
@@ -34,7 +34,7 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
         </>
       }
     >
-      <NavBarButton {...navBarButtonProps} onClick={open} />
+      <NavBarButton {...navBarButtonProps} onClick={toggle} />
     </Popover>
   );
 };
diff --git a/packages/panels/src/components/nav-bar/NavBarSearchField.module.css b/packages/panels/src/components/nav-bar/NavBarSearchField.module.css
@@ -11,7 +11,7 @@
   --swui-textinput-animation-time: var(--swui-animation-time-fast);
 
   --swui-textinput-placeholder-color: var(--lhds-color-ui-500);
-  --swui-textinput-bg-color: var(--lhds-color-blue-600);
+  --swui-textinput-bg-color: var(--lhds-color-blue-50);
   --swui-textinput-border-color: transparent;
   --swui-textinput-border-color-hover: transparent;
 

diff --git a/packages/panels/src/components/nav-bar/NavBarSideMenuButton.module.css b/packages/panels/src/components/nav-bar/NavBarSideMenuButton.module.css
@@ -1,15 +1,15 @@
 .sidebarMenuButton {
   /* Theme vars */
-  --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);
-  --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);
+  --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-blue-600);
+  --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-ui-50);
   --swui-nav-bar-side-menu-button-background-color-hover: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-100
   );
   --swui-nav-bar-side-menu-button-background-color-focus: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-200
   );
   --swui-nav-bar-side-menu-button-background-color-active: var(
-    --lhds-color-blue-700
+    --lhds-color-ui-200
   );
 
   /* State vars */
@@ -53,6 +53,8 @@
   }
 
   .icon {
-    color: var(--swui-nav-bar-side-menu-button-text-color);
+    path {
+      fill: var(--swui-nav-bar-side-menu-button-text-color);
+    }
   }
 }
diff --git a/packages/panels/src/components/nav-bar/NavBarUserButton.module.css b/packages/panels/src/components/nav-bar/NavBarUserButton.module.css
@@ -1,12 +1,10 @@
 .navBarUserButton {
   /* Theme vars */
-  --swui-nav-bar-user-button-text-color: var(--lhds-color-ui-50);
-  --swui-nav-bar-user-button-background-color: var(--lhds-color-blue-700);
-  --swui-nav-bar-user-button-background-color-hover: var(--lhds-color-blue-900);
-  --swui-nav-bar-user-button-background-color-focus: var(--lhds-color-blue-700);
-  --swui-nav-bar-user-button-background-color-active: var(
-    --lhds-color-blue-800
-  );
+  --swui-nav-bar-user-button-text-color: var(--lhds-color-blue-600);
+  --swui-nav-bar-user-button-background-color: var(--lhds-color-ui-50);
+  --swui-nav-bar-user-button-background-color-hover: var(--lhds-color-ui-100);
+  --swui-nav-bar-user-button-background-color-focus: var(--lhds-color-ui-100);
+  --swui-nav-bar-user-button-background-color-active: var(--lhds-color-ui-200);
 
   /* FlatButton overrides */
   --swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);