From 90b9d7ed56e30deec474d2622ac2c51f98ba5c7b Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Wed, 20 Nov 2024 14:25:16 +0200 Subject: [PATCH] Rebrand staking page (#474) * Misc additions * Update page header style * Update radial chart * Update Staking page * Move tooltips to own column * Style card title * Correct Connect Wallet info icon size * Correct Connect Wallet box button * Adjust card gap * Add secondary-neutral button variant * Add gradient border to unstaking card * Remove unnecesary global classes and fine-tune unstake panel * Refactor button variants * Adjust staking panel actions buttons * Fix Cy tests * Use data-testid instead of data-cy * Update pending staking card * Fix button unclickable bug --- cypress/e2e/delegation.cy.ts | 2 +- cypress/e2e/keyboard-navigation.cy.ts | 7 +- cypress/e2e/staking.cy.ts | 13 +- cypress/support/commands.ts | 2 +- public/help-outline.svg | 7 + public/info-circle.svg | 7 + src/components/button/button.module.scss | 140 +---------- src/components/button/button.tsx | 6 +- .../button/variants/link-blue.module.scss} | 39 +-- .../variants/menu-link-secondary.module.scss | 38 +++ .../button/variants/primary.module.scss | 70 ++++++ .../variants/secondary-neutral.module.scss | 56 +++++ .../button/variants/secondary.module.scss | 64 +++++ src/components/card/card.module.scss | 44 ++++ src/components/card/card.tsx | 34 +++ src/components/card/index.ts | 2 + src/components/header/header.module.scss | 47 +--- .../error-reporting-notice.module.scss | 2 +- src/components/layout/layout.module.scss | 2 +- src/pages/dashboard/dashboard.module.scss | 186 +++++++++++--- src/pages/dashboard/dashboard.tsx | 187 ++++++++------ .../pending-unstake-panel.module.scss | 79 ++++-- .../pending-unstake-panel.tsx | 86 +++---- src/pages/dashboard/staking/radial-chart.tsx | 19 +- .../staking/staking-pool.module.scss | 237 ++++++++++++------ src/pages/dashboard/staking/staking-pool.tsx | 41 +-- src/styles/fonts.module.scss | 45 ++++ src/styles/global-styles.module.scss | 30 --- src/styles/variables.module.scss | 30 ++- src/utils/image-list.ts | 2 + 30 files changed, 996 insertions(+), 528 deletions(-) create mode 100644 public/help-outline.svg create mode 100644 public/info-circle.svg rename src/{styles/link-styles.module.scss => components/button/variants/link-blue.module.scss} (55%) create mode 100644 src/components/button/variants/menu-link-secondary.module.scss create mode 100644 src/components/button/variants/primary.module.scss create mode 100644 src/components/button/variants/secondary-neutral.module.scss create mode 100644 src/components/button/variants/secondary.module.scss 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/cypress/e2e/delegation.cy.ts b/cypress/e2e/delegation.cy.ts index 8c50be7d..13750e6c 100644 --- a/cypress/e2e/delegation.cy.ts +++ b/cypress/e2e/delegation.cy.ts @@ -5,7 +5,7 @@ describe('delegation', () => { cy.resetBlockchain().login(); // Approve, deposit and stake - cy.findByText('+ Deposit').click(); + cy.findByTestId('staking-card-deposit-btn').click(); cy.get('#modal').find('input').type('200'); cy.findByText('Approve').click(); cy.findByText('Deposit and Stake').click(); diff --git a/cypress/e2e/keyboard-navigation.cy.ts b/cypress/e2e/keyboard-navigation.cy.ts index dd803795..d2a5d4bb 100644 --- a/cypress/e2e/keyboard-navigation.cy.ts +++ b/cypress/e2e/keyboard-navigation.cy.ts @@ -23,6 +23,7 @@ describe('keyboard navigation and accessibility', () => { pressTabAndAssertFocusOutline(() => cy.findAllByText('Api3 Market').filter(':visible').closest('a')); pressTabAndAssertFocusOutline(() => cy.findAllByText('Docs').filter(':visible').closest('a')); + pressTabAndAssertFocusOutline(() => cy.findByTestId('connect-wallet-staking-btn')); pressTabAndAssertFocusOutline(() => cy.findByText('About API3')); pressTabAndAssertFocusOutline(() => cy.findByText('Error Reporting')); pressTabAndAssertFocusOutline(() => cy.findByText('Github')); @@ -36,7 +37,7 @@ describe('keyboard navigation and accessibility', () => { }); it('uses focus lock (cannot tab outside modal)', () => { - cy.findByText('+ Deposit').click(); + cy.findByText('Deposit').click(); cy.get('#modal').find('input').should('have.focus'); cy.get('#modal').find('input').type('123'); @@ -52,12 +53,12 @@ describe('keyboard navigation and accessibility', () => { it('can use keyboard to "press" the buttons', () => { // Can close the modal by pressing ESC - cy.findByText('+ Deposit').click(); + cy.findByText('Deposit').click(); cy.get('body').type('{esc}'); cy.get('#modal').find('input').should('not.exist'); // Can deposit by pressing ENTER when button has focus - cy.findByText('+ Deposit').click(); + cy.findByText('Deposit').click(); cy.get('#modal').find('input').type('123').tab(); // Tab over "Max" button pressTabAndAssertFocusOutline(() => cy.findByText('Approve')); diff --git a/cypress/e2e/staking.cy.ts b/cypress/e2e/staking.cy.ts index 81244aea..df378ff6 100644 --- a/cypress/e2e/staking.cy.ts +++ b/cypress/e2e/staking.cy.ts @@ -7,18 +7,19 @@ describe('staking', () => { cy.resetBlockchain().login(); // Approve and deposit - cy.findByText('+ Deposit').click(); + cy.findByTestId('staking-card-deposit-btn').click(); cy.get('#modal').find('input').type('500'); cy.findByText('Approve').click(); cy.findByText('Deposit').should('be.visible'); + cy.get('#modal').findByRole('button', { name: 'Deposit' }).should('be.visible'); cy.percySnapshot('Staking: Deposit modal'); - cy.findByText('Deposit').click(); + cy.get('#modal').findByRole('button', { name: 'Deposit' }).click(); cy.dataCy('balance').should('have.text', '500.0'); // Stake - cy.findByText('+ Stake').click(); + cy.findByTestId('staking-card-stake-btn').click(); cy.get('#modal').find('input').type('100'); - cy.findByText('Stake').click(); + cy.get('#modal').findByRole('button', { name: 'Stake' }).click(); cy.dataCy('unstaked').should('have.text', '400.0'); cy.dataCy('withdrawable').should('have.text', '400.0'); cy.dataCy('staked').should('have.text', '100.0'); @@ -31,7 +32,7 @@ describe('staking', () => { it('can deposit and stake', () => { cy.useChainSnapshot('user-staked'); - cy.findByText('+ Deposit').click(); + cy.findByTestId('staking-card-deposit-btn').click(); cy.get('#modal').find('input').type('200'); cy.findByText('Deposit and Stake').click(); @@ -86,7 +87,7 @@ it.skip('user can unstake & withdraw', () => { cy.resetBlockchain().login(); // Approve and deposit - cy.findByText('+ Deposit').click(); + cy.findByTestId('staking-card-deposit-btn').click(); cy.get('#modal').find('input').type('1000'); cy.findByText('Approve').click(); cy.findByText('Deposit and Stake').click(); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 2b342500..0ed113ea 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -65,7 +65,7 @@ Cypress.Commands.add('login', () => { }); // Login - cy.findByRole('button', { name: 'Connect Wallet' }).click(); + cy.findAllByRole('button', { name: 'Connect Wallet' }).first().click(); // Web3 Modal cy.get('w3m-modal') 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/components/button/button.module.scss b/src/components/button/button.module.scss index 285286e2..83f58c36 100644 --- a/src/components/button/button.module.scss +++ b/src/components/button/button.module.scss @@ -1,6 +1,10 @@ @import '../../styles/variables.module.scss'; @import '../../styles/fonts.module.scss'; -@import '../../styles/link-styles.module.scss'; +@import './variants/primary.module.scss'; +@import './variants/secondary.module.scss'; +@import './variants/secondary-neutral.module.scss'; +@import './variants/link-blue.module.scss'; +@import './variants/menu-link-secondary.module.scss'; .buttonWrapper { display: inline-block; @@ -21,139 +25,15 @@ cursor: pointer; &.primary { - background-color: $color-blue-500; - color: $color-base-light; - border: none; - - &.xxs { - padding: 0 10px; - border-radius: 24px; - height: 24px; - @include font-body-17; - } - - &.xs { - padding: 0 16px; - border-radius: 24px; - height: 32px; - @include font-body-14; - } - - &.sm { - padding: 0 20px; - border-radius: 24px; - height: 40px; - @include font-button-3; - } - - &.md { - padding: 0 24px; - border-radius: 28px; - height: 48px; - @include font-button-2; - } - - &.lg { - padding: 0 32px; - border-radius: 32px; - height: 56px; - @include font-button-1; - } - - &:hover { - background-color: $color-blue-200; - } - - &:active { - background-color: $color-blue-600; - } - - &:disabled { - color: $color-blue-50; - background-color: $color-blue-10; - } - - &.dark { - background-color: $color-blue-400; - - &:hover { - background-color: $color-blue-200; - } - - &:active { - background-color: $color-blue-500; - } - - &:disabled { - color: $color-blue-400; - background-color: $color-dark-blue-400; - } - } + @include button-primary; } &.secondary { - position: relative; - color: $color-dark-blue-400; - border: 1px solid transparent; - @include gradient-border($gradient-soft-light); - - &.xxs { - padding: 0 10px; - border-radius: 24px; - height: 24px; - @include font-body-17; - } - - &.xs { - padding: 0 16px; - border-radius: 24px; - height: 32px; - @include font-body-14; - } - - &.sm { - padding: 0 20px; - border-radius: 24px; - height: 40px; - @include font-button-3; - } - - &.md { - padding: 0 24px; - border-radius: 28px; - height: 48px; - @include font-button-2; - } - - &.lg { - padding: 0 32px; - border-radius: 32px; - height: 56px; - @include font-button-1; - } - - &:hover, - &:active, - &:disabled { - &:before { - padding: 0px; - } - } - - &:hover { - color: $color-blue-200; - border: 1px solid $color-blue-200; - } - - &:active { - color: $color-blue-600; - border: 1px solid $color-blue-600; - } + @include button-secondary; + } - &:disabled { - color: $color-gray-400; - border: 1px solid $color-gray-400; - } + &.secondary-neutral { + @include button-secondary-neutral; } &.link-blue { diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 7d013f21..e5551f5c 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -10,12 +10,13 @@ type BreakpointsProps = { [key in BreakpointKeys]?: { size?: Size } }; export interface Props extends BreakpointsProps { children: ReactNode; className?: string; - type?: 'primary' | 'secondary' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue'; + type?: 'primary' | 'secondary' | 'secondary-neutral' | 'link' | 'text' | 'menu-link-secondary' | 'link-blue'; size?: Size; disabled?: boolean; href?: string; theme?: 'light' | 'dark'; onClick?: () => void; + 'data-testid'?: string; } const Button = ({ @@ -31,6 +32,7 @@ const Button = ({ sm, md, lg, + ...rest }: Props) => { const { width } = useWindowDimensions(); const sizeClass = getSizeClass(width, size, { xs, sm, md, lg }); @@ -42,6 +44,7 @@ const Button = ({ href={href} className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])} {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})} + {...rest} > {children} @@ -50,6 +53,7 @@ const Button = ({ className={classNames(styles.button, styles[type], styles[theme], styles[sizeClass])} onClick={onClick} disabled={disabled} + {...rest} > {children} diff --git a/src/styles/link-styles.module.scss b/src/components/button/variants/link-blue.module.scss similarity index 55% rename from src/styles/link-styles.module.scss rename to src/components/button/variants/link-blue.module.scss index b46afed5..ed15d792 100644 --- a/src/styles/link-styles.module.scss +++ b/src/components/button/variants/link-blue.module.scss @@ -1,4 +1,4 @@ -@import './fonts.module.scss'; +@import '../../../styles/fonts.module.scss'; @mixin link-blue { color: $color-blue-500; @@ -50,40 +50,3 @@ } } } - -@mixin menu-link-secondary { - position: relative; - border: none; - color: $color-dark-blue-400; - height: 20px; - padding: 0; - - &.xs { - @include font-overline-2; - } - - &.sm { - @include font-body-15; - } - - &.md { - @include font-body-12; - } - - &.lg { - height: 24px; - @include font-description-6; - } - - &:hover { - color: $color-blue-400; - } - - &:active { - color: $color-blue-300; - } - - &:disabled { - color: $color-dark-blue-25; - } -} diff --git a/src/components/button/variants/menu-link-secondary.module.scss b/src/components/button/variants/menu-link-secondary.module.scss new file mode 100644 index 00000000..c5e76019 --- /dev/null +++ b/src/components/button/variants/menu-link-secondary.module.scss @@ -0,0 +1,38 @@ +@import '../../../styles/fonts.module.scss'; + +@mixin menu-link-secondary { + position: relative; + border: none; + color: $color-dark-blue-400; + height: 20px; + padding: 0; + + &.xs { + @include font-overline-2; + } + + &.sm { + @include font-body-15; + } + + &.md { + @include font-body-12; + } + + &.lg { + height: 24px; + @include font-description-6; + } + + &:hover { + color: $color-blue-400; + } + + &:active { + color: $color-blue-300; + } + + &:disabled { + color: $color-dark-blue-25; + } +} diff --git a/src/components/button/variants/primary.module.scss b/src/components/button/variants/primary.module.scss new file mode 100644 index 00000000..47aec2da --- /dev/null +++ b/src/components/button/variants/primary.module.scss @@ -0,0 +1,70 @@ +@mixin button-primary { + background-color: $color-blue-500; + color: $color-base-light; + border: none; + + &.xxs { + padding: 0 10px; + border-radius: 24px; + height: 24px; + @include font-body-17; + } + + &.xs { + padding: 0 16px; + border-radius: 24px; + height: 32px; + @include font-body-14; + } + + &.sm { + padding: 0 20px; + border-radius: 24px; + height: 40px; + @include font-button-3; + } + + &.md { + padding: 0 24px; + border-radius: 28px; + height: 48px; + @include font-button-2; + } + + &.lg { + padding: 0 32px; + border-radius: 32px; + height: 56px; + @include font-button-1; + } + + &:hover { + background-color: $color-blue-200; + } + + &:active { + background-color: $color-blue-600; + } + + &:disabled { + color: $color-blue-50; + background-color: $color-blue-10; + } + + &.dark { + background-color: $color-blue-400; + + &:hover { + background-color: $color-blue-200; + } + + &:active { + background-color: $color-blue-500; + } + + &:disabled { + color: $color-blue-400; + background-color: $color-dark-blue-400; + } + } +} diff --git a/src/components/button/variants/secondary-neutral.module.scss b/src/components/button/variants/secondary-neutral.module.scss new file mode 100644 index 00000000..ccff7fdc --- /dev/null +++ b/src/components/button/variants/secondary-neutral.module.scss @@ -0,0 +1,56 @@ +@mixin button-secondary-neutral { + position: relative; + color: $color-blue-500; + border: 1px solid $color-blue-500; + background: $color-base-light; + + &.xxs { + padding: 0 10px; + border-radius: 24px; + height: 24px; + @include font-body-17; + } + + &.xs { + padding: 0 16px; + border-radius: 24px; + height: 32px; + @include font-body-14; + } + + &.sm { + padding: 0 20px; + border-radius: 24px; + height: 40px; + @include font-button-3; + } + + &.md { + padding: 0 24px; + border-radius: 28px; + height: 48px; + @include font-button-2; + } + + &.lg { + padding: 0 32px; + border-radius: 32px; + height: 56px; + @include font-button-1; + } + + &:hover { + color: $color-blue-200; + border: 1px solid $color-blue-200; + } + + &:active { + color: $color-blue-600; + border: 1px solid $color-blue-600; + } + + &:disabled { + color: $color-gray-400; + border: 1px solid $color-blue-50; + } +} diff --git a/src/components/button/variants/secondary.module.scss b/src/components/button/variants/secondary.module.scss new file mode 100644 index 00000000..2bb7301b --- /dev/null +++ b/src/components/button/variants/secondary.module.scss @@ -0,0 +1,64 @@ +@mixin button-secondary { + position: relative; + color: $color-dark-blue-400; + border: 1px solid transparent; + @include gradient-border($gradient-soft-light); + + &.xxs { + padding: 0 10px; + border-radius: 24px; + height: 24px; + @include font-body-17; + } + + &.xs { + padding: 0 16px; + border-radius: 24px; + height: 32px; + @include font-body-14; + } + + &.sm { + padding: 0 20px; + border-radius: 24px; + height: 40px; + @include font-button-3; + } + + &.md { + padding: 0 24px; + border-radius: 28px; + height: 48px; + @include font-button-2; + } + + &.lg { + padding: 0 32px; + border-radius: 32px; + height: 56px; + @include font-button-1; + } + + &:hover, + &:active, + &:disabled { + &:before { + padding: 0px; + } + } + + &:hover { + color: $color-blue-200; + border: 1px solid $color-blue-200; + } + + &:active { + color: $color-blue-600; + border: 1px solid $color-blue-600; + } + + &:disabled { + color: $color-gray-400; + border: 1px solid $color-gray-400; + } +} diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss new file mode 100644 index 00000000..ca4f5ac2 --- /dev/null +++ b/src/components/card/card.module.scss @@ -0,0 +1,44 @@ +@import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; + +.card { + position: relative; + 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 { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: $space-md; + margin-bottom: $space-xxl; + + > h5 { + @include font-heading-9; + } + + @media (min-width: $md) { + > h5 { + @include font-heading-7; + } + } +} + +.contentFooter { + margin-top: $space-xl; + text-align: center; +} + +.cardChildren { + margin-top: $space-lg; +} + +.gradientBorder { + border: none; + @include gradient-border($gradient-base-blue-01); +} diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx new file mode 100644 index 00000000..1fe0cdb6 --- /dev/null +++ b/src/components/card/card.tsx @@ -0,0 +1,34 @@ +import { ReactNode } from 'react'; +import styles from './card.module.scss'; +import classNames from 'classnames'; + +type Props = { + header: ReactNode; + content: ReactNode; + contentFooter?: ReactNode; + children?: ReactNode; + gradientBorder?: boolean; +}; + +type HeaderProps = { + children: ReactNode; +}; + +export const Header = ({ children }: HeaderProps) => { + return
{children}
; +}; + +const Card = (props: Props) => { + const { header, content, contentFooter, children, gradientBorder } = 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/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; } } diff --git a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss index 58851cdc..8fe8b2d9 100644 --- a/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss +++ b/src/components/layout/error-reporting-notice/error-reporting-notice.module.scss @@ -1,6 +1,6 @@ @import '../../../styles/variables.module.scss'; @import '../../../styles/fonts.module.scss'; -@import '../../../styles/link-styles.module.scss'; +@import '../../button/variants/link-blue.module.scss'; @import '../layout.module.scss'; .wrapper { diff --git a/src/components/layout/layout.module.scss b/src/components/layout/layout.module.scss index f62923aa..ebdfe8a2 100644 --- a/src/components/layout/layout.module.scss +++ b/src/components/layout/layout.module.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.module.scss'; @import '../../styles/fonts.module.scss'; -@import '../../styles/link-styles.module.scss'; +@import '../button//variants/menu-link-secondary.module.scss'; .layout { background: linear-gradient(334deg, #fafafa -0.91%, #ebf0ff 48.81%, #fafafa 99.52%); diff --git a/src/pages/dashboard/dashboard.module.scss b/src/pages/dashboard/dashboard.module.scss index 251e96e6..28376bc8 100644 --- a/src/pages/dashboard/dashboard.module.scss +++ b/src/pages/dashboard/dashboard.module.scss @@ -1,67 +1,101 @@ @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: 24px; + + & > div { + text-align: center; } - & > *:last-child { - margin-bottom: 0; +} + +.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; } } -.borderedBoxContentTitle { - font-size: 14px; - line-height: 17px; - font-weight: 500; - color: $secondary-color; - text-transform: uppercase; +.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 (min-width: $sm) { + @include font-heading-8; + } + @media (min-width: $md) { + @include font-heading-7; + } +} + +.extraTopSpacing { + margin-top: $space-xl; - @media (max-width: $max-sm) { - font-size: $text-normal; - line-height: $lh-normal; + @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 +105,81 @@ 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: 16px; + height: 40px; + + & img { + width: 32px; + height: 32px; + } + + @media (min-width: $sm) { + gap: $space-xl; + height: 54px; + + & img { + width: 40px; + height: 40px; + } + } +} + +.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: 42px; + + @media (min-width: $sm) { + margin-left: 0; + } +} diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx index 41f98405..da61aa7e 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