From f2c1e4ed66cadcb2579a8b99e2c84e44df125f63 Mon Sep 17 00:00:00 2001 From: biocom Date: Wed, 12 Jan 2022 15:55:10 +0100 Subject: [PATCH 1/4] Use theme colors. --- src/custom/pages/Claim/ClaimSummary.tsx | 2 +- src/custom/pages/Claim/styled.ts | 138 +++++------------------- 2 files changed, 26 insertions(+), 114 deletions(-) diff --git a/src/custom/pages/Claim/ClaimSummary.tsx b/src/custom/pages/Claim/ClaimSummary.tsx index dd849a6b4..db4bc2178 100644 --- a/src/custom/pages/Claim/ClaimSummary.tsx +++ b/src/custom/pages/Claim/ClaimSummary.tsx @@ -31,7 +31,7 @@ export default function ClaimSummary({ hasClaims, unclaimedAmount }: ClaimSummar
Total available to claim -

{formatSmart(unclaimedAmount)} vCOW

+

{formatSmart(unclaimedAmount) || 0} vCOW
)} diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 308168be7..5ad6f739c 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -17,13 +17,15 @@ export const PageWrapper = styled.div` flex-flow: column wrap; max-width: 760px; width: 100%; - background: linear-gradient(315deg, #000000 0%, #000000 55%, #2a2a2a 100%); - color: white; + color: ${({ theme }) => theme.text1}; border-radius: var(--border-radius); padding: 30px; + border: ${({ theme }) => theme.appBody.border}; + box-shadow: ${({ theme }) => theme.appBody.boxShadow}; + background: ${({ theme }) => theme.bg1}; a { - color: var(--color-orange); + color: ${({ theme }) => theme.primary1}; } p { @@ -36,7 +38,7 @@ export const PageWrapper = styled.div` } p > i { - color: var(--color-orange); + color: ${({ theme }) => theme.primary1}; } p > a { @@ -45,10 +47,6 @@ export const PageWrapper = styled.div` } ${ButtonPrimary} { - background: var(--color-orange); - border: 0; - box-shadow: none; - color: black; border-radius: var(--border-radius); width: 100%; font-size: 21px; @@ -58,16 +56,7 @@ export const PageWrapper = styled.div` margin: 0 auto 24px; `}; - &:hover { - border: 0; - box-shadow: none; - transform: none; - background: rgb(247 127 80); - color: black; - } - &[disabled] { - background: rgba(151, 151, 151, 0.6); cursor: not-allowed; pointer-events: all; } @@ -75,7 +64,7 @@ export const PageWrapper = styled.div` ${ButtonSecondary} { background: 0; - color: var(--color-orange); + color: ${({ theme }) => theme.primary1}; border: none; &:hover { @@ -94,27 +83,14 @@ export const ClaimSummary = styled.div` align-items: center; justify-content: flex-start; padding: 8px; + background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)}; + border: ${({ theme }) => + theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; border-radius: var(--border-radius); margin: 0 auto 24px; - /* background: linear-gradient(315deg, #000000 0%, #000000 55%, #202020 100%); */ position: relative; - color: #bbbbbb; overflow: hidden; - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 0; - /* filter: blur(75px); */ - /* background: conic-gradient(var(--color-tr) 25%, var(--color-tl) 0 28%, var(--color-tr) 0 30%, var(--color-tl) 0); */ - background: var(--color-container-bg); - opacity: 1; - } - h1, div { z-index: 1; @@ -185,7 +161,7 @@ export const ClaimTable = styled.div` text-align: left; font-weight: normal; font-size: 13px; - color: white; + color: ${({ theme }) => theme.text1}; position: relative; } @@ -196,7 +172,7 @@ export const ClaimTable = styled.div` td { padding-top: 10px; padding-bottom: 10px; - color: white; + color: ${({ theme }) => theme.text1}; word-break: break-word; } @@ -238,7 +214,6 @@ export const ClaimAccount = styled.div` > div > p { margin: 0 0 0 10px; font-size: 18px; - color: white; font-weight: normal; } ` @@ -259,7 +234,6 @@ export const ClaimTotal = styled.div` > p { margin: 0; font-size: 24px; - color: white; font-weight: bold; } ` @@ -267,15 +241,12 @@ export const ClaimTotal = styled.div` export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>` width: 100%; padding: 24px; - color: white; + color: ${({ theme }) => theme.text1}; position: relative; display: flex; flex-direction: column; align-items: center; background: linear-gradient(315deg, #000000 0%, #000000 55%, #202020 100%); - /* background: ${({ activeBG }) => - activeBG && - 'radial-gradient(76.02% 75.41% at 1.84% 0%, rgba(255, 0, 122, 0.2) 0%, rgba(33, 114, 229, 0.2) 100%), #FFFFFF;'}; */ h3 { font-size: 26px; @@ -283,7 +254,7 @@ export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>` line-height: 1.2; text-align: center; margin: 0 0 24px; - color: white; + color: ${({ theme }) => theme.text1}; } ` @@ -302,59 +273,18 @@ export const ConfirmedIcon = styled.div` padding: 60px 0; ` -// export const ContentWrapper = styled.div` -// background: linear-gradient(315deg, #000000 0%, #000000 55%, #202020 100%); -// padding: 32px; -// min-height: 500px; -// height: 100%; -// width: 100%; -// position: relative; -// color: #bbbbbb; - -// ${({ theme }) => theme.mediaWidth.upToSmall` -// padding: 20px; -// min-height: initial; -// `}; - -// > button { -// background: var(--color-orange); -// border: 0; -// box-shadow: none; -// color: black; - -// ${({ theme }) => theme.mediaWidth.upToSmall` -// margin: 0 auto 24px; -// `}; - -// } - -// h3 { -// font-size: 26px; -// font-weight: 300; -// line-height: 1.2; -// text-align: center; -// margin: 0 0 24px; -// color: white; - -// > b { -// font-weight: 600; -// } -// } - -// ` - export const CheckIcon = styled(CheckCircle)` height: 16px; width: 16px; margin-right: 6px; - stroke: var(--color-orange); + stroke: color: ${({ theme }) => theme.primary1}; ` export const NegativeIcon = styled(Frown)` height: 16px; width: 16px; margin-right: 6px; - stroke: var(--color-orange); + stroke: color: ${({ theme }) => theme.primary1}; ` export const EligibleBanner = styled.div` @@ -366,19 +296,11 @@ export const EligibleBanner = styled.div` justify-content: center; align-items: center; background: rgba(237, 104, 52, 0.1); - color: var(--color-orange); + color: color: ${({ theme }) => theme.primary1}; text-align: center; margin: 0 auto 16px; ` -// export const TopTitle = styled.div` -// width: 100%; -// display: flex; -// align-items: center; -// justify-content: flex-start; -// padding: 30px 0; -// ` - export const InputField = styled.div` padding: 18px; border-radius: 16px; @@ -391,7 +313,7 @@ export const InputField = styled.div` background: transparent; border: 0; font-size: 24px; - color: white; + color: ${({ theme }) => theme.text1}; outline: 0; width: 100%; } @@ -419,7 +341,7 @@ export const InputField = styled.div` padding: 0; font-size: 22px; font-weight: 600; - color: white; + color: ${({ theme }) => theme.text1}; } ` @@ -486,7 +408,7 @@ export const FooterNavButtons = styled.div` transition: color 0.2s ease-in-out; &:hover { - color: var(--color-orange); + color: color: ${({ theme }) => theme.primary1}; text-decoration: underline; } @@ -508,7 +430,7 @@ export const TopNav = styled.div` ${ButtonSecondary} { margin: 0; - color: var(--color-grey); + color: ${({ theme }) => theme.text1}; font-size: 15px; width: auto; } @@ -528,15 +450,6 @@ export const Demo = styled(ClaimTable)` } ` -export const DemoToggle = styled.button` - background: rgb(255 255 255 / 17%); - color: white; - border: 0; - margin: 0 0 16px; - font-size: 12px; - padding: 5px 0; -` - export const InvestFlow = styled.div` display: flex; flex-flow: column wrap; @@ -657,8 +570,7 @@ export const InvestInput = styled.span` } > div > label > input { - background: black; - color: white; + color: ${({ theme }) => theme.text1}; border: 1px solid grey; border-radius: 12px; padding: 12px 70px 12px 12px; @@ -685,7 +597,7 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>` &::before { content: ''; display: block; - background: var(--color-orange); + background: color: ${({ theme }) => theme.primary1}; height: 100%; border-radius: 24px; width: ${({ percentage }) => (percentage ? `${percentage}%` : '0%')}; @@ -695,7 +607,7 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>` content: ${({ percentage }) => (percentage ? `'${percentage}%'` : '0%')}; display: inline-block; font-size: 13px; - color: var(--color-orange); + color: color: ${({ theme }) => theme.primary1}; } ` @@ -731,7 +643,7 @@ export const InvestTokenSubtotal = styled.div` padding: 56px; margin: 0 0 24px; background: var(--color-container-bg3); - color: white; + color: ${({ theme }) => theme.text1}; border-radius: var(--border-radius); font-size: 21px; ` From fef196565efe83a1734e229f3008d97561269901 Mon Sep 17 00:00:00 2001 From: Michel <31534717+biocom@users.noreply.github.com> Date: Fri, 14 Jan 2022 10:27:23 +0100 Subject: [PATCH 2/4] Update header button and misc styling. (#2129) * Update header button and misc styling. * Update header button mobile part 1. (#2132) * Update header button mobile part 1. * Re-structure claim button and mobile responsive. (#2137) * Re-structure claim button and mobile responsive. * Claim style improve 5 (#2146) * Update * Update * Investing table styling start --- .../components/CowClaimButton/index.tsx | 100 ++++++++++++++++++ src/custom/components/Header/index.tsx | 43 +++----- src/custom/components/Menu/index.tsx | 99 +++++++++++++---- .../TransactionConfirmationModal/index.tsx | 4 +- .../pages/Claim/CanUserClaimMessage.tsx | 2 +- src/custom/pages/Claim/index.tsx | 24 +++-- src/custom/pages/Claim/styled.ts | 80 ++++++++++---- src/custom/theme/baseTheme.tsx | 3 + src/custom/theme/styled.d.ts | 1 + 9 files changed, 273 insertions(+), 83 deletions(-) create mode 100644 src/custom/components/CowClaimButton/index.tsx diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowClaimButton/index.tsx new file mode 100644 index 000000000..5c8120e1b --- /dev/null +++ b/src/custom/components/CowClaimButton/index.tsx @@ -0,0 +1,100 @@ +import { Trans } from '@lingui/macro' +import { Dots } from 'components/swap/styleds' +import styled, { css } from 'styled-components/macro' +import CowProtocolLogo from 'components/CowProtocolLogo' +import { useUserHasSubmittedClaim } from 'state/transactions/hooks' + +export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>` + ${({ theme }) => theme.card.boxShadow}; + color: ${({ theme }) => theme.text1}; + padding: 0 12px; + font-size: 15px; + font-weight: 500; + height: 38px; + display: flex; + align-items: center; + position: relative; + border-radius: 12px; + pointer-events: auto; + + > b { + margin: 0 0 0 5px; + color: inherit; + font-weight: inherit; + white-space: nowrap; + + &::before, + &::after { + content: ''; + position: absolute; + left: -1px; + top: -1px; + background: ${({ theme }) => + `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`}; + background-size: 800%; + width: calc(100% + 2px); + height: calc(100% + 2px); + z-index: -1; + animation: glow 50s linear infinite; + transition: background-position 0.3s ease-in-out; + border-radius: 12px; + } + + &::after { + filter: blur(8px); + } + + &:hover::before, + &:hover::after { + animation: glow 12s linear infinite; + } + + // Stop glowing effect on claim page + ${({ isClaimPage }) => + isClaimPage && + css` + &::before, + &::after { + content: none; + } + `}; + + @keyframes glow { + 0% { + background-position: 0 0; + } + 50% { + background-position: 300% 0; + } + 100% { + background-position: 0 0; + } + } +` + +interface CowClaimButtonProps { + isClaimPage?: boolean | null | undefined + account?: string | null | undefined + handleOnClickClaim?: () => void +} + +export default function CowClaimButton({ isClaimPage, account, handleOnClickClaim }: CowClaimButtonProps) { + const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined) + + return ( + + {claimTxn && !claimTxn?.receipt ? ( + + Claiming vCOW... + + ) : ( + <> + + + vCOW + + + )} + + ) +} diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx index 71daf35fd..90379f4b7 100644 --- a/src/custom/components/Header/index.tsx +++ b/src/custom/components/Header/index.tsx @@ -1,10 +1,8 @@ -import { Trans } from '@lingui/macro' import { useState, useEffect } from 'react' import { SupportedChainId as ChainId } from 'constants/chains' -import { Dots } from 'components/swap/styleds' import Web3Status from 'components/Web3Status' import { ExternalLink } from 'theme' -import { useHistory } from 'react-router-dom' +import { useHistory, useLocation } from 'react-router-dom' import HeaderMod, { Title, @@ -18,7 +16,6 @@ import HeaderMod, { StyledNavLink as StyledNavLinkUni, StyledMenuButton, HeaderFrame, - UNIAmount as UNIAmountMod, UNIWrapper, } from './HeaderMod' import Menu from 'components/Menu' @@ -43,12 +40,11 @@ import { // useToggleSelfClaimModal } from 'state/application/hooks' //import { useUserHasAvailableClaim } from 'state/claim/hooks' -import { useUserHasSubmittedClaim } from 'state/transactions/hooks' import Modal from 'components/Modal' // import ClaimModal from 'components/claim/ClaimModal' import UniBalanceContent from 'components/Header/UniBalanceContent' -import CowProtocolLogo from 'components/CowProtocolLogo' +import CowClaimButton from 'components/CowClaimButton' export const NETWORK_LABELS: { [chainId in ChainId]?: string } = { [ChainId.RINKEBY]: 'Rinkeby', @@ -205,16 +201,16 @@ const UniIcon = styled.div` } ` -const VCowAmount = styled(UNIAmountMod)` - ${({ theme }) => theme.cowToken.background}; - ${({ theme }) => theme.cowToken.boxShadow}; - color: white; - padding: 0 16px; - display: flex; - align-items: center; +const VCowWrapper = styled(UNIWrapper)` + ${({ theme }) => theme.mediaWidth.upToSmall` + display: none; + `} ` export default function Header() { + const location = useLocation() + const isClaimPage = location.pathname === '/claim' + const { account, chainId: connectedChainId } = useActiveWeb3React() const chainId = supportedChainId(connectedChainId) @@ -224,7 +220,6 @@ export default function Header() { // const toggleClaimModal = useToggleSelfClaimModal() // const availableClaim: boolean = useUserHasAvailableClaim(account) - const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined) const [showUniBalanceModal, setShowUniBalanceModal] = useState(false) // const showClaimPopup = useShowClaimPopup() @@ -264,20 +259,10 @@ export default function Header() { - - - {claimTxn && !claimTxn?.receipt ? ( - - Claiming vCOW... - - ) : ( - <> - - vCOW - - )} - - + + + + {account && userEthBalance && ( @@ -297,7 +282,7 @@ export default function Header() { {darkMode ? : } - + {isOrdersPanelOpen && } diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx index 3138df69b..d19266971 100644 --- a/src/custom/components/Menu/index.tsx +++ b/src/custom/components/Menu/index.tsx @@ -1,5 +1,4 @@ import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather' -import { Trans } from '@lingui/macro' import MenuMod, { MenuItem, @@ -7,7 +6,6 @@ import MenuMod, { MenuFlyout as MenuFlyoutUni, MenuItemBase, StyledMenuButton, - UNIbutton, } from './MenuMod' import { useToggleModal } from 'state/application/hooks' import styled from 'styled-components/macro' @@ -20,6 +18,8 @@ import ninjaCowImage from 'assets/cow-swap/ninja-cow.png' import { ApplicationModal } from 'state/application/actions' import { getExplorerAddressLink } from 'utils/explorer' import { useHasOrders } from 'api/gnosisProtocol/hooks' +import { useHistory } from 'react-router-dom' +import CowClaimButton, { Wrapper as ClaimButtonWrapper } from 'components/CowClaimButton' import twitterImage from 'assets/cow-swap/twitter.svg' import discordImage from 'assets/cow-swap/discord.svg' @@ -31,7 +31,7 @@ const ResponsiveInternalMenuItem = styled(InternalMenuItem)` display: none; ${({ theme }) => theme.mediaWidth.upToMedium` - display: flex; + display: flex; `}; ` @@ -57,7 +57,7 @@ const MenuItemResponsive = styled(MenuItemResponsiveBase)` } ` -export const StyledMenu = styled(MenuMod)` +export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>` hr { margin: 15px 0; } @@ -97,9 +97,58 @@ export const StyledMenu = styled(MenuMod)` padding: 0 6px 0 0; } + ${ClaimButtonWrapper} { + margin: 0 0 12px; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 0 12px 12px; + width: 100%; + height: 56px; + justify-content: center; + font-size: 19px; + + > span { + height: 30px; + width: 30px; + border-radius: 30px; + margin: 0 5px 0 0; + } + `} + } + ${StyledMenuButton} { height: 38px; + border-radius: 12px; + + ${({ theme }) => theme.mediaWidth.upToSmall` + &::before, + &::after { + content: ''; + position: absolute; + left: -1px; + top: -1px; + background: ${({ theme }) => + `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`}; + background-size: 800%; + width: calc(100% + 2px); + height: calc(100% + 2px); + z-index: -1; + animation: glow 50s linear infinite; + transition: background-position 0.3s ease-in-out; + border-radius: 12px; + } + + &::after { + filter: blur(8px); + } + + &:hover::before, + &:hover::after { + animation: glow 12s linear infinite; + } } + + `}; ` const Policy = styled(InternalMenuItem).attrs((attrs) => ({ @@ -123,10 +172,9 @@ const MenuFlyout = styled(MenuFlyoutUni)` width: 100%; border-radius: 0; box-shadow: none; - padding: 0; overflow-y: auto; flex-flow: row wrap; - padding: 0 0 56px; + padding: 12px 0 100px; align-items: flex-start; align-content: flex-start; `}; @@ -193,14 +241,16 @@ export const CloseMenu = styled.button` border-radius: 6px; justify-content: center; padding: 0; - margin: 0 0 8px; + margin: 8px 0 0; ${({ theme }) => theme.mediaWidth.upToSmall` height: 56px; border-radius: 0; - justify-content: flex-end; margin: 0; width: 100%; + position: fixed; + bottom: 0; + top: initial; `}; &::after { @@ -219,21 +269,26 @@ export const CloseMenu = styled.button` interface MenuProps { darkMode: boolean toggleDarkMode: () => void + isClaimPage: boolean } -export function Menu({ darkMode, toggleDarkMode }: MenuProps) { - const close = useToggleModal(ApplicationModal.MENU) +export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) { const { account, chainId } = useActiveWeb3React() const hasOrders = useHasOrders(account) const showOrdersLink = account && hasOrders - - const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM) - const showUNIClaimOption = Boolean(!!account && !!chainId) + /* const showVCOWClaimOption = Boolean(!!account && !!chainId) */ + const close = useToggleModal(ApplicationModal.MENU) + const history = useHistory() + const handleOnClickClaim = () => { + close() + history.push('/claim') + } return ( - + - + + Swap @@ -266,6 +321,9 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) { Code + + + + + Play Cow MEV Slicer @@ -313,8 +373,6 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) { )} - - Terms and conditions @@ -322,11 +380,8 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) { Privacy policy Cookie policy */} - {showUNIClaimOption && ( - - Claim vCOW - - )} + + ) diff --git a/src/custom/components/TransactionConfirmationModal/index.tsx b/src/custom/components/TransactionConfirmationModal/index.tsx index 13a0712d4..45691604f 100644 --- a/src/custom/components/TransactionConfirmationModal/index.tsx +++ b/src/custom/components/TransactionConfirmationModal/index.tsx @@ -205,8 +205,6 @@ const StepsIconWrapper = styled.div` --circle-size: 65px; --border-radius: 100%; --border-size: 2px; - --border-bg: conic-gradient(${({ theme }) => theme.bg3} 40grad, 80grad, ${({ theme }) => theme.primary1} 360grad); - border-radius: var(--circle-size); height: var(--circle-size); width: var(--circle-size); @@ -265,8 +263,8 @@ const StepsWrapper = styled.div` ${StepsIconWrapper} { &::before { content: ''; + ${({ theme }) => theme.iconGradientBorder}; display: block; - background: var(--border-bg); width: var(--circle-size); padding: 0; position: absolute; diff --git a/src/custom/pages/Claim/CanUserClaimMessage.tsx b/src/custom/pages/Claim/CanUserClaimMessage.tsx index a787e78dd..b4996589f 100644 --- a/src/custom/pages/Claim/CanUserClaimMessage.tsx +++ b/src/custom/pages/Claim/CanUserClaimMessage.tsx @@ -24,7 +24,7 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimI Thank you for being a supporter of CowSwap and the CoW protocol. As an important member of the CowSwap Community you may claim vCOW to be used for voting and governance. You can claim your tokens until{' '} - [XX-XX-XXXX - XX:XX GMT] + XX-XX-XXXX - XX:XX GMT Read more about vCOW

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx index fe77558fb..5a73733d2 100644 --- a/src/custom/pages/Claim/index.tsx +++ b/src/custom/pages/Claim/index.tsx @@ -322,10 +322,7 @@ export default function Claim() { Type of Claim Amount - Price - Cost - Vesting - Ends in + Details @@ -354,10 +351,21 @@ export default function Claim() { {parsedAmount?.toFixed(0, { groupSeparator: ',' })} vCOW - {isFree ? '-' : `${vCowPrice} vCoW per ${currency}`} - {isFree ? Free! : `${cost} ${currency}`} - {type === ClaimType.Airdrop ? 'No' : '4 years (linear)'} - 28 days, 10h, 50m + + + + Price: {isFree ? '-' : `${vCowPrice} vCoW per ${currency}`} + + + Cost: {isFree ? Free! : `${cost} ${currency}`} + + + Vesting: {type === ClaimType.Airdrop ? 'No' : '4 years (linear)'} + + + Ends in: 28 days, 10h, 50m + + ) })} diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 5ad6f739c..0f9a34fb0 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -2,6 +2,7 @@ import styled from 'styled-components/macro' import { CheckCircle, Frown } from 'react-feather' import { Icon } from 'components/CowProtocolLogo' import { ButtonPrimary, ButtonSecondary } from 'components/Button' +import { transparentize } from 'polished' export const PageWrapper = styled.div` --color-tl: #141722; @@ -12,6 +13,7 @@ export const PageWrapper = styled.div` --color-container-bg2: rgb(255 255 255 / 12%); --color-container-bg3: rgb(255 255 255 / 25%); --border-radius: 56px; + --border-radius-small: 16px; display: flex; flex-flow: column wrap; @@ -24,8 +26,12 @@ export const PageWrapper = styled.div` box-shadow: ${({ theme }) => theme.appBody.boxShadow}; background: ${({ theme }) => theme.bg1}; + ${({ theme }) => theme.mediaWidth.upToSmall` + border-radius: var(--border-radius-small); + `}; + a { - color: ${({ theme }) => theme.primary1}; + color: ${({ theme }) => theme.primary4}; } p { @@ -64,7 +70,7 @@ export const PageWrapper = styled.div` ${ButtonSecondary} { background: 0; - color: ${({ theme }) => theme.primary1}; + color: ${({ theme }) => theme.primary4}; border: none; &:hover { @@ -72,7 +78,8 @@ export const PageWrapper = styled.div` box-shadow: none; transform: none; background: 0; - color: inherit; + color: ${({ theme }) => theme.primary4}; + text-decoration: underline; } } ` @@ -123,6 +130,12 @@ export const IntroDescription = styled.div<{ center?: boolean }>` margin: 8px auto 24px; } + > p > i { + color: ${({ theme }) => theme.text1}; + font-weight: 600; + font-style: normal; + } + > button { width: auto; display: inline; @@ -139,8 +152,8 @@ export const ClaimTable = styled.div` display: grid; border-collapse: collapse; min-width: 100%; - font-size: 14px; - grid-template-columns: repeat(7, auto); + font-size: 16px; + grid-template-columns: repeat(4, auto); } thead, @@ -180,6 +193,28 @@ export const ClaimTable = styled.div` background: var(--color-container-bg); margin: 0 0 12px; } + + /* 3rd row - amount */ + tr > td:nth-of-type(3) { + font-size: 21px; + font-weight: 500; + } + + tr > td:nth-of-type(4) { + font-size: 13px; + display: flex; + flex-flow: column wrap; + } + + tr > td:first-of-type { + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + } + + tr > td:last-of-type { + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + } ` export const ClaimAccount = styled.div` @@ -229,6 +264,7 @@ export const ClaimTotal = styled.div` font-size: 14px; font-weight: normal; margin: 0 0 2px; + opacity: 0.7; } > p { @@ -246,7 +282,8 @@ export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>` display: flex; flex-direction: column; align-items: center; - background: linear-gradient(315deg, #000000 0%, #000000 55%, #202020 100%); + font-size: 26px; + font-weight: 300; h3 { font-size: 26px; @@ -266,6 +303,7 @@ export const AttemptFooter = styled.div` > p { font-size: 14px; + opacity: 0.7; } ` @@ -295,17 +333,19 @@ export const EligibleBanner = styled.div` display: flex; justify-content: center; align-items: center; - background: rgba(237, 104, 52, 0.1); - color: color: ${({ theme }) => theme.primary1}; + background: ${({ theme }) => transparentize(0.9, theme.attention)}; + color: ${({ theme }) => theme.attention}; text-align: center; margin: 0 auto 16px; + font-weight: 600; ` export const InputField = styled.div` padding: 18px; - border-radius: 16px; - border: 1px solid rgba(151, 151, 151, 0.4); - background: rgba(151, 151, 151, 0.1); + border-radius: var(--border-radius); + ${({ theme }) => theme.currencyInput?.color}; + color: ${({ theme }) => theme.text1}; + background: ${({ theme }) => theme.currencyInput?.background}; width: 100%; margin: 0 0 24px; @@ -313,20 +353,21 @@ export const InputField = styled.div` background: transparent; border: 0; font-size: 24px; - color: ${({ theme }) => theme.text1}; + color: inherit outline: 0; + color: ${({ theme }) => theme.text1}; width: 100%; } > input::placeholder { - color: rgba(151, 151, 151, 0.4); + color: inherit; + opacity: 0.7; } > b { display: block; margin: 0 0 12px; font-weight: normal; - color: #979797; } > div { @@ -358,7 +399,8 @@ export const InputFieldTitle = styled.div` align-items: center; margin: 0 0 12px; font-weight: normal; - color: #979797; + color: inherit; + > b { margin-right: 10px; } @@ -408,7 +450,7 @@ export const FooterNavButtons = styled.div` transition: color 0.2s ease-in-out; &:hover { - color: color: ${({ theme }) => theme.primary1}; + color: ${({ theme }) => theme.primary1}; text-decoration: underline; } @@ -439,7 +481,7 @@ export const TopNav = styled.div` export const Demo = styled(ClaimTable)` background: #3e0c46; > table { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: min-content auto max-content auto; } > table tr td:first-of-type { @@ -497,8 +539,6 @@ export const InvestTokenGroup = styled.div` display: flex; flex-flow: row; width: 100%; - background: var(--color-container-bg); - border-radius: var(--border-radius); padding: 24px; margin: 0 0 24px; border: 1px solid #3a3a3a; @@ -607,7 +647,7 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>` content: ${({ percentage }) => (percentage ? `'${percentage}%'` : '0%')}; display: inline-block; font-size: 13px; - color: color: ${({ theme }) => theme.primary1}; + color: ${({ theme }) => theme.primary1}; } ` diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx index 2c2fddb84..e2ab33494 100644 --- a/src/custom/theme/baseTheme.tsx +++ b/src/custom/theme/baseTheme.tsx @@ -180,6 +180,9 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) { box-shadow: inset 0 1px 1px 0 hsl(0deg 0% 100% / 10%), 0 10px 40px -20px #000000; `, }, + iconGradientBorder: css` + background: conic-gradient(${colorsTheme.bg3} 40grad, 80grad, ${colorsTheme.primary1} 360grad); + `, header: { border: 'none', menuFlyout: { diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts index c2574e91e..28c83440e 100644 --- a/src/custom/theme/styled.d.ts +++ b/src/custom/theme/styled.d.ts @@ -85,6 +85,7 @@ declare module 'styled-components' { background: FlattenSimpleInterpolation boxShadow: FlattenSimpleInterpolation }, + iconGradientBorder: FlattenSimpleInterpolation card: { background: FlattenSimpleInterpolation background2: string From 0c52d8159e35dc766d4fe2d8305b0aa5703951db Mon Sep 17 00:00:00 2001 From: biocom Date: Fri, 14 Jan 2022 11:07:02 +0100 Subject: [PATCH 3/4] Post merge styling. --- src/custom/pages/Claim/ClaimsTable.tsx | 36 ++++++++++++++++---------- src/custom/pages/Claim/styled.ts | 1 + 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index c49b084c3..b48ddd0e3 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -46,19 +46,32 @@ const ClaimsTableRow = ({ {isFree ? ClaimType[type] : `Buy vCOW with ${currencyAmount?.currency?.symbol}`} - + {formatSmart(claimAmount) || 0} vCOW - {isFree || !price ? '-' : `${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`} - {isFree ? ( - Free! - ) : ( - `${formatSmart(cost) || 0} ${currencyAmount?.currency?.symbol}` - )} + + Price:{' '} + {isFree || !price ? '-' : `${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`} + + + Cost:{' '} + + {' '} + {isFree ? ( + Free! + ) : ( + `${formatSmart(cost) || 0} ${currencyAmount?.currency?.symbol}` + )} + + + + Vesting: {type === ClaimType.Airdrop ? 'No' : '4 years (linear)'} + + + Ends in: 28 days, 10h, 50m + - {type === ClaimType.Airdrop ? 'No' : '4 years (linear)'} - 28 days, 10h, 50m ) } @@ -91,10 +104,7 @@ export default function ClaimsTable({ Type of Claim Amount - Price - Cost - Vesting - Ends in + Details diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 03d70d519..52c8ffb46 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -212,6 +212,7 @@ export const ClaimTable = styled.div` font-size: 13px; display: flex; flex-flow: column wrap; + align-items: flex-start; } tr > td:first-of-type { From 87fca252c22be6562cd6b9242803150d0e86f9f7 Mon Sep 17 00:00:00 2001 From: biocom Date: Fri, 14 Jan 2022 17:53:18 +0100 Subject: [PATCH 4/4] WIP styling investment flow. --- src/custom/pages/Claim/ClaimsTable.tsx | 12 +- src/custom/pages/Claim/InvestmentFlow.tsx | 64 ++--- src/custom/pages/Claim/styled.ts | 277 ++++++++++++++++++++-- 3 files changed, 298 insertions(+), 55 deletions(-) diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index b48ddd0e3..daa2ee85d 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -1,5 +1,5 @@ import { ClaimType, useClaimState } from 'state/claim/hooks' -import { ClaimTable, ClaimBreakdown } from 'pages/Claim/styled' +import { ClaimTable, ClaimBreakdown, TokenLogo } from 'pages/Claim/styled' import CowProtocolLogo from 'components/CowProtocolLogo' import { ClaimStatus } from 'state/claim/actions' // import { UserClaimDataDetails } from './types' TODO: fix in another PR @@ -45,10 +45,16 @@ const ClaimsTableRow = ({ /> - {isFree ? ClaimType[type] : `Buy vCOW with ${currencyAmount?.currency?.symbol}`} - {formatSmart(claimAmount) || 0} vCOW + {' '} + + + + Buy vCOW + {isFree ? ClaimType[type] : `with ${currencyAmount?.currency?.symbol}`} + + {formatSmart(claimAmount) || 0} vCOW Price:{' '} diff --git a/src/custom/pages/Claim/InvestmentFlow.tsx b/src/custom/pages/Claim/InvestmentFlow.tsx index d0c1bf2d4..d52f046f9 100644 --- a/src/custom/pages/Claim/InvestmentFlow.tsx +++ b/src/custom/pages/Claim/InvestmentFlow.tsx @@ -7,10 +7,12 @@ import { InvestSummary, InvestFlowValidation, InvestTokenSubtotal, + InputField, StepIndicator, Steps, TokenLogo, } from 'pages/Claim/styled' +import { ButtonPrimary, ButtonSecondary } from 'components/Button' import CowProtocolLogo from 'components/CowProtocolLogo' import { useClaimState } from 'state/claim/hooks' import { ClaimCommonTypes } from './types' @@ -71,21 +73,24 @@ export default function InvestmentFlow({

+

Buy vCOW with GNO

-

Buy vCOW with GNO

- Price 16.66 vCoW per GNO + Price 16.66 vCoW per GNO + + + Max. investment available 2,500.04 GNO - Token approval - + Token approval + {approveState === ApprovalState.NOT_APPROVED ? ( 'GNO not approved' ) : ( @@ -93,28 +98,27 @@ export default function InvestmentFlow({ GNO approved )} - + {approveState === ApprovalState.NOT_APPROVED && ( - + Approve GNO )} - Max. investment available 2,500.04 GNO - - - Available investment used + Available investment used
- - Balance: 10,583.34 GNO - {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} - - Receive: 32,432.54 vCOW {/* Insufficient balance validation error */} @@ -128,31 +132,31 @@ export default function InvestmentFlow({
+

Buy vCOW with ETH

-

Buy vCOW with ETH

- Price 16.66 vCoW per ETH + Price 16.66 vCoW per ETH - Token approval - + Max. investment available 2,500.04 ETH + + + Token approval + Not required for ETH! - - - - Max. investment available 2,500.04 ETH + - Available investment used + Available investment used @@ -160,11 +164,13 @@ export default function InvestmentFlow({ Balance: 10,583.34 ETH {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} - + Invest max. possible Receive: 32,432.54 vCOW {/* Insufficient balance validation error */} diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 52c8ffb46..14a27bfd4 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -2,7 +2,7 @@ import styled from 'styled-components/macro' import { CheckCircle, Frown } from 'react-feather' import { Icon } from 'components/CowProtocolLogo' import { ButtonPrimary, ButtonSecondary } from 'components/Button' -import { transparentize } from 'polished' +import { transparentize, darken } from 'polished' export const PageWrapper = styled.div` --color-tl: #141722; @@ -14,7 +14,6 @@ export const PageWrapper = styled.div` --color-container-bg3: rgb(255 255 255 / 25%); --border-radius: 56px; --border-radius-small: 16px; - display: flex; flex-flow: column wrap; max-width: 760px; @@ -30,6 +29,151 @@ export const PageWrapper = styled.div` border-radius: var(--border-radius-small); `}; + input[type='checkbox'], + input[type='radio'] { + --active: ${({ theme }) => theme.primary1}; + --active-inner: ${({ theme }) => theme.black}; + --focus: 2px rgba(39, 94, 254, .3); + --border: ${({ theme }) => theme.bg4}; + --border-hover: ${({ theme }) => theme.primary1}; + --background: ${({ theme }) => theme.bg5}; + appearance: none; + height: 21px; + outline: none; + display: inline-block; + vertical-align: top; + position: relative; + margin: 0; + cursor: pointer; + border: 1px solid var(--bc, var(--border)); + background: var(--b, var(--background)); + transition: background .2s, border-color .2s, box-shadow .2s; + + &:after { + content: ''; + display: block; + left: 0; + top: 0; + position: absolute; + transition: transform var(.2s) var(--d-t-e, ease), opacity var(.2s); + } + + &:checked { + --b: var(--active); + --bc: var(--active); + --d-t-e: cubic-bezier(.2, .85, .32, 1.2); + } + + &:disabled { + cursor: not-allowed; + opacity: .7; + + &:checked { + } + + & + label { + cursor: not-allowed; + } + } + + &:hover { + &:not(:checked) { + &:not(:disabled) { + --bc: var(--border-hover); + } + } + } + + &:focus { + box-shadow: 0 0 0 var(--focus); + } + + &:not(.switch) { + width: 21px; + &:after { + opacity: var(--o, 0); + } + &:checked { + --o: 1; + } + } + + & + label { + font-size: 14px; + line-height: 21px; + display: inline-block; + vertical-align: top; + cursor: pointer; + margin-left: 4px; + } + } + + input[type='checkbox'] { + &:not(.switch) { + border-radius: 7px; + + &:after { + width: 5px; + height: 9px; + border: 2px solid var(--active-inner); + border-top: 0; + border-left: 0; + left: 7px; + top: 4px; + transform: rotate(var(--r, 20deg)); + } + &:checked { + --r: 43deg; + } + } + + &.switch { + width: 38px; + border-radius: 11px; + + &:after { + left: 2px; + top: 2px; + border-radius: 50%; + width: 15px; + height: 15px; + background: var(--ab, var(--border)); + transform: translateX(var(--x, 0)); + } + + &:checked { + --ab: var(--active-inner); + --x: 17px; + } + + &:disabled { + &:not(:checked) { + &:after { + opacity: .6; + } + } + } + } + } + + input[type='radio'] { + border-radius: 50%; + + &:after { + width: 19px; + height: 19px; + border-radius: 50%; + background: var(--active-inner); + opacity: 0; + transform: scale(var(--s, .7)); + } + + &:checked { + --s: .5; + } + } + } + a { color: ${({ theme }) => theme.primary4}; } @@ -84,6 +228,15 @@ export const PageWrapper = styled.div` } ` +export const TokenLogo = styled.div<{ symbol: string; size: number }>` + display: flex; + width: ${({ size }) => `${size}px`}; + height: ${({ size }) => `${size}px`}; + border-radius: ${({ size }) => `${size}px`}; + /* background: ${({ symbol }) => `url(${symbol}.png) no-repeat center/contain`}; */ + background: grey; +` + export const ClaimSummary = styled.div` display: flex; width: 100%; @@ -148,12 +301,16 @@ export const ClaimTable = styled.div` width: 100%; margin: 0 0 24px; + ${TokenLogo} { + margin: 0 -26px 0 0; + } + table { display: grid; border-collapse: collapse; min-width: 100%; font-size: 16px; - grid-template-columns: repeat(4, auto); + grid-template-columns: min-content auto max-content auto; } thead, @@ -190,21 +347,35 @@ export const ClaimTable = styled.div` td { display: flex; align-items: center; - - padding-top: 10px; - padding-bottom: 10px; color: ${({ theme }) => theme.text1}; word-break: break-word; - background: var(--color-container-bg); + background: ${({ theme }) => transparentize(0.7, theme.blueShade2)}; + } + + td > b { + font-weight: 300; } tr > td { margin: 0 0 12px; } + tr > td:nth-of-type(2) { + > span { + margin: 0 0 0 12px; + display: flex; + flex-flow: column wrap; + } + + > span > i { + font-style: normal; + font-size: 15px; + } + } + /* 3rd row - amount */ tr > td:nth-of-type(3) { - font-size: 21px; + font-size: 18px; font-weight: 500; } @@ -213,6 +384,17 @@ export const ClaimTable = styled.div` display: flex; flex-flow: column wrap; align-items: flex-start; + gap: 4px; + + > span { + color: ${({ theme }) => transparentize(0.1, theme.text1)}; + font-weight: 300; + } + + > span > b { + font-weight: 500; + color: ${({ theme }) => theme.text1}; + } } tr > td:first-of-type { @@ -366,8 +548,10 @@ export const EligibleBanner = styled.div` export const InputField = styled.div` padding: 18px; border-radius: var(--border-radius); - ${({ theme }) => theme.currencyInput?.color}; + border: ${({ theme }) => theme.currencyInput?.border}; color: ${({ theme }) => theme.text1}; + display: flex; + flex-flow: row wrap; background: ${({ theme }) => theme.currencyInput?.background}; width: 100%; margin: 0 0 24px; @@ -376,7 +560,6 @@ export const InputField = styled.div` background: transparent; border: 0; font-size: 24px; - color: inherit outline: 0; color: ${({ theme }) => theme.text1}; width: 100%; @@ -388,9 +571,30 @@ export const InputField = styled.div` } > b { - display: block; + display: flex; margin: 0 0 12px; font-weight: normal; + align-items: center; + font-size: 18px; + font-weight: 500; + background-color: ${({ theme }) => theme.bg5}; + color: ${({ theme }) => theme.white}; + border-radius: 16px; + box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075); + outline: none; + cursor: pointer; + user-select: none; + border: none; + height: 2.4rem; + width: auto; + flex: 0 1 auto; + padding: 0 8px; + justify-content: space-between; + + :focus, + :hover { + background-color: ${({ theme }) => darken(0.05, theme.bg5)}; + } } > div { @@ -407,6 +611,21 @@ export const InputField = styled.div` font-weight: 600; color: ${({ theme }) => theme.text1}; } + + > span { + display: flex; + flex: 1 1 100%; + } + + > span > ${ButtonSecondary} { + display: inline-block; + font-size: 14px; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } ` export const InputError = styled.div` @@ -549,22 +768,14 @@ export const Steps = styled.div<{ step: number | 0 }>` } ` -export const TokenLogo = styled.div<{ symbol: string; size: number }>` - display: flex; - width: ${({ size }) => `${size}px`}; - height: ${({ size }) => `${size}px`}; - border-radius: ${({ size }) => `${size}px`}; - /* background: ${({ symbol }) => `url(${symbol}.png) no-repeat center/contain`}; */ - background: grey; -` - export const InvestTokenGroup = styled.div` display: flex; flex-flow: row; width: 100%; padding: 24px; margin: 0 0 24px; - border: 1px solid #3a3a3a; + border-radius: 12px; + background: ${({ theme }) => transparentize(0.7, theme.blueShade2)}; > div { display: flex; @@ -582,12 +793,14 @@ export const InvestTokenGroup = styled.div` } > div > h3 { - font-size: 14px; + font-size: 21px; + font-weight: 600; + margin: 0 0 18px; } ${TokenLogo}, ${Icon} { - border: 4px solid black; + border: 4px solid ${({ theme }) => theme.blueShade2}; } ${TokenLogo} { @@ -679,11 +892,29 @@ export const InvestSummary = styled.div` display: grid; grid-template-columns: auto auto; font-size: 15px; + gap: 12px; > span { display: flex; flex-flow: column wrap; margin: 0 0 12px; + color: ${({ theme }) => transparentize(0.1, theme.text1)}; + } + + > span > ${ButtonPrimary} { + margin: 12px 0; + padding: 6px; + font-size: 16px; + max-width: 154px; + } + + > span > i { + font-style: normal; + } + + > span > b { + font-weight: 600; + color: ${({ theme }) => theme.text1}; } `