From 2f2d5f1b3c50f32e48e4e081a418651b7ad28914 Mon Sep 17 00:00:00 2001
From: Elle Kasai <elle.kasai@gmail.com>
Date: Fri, 19 Feb 2021 19:14:43 +0900
Subject: [PATCH 1/3] Restyle Pricing Table

---
 .../organisms/settings/UpgradeTab.tsx         | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/cloud/components/organisms/settings/UpgradeTab.tsx b/src/cloud/components/organisms/settings/UpgradeTab.tsx
index 7f9be1c4e9..af3221d0a0 100644
--- a/src/cloud/components/organisms/settings/UpgradeTab.tsx
+++ b/src/cloud/components/organisms/settings/UpgradeTab.tsx
@@ -130,7 +130,7 @@ const UpgradeTab = () => {
                 <thead>
                   <tr>
                     <td className='first' />
-                    <td>
+                    <td className='header'>
                       <label>Free</label>
                       <div className='pricing'>
                         <span>$0</span>
@@ -141,11 +141,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>
@@ -182,7 +182,7 @@ const UpgradeTab = () => {
                       {freeTrialContent}
                     </td>
 
-                    <td>
+                    <td className='header'>
                       <label>Pro</label>
                       <div className='pricing'>
                         <span>$8</span>
@@ -451,23 +451,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;
@@ -479,22 +488,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};
     }
   }

From 79446289f6dae000052f35314e0a6ce7f0d2f5f3 Mon Sep 17 00:00:00 2001
From: Elle Kasai <elle.kasai@gmail.com>
Date: Fri, 19 Feb 2021 19:20:00 +0900
Subject: [PATCH 2/3] Restyle Check Icon

---
 .../organisms/settings/UpgradeTab.tsx         | 67 ++++++++++++++-----
 1 file changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/cloud/components/organisms/settings/UpgradeTab.tsx b/src/cloud/components/organisms/settings/UpgradeTab.tsx
index af3221d0a0..05fddd8e25 100644
--- a/src/cloud/components/organisms/settings/UpgradeTab.tsx
+++ b/src/cloud/components/organisms/settings/UpgradeTab.tsx
@@ -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) {
@@ -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>
 
@@ -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>
 
@@ -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>
 
@@ -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>
 
@@ -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>
@@ -513,6 +545,11 @@ const StyledPlanTables = styled.table`
     line-height: 1.2;
     padding: 6px 0px;
   }
+
+  .check {
+    color: ${({ theme }) => theme.primaryTextColor};
+    font-weight: bold;
+  }
 `
 
 const StyledTrialLink = styled.a`

From b76287c09d2ea6f136f837a1026bb29481df4de1 Mon Sep 17 00:00:00 2001
From: Elle Kasai <elle.kasai@gmail.com>
Date: Fri, 19 Feb 2021 19:32:44 +0900
Subject: [PATCH 3/3] Restyle Free Trial Link Button

---
 src/cloud/components/organisms/settings/UpgradeTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/organisms/settings/UpgradeTab.tsx b/src/cloud/components/organisms/settings/UpgradeTab.tsx
index 05fddd8e25..298805d8ac 100644
--- a/src/cloud/components/organisms/settings/UpgradeTab.tsx
+++ b/src/cloud/components/organisms/settings/UpgradeTab.tsx
@@ -556,8 +556,8 @@ 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;
   }
 `