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..c57d8e40e 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,11 +667,11 @@ export const ClaimBreakdown = styled.div` width: 100%; flex-flow: column wrap; - > h2 { - font-size: 28px; - font-weight: 500; - text-align: center; - } + > p { + font-size: 16px; + line-height: 1.6; + font-weight: 300; + margin: 0 0 24px; ` export const FooterNavButtons = styled.div` @@ -830,6 +830,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 +850,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}; + } } `