refactor: adapt appearance

graasp · Jul 8, 2022 · d2b33e8 · d2b33e8
1 parent 8bbdf64
commit d2b33e8
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/components/member/AvatarSetting.js b/src/components/member/AvatarSetting.js
@@ -17,10 +17,15 @@ import {
 import { MEMBER_PROFILE_AVATAR_UPLOAD_BUTTON_CLASSNAME } from '../../config/selectors';
 import StatusBar from '../file/StatusBar';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   thumbnail: {
     textAlign: 'right',
   },
+  mainContainer: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    margin: theme.spacing(1, 0),
+  },
 }));
 
 const AvatarSetting = ({ user }) => {
@@ -109,10 +114,10 @@ const AvatarSetting = ({ user }) => {
       {uppy && (
         <StatusBar uppy={uppy} handleClose={handleClose} open={openStatusBar} />
       )}
-      <Grid container justifyContent="space-between">
+      <Grid container spacing={3} className={classes.mainContainer}>
         <Grid item sm={6}>
           <Typography variant="h5">{t('Thumbnail')}</Typography>
-          <Typography variant="body">{t('Update thumbnail')}</Typography>
+          <Typography variant="body1">{t('Update thumbnail')}</Typography>
           <input
             type="file"
             accept="image/*"
@@ -123,7 +128,7 @@ const AvatarSetting = ({ user }) => {
             className={MEMBER_PROFILE_AVATAR_UPLOAD_BUTTON_CLASSNAME}
           />
         </Grid>
-        <Grid item sm={6} className={classes.thumbnail}>
+        <Grid item sm={6} xs={12}>
           <Avatar
             id={userId}
             extra={user?.get('extra')}