From e95f6dc6108969b5e6158a438f0c096dbd6baf9d Mon Sep 17 00:00:00 2001 From: x33q <40147432+x33q@users.noreply.github.com> Date: Tue, 2 Nov 2021 15:28:22 +0200 Subject: [PATCH] Mobile Breakpoints / Dashboard / Network Updates (#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 --- .../ffWelcomeOverview.module.css | 42 ++++++++++++ components/ffClaimAll/ffClaimAll.js | 58 +++++++++++----- components/ffClaimAll/ffClaimAll.module.css | 25 ++++++- .../ffDashboardClaimAll.js | 67 ++++++++++++++----- .../ffDashboardClaimAll.module.css | 40 ++++++----- .../ffDashboardMintOverview.module.css | 6 +- .../ffDashboardOverview.module.css | 44 ++---------- .../ffDashboardVoteOverview.module.css | 15 +---- components/ffMintOverview/ffOverview.js | 4 +- .../ffStakeOverview.module.css | 4 +- .../ffVoteOverview/ffVoteOverview.module.css | 31 +++++++-- components/header/header.js | 14 +++- components/header/header.module.css | 13 ++++ components/navigation/navigation.js | 2 +- components/navigation/navigation.module.css | 33 ++++++++- components/welcomeHeader/welcomeHeader.js | 14 +++- .../welcomeHeader/welcomeHeader.module.css | 13 ++++ pages/dashboard/dashboard.module.css | 55 ++++++++++++++- pages/dashboard/index.js | 8 +-- 19 files changed, 358 insertions(+), 130 deletions(-) diff --git a/components/WelcomeOverview/ffWelcomeOverview.module.css b/components/WelcomeOverview/ffWelcomeOverview.module.css index 3106abf..d199c14 100644 --- 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 index 2918bd8..cfe38bf 100644 --- 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 ( + + + + ); +} + export default function ffClaimAll() { const [ claimLoading, setClaimLoading ] = useState(false) @@ -112,22 +121,41 @@ export default function ffClaimAll() { return ( - -
+ + {claimable.length>0 ? +
+ +
+
+
+ +
-
- + + : + +
+ + + + + + You have no rewards + +
+ } + ); } diff --git a/components/ffClaimAll/ffClaimAll.module.css b/components/ffClaimAll/ffClaimAll.module.css index 434e152..61f33c2 100644 --- 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 index 582599a..04e37f3 100644 --- a/components/ffDashboardClaimAll/ffDashboardClaimAll.js +++ b/components/ffDashboardClaimAll/ffDashboardClaimAll.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 './ffDashboardClaimAll.module.css'; import RewardsTable from './ffDashboardClaimAllTable.js' @@ -7,6 +7,15 @@ 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 ( + + + + ); +} + export default function ffClaimAll() { const [ claimLoading, setClaimLoading ] = useState(false) @@ -109,23 +118,45 @@ export default function ffClaimAll() { } return ( - - -
-
-
- -
+ + + {claimable.length>0 ? + +
+ +
+ +
+
+ + : + +
+ + + + + + You have no rewards + + +
+ } + + + + + ); } diff --git a/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css b/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css index 3961df1..c931100 100644 --- 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 index fda179b..5722274 100644 --- 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; } } diff --git a/components/ffDashboardOverview/ffDashboardOverview.module.css b/components/ffDashboardOverview/ffDashboardOverview.module.css index 5e4027e..ef44b42 100644 --- a/components/ffDashboardOverview/ffDashboardOverview.module.css +++ b/components/ffDashboardOverview/ffDashboardOverview.module.css @@ -38,7 +38,7 @@ } .value { - font-size: 30px !important; + font-size: 24px !important; font-weight: bold !important; text-align: left !important; width: 100%; @@ -104,44 +104,8 @@ } } -@media screen and (max-width: 1440px) { - /* .value { - font-size: 30px !important; - font-weight: bold !important; - color: #fff !important; - } */ -} - -@media screen and (max-width: 1200px) { - /* .container { - width: calc(100% - 0px); - margin: 0px auto 20px auto; - border-radius: 0px; - position: absolute; - top: 60px; - padding: 20px 0; - } - - .fieldsContainer { - padding: 30px 20px; - align-items: center; - min-height: 100px; +@media screen and (max-width: 600px) { + .container { + margin-bottom: 40px; } - - .overviewIcon { - color: #fff; - font-size: 20px !important; - } - - .iconWrap { - width: 50px; - height: 50px; - color: #fff; - border: 1px solid rgba(255,255,255,0.2); - border-radius: 40px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 16px !important; - } */ } diff --git a/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css b/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css index 9cde2ec..bbcfb83 100644 --- a/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css +++ b/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css @@ -25,7 +25,7 @@ } .value { - font-size: 30px !important; + font-size: 24px !important; font-weight: bold !important; } @@ -87,20 +87,7 @@ } @media screen and (max-width: 1200px) { - /* .container { - width: calc(100%); - margin: 60px auto 40px auto; - border-radius: 0px; - } */ } @media screen and (max-width: 960px) { - /* .pieField { - left: 0px; - top: -90px; - } - - .container { - min-height: 400px; - } */ } diff --git a/components/ffMintOverview/ffOverview.js b/components/ffMintOverview/ffOverview.js index 3fd5bf3..12a6ec9 100644 --- a/components/ffMintOverview/ffOverview.js +++ b/components/ffMintOverview/ffOverview.js @@ -181,12 +181,12 @@ export default function ffOverview() {
- +
- + Borrow Limit Used {lendingBorrowLimit === null ? ( diff --git a/components/ffOptionsOverview/ffStakeOverview.module.css b/components/ffOptionsOverview/ffStakeOverview.module.css index da1ba94..5864365 100644 --- a/components/ffOptionsOverview/ffStakeOverview.module.css +++ b/components/ffOptionsOverview/ffStakeOverview.module.css @@ -72,8 +72,8 @@ } .iconWrap { - width: 80px; - height: 80px; + min-width: 80px; + min-height: 80px; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 40px; diff --git a/components/ffVoteOverview/ffVoteOverview.module.css b/components/ffVoteOverview/ffVoteOverview.module.css index d617eac..c1d7ce9 100644 --- a/components/ffVoteOverview/ffVoteOverview.module.css +++ b/components/ffVoteOverview/ffVoteOverview.module.css @@ -23,7 +23,7 @@ max-width: 1356px; display: flex; margin: 0 auto; - padding: 60px 40px; + padding: 40px 30px; align-items: center; justify-content: space-between; min-height: 100px; @@ -100,9 +100,6 @@ width: calc(100%); margin: 60px auto 40px auto; border-radius: 0px; - background: linear-gradient(-45deg, #23a6d5, #234ce7); - background-size: 600% 600%; - animation: gradient 35s ease infinite; } } @@ -113,6 +110,30 @@ } .container { - min-height: 400px; + min-height: 355px; + overflow: hidden; + } + + .value { + font-size: 26px !important; + font-weight: bold !important; + color: #fff !important; + } + + .overviewIcon { + color: #fff; + font-size: 24px !important; + } + + .iconWrap { + min-width: 60px !important; + min-height: 60px !important; + color: #fff; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 40px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 24px !important; } } diff --git a/components/header/header.js b/components/header/header.js index b069e5e..0509f98 100644 --- a/components/header/header.js +++ b/components/header/header.js @@ -12,7 +12,7 @@ import Brightness2Icon from '@material-ui/icons/Brightness2'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import MonetizationOnIcon from '@material-ui/icons/MonetizationOn'; -import { CONNECT_WALLET, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants'; +import { CONNECT_WALLET,CONNECTION_DISCONNECTED, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants'; import Unlock from '../unlock'; @@ -171,6 +171,17 @@ function Header(props) { stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VECLAIM, content: {} }) } + const switchChain =async()=>{ + try { + await window.ethereum.request({ + method: 'wallet_switchEthereumChain', + params: [{ chainId:'0x1' }], + }); + } catch (switchError) { + console.log("switch error",switchError) + } + } + return (
@@ -277,6 +288,7 @@ function Header(props) { The chain you're connected to isn't supported. Please check that your wallet is connected to Ethereum Mainnet. +
) : null} diff --git a/components/header/header.module.css b/components/header/header.module.css index 968fb6d..c0f103f 100644 --- a/components/header/header.module.css +++ b/components/header/header.module.css @@ -88,6 +88,19 @@ margin-left: 10px !important; } +.switchNetworkBtn { + margin-top: 30px !important; + text-transform: capitalize !important; + border-radius: 40px !important; + background: linear-gradient(-45deg, #23a6d5, #234ce7); + background-size: 200% 200%; + animation: gradient 35s ease infinite; + color: #FFF !important; + padding: 10px 25px !important; + font-weight: 700 !important; + font-size: 16px !important; +} + .prettyButton { font-weight: 700 !important; font-size: 12px !important; diff --git a/components/navigation/navigation.js b/components/navigation/navigation.js index 1510bf4..80414c6 100644 --- a/components/navigation/navigation.js +++ b/components/navigation/navigation.js @@ -295,7 +295,7 @@ function Navigation(props) { return ( ) : null} diff --git a/components/welcomeHeader/welcomeHeader.module.css b/components/welcomeHeader/welcomeHeader.module.css index 09982c3..b06138d 100644 --- a/components/welcomeHeader/welcomeHeader.module.css +++ b/components/welcomeHeader/welcomeHeader.module.css @@ -26,6 +26,19 @@ background: blue; } +.switchNetworkBtn { + margin-top: 30px !important; + text-transform: capitalize !important; + border-radius: 40px !important; + background: linear-gradient(-45deg, #23a6d5, #234ce7); + background-size: 200% 200%; + animation: gradient 35s ease infinite; + color: #FFF !important; + padding: 10px 25px !important; + font-weight: 700 !important; + font-size: 16px !important; +} + .yearnLogo { width: 150px !important; height: 40px !important; diff --git a/pages/dashboard/dashboard.module.css b/pages/dashboard/dashboard.module.css index 911a5dc..77cfe07 100644 --- a/pages/dashboard/dashboard.module.css +++ b/pages/dashboard/dashboard.module.css @@ -62,6 +62,7 @@ border-bottom: 1px solid rgba(104,108,122, 0.2) !important; padding: 0px; border-radius: 0 !important; + display: none; } .avatarWrap { @@ -120,7 +121,9 @@ margin-top: -80px; } -.mainHeading { +.mainHeading, +.mainHeadingTop, +.mainHeadingRewards { margin: 40px 0 20px 0 !important; text-align: left !important; font-size: 20px !important; @@ -128,6 +131,10 @@ /* width: calc(100% - 180px) !important; */ } +.mainHeadingRewards { + margin: 40px 0 38px 0 !important; +} + .mainDesc { margin: 20px auto 0px auto !important; text-align: left !important; @@ -179,13 +186,20 @@ } .ffContainer { - padding-top: 0px; + padding-top: 20px; } - .mainHeading { + .mainHeading, + .mainHeadingRewards { margin: 30px auto 40px auto !important; width: calc(100% - 80px) !important; } + .viewCollateral, + .viewVesting, + .viewVoting, + .viewRewards { + float: right; + } } @media screen and (max-width: 960px) { @@ -196,6 +210,30 @@ } @media screen and (max-width: 600px) { + .mainHeadingTop { + margin: 80px 0 0px 0 !important; + text-align: left !important; + font-size: 20px !important; + } + + .viewCollateral { + margin: 80px 0 0px 15px !important; + float: right; + } + + .mainHeading { + margin: 0px 0 0px 0 !important; + text-align: left !important; + font-size: 20px !important; + } + + .viewVesting, + .viewVoting, + .viewRewards { + margin: 0px 0 0px 15px !important; + float: right; + } + .mainHeadingNC { text-align: center !important; font-size: 24px !important; @@ -209,4 +247,15 @@ .overviewIcon { font-size: 80px !important; } + + .connected { + width: calc(100% - 60px); + margin: 0 auto; + padding-top: 0px; + margin-bottom: 130px; + } + + .accountInfo { + display: none; + } } diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js index 6fd804a..db94b6d 100644 --- a/pages/dashboard/index.js +++ b/pages/dashboard/index.js @@ -1,10 +1,10 @@ import Head from 'next/head'; import { Typography, Button, Paper, SvgIcon, Grid, Avatar } from "@material-ui/core"; import Layout from '../../components/layout/layout.js'; -import ClaimAll from '../../components/ffDashboardClaimAll'; +import MintOverview from '../../components/ffDashboardMintOverview'; import Overview from '../../components/ffDashboardOverview'; import VoteOverview from '../../components/ffDashboardVoteOverview'; -import MintOverview from '../../components/ffDashboardMintOverview'; +import ClaimAll from '../../components/ffDashboardClaimAll'; import classes from './dashboard.module.css'; @@ -97,7 +97,7 @@ function Rewards({ changeTheme }) { - Collateral + Collateral router.push('/mint')} className={classes.viewCollateral}>View @@ -117,7 +117,7 @@ function Rewards({ changeTheme }) { - Rewards + Rewards