From df3bd38c6c6454574d74b92a5fda399c6b2b76b1 Mon Sep 17 00:00:00 2001 From: peterjurco Date: Mon, 18 Nov 2024 17:14:15 +0100 Subject: [PATCH] Rebrand Governance page --- public/dropdown.svg | 3 - public/help-outline.svg | 1 - src/components/dropdown/dropdown.module.scss | 13 ++--- src/components/dropdown/dropdown.tsx | 2 +- .../proposal-list/proposal-list.module.scss | 26 +++++++-- .../proposal-list/proposal-list.tsx | 4 +- .../treasury/treasury.module.scss | 50 ++++++++++++---- .../proposal-commons/treasury/treasury.tsx | 27 ++------- .../delegation/delegation.module.scss | 33 ++++++++++- src/pages/proposals/delegation/delegation.tsx | 33 +++++++---- src/pages/proposals/proposals.module.scss | 58 ++++++++++++++++--- src/pages/proposals/proposals.tsx | 44 +++++++------- src/styles/fonts.module.scss | 18 ++++++ src/utils/image-list.ts | 1 - 14 files changed, 220 insertions(+), 93 deletions(-) delete mode 100644 public/dropdown.svg diff --git a/public/dropdown.svg b/public/dropdown.svg deleted file mode 100644 index c29da705..00000000 --- a/public/dropdown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/help-outline.svg b/public/help-outline.svg index e5f5e183..aa7c5c48 100644 --- a/public/help-outline.svg +++ b/public/help-outline.svg @@ -4,4 +4,3 @@ d="M6.40967 6.68436C6.48165 5.80877 7.25186 5.15714 8.13 5.22891C8.93346 5.29458 9.58967 5.90466 9.58967 6.73635C9.58967 7.67825 8.70344 7.95588 8.13 8.65962C7.86934 8.9795 7.76508 9.17798 7.76508 9.80174M7.79963 11.2235H7.74963" stroke="#5D66C4" stroke-linecap="round" stroke-linejoin="round" /> - \ No newline at end of file diff --git a/src/components/dropdown/dropdown.module.scss b/src/components/dropdown/dropdown.module.scss index 74e9c75f..24fadb8a 100644 --- a/src/components/dropdown/dropdown.module.scss +++ b/src/components/dropdown/dropdown.module.scss @@ -24,26 +24,25 @@ } .dropdownMenu { - background-color: $dropdown-bgd; - color: $primary-color; + background-color: $color-blue-10; + color: $color-dark-blue-50; min-width: 100%; position: absolute; - box-shadow: $dropdown-shadow; z-index: 20; &.top { bottom: 100%; - border-bottom: 1px solid $secondary-border; } &.bottom { top: 100%; - border-top: 1px solid $secondary-border; } } .dropdownIcon { & > img { + width: 20px; + height: 20px; transition: transform 250ms; } @@ -55,8 +54,8 @@ } .dropdownMenuItem { - padding: $space-xs; - border-bottom: 1px solid $dropdown-border-color; + padding: 8px 16px; + border-bottom: 1px solid $color-base-light; &.clickable { cursor: pointer; diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 5c058bd3..2b4b2fff 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -83,7 +83,7 @@ const Dropdown = ({ children, menu, icon, alignIcon = 'center', className }: Dro > {children}
- {icon || dropdown icon} + {icon || dropdown icon}
{open && menu} diff --git a/src/pages/proposal-commons/proposal-list/proposal-list.module.scss b/src/pages/proposal-commons/proposal-list/proposal-list.module.scss index ba091c20..f27e12f8 100644 --- a/src/pages/proposal-commons/proposal-list/proposal-list.module.scss +++ b/src/pages/proposal-commons/proposal-list/proposal-list.module.scss @@ -1,4 +1,5 @@ @import '../../../styles/variables.module.scss'; +@import '../../../styles/fonts.module.scss'; .proposalItem { border-top: 1px solid $black-line-color; @@ -129,11 +130,18 @@ } .noProposals { - color: $tertiary-color; + display: flex; + flex-direction: column; + color: $color-dark-blue-400; + align-items: center; + justify-content: center; text-align: center; - margin: 15vh $space-md; - transform: translateY(-50%); - font-size: $text-small; + gap: 8px; + margin: 32px 0; + padding: 120px 0; + @include font-body-9; + border-top: 1px solid $color-dark-blue-10; + border-bottom: 1px solid $color-dark-blue-10; & > * { margin-right: $space-xs; @@ -143,3 +151,13 @@ margin-right: 0; } } + +@media (min-width: $md) { + .noProposals { + flex-direction: row; + align-items: baseline; + gap: 0; + padding: 170px 0; + @include font-body-6; + } +} diff --git a/src/pages/proposal-commons/proposal-list/proposal-list.tsx b/src/pages/proposal-commons/proposal-list/proposal-list.tsx index 77454890..a026cb7b 100644 --- a/src/pages/proposal-commons/proposal-list/proposal-list.tsx +++ b/src/pages/proposal-commons/proposal-list/proposal-list.tsx @@ -70,7 +70,9 @@ const ProposalList = (props: Props) => { return (
You need to be connected to view proposals - Connect your wallet + + Connect your wallet +
); } else if (!proposals) { diff --git a/src/pages/proposal-commons/treasury/treasury.module.scss b/src/pages/proposal-commons/treasury/treasury.module.scss index 5ff88ddf..76b7b407 100644 --- a/src/pages/proposal-commons/treasury/treasury.module.scss +++ b/src/pages/proposal-commons/treasury/treasury.module.scss @@ -1,45 +1,57 @@ @import '../../../styles/variables.module.scss'; +@import '../../../styles/fonts.module.scss'; .treasury { - max-width: 300px; width: 100%; display: flex; flex-direction: column; + margin-top: 56px; - & > *:first-child { - padding-bottom: $space-xs; - } & > * { - border-bottom: 1px solid $black-line-color; + border-bottom: 1px solid $color-dark-blue-10; } } -.label { +.treasuryTitle { display: flex; align-items: center; - justify-content: flex-end; + gap: 8px; + padding-bottom: 8px; + color: $color-dark-blue-100; + @include font-tagline-9; } .treasuryButton { flex: 1; display: flex; align-items: center; - padding: $space-xs 0; + padding: 8px 0; } .label { - color: $secondary-color; + color: $color-dark-blue-100; text-transform: capitalize; + @include font-body-14; } .treasuryMenuItem { display: flex; align-items: center; justify-content: space-between; + + @include font-body-10; + + .menuItemLabel { + color: $color-dark-blue-50; + } + + .menuItemValue { + color: $color-dark-blue-100; + } } -.copy { - margin-left: $space-sm; +.etherScanLink { + margin-left: 8px; transition: transform 0.1s; &:hover { transform: scale(1.1); @@ -49,3 +61,19 @@ .dropdownLink { display: flex; // to properly draw box shadow when the link is focused } + +@media (min-width: $md) { + .treasury { + max-width: 308px; + margin-top: 0; + } + + .treasuryTitle { + justify-content: end; + @include font-tagline-6; + } + + .label { + @include font-body-11; + } +} diff --git a/src/pages/proposal-commons/treasury/treasury.tsx b/src/pages/proposal-commons/treasury/treasury.tsx index 67a56bb1..a5eef358 100644 --- a/src/pages/proposal-commons/treasury/treasury.tsx +++ b/src/pages/proposal-commons/treasury/treasury.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames'; import Dropdown, { DropdownMenu, DropdownMenuItem } from '../../../components/dropdown'; import { FormattedTreasury, useTreasuries } from './hooks'; -import globalStyles from '../../../styles/global-styles.module.scss'; import styles from './treasury.module.scss'; import { images } from '../../../utils'; import { getEtherscanAddressUrl, useApi3AgentAddresses } from '../../../contracts'; @@ -28,23 +27,17 @@ const TreasuryDropdown = (props: TreasuryDropdownProps) => { {data.map(({ name, amountAndSymbol }) => ( -

{name}

-

- {amountAndSymbol} -

+

{name}

+

{amountAndSymbol}

 ))} } >
-

- {type} -

+

{type}

{etherscanAddressUrl && ( - + { return (
-

+

Treasury - treasury help + treasury help

diff --git a/src/pages/proposals/delegation/delegation.module.scss b/src/pages/proposals/delegation/delegation.module.scss index 60d646f2..010d562d 100644 --- a/src/pages/proposals/delegation/delegation.module.scss +++ b/src/pages/proposals/delegation/delegation.module.scss @@ -1,7 +1,34 @@ -@import '../../../styles//variables.module.scss'; +@import '../../../styles/variables.module.scss'; +@import '../../../styles/fonts.module.scss'; -.proposalsLink { - button._normal { +.delegatedTitle { + @include font-body-11; + color: $color-dark-blue-100; + margin-right: 8px; +} + +.delegatedAddress { + @include font-body-12; + color: $color-dark-blue-400; +} + +.delegateButton { + button { padding: 0; } } + +.helpIcon { + vertical-align: middle; + margin-left: 8px; +} + +@media (min-width: $md) { + .delegatedTitle { + @include font-body-7; + } + + .delegatedAddress { + @include font-body-9; + } +} diff --git a/src/pages/proposals/delegation/delegation.tsx b/src/pages/proposals/delegation/delegation.tsx index d7d401cc..9d7d4eb6 100644 --- a/src/pages/proposals/delegation/delegation.tsx +++ b/src/pages/proposals/delegation/delegation.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { abbrStr } from '../../../chain-data/helpers'; import DelegateVotesForm from '../forms/delegate/delegate-form'; -import globalStyles from '../../../styles/global-styles.module.scss'; import { useChainData } from '../../../chain-data'; import Button from '../../../components/button'; import { Modal } from '../../../components/modal'; @@ -12,12 +11,13 @@ import { handleTransactionError } from '../../../utils'; import { images } from '../../../utils'; import { TooltipChecklist } from '../../../components/tooltip'; import styles from './delegation.module.scss'; -import classNames from 'classnames'; +import { useWindowDimensions } from '../../../hooks/use-window-dimensions'; const Delegation = () => { // TODO: Retrieve only "userStaked" from the chain instead of loading all staking data (and remove useLoadDashboardData call) const { signer, delegation, dashboardState, setChainData, transactions } = useChainData(); const api3Pool = useApi3Pool(); + const { isMobile } = useWindowDimensions(); const [openDelegationModal, setOpenDelegationModal] = useState(false); const [openChooseDelegateActionModal, setOpenChooseDelegateActionModal] = useState(false); @@ -44,19 +44,28 @@ const Delegation = () => { <> {delegation?.delegate ? (
-

- Delegated to: {delegation.delegateName ? delegation.delegateName : abbrStr(delegation.delegate)} +

+ Delegated to: + + {delegation.delegateName + ? delegation.delegateName + : isMobile + ? abbrStr(delegation.delegate) + : delegation.delegate} +

- delegation help + delegation help setOpenChooseDelegateActionModal(false)}> {
) : (
-

Undelegated

+

Undelegated

- delegation help + delegation help
)} diff --git a/src/pages/proposals/proposals.module.scss b/src/pages/proposals/proposals.module.scss index 2dcc4300..3ec68c32 100644 --- a/src/pages/proposals/proposals.module.scss +++ b/src/pages/proposals/proposals.module.scss @@ -1,20 +1,62 @@ @import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; + +.governanceHeader { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 32px; +} .proposalsHeader { display: flex; + flex-direction: column-reverse; justify-content: space-between; - margin-bottom: 2 * $space-xxl; + margin-top: 56px; + + h5 { + @include font-heading-9; + color: $color-dark-blue-100; + margin-top: 40px; + } +} + +.newProposalButtonWrapper { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; - @media (max-width: $max-md) { - flex-direction: column-reverse; + .newProposalButton button { + width: 240px; + } +} + +@media (min-width: $sm) { + .proposalsHeader { + flex-direction: row; + align-items: center; - & > *:last-child { - margin-bottom: $space-xxxl; + h5 { + @include font-heading-8; + margin-top: 0; } } + + .newProposalButtonWrapper .newProposalButton button { + width: 172px; + } } -.checklistHelperText { - color: $secondary-black-color; - font-size: $text-xsmall; +@media (min-width: $md) { + .governanceHeader { + flex-direction: row; + align-items: center; + } + + .proposalsHeader { + h5 { + @include font-heading-7; + } + } } diff --git a/src/pages/proposals/proposals.tsx b/src/pages/proposals/proposals.tsx index c14c70e3..a79619a7 100644 --- a/src/pages/proposals/proposals.tsx +++ b/src/pages/proposals/proposals.tsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import Button from '../../components/button'; import Layout from '../../components/layout'; import { Modal } from '../../components/modal'; -import BorderedBox, { Header } from '../../components/bordered-box/bordered-box'; import { TooltipChecklist } from '../../components/tooltip'; import Treasury from '../proposal-commons/treasury'; import { useApi3Token, useApi3Voting, useApi3AgentAddresses } from '../../contracts'; @@ -25,7 +24,6 @@ import Delegation from './delegation'; import { useChainData } from '../../chain-data'; import { useLoadDashboardData } from '../../logic/dashboard'; import { formatApi3, handleTransactionError, images, round } from '../../utils'; -import globalStyles from '../../styles/global-styles.module.scss'; import styles from './proposals.module.scss'; const Proposals = () => { @@ -66,7 +64,7 @@ const Proposals = () => { <>
You haven't created a proposal in the last 7 days.
{createNewProposal && !proposalCooldownOver && ( -
+
{createNewProposal.lastProposalDeltaInDays > 0 ? `Last proposal created ${createNewProposal.lastProposalDeltaInDays} days ago.` : `Last proposal created less than 24 hours ago.`} @@ -112,29 +110,33 @@ const Proposals = () => { }; return ( + // TODO: adjust top spacing on the title after Staking page is merged -
+
- -
Active Proposals
-
- - - new proposal help - -
- - } - content={} - noMobileBorders - /> +
+
Active Proposals
+
+ {/* TODO: base-light background for secondary gradient button */} + + + new proposal help + +
+
+ + setOpenNewProposalModal(false)} size="large"> setOpenNewProposalModal(false)} diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss index 0108ae2d..c0078b27 100644 --- a/src/styles/fonts.module.scss +++ b/src/styles/fonts.module.scss @@ -411,6 +411,15 @@ text-transform: uppercase; } +@mixin font-tagline-6 { + font-family: Karla; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; /* 24px */ + text-transform: uppercase; +} + @mixin font-tagline-8 { font-family: Karla; font-size: 14px; @@ -420,6 +429,15 @@ text-transform: uppercase; } +@mixin font-tagline-9 { + font-family: Karla; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 150%; /* 21px */ + text-transform: uppercase; +} + @mixin font-tagline-11 { font-family: Karla; font-size: 12px; diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts index c5d09986..dd31b564 100644 --- a/src/utils/image-list.ts +++ b/src/utils/image-list.ts @@ -15,7 +15,6 @@ export const images = { connected: '/connected.svg', connectedDark: '/connected-dark.svg', disconnect: '/disconnect.svg', - dropdown: '/dropdown.svg', error: '/error.svg', externalLink: '/external-link.svg', hamburgerMenu: '/hamburger-menu.svg',