create add image UX and update form spacing

.firebase/hosting.YnVpbGQ.cache

@@ -1,41 +1,41 @@
-asset-manifest.json,1597337967865,bcb4aaca9d2313758c7467276c3c0ab227b77d1264b9ce5dc56c1991accdc5dd
-index.html,1597337967845,89507f35f1de0039be1ada614b29555dbd1945398ec5f43cf0ba9e5dc3a08cad
-favicon.ico,1597337948389,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
-precache-manifest.78b4fec64029dd8452c04b06abad67a2.js,1597337967845,314a09ea8933679d503921a488cce044b65fe121b9c71415104b7ce899b4fadb
-logo192.png,1597337948399,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
-manifest.json,1597337948401,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-robots.txt,1597337948401,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-service-worker.js,1597337967865,59dcfd11a4d1150c3f41edd43e5cdcdc67534417b5cb2bb9dfa62baf2b0341f0
-logo512.png,1597337948400,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
-static/css/2.2ce93ba3.chunk.css,1597337967864,7efb48234e99c3ad098c5e5ccb7c3abc055e66ee1323370a3b1056c86a892741
-static/css/2.2ce93ba3.chunk.css.map,1597337967865,daa96357482092e3955c525be2349a374445dd6f2e081534ad158e4241ef265e
-static/css/main.5ecd60fb.chunk.css,1597337967838,5573c72369cf5cd9c63d5779a485c5448d9d1285476a0b8938df3f9680fc645f
-static/css/main.5ecd60fb.chunk.css.map,1597337967865,685a1f6af79f427c9e8f633301e0ccd5fb6af4653c3bfe6d79346fb335a6c8fa
-static/js/runtime-main.09b85ec0.js,1597337967838,7ea86657435be43e755439ab7c7607340547dabb1582fba6a1fe4ac554aeaa28
-static/js/runtime-main.09b85ec0.js.map,1597337967865,e4d768d21411f9053f41f133507fdd11e5a0542ff774054cdc156e02c97fc2d7
-static/media/UploadIcon.1cedb6e9.svg,1597337967839,2b00764f28b0d3db6ad2747bc580dd988963aaac30c6f6dc61ae9c1ae71ef26d
-static/js/2.7b06e742.chunk.js.LICENSE.txt,1597337967868,9b8ee785322f2dbbf55f63d3582a2070df32f81832bc7425e270ca0a871a34c0
-static/media/empty-void.2378110c.svg,1597337967839,c9e274f7e8241e577755f0b1b4b84fbf696f27fb17636ffb5af7f3665f57d52c
-static/media/control-settings.6a47a680.svg,1597337967839,0d9235aab9877060213af98716e0993c5d5545f7f956b46dde7628f68aed2e2c
-static/media/hiding-in-trees.c9cdc1f1.svg,1597337967838,d1165211ac742f1449c8046be7d3a843ea8ffe257043c8444dd1773553c886de
-static/media/location-search.c46ea4fc.svg,1597337967839,94e1df564a73b77cdada614afdf8ba233c23fdfceaa6502eea31492170b3932f
-static/media/transfer-money.a0f26b4c.svg,1597337967839,d0bf2a31f91a9c5893028fc2b3c8aeb86e529b72b3737230db835e9c825b6c25
-static/media/news-megaphone.f4d0d54c.svg,1597337967839,b88b977e0d3af0b3f5936fce03d3cb091e1662b997bc0f3e4728f41180a200f4
-static/media/many-homes.d845869b.svg,1597337967839,d2b4b821e14da2759f06714760ed0eeba09f0fa9f74f9c91009ccc1cefc5058a
-static/media/woman-with-home-mountain.fbfbf632.svg,1597337967839,0f73a7e57627b762cb27761a0d51b6551631504d3c5056f76d198a4d89b3935a
-static/media/remote-work.7c5a71b7.svg,1597337967838,7e995cc05337631f7c3ed9acbde6a92b3f0d2bd2e925cb120fe54f1c83111a88
-assets/loading-spinner.gif,1597337948388,54f9e68f68f77bfd399a4e24649aef71729d628c83a1ebf33dbf486b1ca07fc4
-assets/img/bitmoji-neutral.png,1597337948385,0383387d5f001a9bcfd872e5924ee98f82fdcd2ae2e9a31d0cecc76e2a9c4892
-logo-big.webp,1597337948394,6f7f3beb4188068952500998cfbb9759534fc0c5f5c793e193e762a50929d006
-assets/img/bitmoji-location-pin.png,1597337948384,9e9752e8a94e654d1a834758fd2c74e0c47f08e406c35628e1363bf6e35028b6
-assets/img/bitmoji-smile.png,1597337948386,9dd4e45a61f431a22e15b153e7651309b41c6b576e0a1ae71e9d599d05f1e108
-logo-text.webp,1597337948399,5b965bc225171faab798c1a90e0c83b6f25a1b16e09898017377745cacda1005
-static/media/logo-big.17aa38cc.webp,1597337967838,6f7f3beb4188068952500998cfbb9759534fc0c5f5c793e193e762a50929d006
-assets/acasa-thumbnail.png,1597337948381,a3ef275f6b97b47b8d3c4757dd7fc81c67c900a77584777afaa701afe163c416
-static/media/conversation.0dd3c6da.svg,1597337967838,9d20aaeff5cdfcd0fc3b305556674840a337bce63d5f4580643df0c09264cb72
-static/js/main.26386e3a.chunk.js,1597337967839,69e6536df01f40ffedee3934ce720819abf938b46e783dfd2774357bf7db8d33
-logo-text.png,1597337948397,cf447478b26997103d1fdd495fbb47b3fc3751b223708cbcbdb6052e91b1ee57
-static/js/main.26386e3a.chunk.js.map,1597337967868,5761f7b557538fce9353d98f85afaa048c1fb73f3d727e4c17892d3ec98aa537
-logo-big.png,1597337948393,4634e68c7883f7c9fd5e1020ec7543a796cf56820071440f24438ead87288ca4
-static/js/2.7b06e742.chunk.js,1597337967865,7e8d616a32b10f7d3cd5f67b40d2eb69b74249c5440e3e00996d7b2d6327272e
-static/js/2.7b06e742.chunk.js.map,1597337967868,5f1eca40b9cc9af4176207695ef44b94f263de5e807cd26e5128e71e53a2d09e
+asset-manifest.json,1597339549349,ef104bc862c1eede5261140d5ea18c59fc52e23b25f8ea446dece3e72637c1ab
+favicon.ico,1597339521833,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
+index.html,1597339549348,438d613fa8ff130caf60cc651f9c8e96d153ea668efdc0e6d74d262ebd37badb
+logo192.png,1597339521845,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
+manifest.json,1597339521847,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+logo512.png,1597339521846,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
+precache-manifest.a78a6f03f4dddb134ec6e7e7b340ee52.js,1597339549348,32f313ecb9015ccd0c1daa9e26915e8413a26f589a0b3103b7adf81d0efc9c87
+robots.txt,1597339521847,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+service-worker.js,1597339549349,3c3b3bae69246e43d646722e8a027090803f935581082fd543639ae20277f742
+static/css/2.2ce93ba3.chunk.css,1597339549368,7efb48234e99c3ad098c5e5ccb7c3abc055e66ee1323370a3b1056c86a892741
+static/css/2.2ce93ba3.chunk.css.map,1597339549368,daa96357482092e3955c525be2349a374445dd6f2e081534ad158e4241ef265e
+static/css/main.5ecd60fb.chunk.css,1597339549341,5573c72369cf5cd9c63d5779a485c5448d9d1285476a0b8938df3f9680fc645f
+static/css/main.5ecd60fb.chunk.css.map,1597339549368,685a1f6af79f427c9e8f633301e0ccd5fb6af4653c3bfe6d79346fb335a6c8fa
+static/js/2.7b06e742.chunk.js.LICENSE.txt,1597339549368,9b8ee785322f2dbbf55f63d3582a2070df32f81832bc7425e270ca0a871a34c0
+static/js/runtime-main.09b85ec0.js,1597339549341,7ea86657435be43e755439ab7c7607340547dabb1582fba6a1fe4ac554aeaa28
+static/js/runtime-main.09b85ec0.js.map,1597339549370,e4d768d21411f9053f41f133507fdd11e5a0542ff774054cdc156e02c97fc2d7
+static/media/UploadIcon.1cedb6e9.svg,1597339549341,2b00764f28b0d3db6ad2747bc580dd988963aaac30c6f6dc61ae9c1ae71ef26d
+static/media/empty-void.2378110c.svg,1597339549341,c9e274f7e8241e577755f0b1b4b84fbf696f27fb17636ffb5af7f3665f57d52c
+static/media/control-settings.6a47a680.svg,1597339549338,0d9235aab9877060213af98716e0993c5d5545f7f956b46dde7628f68aed2e2c
+static/media/hiding-in-trees.c9cdc1f1.svg,1597339549340,d1165211ac742f1449c8046be7d3a843ea8ffe257043c8444dd1773553c886de
+static/media/location-search.c46ea4fc.svg,1597339549341,94e1df564a73b77cdada614afdf8ba233c23fdfceaa6502eea31492170b3932f
+static/media/many-homes.d845869b.svg,1597339549341,d2b4b821e14da2759f06714760ed0eeba09f0fa9f74f9c91009ccc1cefc5058a
+static/media/news-megaphone.f4d0d54c.svg,1597339549341,b88b977e0d3af0b3f5936fce03d3cb091e1662b997bc0f3e4728f41180a200f4
+static/media/transfer-money.a0f26b4c.svg,1597339549341,d0bf2a31f91a9c5893028fc2b3c8aeb86e529b72b3737230db835e9c825b6c25
+static/media/remote-work.7c5a71b7.svg,1597339549341,7e995cc05337631f7c3ed9acbde6a92b3f0d2bd2e925cb120fe54f1c83111a88
+static/media/woman-with-home-mountain.fbfbf632.svg,1597339549340,0f73a7e57627b762cb27761a0d51b6551631504d3c5056f76d198a4d89b3935a
+assets/loading-spinner.gif,1597339521832,54f9e68f68f77bfd399a4e24649aef71729d628c83a1ebf33dbf486b1ca07fc4
+assets/img/bitmoji-neutral.png,1597339521830,0383387d5f001a9bcfd872e5924ee98f82fdcd2ae2e9a31d0cecc76e2a9c4892
+logo-big.webp,1597339521840,6f7f3beb4188068952500998cfbb9759534fc0c5f5c793e193e762a50929d006
+logo-text.webp,1597339521844,5b965bc225171faab798c1a90e0c83b6f25a1b16e09898017377745cacda1005
+assets/img/bitmoji-smile.png,1597339521830,9dd4e45a61f431a22e15b153e7651309b41c6b576e0a1ae71e9d599d05f1e108
+assets/img/bitmoji-location-pin.png,1597339521828,9e9752e8a94e654d1a834758fd2c74e0c47f08e406c35628e1363bf6e35028b6
+static/media/logo-big.17aa38cc.webp,1597339549337,6f7f3beb4188068952500998cfbb9759534fc0c5f5c793e193e762a50929d006
+static/media/conversation.0dd3c6da.svg,1597339549338,9d20aaeff5cdfcd0fc3b305556674840a337bce63d5f4580643df0c09264cb72
+assets/acasa-thumbnail.png,1597339521826,a3ef275f6b97b47b8d3c4757dd7fc81c67c900a77584777afaa701afe163c416
+static/js/main.60a452a3.chunk.js,1597339549338,aa07707f063a6b9b956e7b5e367d7c553c732d36b509f10356198ec93d5802d4
+logo-text.png,1597339521843,cf447478b26997103d1fdd495fbb47b3fc3751b223708cbcbdb6052e91b1ee57
+static/js/main.60a452a3.chunk.js.map,1597339549371,f11b8466dfdbc2cf46fc7d426fd1962add4dd563d4a8edfbbe0b997f835d749c
+logo-big.png,1597339521838,4634e68c7883f7c9fd5e1020ec7543a796cf56820071440f24438ead87288ca4
+static/js/2.7b06e742.chunk.js,1597339549368,7e8d616a32b10f7d3cd5f67b40d2eb69b74249c5440e3e00996d7b2d6327272e
+static/js/2.7b06e742.chunk.js.map,1597339549370,5f1eca40b9cc9af4176207695ef44b94f263de5e807cd26e5128e71e53a2d09e

