Skip to content
This repository was archived by the owner on Jun 24, 2022. It is now read-only.

Claim style improve 10 #2174

Merged
merged 5 commits into from
Jan 18, 2022
Merged

Claim style improve 10 #2174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
87d8391
Wording change and CSS cleanup.
Jan 17, 2022
c24cd7a
Style update + hide approve button for ETH.
Jan 17, 2022
72aa706
Style updates + organise invest options
Jan 17, 2022
521fbc8
Style updates, input field.
Jan 17, 2022
fe3a350
Merge branch 'claim' into claim-styleImprove-10
fairlighteth Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/custom/pages/Claim/ClaimsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,11 @@ export default function ClaimsTable({

return (
<ClaimBreakdown>
<h2>vCOW claim breakdown</h2>
<p>
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 &apos;Claim
vCOW&apos; button.
</p>
<ClaimTable>
<table>
<thead>
Expand Down
13 changes: 9 additions & 4 deletions src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,16 +183,21 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
<InvestInput>
<div>
<span>
<b>Balance:</b>{' '}
<b>Balance:</b>
<i>
{formatSmart(balance)} {currencyAmount?.currency?.symbol}
{formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
</i>
{/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
<button onClick={onMaxClick}>Invest max. possible</button>
<button onClick={onMaxClick}>(invest max. possible)</button>
</span>
<label>
<input
// disabled
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should it not be disabled via the attribute?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My impression was this disabled attribute isn't set dynamically yet. And needed it to be not disabled for styling purposes. Commenting out as we need to address this still.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it, thought it was always disabled for this state, misread that. what are the criteria for disabled? we need to make an issue for this right?

placeholder="0"
value={investedAmount}
max={formatSmart(currencyAmount)}
/>
<b>{currencyAmount?.currency?.symbol}</b>
<input disabled placeholder="0" value={investedAmount} max={formatSmart(currencyAmount)} />
</label>
<i>Receive: {formatSmart(vCowAmount) || 0} vCOW</i>
{/* Insufficient balance validation error */}
Expand Down
61 changes: 53 additions & 8 deletions src/custom/pages/Claim/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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 {
Expand All @@ -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};
}
}
`

Expand Down