frontend: Small ui adjustments

- Change color of collapse button on left - Change style of collapse button on right to be within panel - Update dark/light toggle to be smaller overall
Igalia · Jan 29, 2024 · f2d09b3 · f2d09b3
1 parent f20eadf
commit f2d09b3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/frontend/src/ui/CollapseButton/CollapseButton.tsx b/frontend/src/ui/CollapseButton/CollapseButton.tsx
@@ -13,11 +13,12 @@ type CollapseButtonProps = {
 export const CollapseButton = ({ onClick, sx, iconSx }: CollapseButtonProps) => {
   return (
     <Button
+      variant="soft"
+      color="neutral"
       size="sm"
       onClick={onClick}
       sx={{
         borderRadius: '50%',
-        bgcolor: 'white',
         width: 32,
         height: 32,
         alignItems: 'center',

diff --git a/frontend/src/ui/ContentSidebar/ContentSidebar.tsx b/frontend/src/ui/ContentSidebar/ContentSidebar.tsx
@@ -13,23 +13,26 @@ export const ContentSidebar = ({ children, expanded, toggleContentBar }: Content
   return (
     <Box
       sx={{
-        height: { xs: expanded ? '60px' : '320px', sm: '100vh' },
+        height: { xs: expanded ? '50vh' : '33px', sm: '100vh' },
         width: { xs: '100vw', sm: expanded ? '320px' : '60px' },
         transition: { xs: 'height 0.6s', sm: 'width 0.6s' },
         bgcolor: 'white',
         border: '1px solid #D2D2D4',
         position: { xs: 'relative', sm: 'fixed' },
         zIndex: 1,
         top: { xs: 'unset', sm: '0' },
-        right: 0
+        right: 0,
+        overflowY: 'auto',
+        overflowX: 'hidden'
       }}
     >
       <CollapseButton
         sx={{
-          left: { xs: '0px', sm: '-16px' },
-          right: { xs: '0px', sm: 'unset' },
-          top: { xs: '-16px', sm: '61px' },
-          margin: '0 auto'
+          borderRadius: 0,
+          margin: '0 auto',
+          width: '100%',
+          position: 'unset',
+          boxShadow: '0px 2px 4px #00000029',
         }}
         iconSx={{
           transform: { xs: 'rotateZ(90deg)', sm: 'rotateZ(180deg)' },

diff --git a/frontend/src/ui/Sidebar/DarkModeSwitch.tsx b/frontend/src/ui/Sidebar/DarkModeSwitch.tsx
@@ -16,7 +16,7 @@ type SwitchComponentProps = {
 }
 
 const TrackText = ({ icon: Icon, children, sx }: SwitchComponentProps) => (
-  <Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', gap: '24px', ...sx }}>
+  <Box sx={{ display: { xs: 'none'}, alignItems: 'center', gap: '24px', ...sx }}>
     <Icon color="#00396d" />
     <Typography sx={{ color: '#b3cfe9' }}>{children}</Typography>
   </Box>
@@ -36,7 +36,7 @@ const SwitchThumb = ({ icon: Icon, children }: SwitchComponentProps) => (
     }}
   >
     <Icon color="#b3cfe9" />
-    <Typography sx={{ display: { xs: 'none', sm: 'block' }, color: '#F0F3F7' }}>
+    <Typography sx={{ display: { xs: 'none'}, color: '#F0F3F7' }}>
       {children}
     </Typography>
   </Box>
@@ -83,12 +83,12 @@ export const DarkModeSwitch = ({ sx }: DarkModeSwitchProps) => {
             '--Switch-trackBackground': '#030D1A'
           }
         },
-        '--Switch-thumbWidth': { xs: '40px', sm: '148px' },
-        '--Switch-thumbSize': { xs: '20px', sm: '30px' },
-        '--Switch-trackWidth': { xs: '60px', sm: '260px' },
-        '--Switch-thumbRadius': { xs: '', sm: '20px' },
-        '--Switch-trackHeight': { xs: '', sm: '40px' },
-        '--Switch-trackRadius': { xs: '', sm: '25px' },
+        '--Switch-thumbWidth': { xs: '40px'},
+        '--Switch-thumbSize': { xs: '20px' },
+        '--Switch-trackWidth': { xs: '60px' },
+        '--Switch-thumbRadius': { xs: '' },
+        '--Switch-trackHeight': { xs: '' },
+        '--Switch-trackRadius': { xs: '' },
         ...sx
       }}
     />

diff --git a/frontend/src/ui/Sidebar/Sidebar.tsx b/frontend/src/ui/Sidebar/Sidebar.tsx
@@ -82,6 +82,7 @@ export const Sidebar = ({ expanded, toggleSidebar }: SidebarProps) => {
             transition: 'transform 0.6s',
             transformOrigin: '20px',
             mr: '4px',
+            mb: '9px',
             gridArea: 'switch',
             ...(!expanded && {
               transform: { sm: 'rotate(-90deg)' }