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

Claim style improve 5 #2146

Merged
merged 3 commits into from
Jan 14, 2022
Merged

Claim style improve 5 #2146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ab51ba
Update
Jan 14, 2022
5e1da7f
Update
Jan 14, 2022
73b154e
Investing table styling start
Jan 14, 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
2 changes: 1 addition & 1 deletion src/custom/components/CowClaimButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function CowClaimButton({ isClaimPage, account, handleOnClickClai
<>
<CowProtocolLogo />
<b>
<Trans>Claim vCOW</Trans>
<Trans>vCOW</Trans>
</b>
</>
)}
Expand Down
24 changes: 16 additions & 8 deletions src/custom/pages/Claim/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,10 +322,7 @@ export default function Claim() {
</th>
<th>Type of Claim</th>
<th>Amount</th>
<th>Price</th>
<th>Cost</th>
<th>Vesting</th>
<th>Ends in</th>
<th>Details</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -354,10 +351,21 @@ export default function Claim() {
<td width="150px">
<CowProtocolLogo size={16} /> {parsedAmount?.toFixed(0, { groupSeparator: ',' })} vCOW
</td>
<td>{isFree ? '-' : `${vCowPrice} vCoW per ${currency}`}</td>
<td>{isFree ? <span className="green">Free!</span> : `${cost} ${currency}`}</td>
<td>{type === ClaimType.Airdrop ? 'No' : '4 years (linear)'}</td>
<td>28 days, 10h, 50m</td>

<td>
<span>
Price: <b>{isFree ? '-' : `${vCowPrice} vCoW per ${currency}`}</b>
</span>
<span>
Cost: <b>{isFree ? <span className="green">Free!</span> : `${cost} ${currency}`}</b>
</span>
<span>
Vesting: <b>{type === ClaimType.Airdrop ? 'No' : '4 years (linear)'}</b>
</span>
<span>
Ends in: <b>28 days, 10h, 50m</b>
</span>
</td>
</tr>
)
})}
Expand Down
45 changes: 35 additions & 10 deletions src/custom/pages/Claim/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,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,
Expand Down Expand Up @@ -193,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`
Expand Down Expand Up @@ -320,30 +342,32 @@ export const EligibleBanner = styled.div`

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;

> input {
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 {
Expand Down Expand Up @@ -375,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;
}
Expand Down Expand Up @@ -456,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 {
Expand Down