Claim style improve 10 (#2174)

* Wording change and CSS cleanup. * Style update + hide approve button for ETH. * Style updates + organise invest options * Style updates, input field.
gnosis · Jan 18, 2022 · 8502d80 · 8502d80
1 parent ba6ff22
commit 8502d80
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -130,7 +130,11 @@ export default function ClaimsTable({
 
   return (
     <ClaimBreakdown>
-      <h2>vCOW claim breakdown</h2>
+      <p>
+        The table overview below represents your current vCow claiming opportunities. To move forward with one or all of
+        the options, simply select the row(s) you would like to engage with and move forward via the &apos;Claim
+        vCOW&apos; button.
+      </p>
       <ClaimTable>
         <table>
           <thead>

diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -183,16 +183,21 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
         <InvestInput>
           <div>
             <span>
-              <b>Balance:</b>{' '}
+              <b>Balance:</b>
               <i>
-                {formatSmart(balance)} {currencyAmount?.currency?.symbol}
+                {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
               </i>
               {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
-              <button onClick={onMaxClick}>Invest max. possible</button>
+              <button onClick={onMaxClick}>(invest max. possible)</button>
             </span>
             <label>
+              <input
+                // disabled
+                placeholder="0"
+                value={investedAmount}
+                max={formatSmart(currencyAmount)}
+              />
               <b>{currencyAmount?.currency?.symbol}</b>
-              <input disabled placeholder="0" value={investedAmount} max={formatSmart(currencyAmount)} />
             </label>
             <i>Receive: {formatSmart(vCowAmount) || 0} vCOW</i>
             {/* Insufficient balance validation error */}

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -169,7 +169,7 @@ export const PageWrapper = styled.div`
     display: block;
     line-height: 1.6;
     font-weight: 300;
-    margin: 24px auto;
+    margin: 0 0 24px;
     text-align: center;
   }
 
@@ -667,11 +667,11 @@ export const ClaimBreakdown = styled.div`
   width: 100%;
   flex-flow: column wrap;
 
-  > h2 {
-    font-size: 28px;
-    font-weight: 500;
-    text-align: center;
-  }
+  > p {
+    font-size: 16px;
+    line-height: 1.6;
+    font-weight: 300;
+    margin: 0 0 24px;
 `
 
 export const FooterNavButtons = styled.div`
@@ -830,6 +830,15 @@ export const InvestInput = styled.span`
   > div > label {
     display: flex;
     position: relative;
+    background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)};
+    border: ${({ theme }) =>
+      theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+    border-radius: 12px;
+
+    &:hover {
+      border: ${({ theme }) =>
+        theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+    }
   }
 
   > div > label > b {
@@ -841,22 +850,58 @@ export const InvestInput = styled.span`
     top: 0;
     bottom: 0;
     margin: auto;
-    opacity: 0.5;
+    font-weight: normal;
+    opacity: 0.7;
+    color: ${({ theme }) => theme.text1};
   }
 
   > div > label > input {
     color: ${({ theme }) => theme.text1};
-    border: 1px solid grey;
+    border: none;
     border-radius: 12px;
     padding: 12px 70px 12px 12px;
     font-size: 26px;
     outline: 0;
+    background: transparent;
     width: 100%;
+
+    &::placeholder {
+      opacity: 0.5;
+    }
   }
 
   > div > small {
     color: red;
     margin: 12px 0;
+    font-size: 15px;
+  }
+
+  > div > i {
+    font-style: normal;
+  }
+
+  > div > span {
+    display: flex;
+  }
+
+  > div > span > b {
+    margin: 0 3px 0 0;
+  }
+
+  > div > span > i {
+    font-style: normal;
+  }
+
+  > div > span > button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    color: ${({ theme }) => theme.primary4};
+    text-decoration: underline;
+
+    &:hover {
+      color: ${({ theme }) => theme.text1};
+    }
   }
 `