Claim style improve 5 (#2146)

* Update * Update * Investing table styling start
gnosis · Jan 14, 2022 · fec6572 · fec6572
1 parent b129b19
commit fec6572
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowClaimButton/index.tsx
@@ -91,7 +91,7 @@ export default function CowClaimButton({ isClaimPage, account, handleOnClickClai
         <>
           <CowProtocolLogo />
           <b>
-            <Trans>Claim vCOW</Trans>
+            <Trans>vCOW</Trans>
           </b>
         </>
       )}

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -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>
@@ -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>
                     )
                   })}

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -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,
@@ -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`
@@ -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 {
@@ -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;
   }
@@ -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 {