Misc styling

src/custom/pages/Claim/ClaimsTable.tsx

@@ -76,7 +76,7 @@ const ClaimsTableRow = ({
       </td>
       <td>
         {' '}
-        <TokenLogo symbol={`${currencyAmount?.currency?.symbol}`} size={32} />
+        {!isFree && <TokenLogo symbol={`${currencyAmount?.currency?.symbol}`} size={32} />}
         <CowProtocolLogo size={32} />
         <span>
           <b>{isFree ? ClaimType[type] : 'Buy vCOW'}</b>

src/custom/pages/Claim/EligibleBanner.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import { useClaimState } from 'state/claim/hooks'
-import { CheckIcon, EligibleBanner as EligibleBannerWrapper } from './styled'
+import { EligibleBanner as EligibleBannerWrapper } from './styled'
+import CheckCircle from 'assets/cow-swap/check.svg'
 import { ClaimStatus } from 'state/claim/actions'
 
 export default function EligibleBanner({ hasClaims }: { hasClaims: boolean }) {
@@ -12,7 +13,7 @@ export default function EligibleBanner({ hasClaims }: { hasClaims: boolean }) {
 
   return (
     <EligibleBannerWrapper>
-      <CheckIcon />
+      <img src={CheckCircle} alt="eligible" />
       <Trans>This account is eligible for vCOW token claims!</Trans>
     </EligibleBannerWrapper>
   )

src/custom/pages/Claim/InvestmentFlow/index.tsx

@@ -3,7 +3,6 @@ import {
   InvestFlow,
   InvestContent,
   InvestFlowValidation,
-  InvestTokenSubtotal,
   StepIndicator,
   Steps,
   ClaimTable,
@@ -107,17 +106,6 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
             />
           ))}
 
-          {/* TODO: Update this with real data */}
-          <InvestTokenSubtotal>
-            <h3>Investment summary</h3>
-            <span>
-              <b>Claim account:</b> {activeClaimAccount}
-            </span>
-            <span>
-              <b>vCOW to receive based on selected investment(s):</b> 4,054,671.28 vCOW
-            </span>
-          </InvestTokenSubtotal>
-
           <InvestFlowValidation>Approve all investment tokens before continuing</InvestFlowValidation>
         </InvestContent>
       ) : null}
@@ -148,7 +136,10 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
               <tbody>
                 <tr>
                   <td>
-                    <b>Airdrop</b>
+                    <CowProtocolLogo size={32} />
+                    <span>
+                      <b>Airdrop</b>
+                    </span>
                   </td>
                   <td>
                     <span>

src/custom/pages/Claim/styled.ts

@@ -30,9 +30,9 @@ export const PageWrapper = styled.div`
       --active: ${({ theme }) => theme.primary1};
       --active-inner: ${({ theme }) => theme.black};
       --focus: 2px rgba(39, 94, 254, .3);
-      --border: ${({ theme }) => theme.bg4};
+      --border: ${({ theme }) => theme.blueShade3};
       --border-hover: ${({ theme }) => theme.primary1};
-      --background: ${({ theme }) => theme.blueShade3};;
+      --background: ${({ theme }) => theme.white};
       appearance: none;
       height: 21px;
       width: 21px;
@@ -267,15 +267,15 @@ export const ClaimTable = styled.div`
   }
 
   ${TokenLogo} {
-    margin: 0 -26px 0 0;
+    margin: 0 -16px 0 0;
   }
 
   table {
     display: grid;
     border-collapse: collapse;
     min-width: 100%;
     font-size: 16px;
-    grid-template-columns: min-content auto auto auto;
+    grid-template-columns: min-content auto auto 240px;
   }
 
   thead,
@@ -331,7 +331,7 @@ export const ClaimTable = styled.div`
 
   tr > td:nth-of-type(2) {
     > span {
-      margin: 0 0 0 12px;
+      margin: 0 12px 0 0;
       display: flex;
       flex-flow: column wrap;
     }
@@ -512,6 +512,10 @@ export const EligibleBanner = styled.div`
   text-align: center;
   margin: 0 auto 16px;
   font-weight: 600;
+
+  > img {
+    margin: 0 4px 0 0;
+  }
 `
 
 export const InputField = styled.div`
@@ -740,6 +744,10 @@ export const InvestContent = styled.div`
         flex-flow: column wrap;
         gap: 3px;
 
+        > i {
+          font-style: normal;
+        }
+
         &:last-child {
           width: 100%;
         }
@@ -836,7 +844,7 @@ export const InvestTokenGroup = styled.div`
   }
 
   ${TokenLogo} {
-    margin: 0 -34px 0 0;
+    margin: 0 -36px 0 0;
   }
 
   > span {
@@ -891,7 +899,7 @@ export const InvestInput = styled.span`
     margin: auto;
     font-weight: normal;
     color: ${({ theme }) => theme.text1};
-    background: ${({ theme }) => theme.blueShade3};
+    background: ${({ theme }) => theme.bg5};
     border-radius: 12px;
     padding: 0 12px;
     height: 32px;
@@ -900,8 +908,7 @@ export const InvestInput = styled.span`
   > div > label > input {
     color: ${({ theme }) => theme.text1};
     border: none;
-    border-radius: 12px;
-    padding: 12px 70px 5px 5px;
+    padding: 12px 70px 0 0;
     font-size: 26px;
     outline: 0;
     background: transparent;
@@ -959,13 +966,14 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>`
   position: relative;
   height: 10px;
   border-radius: 24px;
-  background: grey;
-  margin: 8px 0;
+  background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)};
+  margin: 6px 0;
+  padding: 0 36px 0 0;
 
   &::before {
     content: '';
     display: block;
-    background-color: ${({ theme }) => theme.primary1};
+    background-color: ${({ theme }) => theme.primary4};
     height: 100%;
     border-radius: 24px;
     position: absolute;
@@ -979,16 +987,17 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>`
   &::after {
     content: ${({ percentage }) => (percentage ? `'${percentage}%'` : '0%')};
     display: inline-block;
-    font-size: 11px;
-    color: white;
-    transform: translate(-120%, -20%);
+    position: absolute;
+    font-size: 13px;
+    color: ${({ theme }) => theme.primary1};
+    left: 100%;
   }
 `
 
 export const InvestSummary = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: repeat(2, 1fr);
   font-size: 15px;
   gap: 16px 36px;
 
@@ -997,7 +1006,7 @@ export const InvestSummary = styled.div`
     flex-flow: column wrap;
     margin: 0 0 18px;
     color: ${({ theme }) => transparentize(0.1, theme.text1)};
-    gap: 6px;
+    gap: 4px;
   }
 
   > span > ${ButtonPrimary} {
@@ -1033,35 +1042,6 @@ export const InvestFlowValidation = styled.div`
   margin: 0 auto 16px;
 `
 
-export const InvestTokenSubtotal = styled.div`
-  display: flex;
-  flex-flow: column wrap;
-  color: ${({ theme }) => theme.text1};
-  width: 100%;
-  padding: 24px;
-  margin: 0 0 24px;
-  border-radius: 12px;
-  background: ${({ theme }) => theme.blueShade3};
-  font-size: 15px;
-
-  > h3 {
-    font-weight: 600;
-    font-size: 21px;
-    margin: 0 0 8px;
-  }
-
-  > span {
-    display: flex;
-    flex-flow: column wrap;
-    margin: 18px 0 0;
-
-    > b {
-      font-weight: 600;
-      margin: 0 0 3px;
-    }
-  }
-`
-
 export const ClaimAccountButtons = styled.div`
   display: flex;
   flex-direction: column;