Merge branch 'staging'

contracts/rateproducer/rateproducer.js

@@ -17,8 +17,6 @@ let rate = {
 
 rate = JSON.stringify(JSON.stringify(rate));
 
-console.log(rate);
-
 const fs = require("fs");
 fs.writeFile("./contracts/rateproducer/rateproducer.json", rate, function(err) {
   if (err) {

webapp/public/index.html

@@ -6,6 +6,20 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
+    <meta
+      property="og:title"
+      content="EOS Block Producer Ratings and Voting Portal by EOS Costa Rica"
+    />
+    <meta property="og:url" content="https://eosrate.io" />
+    <meta property="og:type" content="article" />
+    <meta
+      property="og:description"
+      content=" EOS Rate is an open-source dApp that allows EOS token holders to vote for Block Producers (BPs) and rate them in several categories. "
+    />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/eoscostarica/eos-rate/staging/webapp/public/eos-rate-social-media.png"
+    />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

webapp/src/components/app-bar/index.js

@@ -98,9 +98,9 @@ const MainTopBar = ({
         </IconButton>
         <Link to='/block-producers' className={classes.link}>
           <img
-            src={stage ? '/logo-mainnet.svg' : '/logo-testnet.svg'}
+            src={stage === 'true' ? '/logo-mainnet.svg' : '/logo-testnet.svg'}
             alt='EOS Rate'
-            className={classes.title}
+            className={classes.logoStyle}
           />
         </Link>
         <div className={classes.grow} />

webapp/src/components/app-bar/styles.js

@@ -25,7 +25,7 @@ export default (theme, alpha) => ({
   menuButton: {
     marginLeft: -18,
     [theme.breakpoints.up('sm')]: {
-      marginRight: 10
+      marginRight: 15
     }
   },
   search: {
@@ -71,5 +71,12 @@ export default (theme, alpha) => ({
     [theme.breakpoints.up('sm')]: {
       display: 'inline'
     }
+  },
+  logoStyle: {
+    width: 110,
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+      width: 180
+    }
   }
 })

webapp/src/components/card/index.js

@@ -16,6 +16,7 @@ import Error from '@material-ui/icons/Error'
 import Tooltip from '@material-ui/core/Tooltip'
 import Grid from '@material-ui/core/Grid'
 import { Link } from '@reach/router'
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'
 
 import Radar from 'components/radar'
 
@@ -102,6 +103,12 @@ const CardData = ({
           subheader={
             <div className={classes.warningBox}>
               <span>{owner}</span>
+              <Box style={{ display: 'flex', float: 'right' }}>
+                <Typography style={{ margin: 'auto' }} variant='subtitle2'>
+                  {t('view')}
+                </Typography>
+                <KeyboardArrowRightIcon />
+              </Box>
             </div>
           }
         />
@@ -160,6 +167,7 @@ const CardData = ({
             <Button
               aria-label='Add to comparison'
               onClick={toggleSelection(!isSelected, owner)}
+              className={!isSelected ? classes.secondaryBtn : ''}
             >
               {isSelected ? t('remove') : buttonLabel}
             </Button>
@@ -170,13 +178,14 @@ const CardData = ({
                   {...props}
                   ref={ref}
                   state={{ owner: owner }}
-                  to={`/${pathLink}/${owner}`}
+                  to={`/${pathLink}/${owner}/rate`}
                 />
               ))}
               className={classes.btnRate}
+              variant='contained'
               size='small'
             >
-              {t('view')}
+              {t('rate')}
             </Button>
           </>
         )}
@@ -185,25 +194,11 @@ const CardData = ({
             <Button
               aria-label='Add to comparison'
               disabled={isSelected}
+              className={!isSelected ? classes.secondaryBtn : ''}
               onClick={() => toggleSelection(!isSelected, owner, true)}
             >
               {isSelected ? t('selected') : t('addToVote')}
             </Button>
-            <Button
-              // eslint-disable-next-line react/display-name
-              component={forwardRef((props, ref) => (
-                <Link
-                  {...props}
-                  ref={ref}
-                  state={{ owner: owner }}
-                  to={`/${pathLink}/${owner}`}
-                />
-              ))}
-              className={classes.btnRate}
-              size='small'
-            >
-              {t('view')}
-            </Button>
           </>
         )}
       </CardActions>

webapp/src/components/card/styles.js

@@ -6,7 +6,7 @@ export default (theme) => ({
   title: {
     textDecoration: 'none',
     color: theme.palette.primary.main,
-    padding: theme.spacing(2, 2, 1, 2)
+    padding: theme.spacing(1, 2, 1, 2)
   },
   unsafeChip: {
     marginLeft: theme.spacing(2),
@@ -19,7 +19,8 @@ export default (theme) => ({
   },
   actions: {
     display: 'flex',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    padding: 16
   },
   radar: {
     background: theme.palette.surface.light
@@ -32,12 +33,20 @@ export default (theme) => ({
     height: '90%'
   },
   btnRate: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.submenu,
     color: 'white',
+    paddingLeft: 24,
+    paddingRight: 24,
+    boxShadow: `0px 3px 1px -2px ${theme.palette.secondary.main}, 0px 2px 2px 0px ${theme.palette.secondary.main}, 0px 1px 5px 0px ${theme.palette.secondary.main}`,
     '&:hover': {
       backgroundColor: theme.palette.secondary.dark
     }
   },
+  secondaryBtn: {
+    border: `1px solid ${theme.palette.primary.main}`,
+    paddingLeft: 16,
+    paddingRight: 16
+  },
   warningBox: {
     display: 'flex',
     alignItems: 'center',
@@ -47,7 +56,8 @@ export default (theme) => ({
     color: 'rgb(255, 152, 0)'
   },
   marginRightElem: {
-    marginRight: 5
+    marginRight: 5,
+    color: theme.palette.primary.main
   },
   blockIcons: {
     display: 'flex',
@@ -92,7 +102,7 @@ export default (theme) => ({
   },
   boxValueRates: {
     display: 'flex',
-    marginBottom: '15px',
+    marginBottom: '20px',
     justifyContent: 'center'
   }
 })

webapp/src/components/compare-tool/styles.js

@@ -166,7 +166,7 @@ export default (theme) => ({
     }
   },
   reliefGrid: {
-    border: '1px solid #f8f8f',
+    border: '1px solid #f8f8f8',
     boxShadow:
       'inset 2px 2px 2px #fff, inset -1px 0 2px rgba(0,0,0,.1), 1px 3px 3px rgba(0,0,0,.1)',
     backgroundColor: '#fff'

webapp/src/config/radar.js

@@ -21,47 +21,7 @@ const renderBackgroundColor = (chart) => {
   ctx.restore()
 }
 
-const renderCenterDot = (ctx, config, scale) => {
-  const {
-    r: { xCenter, yCenter, drawingArea: radius }
-  } = scale
-
-  const centerDotColor = get(config, 'options.scales.gridLines.color', false)
-
-  ctx.save()
-  ctx.arc(xCenter, yCenter, radius / 16, 0, Math.PI * 2)
-
-  if (centerDotColor) ctx.fillStyle = centerDotColor
-
-  ctx.fill()
-  ctx.restore()
-}
-
-const renderPerimeter = (ctx, config, scale) => {
-  const {
-    r: { xCenter, yCenter, drawingArea: radius }
-  } = scale
-
-  const strokeColor = get(config, 'options.chartArea.strokeColor', false)
-  const lineWidth = get(config, 'options.chartArea.lineWidth', 0)
-
-  ctx.beginPath()
-  ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2)
-
-  if (strokeColor) ctx.strokeStyle = strokeColor
-  if (lineWidth) ctx.lineWidth = lineWidth
-
-  ctx.stroke()
-  ctx.restore()
-}
-
 Chart.register({
   id: Chart.name,
-  beforeDraw: renderBackgroundColor,
-  beforeDatasetsDraw: (chart) => {
-    const { ctx, config } = chart
-
-    renderCenterDot(ctx, config, config.options.scales)
-    renderPerimeter(ctx, config, config.options.scales)
-  }
+  beforeDraw: renderBackgroundColor
 })

webapp/src/language/en.json

@@ -14,7 +14,8 @@
     "btnVoteBPs": "Vote",
     "clearSelection": "Clear selection",
     "loadMore": "Load more",
-    "view": "More info",
+    "view": "MORE",
+    "rate": "RATE",
     "remove": "Remove vote",
     "addToVote": "Add to vote",
     "selected": "Selected",

webapp/src/language/es.json

@@ -14,7 +14,8 @@
     "btnVoteBPs": "Votar",
     "clearSelection": "Borrar selección",
     "loadMore": "Cargar más",
-    "view": "Más información",
+    "view": "MÁS",
+    "rate": "CALIFICAR",
     "remove": "Remover",
     "addToVote": "Agregar para votar",
     "selected": "Seleccionado",

webapp/src/routes/block-producers/block-producer-rate.js

@@ -127,7 +127,6 @@ const BlockProducerRate = ({ account, ual }) => {
   }, [accountName, account, ual, setShowMessage])
 
   useEffect(() => {
-    console.log(userRate)
     if (userRate) {
       setRatingState({
         ...ratingState,