237 edit profile picture and name

locales/en.json

@@ -109,6 +109,26 @@
     "buttonClose": "Close",
     "buttonDonate": "Donate now"
   },
+  "EditProfile": {
+    "bodyCancel": "If you click cancel all changes you made will be lost.",
+    "buttonCancel": "Cancel",
+    "buttonContinue": "Continue Editing",
+    "buttonSave": "Save changes",
+    "charactersExplanation": "Only basic characters and numbers (A-Z, 0-9) are allowed, no symbols or whitespace, 3-24 characters",
+    "confirmationMessage": "Great! Your profile changes have been saved!",
+    "errorNameTaken": "Sorry, this name is already taken!",
+    "errorInvalidName": "Ups! Invalid name, try again.",
+    "errorImageCapture": "Sorry, there was a problem with image capture.",
+    "errorSaveChanges": "Sorry, there was a problem with saving changes.",
+    "heading": "Edit profile",
+    "optionCapture": "Capture",
+    "optionTryAgain": "Try Again",
+    "optionCamera": "Camera",
+    "optionUpload": "Upload",
+    "optionFile": "Gallery",
+    "titleCancel": "Do you want to save changes to your profile?",
+    "usernameExplanation": "Your username is how your friends can search for you on the Circles App."
+  },
   "Finder": {
     "bodyFilterDirect": "Directly trusted",
     "bodyFilterExternal": "External",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "circles-myxogastria",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Webapp and mobile client for Circles",
   "main": "src/index.js",
   "private": true,
@@ -57,7 +57,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@circles/core": "^2.10.10",
+    "@circles/core": "^2.12.0",
     "@circles/timecircles": "^1.0.6",
     "@material-ui/core": "^4.12.4",
     "@material-ui/lab": "^4.0.0-alpha.61",

src/components/Avatar.js

@@ -21,6 +21,7 @@ const useStyles = makeStyles(() => ({
   avatarContainer: {
     position: 'relative',
     margin: '0 auto',
+    cursor: 'pointer',
   },
   organizationIndicator: {
     position: 'absolute',
@@ -29,11 +30,14 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const Avatar = ({ address, size = 'small', ...props }) => {
+const Avatar = ({ address, size = 'small', url, useCache, ...props }) => {
   const classes = useStyles();
   const theme = useTheme();
 
-  const { avatarUrl, username } = useUserdata(address);
+  let { avatarUrl, username } = useUserdata(address, useCache);
+
+  if (url) avatarUrl = url;
+
   const { isOrganization } = useIsOrganization(address);
 
   const sizePixelAvatar =
@@ -68,6 +72,8 @@ const Avatar = ({ address, size = 'small', ...props }) => {
 Avatar.propTypes = {
   address: PropTypes.string,
   size: PropTypes.string,
+  url: PropTypes.string,
+  useCache: PropTypes.bool,
 };
 
 export default React.memo(Avatar);

src/components/AvatarHeader.js

@@ -42,9 +42,9 @@ const AvatarHeader = ({ hideImage, username }) => {
   const displayedUsername = username ? (
     `@${username}`
   ) : safe.currentAccount ? (
-    <UsernameDisplay address={safe.currentAccount} />
+    <UsernameDisplay address={safe.currentAccount} useCache={false} />
   ) : safe.pendingAddress ? (
-    <UsernameDisplay address={safe.pendingAddress} />
+    <UsernameDisplay address={safe.pendingAddress} useCache={false} />
   ) : null;
 
   return (
@@ -56,6 +56,7 @@ const AvatarHeader = ({ hideImage, username }) => {
               address={safe.currentAccount || safe.pendingAddress}
               className={classes.avatarContainer}
               size={'smallXl'}
+              useCache={false}
             />
           </Link>
         )}

src/components/Button.js

@@ -53,6 +53,17 @@ const useStyles = makeStyles((theme) => ({
     linear-gradient(to right, ${theme.custom.colors.purple}, ${theme.custom.colors.purpleDark}) border-box`,
     border: '1px solid transparent',
   },
+  buttonWithoutBorder: {
+    border: 0,
+    background: theme.custom.gradients.purple,
+    backgroundClip: 'text',
+    color: 'transparent',
+    '-webkit-background-clip': 'text',
+    '-webkit-text-fill-color': 'transparent',
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+  },
 }));
 
 // eslint-disable-next-line react/display-name
@@ -68,6 +79,7 @@ const Button = React.forwardRef(
       isWhite,
       isWhiteText,
       isGradientBorder,
+      isWithoutBorder,
       to,
       ...props
     },
@@ -83,6 +95,7 @@ const Button = React.forwardRef(
       [classes.buttonWhite]: isWhite,
       [classes.buttonWhiteText]: isWhiteText,
       [classes.buttonGradientBorder]: isGradientBorder,
+      [classes.buttonWithoutBorder]: isWithoutBorder,
     });
 
     return React.createElement(
@@ -113,6 +126,7 @@ Button.propTypes = {
   isPrimary: PropTypes.bool,
   isWhite: PropTypes.bool,
   isWhiteText: PropTypes.bool,
+  isWithoutBorder: PropTypes.bool,
   onClick: PropTypes.func,
   to: PropTypes.string,
 };

src/components/DialogInfo.js

@@ -26,32 +26,46 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const DialogInfo = ({ dialogContent, handleClose, id, isOpen, title }) => {
+const DialogInfo = ({
+  dialogContent,
+  handleClose,
+  id,
+  isOpen,
+  title,
+  fullWidth,
+  maxWidth,
+  isBtnClose = true,
+}) => {
   const classes = useStyles();
 
   return (
     <MuiDialog
       aria-describedby={`dialog-${id}-text`}
       aria-labelledby={`dialog-${id}-description`}
       className={classes.dialogContainer}
+      fullWidth={fullWidth}
+      maxWidth={maxWidth}
       open={isOpen}
       onClose={handleClose}
     >
       <DialogTitle id={`dialog-${id}-title`}>{title}</DialogTitle>
       <DialogContent>{dialogContent}</DialogContent>
       <DialogActions style={{ justifyContent: 'center' }}>
-        <ButtonClose onClick={handleClose} />
+        {isBtnClose && <ButtonClose onClick={handleClose} />}
       </DialogActions>
     </MuiDialog>
   );
 };
 
 DialogInfo.propTypes = {
   dialogContent: PropTypes.element,
+  fullWidth: PropTypes.bool,
   handleClose: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  isBtnClose: PropTypes.bool,
   isOpen: PropTypes.bool.isRequired,
-  title: PropTypes.string.isRequired,
+  maxWidth: PropTypes.string,
+  title: PropTypes.string,
 };
 
 export default React.memo(DialogInfo);