fix: improve sidebar ui

slater-notes · Apr 30, 2021 · 74c12b9 · 74c12b9
1 parent 048585c
commit 74c12b9
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/src/components/NotifBox/index.tsx b/src/components/NotifBox/index.tsx
@@ -12,7 +12,8 @@ const useStyles = makeStyles((theme) => ({
   container: {
     backgroundColor: grey[800],
     color: theme.palette.primary.contrastText,
-    padding: `${theme.spacing(2.5)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(2),
+    margin: `0 -${theme.spacing(2)}px`,
     borderRadius: theme.shape.borderRadius,
   },
 }));

diff --git a/src/components/SidebarComponents/FolderGroupTitle.tsx b/src/components/SidebarComponents/FolderGroupTitle.tsx
@@ -14,7 +14,7 @@ const FolderGroupTitle = (props: Props) => {
   const classes = useStyles();
 
   return (
-    <List>
+    <List disablePadding>
       <ListItem className={classes.listItem}>{props.title}</ListItem>
       <ListItemSecondaryAction>
         <DefaultIconButton
@@ -29,8 +29,12 @@ const FolderGroupTitle = (props: Props) => {
 
 const useStyles = makeStyles((theme) => ({
   listItem: {
+    fontSize: '0.9rem',
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.text.secondary,
+
     '&.MuiListItem-gutters': {
-      padding: `${theme.spacing(0.8)}px ${theme.spacing(3)}px`,
+      padding: theme.spacing(2),
     },
   },
 }));

diff --git a/src/containers/Sidebar/Files/FilterFiles.tsx b/src/containers/Sidebar/Files/FilterFiles.tsx
@@ -26,8 +26,7 @@ const FilterFiles = (props: Props) => {
 
 const useStyles = makeStyles((theme) => ({
   formControl: {
-    marginTop: `-${theme.spacing(3)}px`,
-    marginBottom: `${theme.spacing(3)}px`,
+    marginTop: theme.spacing(2),
   },
 }));
 

diff --git a/src/containers/Sidebar/Files/ListGroup.tsx b/src/containers/Sidebar/Files/ListGroup.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
     background: 'none !important',
 
     '&.MuiListItem-gutters': {
-      padding: `0 ${theme.spacing(1)}px`,
+      padding: `0 ${theme.spacing(2)}px`,
     },
 
     '&.Mui-selected $listItemInner': {

diff --git a/src/containers/Sidebar/Files/index.tsx b/src/containers/Sidebar/Files/index.tsx
@@ -223,14 +223,12 @@ const useStyles = makeStyles((theme) => ({
   },
 
   titleContainer: {
-    padding: `0 ${theme.spacing(3)}px`,
+    padding: theme.spacing(2),
   },
 
   title: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: `${theme.spacing(3)}px 0`,
-    marginBottom: theme.spacing(2),
   },
 }));
 

diff --git a/src/containers/Sidebar/Folders/ListGroup.tsx b/src/containers/Sidebar/Folders/ListGroup.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
     background: 'none !important',
 
     '&.MuiListItem-gutters': {
-      padding: `0 ${theme.spacing(1)}px`,
+      padding: `0 ${theme.spacing(2)}px`,
     },
 
     '&.Mui-selected $listItemInner': {