src/components/ProfileSettings.js

@@ -18,11 +18,13 @@ import updateUserAccountInfo from '../queries/users/updateUserAccountInfo';
 import languageList from '../languages.json';
 import {useHistory} from 'react-router-dom';
 import DeleteAccountModal from './DeleteAccountModal';
+import UpdateProfilePicture from './UpdateProfilePicture';
 
 const useStyles = makeStyles((theme) => ({
   title: {
     fontFamily: theme.typography.special,
-    color: theme.palette.primary.main
+    color: theme.palette.primary.main,
+    marginBottom: theme.spacing(1),
   },
   progressWrapper: {
     display: 'flex',
@@ -38,7 +40,9 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: 500,
   },
   textInput: {
-    width: 300
+    width: 300,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
   sectionDivider: {
     marginTop: theme.spacing(2),
@@ -172,18 +176,32 @@ export default function EditProfile(){
           >
             Edit Account Info
           </Typography>
-          {email === "acasademo@gmail.com" && <div className={classes.demoInfo}>
-            <Typography color="secondary" component="p" variant="h6">
-              <b>Note:</b> Certain functionality has been disabled because you're signed in as the demo user.
-            </Typography>
-          </div>}
+          {email === "acasademo@gmail.com" && (
+            <div className={classes.demoInfo}>
+              <Typography color="secondary" component="p" variant="h6">
+                <b>Note:</b> Certain functionality has been disabled because
+                you're signed in as the demo user.
+              </Typography>
+            </div>
+          )}
           {!user.uid ? (
             <div className={classes.progressWrapper}>
               <CircularProgress size={100} />
             </div>
           ) : (
             <form className={classes.form} noValidate onSubmit={updateProfile}>
+              <Divider className={classes.sectionDivider} />
+              <UpdateProfilePicture user={user} />
+              <Divider className={classes.sectionDivider} />
               <div className={classes.primaryInfo}>
+                <Typography
+                  variant="h5"
+                  component="h3"
+                  color="primary"
+                  className={classes.title}
+                >
+                  Name
+                </Typography>
                 <div>
                   <TextField
                     id="first-name"
@@ -223,7 +241,12 @@ export default function EditProfile(){
                 >
                   Contact Information
                 </Typography>
-                <Typography variant="p" component="p" color="textSecondary">
+                <Typography
+                  variant="p"
+                  component="p"
+                  color="textSecondary"
+                  style={{ marginBottom: ".5em" }}
+                >
                   Prospective guests can use these methods to contact you.{" "}
                 </Typography>
                 <div>
@@ -292,7 +315,12 @@ export default function EditProfile(){
                 >
                   Additional Information
                 </Typography>
-                <Typography variant="p" component="p" color="textSecondary">
+                <Typography
+                  variant="p"
+                  component="p"
+                  color="textSecondary"
+                  style={{ marginBottom: ".5em" }}
+                >
                   Add a bit more information for prospective guests to have a
                   better idea of who you are and why they should stay with you.
                 </Typography>

src/components/UpdateProfilePicture.jsx

@@ -0,0 +1,63 @@
+import React, {useState} from 'react';
+import {Avatar, makeStyles, Typography} from '@material-ui/core';
+import Button from './Button';
+import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  title: {
+    fontFamily: theme.typography.special,
+    marginBottom: theme.spacing(3),
+  },
+  uploadWrapper: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  profilePicture: {
+    width: 200,
+    height: 200,
+    marginBottom: theme.spacing(2),
+    // [theme.breakpoints.down("sm")]: {
+    //   width: 300,
+    //   height: 300,
+    // },
+  },
+}));
+
+export default function UpdateProfilePicture(user){
+    const classes = useStyles();
+    const [profilePicture, setProfilePicture] = useState(user.profile_picture);
+
+    const uploadNewImage = e => {
+        return ;
+    }
+
+    return (
+      <div className={classes.root}>
+        <Typography
+          component="h4"
+          variant="h5"
+          className={classes.title}
+          color="primary"
+        >
+          Upload New Profile Picture
+        </Typography>
+        <div className={classes.uploadWrapper}>
+          <Avatar
+            src={profilePicture}
+            alt={`${user.first_name}
+                ${user.last_name}`}
+            className={classes.profilePicture}
+          />
+          <Button onClick={uploadNewImage} className={classes.button}>
+            <PhotoCameraIcon style={{marginRight: 10}}/> Upload
+          </Button>
+        </div>
+      </div>
+    );
+}