Merge pull request #123 from eoscostarica/develop

Bug Fixes and Content Updates

src/components/Footer/Footer.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { makeStyles } from '@material-ui/styles'
+import Box from '@material-ui/core/Box'
+import Link from '@material-ui/core/Link'
+import AnnouncementIcon from '@material-ui/icons/Announcement'
+
+import TalkUsModal from './TalkUsModal'
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  labelfooter: {
+    fontSize: 12.1,
+    fontWeight: '500',
+    lineHeight: 1.32,
+    letterSpacing: '0.4px',
+    textAlign: 'center',
+    width: '100%',
+    color: 'rgba(0, 0, 0, 0.6)',
+    paddingLeft: 20
+  },
+  iconButton: {
+    width: 20,
+    height: 20,
+    color: '#272863',
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }
+}))
+
+const Footer = () => {
+  const classes = useStyles()
+  const { t } = useTranslation('translations')
+  const [openModal, setOpenModal] = useState(false)
+
+  return (
+    <>
+      <TalkUsModal openModal={openModal} setOpenModal={setOpenModal} />
+      <Box className={classes.footer}>
+        <Link
+          className={classes.labelfooter}
+          href="https://github.com/eoscostarica/evodex"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('footer')}
+        </Link>
+        <AnnouncementIcon
+          className={classes.iconButton}
+          onClick={() => setOpenModal(!openModal)}
+        />
+      </Box>
+    </>
+  )
+}
+
+export default Footer

src/components/Footer/TalkUsModal.js

@@ -0,0 +1,161 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import { makeStyles } from '@material-ui/styles'
+import Box from '@material-ui/core/Box'
+import Typography from '@material-ui/core/Typography'
+import GitHubIcon from '@material-ui/icons/GitHub'
+import TwitterIcon from '@material-ui/icons/Twitter'
+import TelegramIcon from '@material-ui/icons/Telegram'
+import Link from '@material-ui/core/Link'
+
+import Modal from 'components/Modal'
+
+const useStyles = makeStyles((theme) => ({
+  talkContent: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  btnPortal: {
+    backgroundColor: '#272863',
+    width: 144,
+    height: 36,
+    borderRadius: 20,
+    marginBottom: theme.spacing(2),
+    '& .MuiButton-label': {
+      color: '#fff',
+      fontSize: 14,
+      lineHeight: 1.13,
+      letterSpacing: 1.25,
+      fontWeight: '600'
+    }
+  },
+  titleBox: {
+    marginBottom: theme.spacing(3)
+  },
+  title: {
+    fontSize: 20.2,
+    fontWeight: '600',
+    marginBottom: theme.spacing(1),
+    letterSpacing: 0.25,
+    color: 'rgba(0, 0, 0, 0.87)',
+    [theme.breakpoints.up('sm')]: {
+      fontSize: 24,
+      letterSpacing: 0.25
+    }
+  },
+  info: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 1.6,
+    letterSpacing: 0.15,
+    color: 'rgba(0, 0, 0, 0.6)'
+  },
+  infoText: {
+    fontSize: 16,
+    marginTop: theme.spacing(1),
+    fontWeight: '600',
+    lineHeight: 1.2,
+    letterSpacing: 0.15,
+    color: 'rgba(0, 0, 0, 0.6)'
+  },
+  boxLinks: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#272863',
+    width: 144,
+    height: 36,
+    borderRadius: 20,
+    '&:hover': {
+      textDecoration: 'none',
+      cursor: 'pointer'
+    },
+    '& p': {
+      color: '#fff',
+      textTransform: 'uppercase',
+      fontSize: 14,
+      lineHeight: 1.13,
+      letterSpacing: 1.25,
+      fontWeight: '600'
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: 185
+    }
+  },
+  icon: {
+    marginRight: theme.spacing(1),
+    color: '#fff',
+    height: 20
+  },
+  marginBottomLink: {
+    marginBottom: theme.spacing(2)
+  }
+}))
+
+const TalkUsModal = ({ openModal, setOpenModal }) => {
+  const classes = useStyles()
+  const { t } = useTranslation('talkUsModal')
+
+  return (
+    <Modal openModal={openModal} setOpenModal={(value) => setOpenModal(value)}>
+      <Box className={classes.talkContent}>
+        <Box className={classes.titleBox}>
+          <Typography variant="h1" className={classes.title}>
+            {t('title')}
+          </Typography>
+          <Typography variant="h2" className={classes.title}>
+            {t('subtitle')}
+          </Typography>
+          <Typography variant="h3" className={classes.info}>
+            {t('description1')}
+          </Typography>
+          <Typography variant="h3" className={classes.info}>
+            {t('description2')}
+          </Typography>
+          <Typography className={classes.infoText}>
+            {t('description3')}
+          </Typography>
+        </Box>
+        <Link
+          className={clsx(classes.boxLinks, classes.marginBottomLink)}
+          href="https://github.com/eoscostarica/evodex/issues/new/choose"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <GitHubIcon className={classes.icon} />
+          <Typography variant="body1">GitHub</Typography>
+        </Link>
+        <Link
+          className={clsx(classes.boxLinks, classes.marginBottomLink)}
+          href="https://t.me/evodexarg"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <TelegramIcon className={classes.icon} />
+          <Typography variant="body1">telegram</Typography>
+        </Link>
+
+        <Link
+          className={clsx(classes.boxLinks, classes.marginBottomLink)}
+          href="https://twitter.com/eosargentina"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <TwitterIcon className={classes.icon} />
+          <Typography variant="body1">twitter</Typography>
+        </Link>
+      </Box>
+    </Modal>
+  )
+}
+
+TalkUsModal.propTypes = {
+  openModal: PropTypes.bool,
+  setOpenModal: PropTypes.func
+}
+
+export default TalkUsModal

