fix style of header padding

kadena-community · Nov 7, 2024 · 4ab23b4 · 4ab23b4
1 parent f1aa870
commit 4ab23b4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -3,7 +3,9 @@ import {
   MonoBackupTable,
   MonoContacts,
   MonoContrast,
+  MonoDarkMode,
   MonoKey,
+  MonoLightMode,
   MonoLogout,
   MonoNetworkCheck,
   MonoSignature,
@@ -23,8 +25,6 @@ import {
 import {
   SideBarItem,
   SideBarItemsInline,
-  SideBarTree,
-  SideBarTreeItem,
   SideBar as SideBarUI,
   useLayout,
 } from '@kadena/kode-ui/patterns';
@@ -52,7 +52,7 @@ export const SideBar: FC = () => {
           <NetworkSelector
             showLabel={isExpanded}
             variant="outlined"
-            isCompact={!isExpanded}
+            isCompact
           />
         </SideBarItem>
       }
@@ -115,8 +115,8 @@ export const SideBar: FC = () => {
               <ContextMenu
                 trigger={
                   <Button
-                    isCompact={!isExpanded}
-                    variant="outlined"
+                    isCompact
+                    variant={isExpanded ? 'outlined' : 'transparent'}
                     endVisual={<MonoContacts />}
                   >
                     {isExpanded ? 'Profile' : undefined}
@@ -140,9 +140,11 @@ export const SideBar: FC = () => {
               label="Change theme"
             >
               <Button
-                variant={isExpanded ? 'transparent' : 'outlined'}
+                variant="transparent"
                 onPress={() => toggleTheme()}
-                startVisual={<MonoContrast />}
+                startVisual={
+                  theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
+                }
                 isCompact={!isExpanded}
               />
             </SideBarItem>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -244,12 +244,6 @@ export const listNotExpandedClass = style([
   }),
 ]);
 
-// globalStyle(`${listItemClass} button`, {
-//   justifyContent: 'flex-start',
-//   flex: 1,
-// });
-// globalStyle(`${listItemClass} a`, { justifyContent: 'flex-start', flex: 1 });
-
 export const headerWrapperClass = recipe({
   base: [
     {
@@ -266,10 +260,24 @@ export const headerWrapperClass = recipe({
   variants: {
     sideBarExpanded: {
       true: {
-        paddingInlineStart: sideBarWidth,
+        ...responsiveStyle({
+          xs: {
+            paddingInlineStart: token('spacing.md'),
+          },
+          md: {
+            paddingInlineStart: sideBarWidth,
+          },
+        }),
       },
       false: {
-        paddingInlineStart: sideBarMinWidth,
+        ...responsiveStyle({
+          xs: {
+            paddingInlineStart: token('spacing.md'),
+          },
+          md: {
+            paddingInlineStart: sideBarMinWidth,
+          },
+        }),
       },
     },
   },