From 4ab23b4ee39422061cae9d9fab3ef1e8389a856e Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Thu, 7 Nov 2024 15:30:57 +0100
Subject: [PATCH] fix style of header padding

---
 .../dev-wallet/src/App/Layout/SideBar.tsx     | 16 +++++++------
 .../src/patterns/SideBarLayout/sidebar.css.ts | 24 ++++++++++++-------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
index 26af24fdcd..190fb819ba 100644
--- 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
index 5190095ac8..2b415c6763 100644
--- 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,
+          },
+        }),
       },
     },
   },