Theme selection UI fix (#1033)

* UI ready * grid fix Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · May 21, 2021 · 8fb1499 · 8fb1499
1 parent f811e36
commit 8fb1499
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/files-ui/src/Components/Modules/Settings/Profile.tsx b/packages/files-ui/src/Components/Modules/Settings/Profile.tsx
@@ -185,8 +185,6 @@ const ProfileView = () => {
       <Grid
         item
         xs={12}
-        sm={10}
-        md={8}
       >
         <div className={classes.container}>
           <div
@@ -322,7 +320,7 @@ const ProfileView = () => {
               </Button>
             </div>
           </div> */}
-          <div>
+          <div className={classes.profileBox}>
             <Typography
               variant='h4'
               component='h4'
@@ -339,8 +337,8 @@ const ProfileView = () => {
             <Grid container>
               <Grid item
                 xs={12}
-                sm={12}
-                md={6}>
+                lg={6}
+              >
                 <label className={clsx(classes.themeBox, classes.themeBoxDark)}>
                   <RadioInput
                     value='dark'
@@ -355,8 +353,8 @@ const ProfileView = () => {
               </Grid>
               <Grid item
                 xs={12}
-                sm={12}
-                md={6}>
+                lg={6}
+              >
                 <label className={clsx(classes.themeBox, classes.themeBoxLight)}>
                   <RadioInput
                     value='light'

diff --git a/packages/files-ui/src/Components/Modules/Settings/index.tsx b/packages/files-ui/src/Components/Modules/Settings/index.tsx
@@ -64,15 +64,18 @@ const useStyles = makeStyles(({ constants, breakpoints, palette }: ITheme) =>
     },
     tabPane: {
       flex: 1,
-      padding: `${constants.generalUnit * 2}px ${constants.generalUnit * 5}px`,
+      padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 4}px`,
       "&.securityPane": {
         [breakpoints.down("lg")]: {
           paddingLeft: constants.generalUnit,
           paddingRight: constants.generalUnit
         }
       },
       [breakpoints.down("md")]: {
-        padding: 0
+        padding: `${constants.generalUnit * 2}px`
+      },
+      [breakpoints.down("md")]: {
+        padding: `${constants.generalUnit * 2}px 0`
       }
     },
     lockIcon : {