Merge pull request #457 from JeanVegaD/edit-profile-design

Redesign edit profile section
eoscostarica · Dec 14, 2020 · fcc41bf · fcc41bf
2 parents cf6e68a + 8cab2b1
commit fcc41bf
Show file tree

Hide file tree

Showing 13 changed files with 518 additions and 405 deletions.
diff --git a/webapp/src/components/Carousel/Carousel.js b/webapp/src/components/Carousel/Carousel.js
@@ -10,10 +10,12 @@ import { useTranslation } from 'react-i18next'
 
 const useStyles = makeStyles({
   carousel: {
-    maxWidth: '100%'
+    maxWidth: '100%',
   },
   img: {
-    maxWidth: '100%'
+    width: '100%',
+    height: '300px',
+    objectFit: 'cover'
   }
 })
 

diff --git a/webapp/src/components/Logo/Logo.js b/webapp/src/components/Logo/Logo.js
@@ -4,13 +4,12 @@ import { makeStyles } from '@material-ui/styles'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card'
 import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
-import Button from '@material-ui/core/Button'
 import { useTranslation } from 'react-i18next'
 
 const useStyles = makeStyles((theme) => ({
   imageContainer: {
-    maxHeight: 370,
+    width: "100%",
+    maxHeight: 200,
     margin: 'auto',
     justifyContent: 'center',
     display: 'flex',
@@ -21,9 +20,10 @@ const useStyles = makeStyles((theme) => ({
       border: '1px solid lightgray'
     }
   },
+
   logo: {
     maxWidth: '100%',
-    maxHeight: 300,
+    maxHeight: 150,
     margin: 'auto'
   }
 }))
@@ -53,13 +53,6 @@ const Logo = ({ logoUrl, showCaption, showDeleteButton, deleteActualLogo }) => {
             {t('miscellaneous.addTransparentIfPossible')}
           </Typography>
         )}
-        {showDeleteButton && (
-          <Box display="flex" flexDirection="row" justifyContent="flex-end">
-            <Button onClick={() => deleteActualLogo(true)}>
-              {t('miscellaneous.change')}
-            </Button>
-          </Box>
-        )}
       </Card>
     </Grid>
   )

diff --git a/webapp/src/components/LogoUrlInput/LogoUrlInput.js b/webapp/src/components/LogoUrlInput/LogoUrlInput.js
@@ -1,69 +1,77 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Logo from '../Logo'
 import TextField from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/core/styles'
