Style update + hide approve button for ETH. (#2171)

* Style update + hide approve button for ETH. * Style updates + organise invest options (#2172)
gnosis · Jan 17, 2022 · 4b5667b · 4b5667b
1 parent 87d8391
commit 4b5667b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -95,11 +95,11 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
   return (
     <InvestTokenGroup>
       <div>
+        <h3>Buy vCOW with {currencyAmount?.currency?.symbol}</h3>
         <span>
           <TokenLogo symbol={currencyAmount?.currency?.symbol || '-'} size={72} />
           <CowProtocolLogo size={72} />
         </span>
-        <h3>Buy vCOW with {currencyAmount?.currency?.symbol}</h3>
       </div>
 
       <span>
@@ -110,6 +110,14 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
               {formatSmart(price)} vCoW per {currencyAmount?.currency?.symbol}
             </i>
           </span>
+
+          <span>
+            <b>Max. investment available</b>{' '}
+            <i>
+              {formatSmart(maxCost) || '0'} {currencyAmount?.currency?.symbol}
+            </i>
+          </span>
+
           <span>
             <b>Token approval</b>
             {approveData ? (
@@ -131,7 +139,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
               </i>
             )}
             {/* Approve button - @biocom styles for this found in ./styled > InputSummary > ${ButtonPrimary}*/}
-            {approveState !== ApprovalState.APPROVED && (
+            {approveData && approveState !== ApprovalState.APPROVED && (
               <ButtonConfirmed
                 buttonSize={ButtonSize.SMALL}
                 onClick={handleApprove}
@@ -142,18 +150,13 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
               >
                 {approving || approveState === ApprovalState.PENDING ? (
                   <Loader stroke="white" />
-                ) : (
+                ) : approveData ? (
                   <span>Approve {currencyAmount?.currency?.symbol}</span>
-                )}
+                ) : null}
               </ButtonConfirmed>
             )}
           </span>
-          <span>
-            <b>Max. investment available</b>{' '}
-            <i>
-              {formatSmart(maxCost) || '0'} {currencyAmount?.currency?.symbol}
-            </i>
-          </span>
+
           <span>
             <b>Available investment used</b>
 

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -296,7 +296,7 @@ export const ClaimTable = styled.div`
     border-collapse: collapse;
     min-width: 100%;
     font-size: 16px;
-    grid-template-columns: min-content auto max-content auto;
+    grid-template-columns: min-content auto auto auto;
   }
 
   thead,
@@ -321,7 +321,7 @@ export const ClaimTable = styled.div`
     background: transparent;
     text-align: left;
     font-weight: normal;
-    font-size: 13px;
+    font-size: 15px;
     color: ${({ theme }) => theme.text1};
     position: relative;
   }
@@ -666,6 +666,12 @@ export const ClaimBreakdown = styled.div`
   display: flex;
   width: 100%;
   flex-flow: column wrap;
+
+  > h2 {
+    font-size: 28px;
+    font-weight: 500;
+    text-align: center;
+  }
 `
 
 export const FooterNavButtons = styled.div`
@@ -724,6 +730,12 @@ export const Demo = styled(ClaimTable)`
 export const InvestFlow = styled.div`
   display: flex;
   flex-flow: column wrap;
+
+  h1 {
+    font-size: 28px;
+    font-weight: 500;
+    text-align: center;
+  }
 `
 
 export const InvestContent = styled.div`
@@ -879,20 +891,20 @@ export const InvestSummary = styled.div`
   display: grid;
   grid-template-columns: auto auto;
   font-size: 15px;
-  gap: 12px;
+  gap: 16px 36px;
 
   > span {
     display: flex;
     flex-flow: column wrap;
     margin: 0 0 12px;
     color: ${({ theme }) => transparentize(0.1, theme.text1)};
+    gap: 3px;
   }
 
   > span > ${ButtonPrimary} {
-    margin: 12px 0;
+    margin: 12px 0 12px -9px;
     padding: 6px;
     font-size: 16px;
-    max-width: 154px;
   }
 
   > span > i {