From 51eafa87bf01e15716b3e4c727be53c907002b01 Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Tue, 12 Nov 2024 11:08:00 +0200 Subject: [PATCH 01/18] Misc additions --- public/help-outline.svg | 7 +++++ public/info-circle.svg | 7 +++++ src/styles/fonts.module.scss | 45 ++++++++++++++++++++++++++++ src/styles/global-styles.module.scss | 30 ------------------- src/styles/variables.module.scss | 1 + src/utils/image-list.ts | 2 ++ 6 files changed, 62 insertions(+), 30 deletions(-) create mode 100644 public/help-outline.svg create mode 100644 public/info-circle.svg diff --git a/public/help-outline.svg b/public/help-outline.svg new file mode 100644 index 00000000..e5f5e183 --- /dev/null +++ b/public/help-outline.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/public/info-circle.svg b/public/info-circle.svg new file mode 100644 index 00000000..b06119e2 --- /dev/null +++ b/public/info-circle.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss index e7086208..0108ae2d 100644 --- a/src/styles/fonts.module.scss +++ b/src/styles/fonts.module.scss @@ -209,6 +209,15 @@ letter-spacing: 1px; } +@mixin font-heading-4 { + font-family: Poppins; + font-size: 40px; + font-style: normal; + font-weight: 600; + line-height: 110%; /* 44px */ + letter-spacing: 1px; +} + @mixin font-heading-5 { font-family: Poppins; font-size: 36px; @@ -321,6 +330,15 @@ letter-spacing: -0.44px; } +@mixin font-subtitle-6 { + font-family: Karla; + font-size: 22px; + font-style: normal; + font-weight: 500; + line-height: 130%; /* 28.6px */ + letter-spacing: -0.44px; +} + @mixin font-subtitle-8 { font-family: Karla; font-size: 20px; @@ -383,3 +401,30 @@ line-height: 100%; /* 14px */ letter-spacing: 0.2px; } + +@mixin font-tagline-2 { + font-family: Karla; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 150%; /* 27px */ + text-transform: uppercase; +} + +@mixin font-tagline-8 { + font-family: Karla; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 150%; /* 21px */ + text-transform: uppercase; +} + +@mixin font-tagline-11 { + font-family: Karla; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 150%; /* 18px */ + text-transform: uppercase; +} diff --git a/src/styles/global-styles.module.scss b/src/styles/global-styles.module.scss index ef57c588..b6a309d2 100644 --- a/src/styles/global-styles.module.scss +++ b/src/styles/global-styles.module.scss @@ -31,36 +31,6 @@ p { margin: 0; } -h1 { - font-size: 136px; - line-height: 164px; - font-weight: 600; -} - -h2 { - font-size: 91px; - line-height: 104px; - font-weight: 600; -} - -h3 { - font-size: 50px; - line-height: 60px; - font-weight: 600; -} - -h4 { - font-size: 40px; - line-height: 52px; - font-weight: 600; -} - -h5 { - font-size: 27px; - line-height: 35px; - font-weight: 300; -} - a { color: $secondary-color; border: 0; diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss index 1ca36128..91855892 100644 --- a/src/styles/variables.module.scss +++ b/src/styles/variables.module.scss @@ -157,6 +157,7 @@ $gradient-medium-light: linear-gradient( #3c82ee 84%, #53a0d7 98% ); +$gradient-light: linear-gradient(180deg, #fafafa 0%, #f0f4ff 100%); @mixin gradient-border($gradient) { @supports (mask-composite: exclude) { diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts index d3e7bfa9..c5d09986 100644 --- a/src/utils/image-list.ts +++ b/src/utils/image-list.ts @@ -20,7 +20,9 @@ export const images = { externalLink: '/external-link.svg', hamburgerMenu: '/hamburger-menu.svg', help: '/help.svg', + helpOutline: '/help-outline.svg', info: '/info.svg', + infoCircle: '/info-circle.svg', notificationClose: '/notification-close.svg', success: '/success.svg', texture: '/texture.png', From 0aca7a8250c999ac2878da6cf7120531ba53d7c0 Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Tue, 12 Nov 2024 11:09:13 +0200 Subject: [PATCH 02/18] Update page header style --- src/components/header/header.module.scss | 47 ++++++------------------ 1 file changed, 11 insertions(+), 36 deletions(-) diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss index d6b6a7c1..9242fa77 100644 --- a/src/components/header/header.module.scss +++ b/src/components/header/header.module.scss @@ -1,51 +1,26 @@ @import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; .header { position: relative; - margin-bottom: 2.5 * $space-xxl; pointer-events: none; + margin-top: 56px; - @media (max-width: $max-md) { - margin-bottom: $space-xxxl; + @media (min-width: $md) { + margin-top: 0; } } -.headerLargeTitle { - position: absolute; - bottom: -20px; - font-size: $heading-1; - line-height: $lh-heading-1; - font-weight: 600; - background-image: linear-gradient(76.31deg, #c3c4c3 2.01%, #f3f3f3 99.02%); - background-clip: text; - opacity: 0.1; - - @media (max-width: $max-lg) { - bottom: -10px; - font-size: $heading-2; - line-height: $lh-heading-2; - } - - @media (max-width: $max-md) { - font-size: 80px; - line-height: 101px; - } +.headerTitle { + @include font-heading-7; + color: $color-dark-blue-400; - @media (max-width: $max-sm) { - bottom: -5px; - font-size: $heading-3; - line-height: $lh-heading-3; + @media (min-width: $sm) { + @include font-heading-6; } -} - -.headerTitle { - font-size: $heading-4; - line-height: $lh-heading-4; - font-weight: 600; - @media (max-width: $max-sm) { - font-size: $heading-5; - line-height: $lh-heading-5; + @media (min-width: $md) { + @include font-heading-4; } } From c990f460be6cbf60edf3f7bbeaf8d7a770d6af3e Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Tue, 12 Nov 2024 11:09:24 +0200 Subject: [PATCH 03/18] Update radial chart --- src/pages/dashboard/staking/radial-chart.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/pages/dashboard/staking/radial-chart.tsx b/src/pages/dashboard/staking/radial-chart.tsx index b6d8a8d8..936529dd 100644 --- a/src/pages/dashboard/staking/radial-chart.tsx +++ b/src/pages/dashboard/staking/radial-chart.tsx @@ -9,7 +9,7 @@ type Props = { const RadialChart = ({ completionPercent }: Props) => { const r = 73, - strokeWidth = 10, + strokeWidth = 8, side = r * 2 + strokeWidth * 2, center = r + strokeWidth; @@ -19,12 +19,13 @@ const RadialChart = ({ completionPercent }: Props) => { return ( - + @@ -33,8 +34,9 @@ const RadialChart = ({ completionPercent }: Props) => { y="45%" textAnchor="middle" dominantBaseline="middle" - fill="white" - fontSize={27} + fill="#1F267B" + fontSize={32} + fontWeight={500} children={completionText} /> @@ -43,15 +45,16 @@ const RadialChart = ({ completionPercent }: Props) => { y="62%" textAnchor="middle" dominantBaseline="middle" - fill="white" - children="OF TARGET MET" + fill="#455065" fontSize={12} + fontWeight={600} + children="OF TARGET MET" /> - - + + From 4a61b0d0eac98c185cc60173f1b70e976d83f29c Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Tue, 12 Nov 2024 11:09:29 +0200 Subject: [PATCH 04/18] Update Staking page --- src/components/card/card.module.scss | 29 +++ src/components/card/card.tsx | 32 +++ src/components/card/index.ts | 2 + src/pages/dashboard/dashboard.module.scss | 188 +++++++++++--- src/pages/dashboard/dashboard.tsx | 169 +++++++------ .../pending-unstake-panel.module.scss | 64 +++-- .../pending-unstake-panel.tsx | 85 +++---- .../staking/staking-pool.module.scss | 230 ++++++++++++------ src/pages/dashboard/staking/staking-pool.tsx | 36 +-- 9 files changed, 568 insertions(+), 267 deletions(-) create mode 100644 src/components/card/card.module.scss create mode 100644 src/components/card/card.tsx create mode 100644 src/components/card/index.ts diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss new file mode 100644 index 00000000..0535d83b --- /dev/null +++ b/src/components/card/card.module.scss @@ -0,0 +1,29 @@ +@import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; + +.card { + border-radius: 20px; + border: 1px solid $color-blue-25; + background: $gradient-light; + box-shadow: 0px 4px 4px 0px rgba(190, 210, 255, 0.2); + padding: $space-lg; + padding-bottom: $space-xl; +} + +.cardHeader { + @include font-heading-9; + display: flex; + align-items: center; + justify-content: space-between; + margin-left: $space-md; + margin-bottom: $space-xxl; +} + +.contentFooter { + margin-top: $space-xl; + text-align: center; +} + +.cardChildren { + margin-top: $space-lg; +} diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx new file mode 100644 index 00000000..5c72653f --- /dev/null +++ b/src/components/card/card.tsx @@ -0,0 +1,32 @@ +import { ReactNode } from 'react'; +import styles from './card.module.scss'; + +type Props = { + header: ReactNode; + content: ReactNode; + contentFooter?: ReactNode; + children?: ReactNode; +}; + +type HeaderProps = { + children: ReactNode; +}; + +export const Header = ({ children }: HeaderProps) => { + return
{children}
; +}; + +const Card = (props: Props) => { + const { header, content, contentFooter, children } = props; + + return ( +
+ {header} + {content} + {contentFooter &&
{contentFooter}
} + {children &&
{children}
} +
+ ); +}; + +export default Card; diff --git a/src/components/card/index.ts b/src/components/card/index.ts new file mode 100644 index 00000000..ca6b6599 --- /dev/null +++ b/src/components/card/index.ts @@ -0,0 +1,2 @@ +export { default } from './card'; +export * from './card'; diff --git a/src/pages/dashboard/dashboard.module.scss b/src/pages/dashboard/dashboard.module.scss index 251e96e6..51e78f13 100644 --- a/src/pages/dashboard/dashboard.module.scss +++ b/src/pages/dashboard/dashboard.module.scss @@ -1,67 +1,105 @@ @import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; -.borderedBoxesWrap { +.cardsWrapper { display: flex; - align-items: flex-start; + flex-direction: column; + align-items: center; justify-content: space-between; + box-sizing: border-box; + gap: $space-xl; + width: 100%; - & > * { - margin-right: $space-xxl; - } - - & > *:last-child { - margin-right: 0; + & > div { + width: 100%; + box-sizing: border-box; } - @media (max-width: $max-md) { - flex-direction: column; - align-items: center; + @media (min-width: $sm) { + flex-direction: row; + align-items: flex-start; + gap: 32px; - & > * { - margin-right: 0; - margin-bottom: 100px; + & > div { + width: 50%; } + } - & > *:last-child { - margin-bottom: 0; - } + @media (min-width: $md) { + padding-top: $space-xl; + gap: 64px; } } -.stakingBoxWrap { - width: 100%; - max-width: 420px; - & > * { - margin-bottom: $space-xl; +.cardContent { + display: flex; + flex-direction: column; + gap: $space-xl; + + & > div { + text-align: center; } - & > *:last-child { - margin-bottom: 0; + + @media (min-width: $md) { + gap: 64px; } } -.borderedBoxContentTitle { - font-size: 14px; - line-height: 17px; - font-weight: 500; - color: $secondary-color; - text-transform: uppercase; +.cardHeaderButton { + display: flex; + align-items: center; + gap: $space-xs; +} + +.cardContentTitle { + @include font-tagline-11; + color: $color-dark-blue-100; + margin-bottom: $space-xs; + + @media (min-width: $md) { + @include font-tagline-8; + } +} + +.cardContentValue { + @include font-heading-5; + color: $color-dark-blue-400; + line-height: 25px; + + @media (min-width: $md) { + @include font-heading-4; + line-height: 28px; + } } .dashboardHeader { - font-size: $heading-5; - line-height: $lh-heading-5; - color: $green-color; + @include font-heading-9; + color: $color-dark-blue-100; - @media (max-width: $max-sm) { - font-size: $text-normal; - line-height: $lh-normal; + @media (min-width: $sm) { + @include font-heading-8; + } + @media (min-width: $md) { + @include font-heading-7; + } +} + +.extraTopSpacing { + margin-top: $space-xl; + + @media (min-width: $md) { + margin-top: 72px; } } .tutorialVideo { position: relative; padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ - margin: $space-xl 0; + margin: $space-lg 0 $space-xxl 0; + + @media (min-width: $md) { + margin-bottom: 72px; + } iframe { position: absolute; @@ -71,3 +109,79 @@ height: 100%; } } + +.connectWalletBox { + display: flex; + flex-direction: column; + gap: $space-lg; + color: $color-dark-blue-400; + padding: $space-lg 0; + margin: $space-xl 0; + border-top: 1px solid $color-dark-blue-10; + border-bottom: 1px solid $color-dark-blue-10; + + @media (min-width: $sm) { + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: $space-xxxl 0; + } + @media (min-width: $md) { + margin: $space-xxl 0 72px 0; + } +} + +.connectWalletBoxContent { + display: flex; + align-items: center; + gap: $space-lg; + + & img { + width: 27px; + height: 27px; + } + + @media (min-width: $sm) { + gap: $space-xl; + + & img { + width: 34px; + height: 34px; + } + } +} + +.connectWalletBoxText { + display: flex; + flex-direction: column; +} + +.connectWalletBoxTitle { + @include font-body-10; + + @media (min-width: $sm) { + @include font-body-8; + } + @media (min-width: $md) { + @include font-body-4; + } +} + +.connectWalletBoxSubtitle { + @include font-body-12; + + @media (min-width: $sm) { + @include font-body-9; + } + @media (min-width: $md) { + @include font-body-6; + } +} + +.connectWalletBoxButton { + margin-left: 45px; + + @media (min-width: $sm) { + margin-left: 0; + } +} diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 41f98405..eb3faa83 100644 --- a/src/pages/dashboard/dashboard.tsx +++ b/src/pages/dashboard/dashboard.tsx @@ -12,12 +12,12 @@ import Button from '../../components/button'; import { Tooltip } from '../../components/tooltip'; import PendingUnstakePanel from './pending-unstake-panel/pending-unstake-panel'; import StakingPool from './staking/staking-pool'; -import BorderedBox, { Header } from '../../components/bordered-box/bordered-box'; +import Card, { Header as CardHeader } from '../../components/card/card'; import UnstakeBanner from './unstake-banner/unstake-banner'; -import globalStyles from '../../styles/global-styles.module.scss'; import styles from './dashboard.module.scss'; import ConfirmUnstakeForm from './forms/confirm-unstake-form'; import classNames from 'classnames'; +import ConnectButton from '../../components/connect-button'; type ModalType = 'deposit' | 'withdraw' | 'stake' | 'unstake' | 'confirm-unstake'; @@ -47,6 +47,24 @@ const Dashboard = () => { {pendingUnstake?.canUnstake && } {!provider && ( <> + {/* Connect Wallet */} +
+
+ connect wallet info +
+ Connect your Wallet. + Connect wallet to start operating +
+
+ +
+ + Connect Wallet + +
+
+ + {/* How This Works */}

How This Works