+import StorefrontIcon from '@material-ui/icons/Storefront'
+import LocalHospitalIcon from '@material-ui/icons/LocalHospital'
+import Avatar from '@material-ui/core/Avatar'
 
 const useStyles = makeStyles((theme) => ({
   textField: {
     marginTop: theme.spacing(2)
   },
   box: {
-    width: '100%'
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  avatarRoundDesktop: {
+    width: '90px',
+    height: '90px',
+    border: 'solid 2px rgba(0, 0, 0, 0.04)',
+    [theme.breakpoints.down('md')]: {
+      width: '70px',
+      height: '70px',
+    },
+    marginTop: '10px',
+    marginBottom: '10px'
   },
   logoTitle: {
     textAlign: 'center'
   }
 }))
 
-const LogoUrlInput = ({ handleSetField, logo }) => {
+const LogoUrlInput = ({ handleSetField, logo, role }) => {
   const { t } = useTranslation('translations')
   const classes = useStyles()
   return (
-    <Box className={classes.box} display="flex" flexDirection="column">
-      {logo && logo.length > 0 ? (
-        <>
-          <Typography className={classes.logoTitle} variant="h4">
-            Logo
-          </Typography>
-          <br />
-          <Logo
-            showDeleteButton
-            logoUrl={logo}
-            deleteActualLogo={(deleteLogo) => {
-              if (deleteLogo) handleSetField('logo_url', '')
-            }}
-          />
-        </>
-      ) : (
-        <TextField
-          id="logo-url"
-          name="logo-input"
-          label={t('editProfile.logoUrl')}
-          variant="outlined"
-          placeholder={t('editProfile.logoUrlPlaceholder')}
-          defaultValue={logo}
-          fullWidth
-          InputLabelProps={{
-            shrink: true
-          }}
-          className={classes.textField}
-          onChange={(event) => {
-            if (event.target.value.length > 0)
-              handleSetField('logo_url', event.target.value)
-          }}
-        />
-      )}
+    <Box className={classes.box}>
+      <Avatar
+        className={classes.avatarRoundDesktop}
+        src={logo ? `//images.weserv.nl?url=${logo}&h=300&dpr=2` : ''}
+      >
+        {role === "sponsor" && <StorefrontIcon />}
+        {role === "lifebank" && <LocalHospitalIcon />}
+      </Avatar>
+      <TextField
+        id="logo-url"
+        name="logo-input"
+        label={t('editProfile.logoUrl')}
+        variant="outlined"
+        placeholder={t('editProfile.logoUrlPlaceholder')}
+        defaultValue={logo}
+        fullWidth
+        InputLabelProps={{
+          shrink: true
+        }}
+        className={classes.textField}
+        onChange={(event) => {
+          if (event.target.value.length > 0)
+            handleSetField('logo_url', event.target.value)
+        }}
+      />
     </Box>
+
   )
 }
 
 LogoUrlInput.propTypes = {
   handleSetField: PropTypes.func,
-  logo: PropTypes.string
+  logo: PropTypes.string,
+  role: PropTypes.string,
 }
 
 export default LogoUrlInput
diff --git a/webapp/src/components/Schedule/Schedule.js b/webapp/src/components/Schedule/Schedule.js
@@ -243,6 +243,7 @@ const Schedule = ({
           color="primary"
           onClick={handleOpen}
           fullWidth
+          className={classes.addBtn}
         >
           {t('schedule.addSchedule')}
         </Button>

diff --git a/webapp/src/components/SocialMediaTextField/SocialMediaTextField.js b/webapp/src/components/SocialMediaTextField/SocialMediaTextField.js
@@ -1,9 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import TextField from '@material-ui/core/TextField'
-import IconButton from '@material-ui/core/IconButton'
 import InputAdornment from '@material-ui/core/InputAdornment'
-import Icon from '@material-ui/core/Icon'
 
 const SocialMediaTextField = ({
   idText,
@@ -15,31 +13,27 @@ const SocialMediaTextField = ({
   defaultValue,
   onChangeSocialMediaTextField
 }) => (
-  <TextField
-    id={idText}
-    label={label}
-    variant="outlined"
-    placeholder={placeholder}
-    value={defaultValue}
-    fullWidth
-    onChange={(e) => onChangeSocialMediaTextField(e.target.value)}
-    InputProps={{
-      startAdornment: (
-        <InputAdornment position="start">
-          <IconButton color="secondary" aria-label={`${name}`}>
-            <Icon>
-              <img src={icon} alt={`${name} icon`} height={25} width={25} />
-            </Icon>
-          </IconButton>
-        </InputAdornment>
-      )
-    }}
-    InputLabelProps={{
-      shrink: true
-    }}
-    className={textFieldClass}
-  />
-)
+    <TextField
+      id={idText}
+      label={label}
+      variant="outlined"
+      placeholder={placeholder}
+      value={defaultValue}
+      fullWidth
+      onChange={(e) => onChangeSocialMediaTextField(e.target.value)}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            {icon}
+          </InputAdornment>
+        )
+      }}
+      InputLabelProps={{
+        shrink: true
+      }}
+      className={textFieldClass}
+    />
+  )
 
 SocialMediaTextField.propTypes = {
   idText: PropTypes.string,

diff --git a/webapp/src/components/Telephones/Telephones.js b/webapp/src/components/Telephones/Telephones.js
@@ -15,7 +15,6 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(2),
     width: '100%',
     margin: 'auto',
-    maxWidth: 360,
     backgroundColor: 'transparent'
   }
 }))

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -279,7 +279,7 @@
       "moreOver": "Moreover, the pandemic is impacting local economies due to a generalized lockdown. Small businesses that rely on the local community must think of ways to incentivize customers to buy as soon as restrictions are lifted.",
       "aDonorCanEarn": "A donor can earn life tokens after completing a blood donation at a Lifebank participating donation center. Donation centers can issue a maximum of 10,000 life tokens. These tokens can then be redeemed by the donor at any local business (or sponsor) in exchange for discounts or promotions.",
       "also": "Also, sponsors can save these tokens and then return them to donation centers to keep the tokens active.",
-      "weDontRequest": "We don't request or store any personal information on the blockchain. You may optionally add a full name and email address once you have completed registration.",
+      "weDontRequest": "We don't request or store any personal information on the blockchain. You may optionally add a full name.",
       "aboutLifeTokens": "About LIFE tokens"
     },
     "common": {

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -279,7 +279,7 @@
       "moreOver": "Además, la pandemia está afectando a las economías locales debido a un bloqueo generalizado. Las pequeñas empresas que dependen de la comunidad local deben pensar en formas de incentivar a los clientes para que compren tan pronto como se levanten las restricciones.",
       "aDonorCanEarn": "Un donante puede ganar tokens después de completar una donación de sangre en un centro de donación participante en el Banco de Sangre. Los centros de donación pueden emitir un máximo de 10.000 tokens. Estos tokens pueden ser canjeados por el donante en cualquier comercio afiliado a cambio de descuentos o promociones.",
       "also": "Además, los comercios afiliados pueden guardar los tokens y luego devolverlos a los centros de donación para mantenerlos activos.",
-      "weDontRequest": "No solicitamos ni almacenamos ninguna información personal en el blockchain. Puedes añadir opcionalmente un nombre completo y una dirección de correo electrónico una vez que haya completado el registro.",
+      "weDontRequest": "No solicitamos ni almacenamos ninguna información personal en el blockchain. Puedes añadir opcionalmente un nombre completo.",
       "aboutLifeTokens": "Acerca de los tokens LIFE"
     },
     "common": {

diff --git a/webapp/src/routes/EditProfile/EditProfile.js b/webapp/src/routes/EditProfile/EditProfile.js
@@ -30,7 +30,13 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: 'column',
     width: '100%',
     padding: theme.spacing(6, 1, 0, 1),
-    alignItems: 'center'
+    alignItems: 'center',
+    minHeight: 'calc(100vh - 60px)',
+    paddingTop: '60px',
+    [theme.breakpoints.up('md')]: {
+      paddingLeft: '35%',
+      paddingRight: '35%',
+    },
   },
   title: {
     fontSize: 48,