Fix/app components adjustments (#571)

hazelcast · Sep 17, 2024 · 22c7910 · 22c7910
1 parent 56b3608
commit 22c7910
Show file tree

Hide file tree

Showing 14 changed files with 6 additions and 4 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_Default.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_Disabled_Select_Cluster.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_Disabled_Select_Cluster.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_With_Badge.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_With_Badge.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_Without_Menu.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_Without_Menu.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Header_Without_Select_Cluster.png b/packages/ui/.loki/reference/chrome_minimal_App_Header_Without_Select_Cluster.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed_With_Scroll.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Collapsed_With_Scroll.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Default.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_Default.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_With_Scroll.png b/packages/ui/.loki/reference/chrome_minimal_App_Sidebar_With_Scroll.png
diff --git a/packages/ui/src/AppHeader/AppHeader.module.scss b/packages/ui/src/AppHeader/AppHeader.module.scss
@@ -8,11 +8,12 @@
   height: 59px;
   box-sizing: border-box;
   flex-direction: row;
+  font-size: c.$fontSizeBodySmall;
   width: 100%;
   padding: 0 c.$grid * 5;
   overflow-x: auto;
   flex-shrink: 0;
-  gap: c.$grid * 5;
+  gap: c.$grid * 7.5;
 }
 
 .name {

diff --git a/packages/ui/src/AppHeader/AppHeaderLogo/AppHeaderLogo.module.scss b/packages/ui/src/AppHeader/AppHeaderLogo/AppHeaderLogo.module.scss
@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 17px;
+  height: 20px;
   overflow: hidden;
 
   .link {

diff --git a/packages/ui/src/AppHeader/AppHeaderLogo/AppHeaderLogo.tsx b/packages/ui/src/AppHeader/AppHeaderLogo/AppHeaderLogo.tsx
diff --git a/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx b/packages/ui/src/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx
@@ -22,6 +22,7 @@ export const AppHeaderMenu = ({ children }: AppHeaderMenuProps) => {
         color="light"
         iconSize="medium"
         onClick={toggle}
+        capitalize={false}
         iconRight={MenuIcon}
         ref={setAnchorElement}
         data-test="app-header-menu-toggle"

diff --git a/packages/ui/src/AppSidebar/AppSidebar.module.scss b/packages/ui/src/AppSidebar/AppSidebar.module.scss
@@ -49,7 +49,7 @@ $offset: c.$grid * 4;
     margin-top: auto;
     word-break: break-all;
     padding: 0 c.$grid * 4 c.$grid * 2.5;
-    font-size: c.$fontSizeBodySmall;
+    font-size: c.$fontSizeBodySmaller;
   }
 
   &.collapsed {