Mobile Breakpoints / Dashboard / Network Updates (antonnell#6)

* Styling & Mobile breakpoints refinement Temp logo added Fixed mobile navigation Yearn logo error Hid header on mobile breakpoints Mobile breakpoints is not completed overall, but an improvement. * Mobile Layout Adjustments Added grids & breakpoint styling * WIP Restyle Initial merge for Kabelo install * Connected vs Not Connected States * Deleted unused code * Not connected states added / Styling updates * Redirect users to the main page after connecting to wallet from the welcome page * Major UI Updates * Deleted unused Lottiefiles * Major UI Updates - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Major UI Updates + Fixes - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Major UI Updates + Fixes - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Overall UI updates to entire app. * Deleted unwanted letter * UI Overhaul - Welcome page added -- Redirects user to Home page after connection - States created for all pages when user is not connected - Dashboard Added -- Todo: Add Staked values -- Todo: remove unused code - Overall UI updates to app. * Mobile Breakpoint Fixes * Account Claimable * Mobile Breakpoints / Dashboard / Network Updates - Mobile breakpoint refinements - Added Switch Network button to the Invalid Chain Message -- Opens Metamask & Switches to Ethereum Mainnet - Created States for user with no rewards on Dashboard & Claim pages Co-authored-by: KabeloLeboaMB <[email protected]>
SeaSaltyFunk · Nov 2, 2021 · e95f6dc · e95f6dc
1 parent 5208a51
commit e95f6dc
Show file tree

Hide file tree

Showing 19 changed files with 358 additions and 130 deletions.
diff --git a/components/WelcomeOverview/ffWelcomeOverview.module.css b/components/WelcomeOverview/ffWelcomeOverview.module.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
+
 .container {
   width: 100%;
   /* height: calc(100vh - 80px); */
@@ -135,3 +137,43 @@
   font-size: 70px !important;
   margin-right: 24px !important;
 }
+
+.headBtnTxt {
+  font-family: 'Roboto Mono', monospace !important;
+  font-weight: 300 !important;
+}
+
+@media screen and (max-width: 600px) {
+  .welcomeTitle {
+    font: normal normal normal 36px/40px Inter Light !important;
+    margin: 100px 0 20px 0 !important;
+  }
+
+  .welcomeSubtitle {
+    font: normal normal normal 15px/22px Inter Light !important;
+    margin: auto !important;
+    margin-bottom: 40px !important;
+    max-width: 1080px;
+    opacity: 0.6 !important;
+  }
+
+  .headBtnTxt {
+    font-size: 16px !important;
+    font-family: 'Roboto Mono', monospace !important;
+    font-weight: 300 !important;
+  }
+
+  .connectBtn {
+    width: 100%;
+    border: 0px solid #234ce7 !important;
+    padding: 20px 30px !important;
+    margin-bottom: 20px !important;
+  }
+
+  .continueBtn {
+    width: 100%;
+    padding: 15px 30px !important;
+    margin-left: 0px !important;
+    text-transform: none !important;
+  }
+}
diff --git a/components/ffClaimAll/ffClaimAll.js b/components/ffClaimAll/ffClaimAll.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, CircularProgress } from '@material-ui/core';
+import { Paper, Typography, Button, CircularProgress, SvgIcon, Grid } from '@material-ui/core';
 import BigNumber from 'bignumber.js';
 
 import classes from './ffClaimAll.module.css';
@@ -9,6 +9,15 @@ import RewardsTable from './ffClaimAllTable.js'
 import stores from '../../stores'
 import { FIXED_FOREX_UPDATED, FIXED_FOREX_CLAIM_ALL, FIXED_FOREX_ALL_CLAIMED, ERROR, IBEUR_ADDRESS } from '../../stores/constants';
 
