chore: homogenise styling approach to input

Author: hasjack

src/components/Authorization/Authorization.style.ts

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { AbiItem } from 'web3-utils'
 import { Contract } from 'web3-eth-contract'
 import { isAddress } from 'web3-validator'
-import * as Styled from './Authorization.style'
 
 /**
  * Interface for managing Dapper wallet authorization details
@@ -146,46 +145,40 @@ const Authorization: React.FC<AuthorizationProps> = ({ walletAddress, contract }
     }
 
     return (
-        <Styled.Container>
-            <Styled.WalletHeader>
-                Dapper Wallet: <Styled.WalletAddress>{walletAddress}</Styled.WalletAddress>
-            </Styled.WalletHeader>
+        <>
+            <h2>Dapper Wallet:</h2>
+            <code>{walletAddress}</code>
 
             {authorizationSuccess ? (
-                <Styled.SuccessMessage>
+                <>
                     <h3>Success! New authorized / cosigner pair for this address is:</h3>
-                    <Styled.AuthorizedAddress>{walletDetails.newAuthorized}</Styled.AuthorizedAddress>
-                </Styled.SuccessMessage>
+                    <code>{walletDetails.newAuthorized}</code>
+                </>
             ) : (
-                <Styled.AuthorizationForm>
-                    <Styled.FormInstructions>
-                        <p>Use this form to add an Ethereum wallet as an authorized address to the Dapper wallet you're currently signed into.</p>
-                        <p>Ensure that you double-check the wallet address you've pasted to confirm it is correct.</p>
-                        <p>Once you're confident the address is correct, submit and sign the transaction.</p>
-                    </Styled.FormInstructions>
+                <>
+                    <p>Use this form to add an Ethereum wallet as an authorized address to the Dapper wallet you're currently signed into.</p>
+                    <p>Ensure that you double-check the wallet address you've pasted to confirm it is correct.</p>
+                    <p>Once you're confident the address is correct, submit and sign the transaction.</p>
 
-                    <Styled.InputGroup>
-                        <label htmlFor="newAuthorized">
-                            Add new authorization:
-                            <Styled.AddressInput
-                                id="newAuthorized"
-                                type="text"
-                                value={walletDetails.newAuthorized}
-                                onChange={e => handleInputChange(e, 'newAuthorized')}
-                                placeholder="Enter Ethereum address (0x...)"
-                            />
-                        </label>
-                    </Styled.InputGroup>
+                    <label>
+                        Add new authorization:
+                        <input
+                            type="text"
+                            value={walletDetails.newAuthorized}
+                            onChange={e => handleInputChange(e, 'newAuthorized')}
+                            placeholder="Enter Ethereum address (0x...)"
+                        />
+                    </label>
 
-                    <Styled.SubmitButton
+                    <button
                         onClick={handleSetAuthorized}
                         disabled={!isAddress(walletDetails.newAuthorized)}
                     >
                         Set new authorized address
-                    </Styled.SubmitButton>
-                </Styled.AuthorizationForm>
+                    </button>
+                </>
             )}
-        </Styled.Container>
+        </>
     )
 }
 

src/components/Authorization/Authorization.tsx

@@ -12,38 +12,46 @@ interface Props {
 const SetDapperWallet: React.FC<Props> = ({ walletAddress, walletDetails, handleInputChange, handleSave, isCosigner }) => {
     return (
         <>
-            <h2>{'Signer Address:'}</h2>
+            <h2>Signer Address:</h2>
             <code>{walletAddress}</code>
+
             {walletDetails.dapperWallet ? (
                 <>
                     <h3>Dapper Wallet address:</h3>
                     <code>{walletDetails.dapperWallet}</code>
                     {isCosigner ? (
-                        <p><span className={'success'}>✓</span>{'The wallet you are signed in with is authorized for the Dapper Legacy wallet you provided.'}</p>
+                        <p>
+                            <span className="success">✓</span>
+                            The wallet you are signed in with is authorized for the Dapper Legacy wallet you provided.
+                        </p>
                     ) : (
-                        <p className={'warning'}>{'The cosigner address is not the same as logged in wallet address'}</p>
+                        <p className="warning">
+                            The cosigner address is not the same as logged in wallet address
+                        </p>
                     )}
                 </>
             ) : (
                 <>
-                    <p>{'Add the Dapper legacy wallet you want to use:'}</p>
+                    <p>Add the Dapper legacy wallet you want to use:</p>
                     <label>
-                        {'Set dapper wallet address:'}
+                        Set dapper wallet address:
                         <input
                             type="text"
                             value={walletDetails.dapperWalletInput}
                             onChange={e => handleInputChange(e, 'dapperWalletInput')}
+                            placeholder="Enter Dapper wallet address (0x...)"
                         />
                     </label>
                     <button
-                        type="submit"
                         onClick={handleSave}
-                        disabled={!(isAddress(walletDetails.dapperWalletInput))}
-                    >Set Dapper Wallet</button>
+                        disabled={!isAddress(walletDetails.dapperWalletInput)}
+                    >
+                        Set Dapper Wallet
+                    </button>
                 </>
             )}
         </>
     )
 }
 
-export default SetDapperWallet
+export default SetDapperWallet

src/components/SetDapperWallet/SetDapperWallet.tsx

@@ -182,4 +182,4 @@ export const Grid = styled.div`
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-`
+`