From 87d8391833cff3ea0e209250361b9d3fb55e380c Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 17 Jan 2022 15:20:40 +0100 Subject: [PATCH 1/4] Wording change and CSS cleanup. --- src/custom/pages/Claim/ClaimsTable.tsx | 4 ++-- src/custom/pages/Claim/styled.ts | 24 +++++------------------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index b8e0bf359..b5c7f50c9 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -74,8 +74,8 @@ const ClaimsTableRow = ({ - Buy vCOW - {isFree ? ClaimType[type] : `with ${currencyAmount?.currency?.symbol}`} + {isFree ? ClaimType[type] : 'Buy vCOW'} + {!isFree && with {currencyAmount?.currency?.symbol}} {formatSmart(claimAmount) || 0} vCOW diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index df5a260ba..0451d3e49 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -5,13 +5,6 @@ import { ButtonPrimary, ButtonSecondary } from 'components/Button' import { transparentize, darken } from 'polished' export const PageWrapper = styled.div` - --color-tl: #141722; - --color-tr: #3b4052; - --color-grey: rgb(151, 151, 151); - --color-orange: rgb(237, 104, 52); - --color-container-bg: rgb(255 255 255 / 6%); - --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; @@ -47,7 +40,6 @@ export const PageWrapper = styled.div` 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: ''; @@ -55,18 +47,16 @@ export const PageWrapper = styled.div` 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; + opacity: .5; &:checked { } @@ -167,10 +157,6 @@ export const PageWrapper = styled.div` opacity: 0; transform: scale(var(--s, .7)); } - - &:checked { - --s: .5; - } } } @@ -448,7 +434,7 @@ export const ClaimAccount = styled.div` width: 46px; border-radius: 46px; object-fit: contain; - background-color: var(--color-grey); + background-color: grey; } > div > p { @@ -753,7 +739,7 @@ export const StepIndicator = styled.div` export const Steps = styled.div<{ step: number | 0 }>` list-style-type: decimal; margin: 0 0 12px; - background: var(--color-container-bg); + background: grey; padding: 12px; border-radius: 12px; display: grid; @@ -868,7 +854,7 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>` position: relative; height: 10px; border-radius: 24px; - background: var(--color-container-bg2); + background: grey; margin: 8px 0; &::before { @@ -937,7 +923,7 @@ export const InvestTokenSubtotal = styled.div` display: flex; padding: 56px; margin: 0 0 24px; - background: var(--color-container-bg3); + background: grey; color: ${({ theme }) => theme.text1}; border-radius: var(--border-radius); font-size: 21px; From c24cd7a1d6c1083157ab90fbec624d644e7e1f93 Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 17 Jan 2022 15:55:00 +0100 Subject: [PATCH 2/4] Style update + hide approve button for ETH. --- .../pages/Claim/InvestmentFlow/InvestOption.tsx | 6 +++--- src/custom/pages/Claim/styled.ts | 14 +++++++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index 1064d2985..d89460792 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -131,7 +131,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }: )} {/* Approve button - @biocom styles for this found in ./styled > InputSummary > ${ButtonPrimary}*/} - {approveState !== ApprovalState.APPROVED && ( + {approveData && approveState !== ApprovalState.APPROVED && ( {approving || approveState === ApprovalState.PENDING ? ( - ) : ( + ) : approveData ? ( Approve {currencyAmount?.currency?.symbol} - )} + ) : null} )} diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 0451d3e49..27c7556b9 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -296,7 +296,7 @@ export const ClaimTable = styled.div` border-collapse: collapse; min-width: 100%; font-size: 16px; - grid-template-columns: min-content auto max-content auto; + grid-template-columns: min-content auto auto auto; } thead, @@ -666,6 +666,12 @@ export const ClaimBreakdown = styled.div` display: flex; width: 100%; flex-flow: column wrap; + + > h2 { + font-size: 28px; + font-weight: 500; + text-align: center; + } ` export const FooterNavButtons = styled.div` @@ -724,6 +730,12 @@ export const Demo = styled(ClaimTable)` export const InvestFlow = styled.div` display: flex; flex-flow: column wrap; + + h1 { + font-size: 28px; + font-weight: 500; + text-align: center; + } ` export const InvestContent = styled.div` From 72aa706f448c20bc9cfe630f54edd8d551c48405 Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 17 Jan 2022 16:59:18 +0100 Subject: [PATCH 3/4] Style updates + organise invest options --- .../pages/Claim/InvestmentFlow/InvestOption.tsx | 17 ++++++++++------- src/custom/pages/Claim/styled.ts | 8 ++++---- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index d89460792..2fe494152 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -95,11 +95,11 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }: return (
+

Buy vCOW with {currencyAmount?.currency?.symbol}

-

Buy vCOW with {currencyAmount?.currency?.symbol}

@@ -110,6 +110,14 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }: {formatSmart(price)} vCoW per {currencyAmount?.currency?.symbol} + + + Max. investment available{' '} + + {formatSmart(maxCost) || '0'} {currencyAmount?.currency?.symbol} + + + Token approval {approveData ? ( @@ -148,12 +156,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }: )} - - Max. investment available{' '} - - {formatSmart(maxCost) || '0'} {currencyAmount?.currency?.symbol} - - + Available investment used diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 27c7556b9..eaeca8ebc 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -321,7 +321,7 @@ export const ClaimTable = styled.div` background: transparent; text-align: left; font-weight: normal; - font-size: 13px; + font-size: 15px; color: ${({ theme }) => theme.text1}; position: relative; } @@ -891,20 +891,20 @@ export const InvestSummary = styled.div` display: grid; grid-template-columns: auto auto; font-size: 15px; - gap: 12px; + gap: 16px 36px; > span { display: flex; flex-flow: column wrap; margin: 0 0 12px; color: ${({ theme }) => transparentize(0.1, theme.text1)}; + gap: 3px; } > span > ${ButtonPrimary} { - margin: 12px 0; + margin: 12px 0 12px -9px; padding: 6px; font-size: 16px; - max-width: 154px; } > span > i { From 521fbc82d45db1b120f0bb76d85473db246eb7ab Mon Sep 17 00:00:00 2001 From: biocom Date: Mon, 17 Jan 2022 19:12:33 +0100 Subject: [PATCH 4/4] Style updates, input field. --- src/custom/pages/Claim/ClaimsTable.tsx | 6 +- .../Claim/InvestmentFlow/InvestOption.tsx | 13 ++-- src/custom/pages/Claim/styled.ts | 59 +++++++++++++++++-- 3 files changed, 67 insertions(+), 11 deletions(-) diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index b5c7f50c9..3528876b9 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -123,7 +123,11 @@ export default function ClaimsTable({ return ( -

vCOW claim breakdown

+

+ The table overview below represents your current vCow claiming opportunities. To move forward with one or all of + the options, simply select the row(s) you would like to engage with and move forward via the 'Claim + vCOW' button. +

diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index 2fe494152..cc8951628 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -183,16 +183,21 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
- Balance:{' '} + Balance: - {formatSmart(balance)} {currencyAmount?.currency?.symbol} + {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol} {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} - + Receive: {formatSmart(vCowAmount) || 0} vCOW {/* Insufficient balance validation error */} diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index eaeca8ebc..ed1928861 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -169,7 +169,7 @@ export const PageWrapper = styled.div` display: block; line-height: 1.6; font-weight: 300; - margin: 24px auto; + margin: 0 0 24px; text-align: center; } @@ -667,9 +667,11 @@ export const ClaimBreakdown = styled.div` width: 100%; flex-flow: column wrap; - > h2 { - font-size: 28px; - font-weight: 500; + > p { + font-size: 16px; + line-height: 1.6; + font-weight: 300; + margin: 0 0 24px; text-align: center; } ` @@ -830,6 +832,15 @@ export const InvestInput = styled.span` > div > label { display: flex; position: relative; + 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: 12px; + + &:hover { + border: ${({ theme }) => + theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`}; + } } > div > label > b { @@ -841,22 +852,58 @@ export const InvestInput = styled.span` top: 0; bottom: 0; margin: auto; - opacity: 0.5; + font-weight: normal; + opacity: 0.7; + color: ${({ theme }) => theme.text1}; } > div > label > input { color: ${({ theme }) => theme.text1}; - border: 1px solid grey; + border: none; border-radius: 12px; padding: 12px 70px 12px 12px; font-size: 26px; outline: 0; + background: transparent; width: 100%; + + &::placeholder { + opacity: 0.5; + } } > div > small { color: red; margin: 12px 0; + font-size: 15px; + } + + > div > i { + font-style: normal; + } + + > div > span { + display: flex; + } + + > div > span > b { + margin: 0 3px 0 0; + } + + > div > span > i { + font-style: normal; + } + + > div > span > button { + background: none; + border: 0; + cursor: pointer; + color: ${({ theme }) => theme.primary4}; + text-decoration: underline; + + &:hover { + color: ${({ theme }) => theme.text1}; + } } `