Skip to content

UI: Restyle Upgrade Tab #804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rokt33r merged 3 commits into from
Feb 20, 2021
Merged

UI: Restyle Upgrade Tab #804

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f2d5f1
Restyle Pricing Table
ellekasai Feb 19, 2021
7944628
Restyle Check Icon
ellekasai Feb 19, 2021
b76287c
Restyle Free Trial Link Button
ellekasai Feb 19, 2021
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
107 changes: 77 additions & 30 deletions src/cloud/components/organisms/settings/UpgradeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,11 @@ const UpgradeTab = () => {
return null
}

return <p>&#x2713; In free trial</p>
return (
<p>
<span className='check'>&#x2713;</span> In free trial
</p>
)
}

if (!team.trial) {
Expand Down Expand Up @@ -130,7 +134,7 @@ const UpgradeTab = () => {
<thead>
<tr>
<td className='first' />
<td>
<td className='header'>
<label>Free</label>
<div className='pricing'>
<span>$0</span>
Expand All @@ -141,11 +145,11 @@ const UpgradeTab = () => {
disabled={true}
variant='inverse-secondary'
>
Current
Current Plan
</CustomButton>
</td>

<td>
<td className='header'>
<label>Personal Pro</label>
<div className='pricing'>
<span>$3</span>
Expand Down Expand Up @@ -182,7 +186,7 @@ const UpgradeTab = () => {
{freeTrialContent}
</td>

<td>
<td className='header'>
<label>Pro</label>
<div className='pricing'>
<span>$8</span>
Expand Down Expand Up @@ -296,7 +300,9 @@ const UpgradeTab = () => {
<div className='perk'>&#x292C;</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

Expand All @@ -306,23 +312,33 @@ const UpgradeTab = () => {
<div className='perk'>&#x292C;</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

<tr>
<td className='first'>Private folders</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

Expand All @@ -332,10 +348,14 @@ const UpgradeTab = () => {
<div className='perk'>&#x292C;</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

Expand All @@ -347,10 +367,14 @@ const UpgradeTab = () => {
<div className='perk'>&#x292C;</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

Expand All @@ -363,20 +387,28 @@ const UpgradeTab = () => {
<div className='perk'>&#x292C;</div>
</td>
<td>
<div className='perk'>&#x2713;</div>
<div className='perk'>
<span className='check'>&#x2713;</span>
</div>
</td>
</tr>

<tr>
<td className='first'>Mobile App</td>
<td>
<div className='perk'>&#x2713; (Soon)</div>
<div className='perk'>
<span className='check'>&#x2713;</span> (Soon)
</div>
</td>
<td>
<div className='perk'>&#x2713; (Soon)</div>
<div className='perk'>
<span className='check'>&#x2713;</span> (Soon)
</div>
</td>
<td>
<div className='perk'>&#x2713; (Soon)</div>
<div className='perk'>
<span className='check'>&#x2713;</span> (Soon)
</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -451,23 +483,32 @@ const StyledPlanTables = styled.table`
width: 100%;
margin-bottom: ${({ theme }) => theme.space.medium}px;
table-layout: fixed;
border-collapse: initial;
border-spacing: 0;
border-collapse: separate;
border-spacing: 30px 0;

.first {
width: 30%;
}

.header {
vertical-align: top;
}

label {
display: block;
margin-bottom: ${({ theme }) => theme.space.small}px;
font-size: ${({ theme }) => theme.fontSizes.xlarge}px;
font-weight: 600;
}

.pricing {
display: flex;
align-items: center;
margin-bottom: ${({ theme }) => theme.space.xsmall}px;

span {
font-size: ${({ theme }) => theme.fontSizes.large}px;
margin-right: ${({ theme }) => theme.space.small}px;
font-size: ${({ theme }) => theme.fontSizes.xxlarge}px;
margin-right: ${({ theme }) => theme.space.xsmall}px;
}
div {
font-size: ${({ theme }) => theme.fontSizes.xsmall}px;
Expand All @@ -479,22 +520,23 @@ const StyledPlanTables = styled.table`
}

.upgrade-btn {
width: 100%;
margin: ${({ theme }) => theme.fontSizes.xsmall}px 0;
}

tr td {
padding-top: ${({ theme }) => theme.space.xsmall}px;
padding-bottom: ${({ theme }) => theme.space.xsmall}px;
border-bottom: 1px solid ${({ theme }) => theme.subtleBorderColor};
border-right: 1px solid ${({ theme }) => theme.subtleBorderColor};
text-align: left;
min-height: 30px;
vertical-align: top;

&:not(.first) {
padding: 0 10px;
padding: ${({ theme }) => theme.space.xsmall}px
${({ theme }) => theme.space.small}px;
}

&.first {
padding-top: 6px;
padding-bottom: 8px;
color: ${({ theme }) => theme.subtleTextColor};
}
}
Expand All @@ -503,14 +545,19 @@ const StyledPlanTables = styled.table`
line-height: 1.2;
padding: 6px 0px;
}

.check {
color: ${({ theme }) => theme.primaryTextColor};
font-weight: bold;
}
`

const StyledTrialLink = styled.a`
text-decoration: underline;
font-size: ${({ theme }) => theme.fontSizes.default}px;
transition: 200ms color;
color: ${({ theme }) => theme.secondaryTextColor};
color: ${({ theme }) => theme.primaryTextColor};
&:hover {
color: ${({ theme }) => theme.primaryBackgroundColor};
text-decoration: none;
}
`