M app/src/containers/Profile/EditPassword.js → app/src/containers/Profile/EditPassword.js

@@ -1,5 +1,6 @@ 
 import React from 'react';
 import Card from '@material-ui/core/Card';
+import {makeStyles} from '@material-ui/core/styles';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
@@ -16,7 +17,7 @@ save,
   cancel,
 }) => {
   const {t} = useTranslation();
-
+  const classes = useStyles();
   return (
     <form
       onSubmit={evt => {
@@ -51,7 +52,7 @@ id="ProfileNewPassword"
             name="new_password"
           />
         </CardContent>
-        <CardActions>
+        <CardActions className={classes.actions}>
           <Button type="button" onClick={cancel}>
             {t('profile.actions.cancel')}
           </Button>
@@ -69,4 +70,9 @@ </form>
   );
 };
 
+const useStyles = makeStyles(theme => ({
+  actions: {
+    justifyContent: 'flex-end',
+  },
+}));
 export default EditPassword;

M app/src/containers/Profile/index.js → app/src/containers/Profile/index.js

@@ -106,18 +106,6 @@ })}
             onChange={setEmail}
             isEditing={isEditing}
           />
-          {isEditing && (
-            <Button
-              type="button"
-              className={classes.changePassword}
-              onClick={evt => {
-                if (evt.preventDefault) evt.preventDefault();
-                setIsEditingPassword(true);
-              }}
-            >
-              {t('profile.actions.change_password')}
-            </Button>
-          )}
         </CardContent>
         <CardActions className={classes.actions}>
           {!isEditing && (
@@ -136,14 +124,25 @@ </Button>
             </>
           )}
           {isEditing && (
-            <Button
-              type="submit"
-              color="primary"
-              onClick={() => setIsEditing(false)}
-              variant="contained"
-            >
-              {t('profile.actions.save')}
-            </Button>
+            <>
+              <Button
+                type="button"
+                onClick={evt => {
+                  if (evt.preventDefault) evt.preventDefault();
+                  setIsEditingPassword(true);
+                }}
+              >
+                {t('profile.actions.change_password')}
+              </Button>
+              <Button
+                type="submit"
+                color="primary"
+                onClick={() => setIsEditing(false)}
+                variant="contained"
+              >
+                {t('profile.actions.save')}
+              </Button>
+            </>
           )}
         </CardActions>
       </Card>
@@ -154,9 +153,7 @@ 
 const useStyles = makeStyles(theme => ({
   actions: {
     marginTop: theme.spacing(2),
-  },
-  changePassword: {
-    marginTop: theme.spacing(2),
+    justifyContent: 'flex-end',
   },
 }));
 export default Profile;