QA: Fix homepage with chain issues

packages/mixer/src/components/Withdraw/Withdraw.tsx

@@ -9,6 +9,7 @@ import { Modal } from '@webb-dapp/ui-components/Modal/Modal';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { WithdrawState } from '@webb-dapp/react-environment';
+import { InputSection } from '@webb-dapp/ui-components/Inputs/InputSection/InputSection';
 
 const WithdrawWrapper = styled.div``;
 type WithdrawProps = {};
@@ -24,23 +25,28 @@ export const Withdraw: React.FC<WithdrawProps> = () => {
 
   return (
     <WithdrawWrapper>
-      <NoteInput error={note ? validationErrors.note : ''} value={note} onChange={setNote} />
+      <InputSection>
+        <NoteInput error={note ? validationErrors.note : ''} value={note} onChange={setNote} />
+      </InputSection>
 
       <SpaceBox height={16} />
 
-      <InputLabel label={'Recipient'}>
-        <InputBase
-          value={recipient}
-          onChange={(event) => {
-            setRecipient(event.target.value as string);
-          }}
-          fullWidth
-          placeholder={`Enter account address`}
-        />
-        <FormHelperText error={Boolean(validationErrors.recipient && recipient)}>
-          {validationErrors.recipient}
-        </FormHelperText>
-      </InputLabel>
+      <InputSection>
+        <InputLabel label={'Recipient'}>
+          <InputBase
+            value={recipient}
+            onChange={(event) => {
+              setRecipient(event.target.value as string);
+            }}
+            inputProps={{style: {fontSize: 14}}}
+            fullWidth
+            placeholder={`Enter account address`}
+          />
+          <FormHelperText error={Boolean(validationErrors.recipient && recipient)}>
+            {validationErrors.recipient}
+          </FormHelperText>
+        </InputLabel>
+      </InputSection>
 
       <SpaceBox height={16} />
 

packages/ui-components/src/Inputs/InputLabel/InputLabel.tsx

@@ -2,6 +2,7 @@ import { Pallet } from '@webb-dapp/ui-components/styling/colors';
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { FontFamilies } from '@webb-dapp/ui-components/styling/fonts/font-families.enum';
+import { Typography } from '@material-ui/core';
 
 type LabelStatus = 'initial' | 'highlighted' | 'error';
 
@@ -15,18 +16,10 @@ interface InputLabelProps {
 }
 
 const InputLabelRoot = styled.label<InputLabelRootProps>`
-  ${({ theme }: { theme: Pallet }) => css`
-    border: 2px solid ${theme.borderColor2};
-    color: ${theme.primaryText};
-    background: ${theme.layer2Background};
-  `}
-  font-size: 13px;
-
   display: block;
-  padding: 10px;
-  border-radius: 10px;
-  min-height: 80px;
+
   .label-content {
+    font-size: 16px;
     font-family: ${FontFamilies.AvenirNext};
     font-weight: 300;
     display: block;
@@ -36,7 +29,7 @@ const InputLabelRoot = styled.label<InputLabelRootProps>`
 export const InputLabel: React.FC<InputLabelProps> = ({ children, label, state = 'initial' }) => {
   return (
     <InputLabelRoot state={state}>
-      <span className='label-content'>{label}</span>
+      <Typography className='label-content'>{label}</Typography>
       {children}
     </InputLabelRoot>
   );

packages/ui-components/src/Inputs/InputSection/InputSection.tsx

@@ -0,0 +1,13 @@
+import { Pallet } from '@webb-dapp/ui-components/styling/colors';
+import styled, { css } from 'styled-components';
+
+export const InputSection = styled.div`
+  ${({ theme }: { theme: Pallet }) => css`
+    border: 2px solid ${theme.borderColor2};
+    color: ${theme.primaryText};
+    background: ${theme.layer2Background};
+  `}
+  padding: 10px;
+  border-radius: 10px;
+  min-height: 80px;
+`;

packages/ui-components/src/Inputs/MixerGroupSelect/MixerGroupSelect.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/indent */
 import { MixerSize } from '@webb-dapp/react-environment/webb-context';
 import { InputLabel } from '@webb-dapp/ui-components/Inputs/InputLabel/InputLabel';
+import { InputSection } from '../InputSection/InputSection';
 import { Pallet } from '@webb-dapp/ui-components/styling/colors';
 import { FontFamilies } from '@webb-dapp/ui-components/styling/fonts/font-families.enum';
 import React, { useEffect, useMemo } from 'react';
@@ -71,25 +72,27 @@ export const MixerGroupSelect: React.FC<MixerGroupSelectProps> = ({ items, onCha
   }, [checkedIndex, items]);
 
   return (
-    <InputLabel label={'Select Amount'}>
-      <MixerGroupSelectWrapper>
-        {mixerSizes.map(({ id, selected, title }) => {
-          return (
-            <AmountChipWrapper
-              key={id + title}
-              selected={selected}
-              onClick={() => {
-                onChange?.({
-                  title,
-                  id,
-                });
-              }}
-            >
-              {title}
-            </AmountChipWrapper>
-          );
-        })}
-      </MixerGroupSelectWrapper>
-    </InputLabel>
+    <InputSection>
+      <InputLabel label={'Select Amount'}>
+        <MixerGroupSelectWrapper>
+          {mixerSizes.map(({ id, selected, title }) => {
+            return (
+              <AmountChipWrapper
+                key={id + title}
+                selected={selected}
+                onClick={() => {
+                  onChange?.({
+                    title,
+                    id,
+                  });
+                }}
+              >
+                {title}
+              </AmountChipWrapper>
+            );
+          })}
+        </MixerGroupSelectWrapper>
+      </InputLabel>
+    </InputSection>
   );
 };

packages/ui-components/src/Inputs/TokenInput/TokenInput.tsx

@@ -71,7 +71,7 @@ const AccountManagerWrapper = styled.div<any>`
   height: 0;
   background: #ffffff;
   position: relative;
-  top: -26.5px;
+  top: -52px;
 `;
 
 type TokenInputProps = {

packages/ui-components/src/Inputs/WalletTokenInput/WalletTokenInput.tsx

@@ -3,6 +3,7 @@ import { Currency } from '@webb-dapp/react-environment/types/currency';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
+import { InputSection } from '../InputSection/InputSection';
 import { InputLabel } from '../InputLabel/InputLabel';
 import { TokenInput } from '../TokenInput/TokenInput';
 import { WalletSelect } from '../WalletSelect/WalletSelect';
@@ -11,7 +12,8 @@ const WalletTokenInputWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 60px;
+  height: 100%;
+  width: 100%;
 `;
 type WalletTokenInputProps = {
   setSelectedToken(token: Currency): void;
@@ -25,12 +27,18 @@ export const WalletTokenInput: React.FC<WalletTokenInputProps> = ({ selectedToke
   }, [activeChain]);
   const active = useMemo(() => selectedToken ?? allCurrencies[0], [allCurrencies, selectedToken]);
   return (
-    <InputLabel label={'Select wallet < token for deposit'}>
+    <InputSection>
       <WalletTokenInputWrapper>
-        <WalletSelect />
+        <InputLabel label={'Select Wallet'}>
+          <WalletSelect />
+        </InputLabel>
 
-        <TokenInput currencies={allCurrencies} value={active} onChange={setSelectedToken} />
+        <InputLabel label={'Token for Deposit'}>
+          {/* used for positioning the token input label */}
+          <div style={{height: '52px'}}></div>
+          <TokenInput currencies={allCurrencies} value={active} onChange={setSelectedToken} />
+        </InputLabel> 
       </WalletTokenInputWrapper>
-    </InputLabel>
+    </InputSection>
   );
 };

packages/ui-components/src/styling/themes/overides/light-theme-overrides.ts

@@ -30,5 +30,11 @@ export const lightMainThemeOverrides: ThemeOptions['overrides'] = {
     h6: {
       fontSize: '.9rem',
     },
+    caption: {
+      fontSize: '.8rem',
+    },
+    body1: {
+      fontSize: '1rem',
+    },
   },
 };