[Claim - ClaimTable - Pending] - Show loader and minor style change (#…

…2162)

* ClaimsTable: show loader on pending/block checkbox

* larger vCOW amt font size

* input padding

src/custom/pages/Claim/ClaimsTable.tsx

@@ -7,6 +7,8 @@ import { ClaimStatus } from 'state/claim/actions'
 import { formatSmart } from 'utils/format'
 import { EnhancedUserClaimData } from './types'
 import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks'
+import { CustomLightSpinner } from 'theme'
+import Circle from 'assets/images/blue-loader.svg'
 
 type ClaimsTableProps = {
   handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -54,13 +56,17 @@ const ClaimsTableRow = ({
       <td>
         {' '}
         <label className="checkAll">
-          <input
-            onChange={(event) => handleSelect(event, index)}
-            type="checkbox"
-            name="check"
-            checked={isFree || selected.includes(index)}
-            disabled={isFree}
-          />
+          {isPendingClaim ? (
+            <CustomLightSpinner src={Circle} title="Claiming in progress..." alt="loader" size="24px" />
+          ) : (
+            <input
+              onChange={(event) => handleSelect(event, index)}
+              type="checkbox"
+              name="check"
+              checked={isFree || selected.includes(index)}
+              disabled={isFree}
+            />
+          )}
         </label>
       </td>
       <td>

src/custom/pages/Claim/styled.ts

@@ -474,7 +474,7 @@ export const ClaimTotal = styled.div`
 
   > p {
     margin: 0;
-    font-size: 24px;
+    font-size: 30px;
     font-weight: bold;
   }
 `
@@ -547,6 +547,7 @@ export const EligibleBanner = styled.div`
 
 export const InputField = styled.div`
   padding: 18px;
+  padding-left: 36px;
   border-radius: var(--border-radius);
   border: ${({ theme }) => theme.currencyInput?.border};
   color: ${({ theme }) => theme.text1};