+function NoRewardsIcon(props) {
+  const { color, className } = props;
+  return (
+    <SvgIcon viewBox="0 0 64 64" stroke-width="1" className={className}>
+    <g stroke-width="2" transform="translate(0, 0)"><path d="M15.029,48.971A24,24,0,0,1,48.971,15.029" fill="none" stroke="#686c7a" stroke-miterlimit="10" stroke-width="2" data-cap="butt" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M52.789,20A24.006,24.006,0,0,1,20,52.789" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></path><line x1="60" y1="4" x2="4" y2="60" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" data-color="color-2" stroke-linejoin="miter"></line></g>
+    </SvgIcon>
+  );
+}
+
 export default function ffClaimAll() {
 
   const [ claimLoading, setClaimLoading ] = useState(false)
@@ -112,22 +121,41 @@ export default function ffClaimAll() {
 
   return (
     <Paper elevation={0} className={ classes.container }>
-      <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
-      <div className={ classes.infoSection }>
+
+    {claimable.length>0 ?
+      <div className={classes.hasRewards}>
+        <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
+        <div className={ classes.infoSection }>
+        </div>
+        <div className={ classes.actionButtons }>
+          <Button
+            className={ classes.buttonOverride }
+            variant='contained'
+            size='large'
+            color='primary'
+            disabled={ claimLoading }
+            onClick={ onClaim }
+            >
+            <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
+            { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
+          </Button>
+        </div>
       </div>
-      <div className={ classes.actionButtons }>
-        <Button
-          className={ classes.buttonOverride }
-          variant='contained'
-          size='large'
-          color='primary'
-          disabled={ claimLoading }
-          onClick={ onClaim }
-          >
-          <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
-          { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
-        </Button>
+
+      :
+
+      <div className={classes.noRewards}>
+        <Grid container spacing={0} className={classes.centerGridRows}>
+          <Grid item lg={12} md={12} sm={12} xs={12}>
+            <NoRewardsIcon className={ classes.overviewIcon } />
+          </Grid>
+          <Grid item lg={12} md={12} sm={12} xs={12}>
+            <Typography variant="h5">You have no rewards</Typography>
+          </Grid>
+        </Grid>
       </div>
+    }
+
     </Paper>
   );
 }
diff --git a/components/ffClaimAll/ffClaimAll.module.css b/components/ffClaimAll/ffClaimAll.module.css
@@ -9,6 +9,22 @@
   padding: 0 0 10px 0px;
 }
 
+.hasRewards {
+  width: 100% !important;
+}
+
+.noRewards {
+  width: 100% !important;
+  text-align: center;
+  margin: 60px auto;
+}
+
+.overviewIcon {
+  font-size: 60px !important;
+  margin-bottom: 20px;
+  opacity: 0.4;
+}
+
 .actionButtons {
   padding: 0px 24px;
 }
@@ -18,8 +34,9 @@
 }
 
 .actionButtonText {
-  font-size: 12px !important;
+  font-size: 13px !important;
   text-transform: capitalize !important;
+  font-weight: 700 !important;
 }
 
 .loadingCircle {
@@ -46,11 +63,13 @@
 }
 
 .buttonOverride {
-  background: #114DF0 !important;
+  background:  MediumSeaGreen !important;
   color: #FFF !important;
   font-weight: 700 !important;
   box-shadow: none !important;
-  width: 216px;
+  width: 235px;
+  float: right;
+  margin-bottom: 20px !important;
 }
 
 @media screen and (max-width: 1200px) {

diff --git a/components/ffDashboardClaimAll/ffDashboardClaimAll.js b/components/ffDashboardClaimAll/ffDashboardClaimAll.js
@@ -1,12 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, CircularProgress } from '@material-ui/core';
+import { Paper, Typography, Button, CircularProgress, SvgIcon, Grid } from '@material-ui/core';
 import BigNumber from 'bignumber.js';
 import classes from './ffDashboardClaimAll.module.css';
 import RewardsTable from './ffDashboardClaimAllTable.js'
 
 import stores from '../../stores'
 import { FIXED_FOREX_UPDATED, FIXED_FOREX_CLAIM_ALL, FIXED_FOREX_ALL_CLAIMED, ERROR, IBEUR_ADDRESS } from '../../stores/constants';
 
+function NoRewardsIcon(props) {
+  const { color, className } = props;
+  return (
+    <SvgIcon viewBox="0 0 64 64" stroke-width="1" className={className}>
+    <g stroke-width="2" transform="translate(0, 0)"><path d="M15.029,48.971A24,24,0,0,1,48.971,15.029" fill="none" stroke="#686c7a" stroke-miterlimit="10" stroke-width="2" data-cap="butt" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M52.789,20A24.006,24.006,0,0,1,20,52.789" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></path><line x1="60" y1="4" x2="4" y2="60" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" data-color="color-2" stroke-linejoin="miter"></line></g>
+    </SvgIcon>
+  );
+}
+
 export default function ffClaimAll() {
 
   const [ claimLoading, setClaimLoading ] = useState(false)
@@ -109,23 +118,45 @@ export default function ffClaimAll() {
   }
 
   return (
-    <Paper elevation={0} className={ classes.container }>
-      <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
-      <div className={ classes.infoSection }>
-      </div>
-      <div className={ classes.actionButtons }>
-        <Button
-          className={ classes.buttonOverride }
-          variant='contained'
-          size='large'
-          color='primary'
-          disabled={ claimLoading }
-          onClick={ onClaim }
-          >
-          <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
-          { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
-        </Button>
-      </div>
+    <Paper elevation={0} className={classes.container}>
+
+      {claimable.length>0 ?
+
+        <div className={classes.hasRewards}>
+          <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
+          <div className={ classes.actionButtons }>
+            <Button
+              className={ classes.buttonOverride }
+              variant='contained'
+              size='large'
+              color='primary'
+              disabled={ claimLoading }
+              onClick={ onClaim }
+              >
+              <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
+              { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
+            </Button>
+          </div>
+        </div>
+
+        :
+
+        <div className={classes.noRewards}>
+          <Grid container spacing={0} className={classes.centerGridRows}>
+            <Grid item lg={12} md={12} sm={12} xs={12}>
+              <NoRewardsIcon className={ classes.overviewIcon } />
+            </Grid>
+            <Grid item lg={12} md={12} sm={12} xs={12}>
+              <Typography variant="h5">You have no rewards</Typography>
+            </Grid>
+          </Grid>
+        </div>
+      }
+
+
+
+
+
     </Paper>
   );
 }
diff --git a/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css b/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css
@@ -3,21 +3,27 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   border: 1px solid rgba(104, 108, 122, 0.25);
-  margin: auto;
-  margin-bottom: 0px;
-  padding: 20px;
-  height: calc(100% - 81px);
+  margin: 30px auto 0px auto !important;
+  padding: 0px 0 30px 0;
+  /* min-height: calc(100% - 81px); */
 }
 
-
 .actionButtons {
   padding: 0px;
+  text-align: center !important;
+}
+
+.overviewIcon {
+  font-size: 60px !important;
+  margin-bottom: 20px;
+  opacity: 0.4;
 }
 
-.actionButton {
-  width: 200px;
+.centerGridRows {
+  text-align: center !important;
+  margin: 60px auto;
 }
 
 .actionButtonText {
@@ -30,11 +36,6 @@
   margin-left: 6px !important;
 }
 
-.infoSection {
-  padding: 0px;
-  padding-bottom: 24px;
-}
-
 .helpText {
   margin-left: 6px !important;
   font-size: 20px !important;
@@ -52,13 +53,18 @@
   color: #FFF !important;
   font-weight: 700 !important;
   box-shadow: none !important;
-  width: 240px;
-  margin-right: 0px !important;
-  margin-bottom: 10px !important;
+  width: calc(100% - 140px);
+  /* margin-right: 0px !important; */
+  margin: 20px 0 0 0 !important;
 }
 
 @media screen and (max-width: 1200px) {
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 600px) {
+  .container {
+    margin-top: 60px;
+    padding: 20px;
+    height: calc(100%);
+  }
 }
diff --git a/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css b/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css
@@ -19,7 +19,7 @@
 }
 
 .value {
-  font-size: 30px !important;
+  font-size: 24px !important;
   font-weight: bold !important;
 }
 
@@ -125,12 +125,12 @@
 
 @media screen and (max-width: 1440px) {
   .value {
-    font-size: 32px !important;
+    font-size: 24px !important;
   }
 }
 
 @media screen and (max-width: 600px) {
   .container {
-    top: 115px;
+    margin: 0px 0 40px 0 !important;
   }
 }