Changes on front-end (#705)

* Publish changes to prod (#566) * avoid statefulsets update errors on actions runs refs #535. (#536) * deprecate demux service. refs #538 (#540) * add handler url from env var & other minor bug fixes (#542) * Add missing env var to config map (#543) * add handler url from env var & other minor bug fixes * add missing env var * fix: update some env vars * fix: update some env vars * fix: replace .env values with the previous ones * Feat/add tx link (#545) * feat: add tx link * feat: remove secrets * setup env workflow (#546) * wip * wip: add env files & db_data to .gitignore * fix: remove .env files * fix: remove .env files * fix: delete unnecessary code * refactor: remove unnecessary code * fix: minimal * Fix/rate action buttons not showing (#547) * wip * wip: add env files & db_data to .gitignore * fix: remove .env files * fix: remove .env files * fix: delete unnecessary code * refactor: remove unnecessary code * fix: minimal * fix: rate buttons not showing in certains densities * Fix/hasura console config (#556) * Deploy to mainnet (#544) * avoid statefulsets update errors on actions runs refs #535. (#536) * deprecate demux service. refs #538 (#540) * add handler url from env var & other minor bug fixes (#542) * Add missing env var to config map (#543) * add handler url from env var & other minor bug fixes * add missing env var * fix: update some env vars * fix: update some env vars * fix: replace .env values with the previous ones Co-authored-by: Andres Gomez <[email protected]> Co-authored-by: JustinCast <[email protected]> * wip * wip: add env files & db_data to .gitignore * fix: remove .env files * fix: remove .env files * fix: delete unnecessary code * refactor: remove unnecessary code * fix: minimal * feat: voting tool revamp * fix: remove comments * fix: add i18n entries * fix: bug fixes * fix: hasura console config Co-authored-by: Xavier <[email protected]> Co-authored-by: Andres Gomez <[email protected]> * Fix/add missing i18n entries (#554) * Deploy to mainnet (#544) * avoid statefulsets update errors on actions runs refs #535. (#536) * deprecate demux service. refs #538 (#540) * add handler url from env var & other minor bug fixes (#542) * Add missing env var to config map (#543) * add handler url from env var & other minor bug fixes * add missing env var * fix: update some env vars * fix: update some env vars * fix: replace .env values with the previous ones Co-authored-by: Andres Gomez <[email protected]> Co-authored-by: JustinCast <[email protected]> * wip * wip: add env files & db_data to .gitignore * fix: remove .env files * fix: remove .env files * fix: delete unnecessary code * refactor: remove unnecessary code * fix: minimal * feat: voting tool revamp * fix: remove comments * fix: add i18n entries * fix: bug fixes Co-authored-by: Xavier <[email protected]> Co-authored-by: Andres Gomez <[email protected]> * docs: add env example (#565) * fix: not able to sync proxies locally (#564) * fix: update hasura version * fix: hasura version && other minor bug fixes * Fix/update hasura version (#567) * fix: remove build:staging statement * latest changes Co-authored-by: Andres Gomez <[email protected]> Co-authored-by: JustinCast <[email protected]> * Update push-master-environment.yaml (#576) * fix(cron): update config values (#579) * Revert "fix(cron): update config values (#579)" (#580) This reverts commit 13ecf78. * fix(backend): use envarioment variables * fix(backend): update .env.example variables * fix(backend): rename envarioment variables * fix(backend): minor change * fix(backend): update docker-compose * fix(backend): update .env.example values * fix(backend): refactor variables names * fix(backend): add config.yaml file and remove .gitignore from it * fix(backend): update cryptolions to jungle.eosio * fix(.env.example): update unauthorized role to anonymous * fix(push-enviroment): remove duplicated variable * fix(home page): fix show button vote * fix(design): Fix broken titles on card component * fix(conflicts) * delete(package) * refactor(design): change design on volting tool * fix(voting-tool): apply new design on this component * fix(radar-design): update use to react-chart2 library * fix(compare-graph-view): fix merge conflicts * fix(compare-graph-view): fix broken pagen when load page * refactor(block-producer-profile): update design * refactor(front-end): update bp profile design * fix(block-producer-profile.js): fix merge conflicts * refactor(front-end): update proxies profile design * refactor(front-end): update proxies profile design * fix(proxy-profile): align design on all dimensions * refactor(card-design): change rates and average position * fix(front-end): update design on various components * fix(content): changes texts * fix(front-end): add drop shadow to voting tool * feat(front-end): add message when voting tool is empty * fix(front-end): align * fix(content): apply changes in content Co-authored-by: Xavier <[email protected]> Co-authored-by: Andres Gomez <[email protected]> Co-authored-by: JustinCast <[email protected]> Co-authored-by: Xavier Fernandez <[email protected]> Co-authored-by: Leister Francisco Alvarez Campos <[email protected]>
eoscostarica · Aug 26, 2021 · 4df321c · 4df321c
1 parent 4c0854a
commit 4df321c
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 31 deletions.
diff --git a/webapp/src/components/card/index.js b/webapp/src/components/card/index.js
@@ -68,7 +68,7 @@ const CardData = ({
   }
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   return (

diff --git a/webapp/src/components/compare-tool/compare-graph-view.js b/webapp/src/components/compare-tool/compare-graph-view.js
@@ -130,7 +130,7 @@ const CompareGraphView = ({
   const [sizes, setSizes] = useState()
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   return (
@@ -144,7 +144,9 @@ const CompareGraphView = ({
         <Box className={classes.headerVotingCompare}>
           <Box>
             <Typography variant='h6' className={classes.marginRightElem}>
-              {`${t('voteToolTitle')} (${selected.length} ${t('selecteds')})`}
+              {selected.length > 0
+                ? `${t('voteToolTitle')} (${selected.length} ${t('chosen')})`
+                : `${t('voteToolTitle')} (${t('noBPSelected')})`}
             </Typography>
             <Typography variant='body1' style={{ display: 'flex' }}>
               {t('voteToolDescription')}
@@ -182,7 +184,7 @@ const CompareGraphView = ({
           xs={12}
           style={{
             textAlign: 'center',
-            height: '90px'
+            height: isProxy ? '90px' : ''
           }}
         >
           <Box className={classes.centerBox}>
@@ -201,7 +203,7 @@ const CompareGraphView = ({
                     variant='contained'
                     onClick={onHandleVote}
                   >
-                    {t('btnVoteBPs')}
+                    {t('voteToolToggle')}
                   </Button>
                 </Grid>
               </Grid>
@@ -231,12 +233,21 @@ const CompareGraphView = ({
               height: mobileMedium ? '225px' : '105px'
             }}
           >
-            <CompareBodyList
-              isProxy={isProxy}
-              selectedData={selected}
-              classes={classes}
-              removeBP={removeBP}
-            />
+            {selected.length > 0 ? (
+              <CompareBodyList
+                isProxy={isProxy}
+                selectedData={selected}
+                classes={classes}
+                removeBP={removeBP}
+              />
+            ) : (
+              <Box
+                className={classes.centerBox}
+                style={{ padding: '30px 30px 0 20px', textAlign: 'center' }}
+              >
+                <Typography variant='subtitle2'>{t('noSelectedBP')}</Typography>
+              </Box>
+            )}
           </Grid>
         )}
         {!isProxy && (
@@ -260,7 +271,7 @@ const CompareGraphView = ({
                 className={classes.centerBox}
                 style={{
                   width: '50%',
-                  justifyContent: 'flex-end',
+                  justifyContent: 'start',
                   display: 'flex'
                 }}
               >
@@ -271,7 +282,7 @@ const CompareGraphView = ({
                   variant='contained'
                   onClick={onHandleVote}
                 >
-                  {t('btnVoteBPs')}
+                  {t('voteToolToggle')}
                 </Button>
               </Box>
             </Grid>
@@ -280,12 +291,18 @@ const CompareGraphView = ({
       </Grid>
       {isDesktop && (
         <Grid item xs={12} md={7}>
-          <CompareBodyList
-            isProxy={isProxy}
-            selectedData={selected}
-            classes={classes}
-            removeBP={removeBP}
-          />
+          {selected.length > 0 ? (
+            <CompareBodyList
+              isProxy={isProxy}
+              selectedData={selected}
+              classes={classes}
+              removeBP={removeBP}
+            />
+          ) : (
+            <Box className={classes.centerBox} style={{ marginTop: '20%' }}>
+              <Typography variant='h6'>{t('noSelectedBP')}</Typography>
+            </Box>
+          )}
         </Grid>
       )}
     </Grid>

diff --git a/webapp/src/components/compare-tool/compare-slider-view.js b/webapp/src/components/compare-tool/compare-slider-view.js
@@ -25,7 +25,7 @@ const CompareSliderView = ({
   const [sizes, setSizes] = useState()
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   return (

diff --git a/webapp/src/components/compare-tool/index.js b/webapp/src/components/compare-tool/index.js
@@ -8,6 +8,7 @@ import _get from 'lodash.get'
 import Switch from '@material-ui/core/Switch'
 import Snackbar from '@material-ui/core/Snackbar'
 import MuiAlert from '@material-ui/lab/Alert'
+import clsx from 'clsx'
 
 import CompareGraphView from './compare-graph-view'
 import CompareSliderView from './compare-slider-view'
@@ -72,7 +73,9 @@ const CompareTool = ({
   }
 
   return (
-    <div className={[classes.root, className].join(' ')}>
+    <div
+      className={clsx([classes.root, className].join(' '), classes.reliefGrid)}
+    >
       {isCollapsedView ? (
         <CompareGraphView
           removeBP={removeBP}
@@ -118,7 +121,7 @@ const CompareTool = ({
               variant='contained'
               size='large'
             >
-              {t('btnVoteBPs')}
+              {t('voteToolToggle')}
             </Button>
           </>
         )}

diff --git a/webapp/src/components/compare-tool/styles.js b/webapp/src/components/compare-tool/styles.js
@@ -164,5 +164,11 @@ export default (theme) => ({
         backgroundColor: theme.palette.secondary.dark
       }
     }
+  },
+  reliefGrid: {
+    border: '1px solid #f8f8f',
+    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'
   }
 })
diff --git a/webapp/src/components/radar/index.js b/webapp/src/components/radar/index.js
@@ -8,7 +8,7 @@ import getRadarLabelName from 'utils/getRadarLabelName'
 const RadarData = ({ bpData, height, showLabel, width, ...props }) => {
   const { t } = useTranslation('translations')
   const labels = getRadarLabelName(t)
-  const [sizes, setSizes] = useState({ width: 240, height: 240 })
+  const [sizes, setSizes] = useState({ width: 250, height: 250 })
   const bpValidData =
     bpData.datasets && bpData.datasets.length
       ? { ...bpData, labels }

diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json
@@ -26,8 +26,10 @@
     "voteToolToggle": "Vote",
     "compareToolCollapsedSwitch": "Collapse Graphs",
     "voteToolTitle": "Voting Tool",
+    "noBPSelected": "No BPs selected",
+    "noSelectedBP": "No block producers have been selected yet. Click on “Add to vote” and proceed to vote.",
     "voteToolDescription": "Login to your account and vote for the selected block producers.",
-    "selecteds": "Selected",
+    "chosen": "Selected",
     "averageCard": "Average",
     "rateCard": "Ratings",
 

diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json
@@ -11,7 +11,7 @@
     "availableToRate": "Usted puede Calificar a los Productores de Bloques",
     "notAvailableToRate": "Usted debe votar por un proxy o al menos por 21 producers",
     "voteWithoutLogin": "Necesitas iniciar sesión para votar",
-    "btnVoteBPs": "Vote por estos BPs",
+    "btnVoteBPs": "Votar",
     "clearSelection": "Borrar selección",
     "loadMore": "Cargar más",
     "view": "Ver",
@@ -26,8 +26,10 @@
     "voteToolToggle": "Votar",
     "compareToolCollapsedSwitch": "Colapsar Gráficos",
     "voteToolTitle": "Herramienta de votación",
+    "noBPSelected": "No PBs seleccionados",
+    "noSelectedBP": "Aún no se ha seleccionado ningún productor de bloques. Haga clic en “Agregar para votar” y proceda a votar.",
     "voteToolDescription": "Inicie sesión en su cuenta y vote por los productores de bloques seleccionados.",
-    "selecteds": "Seleccionados",
+    "chosen": "Seleccionados",
     "averageCard": "Promedio",
     "rateCard": "Evaluaciones",
 

diff --git a/webapp/src/routes/block-producers/block-producer-profile.js b/webapp/src/routes/block-producers/block-producer-profile.js
@@ -81,7 +81,7 @@ const BlockProducerProfile = ({ account, ...props }) => {
   const webInfo = _get(producer, 'general_info', null)
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   useEffect(() => {

diff --git a/webapp/src/routes/block-producers/block-producer-rate.js b/webapp/src/routes/block-producers/block-producer-rate.js
@@ -73,7 +73,7 @@ const BlockProducerRate = ({ account, ual }) => {
   const bPLogo = _get(producer, 'bpjson.org.branding.logo_256', null)
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   function Alert(props) {

diff --git a/webapp/src/routes/home/cover.js b/webapp/src/routes/home/cover.js
@@ -23,7 +23,7 @@ const HomeCover = ({ blockProducer }) => {
   const [sizes, setSizes] = useState()
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   return (

diff --git a/webapp/src/routes/proxies/proxy-profile.js b/webapp/src/routes/proxies/proxy-profile.js
@@ -147,7 +147,7 @@ const ProxyProfile = ({ account, ual, ...props }) => {
   }, [account, accountName, setShowMessage])
 
   useEffect(() => {
-    setSizes(isDesktop ? 400 : 240)
+    setSizes(isDesktop ? 400 : 250)
   }, [isDesktop])
 
   return (

diff --git a/webapp/yarn.lock b/webapp/yarn.lock
@@ -3917,11 +3917,16 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chart.js@^3.4.1, chart.js@^3.5.0:
+chart.js@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.0.tgz#6eb075332d4ebbbb20a94e5a07a234052ed6c4fb"
   integrity sha512-J1a4EAb1Gi/KbhwDRmoovHTRuqT8qdF0kZ4XgwxpGethJHUdDrkqyPYwke0a+BuvSeUxPf8Cos6AX2AB8H8GLA==
 
+chart.js@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
+  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"