src/components/Footer/index.js

@@ -0,0 +1 @@
+export { default } from './Footer'

src/components/InputTextAndSelect/InputTextAndSelect.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@material-ui/styles'
 import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
@@ -120,6 +121,7 @@ const InputTextAndSelect = ({
   inputDisabled
 }) => {
   const classes = useStyles()
+  const { t } = useTranslation('translations')
   const textInput = useRef(null)
   const [inputData, setInputData] = useState({})
 
@@ -154,7 +156,7 @@ const InputTextAndSelect = ({
             ref={textInput}
             onChange={(e) => handleOnChange(e.target.value, 'inputValue')}
             value={inputData.inputValue || ''}
-            placeholder="This Amount"
+            placeholder={t('placeholder')}
             readOnly={inputDisabled}
             onKeyPress={(e) => handleOnKeyPress(e.key)}
           />

src/components/Modal/Modal.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/styles'
+import PropTypes from 'prop-types'
+import Box from '@material-ui/core/Box'
+import Paper from '@material-ui/core/Paper'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import Modal from '@material-ui/core/Modal'
+import Backdrop from '@material-ui/core/Backdrop'
+import Fade from '@material-ui/core/Fade'
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[5],
+    borderRadius: 20,
+    width: 280,
+    height: 550,
+    overflowY: 'auto',
+    outlineWidth: 0,
+    [theme.breakpoints.up('sm')]: {
+      width: 560,
+      height: 420
+    }
+  },
+  closeIcon: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: 10,
+    padding: theme.spacing(0, 1.5),
+    '& svg': {
+      fontSize: 25,
+      color: 'rgba(0, 0, 0, 0.54)'
+    }
+  },
+  bodyWrapper: {
+    height: '95%',
+    padding: theme.spacing(0, 2),
+    [theme.breakpoints.up('sm')]: {
+      height: '90%',
+      padding: theme.spacing(0, 3)
+    }
+  }
+}))
+
+const MapModal = ({ openModal, setOpenModal, children }) => {
+  const classes = useStyles()
+
+  const handleOpen = () => {
+    setOpenModal(!openModal)
+  }
+
+  return (
+    <Modal
+      aria-labelledby="transition-modal-title"
+      aria-describedby="transition-modal-description"
+      className={classes.modal}
+      open={openModal}
+      onClose={handleOpen}
+      closeAfterTransition
+      BackdropComponent={Backdrop}
+      BackdropProps={{
+        timeout: 500
+      }}
+    >
+      <Fade in={openModal}>
+        <Paper className={classes.paper}>
+          <Box className={classes.closeIcon}>
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={handleOpen}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+          <Box className={classes.bodyWrapper}>{children}</Box>
+        </Paper>
+      </Fade>
+    </Modal>
+  )
+}
+
+MapModal.propTypes = {
+  openModal: PropTypes.bool,
+  children: PropTypes.any,
+  setOpenModal: PropTypes.func
+}
+
+MapModal.defaultProps = {
+  openModal: false
+}
+
+export default MapModal

src/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal'