From 844d034415c59dbedf8e0347dee435c99037ac05 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 22 Feb 2022 13:23:12 +0100 Subject: [PATCH 01/10] style: Override MUI outlined input styles --- src/theme/mui.ts | 62 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/src/theme/mui.ts b/src/theme/mui.ts index d64e4a05d0..fb17fb8692 100644 --- a/src/theme/mui.ts +++ b/src/theme/mui.ts @@ -25,6 +25,7 @@ import { smallFontSize, xs, alertWarning, + black300, } from './variables' const palette = { @@ -150,17 +151,9 @@ const theme = createTheme({ fontFamily: secondaryFontFamily, }, }, - MuiFormHelperText: { + MuiFormControl: { root: { - color: secondary, - fontFamily: secondaryFontFamily, - fontSize: '12px', - marginTop: '0px', - order: '0', - padding: `0 0 0 ${md}`, - position: 'absolute', - top: '5px', - zIndex: 1, // for firefox + flex: 1, }, }, MuiInput: { @@ -226,6 +219,55 @@ const theme = createTheme({ marginTop: '0 !important', }, }, + MuiInputLabel: { + outlined: { + color: primary, + '&$focused': { + color: secondary, + }, + }, + }, + MuiOutlinedInput: { + root: { + borderRadius: xs, + color: primary, + fontFamily: secondaryFontFamily, + fontSize: largeFontSize, + '&:$disabled': { + color: '#0000ff', + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: black300, + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: secondary, + borderWidth: '1px', + }, + }, + input: { + color: primary, + display: 'flex', + height: 'auto', + letterSpacing: '0.5px', + padding: md, + lineHeight: '1.5', + textOverflow: 'ellipsis', + '&::-webkit-input-placeholder': { + color: disabled, + }, + }, + label: { + color: error, + }, + formControl: { + marginTop: '0 !important', + }, + }, + MuiSelect: { + outlined: { + padding: '0 !important', + }, + }, MuiFilledInput: { underline: { '&::before': { From 9b58f51a9b2903483d80cf5f4fc8ee5eee0f54b4 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 22 Feb 2022 13:24:41 +0100 Subject: [PATCH 02/10] style: Adjust TxModalWrapper edit screen input styles --- src/components/forms/TextField/index.tsx | 8 +------ .../helpers/EditTxParametersForm/index.tsx | 24 +++++++++---------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components/forms/TextField/index.tsx b/src/components/forms/TextField/index.tsx index 6ef67fffca..51456d038b 100644 --- a/src/components/forms/TextField/index.tsx +++ b/src/components/forms/TextField/index.tsx @@ -3,12 +3,6 @@ import { createStyles, makeStyles } from '@material-ui/core/styles' import { lg } from 'src/theme/variables' -// Neded for solving a fix in Windows browsers -const overflowStyle = { - overflow: 'hidden', - width: '100%', -} - const styles = () => createStyles({ root: { @@ -91,8 +85,8 @@ const TextField = (props: Props): React.ReactElement => { name={name} onChange={onChange} rows={rows} - style={overflowStyle} value={value} + variant="outlined" {...rest} /> ) diff --git a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx index 6d2f4c67db..cf41d5bc73 100644 --- a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx +++ b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx @@ -42,7 +42,7 @@ const SafeOptions = styled.div` const EthereumOptions = styled.div` display: grid; grid-template-columns: 1fr 1fr; - gap: 10px; + gap: 10px 20px; ` const StyledLink = styled(Link)` margin: 16px 0 0 0; @@ -54,11 +54,9 @@ const StyledLink = styled(Link)` } ` const StyledText = styled(Text)` - margin: 0 0 4px 0; -` -const StyledTextMt = styled(Text)` - margin: 16px 0 4px 0; + margin: 0 0 16px 0; ` + const useStyles = makeStyles(styles) interface Props { @@ -151,7 +149,7 @@ export const EditTxParametersForm = ({ name="safeNonce" defaultValue={safeNonce} placeholder="Safe nonce" - text="Safe nonce" + label="Safe nonce" type="number" min="0" component={TextField} @@ -162,7 +160,7 @@ export const EditTxParametersForm = ({ name="safeTxGas" defaultValue={safeTxGas} placeholder="SafeTxGas" - text="SafeTxGas" + label="SafeTxGas" type="number" min="0" component={TextField} @@ -173,16 +171,16 @@ export const EditTxParametersForm = ({ {areEthereumParamsVisible(parametersStatus) && ( <> - + {ethereumTxParametersTitle(isExecution)} - + @@ -214,7 +212,7 @@ export const EditTxParametersForm = ({ defaultValue={ethMaxPrioFee} type="number" placeholder="Max priority fee" - text="Max priority fee (GWEI)" + label="Max priority fee (GWEI)" component={TextField} disabled={!areEthereumParamsVisible(parametersStatus)} /> From 75f29db6d311cc613d4df4e8112a8ab62965fe82 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 22 Feb 2022 13:39:53 +0100 Subject: [PATCH 03/10] style: Adjust SendFunds screen input styles --- src/components/forms/SelectField/index.tsx | 1 + .../Balances/SendModal/screens/AddressBookInput/index.tsx | 2 +- .../Balances/SendModal/screens/AddressBookInput/style.ts | 7 +++++-- .../SendModal/screens/SendFunds/TokenSelectField/style.ts | 4 ++-- .../Balances/SendModal/screens/SendFunds/index.tsx | 3 +-- 5 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/forms/SelectField/index.tsx b/src/components/forms/SelectField/index.tsx index c18f35e2ef..e905ccead6 100644 --- a/src/components/forms/SelectField/index.tsx +++ b/src/components/forms/SelectField/index.tsx @@ -32,6 +32,7 @@ const SelectInput = ({ onChange={onChange} renderValue={renderValue} value={value} + variant="outlined" {...rest} /> {showError && {meta.error || meta.submitError}} diff --git a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx index 4c1bf596a8..663dcaae7e 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx @@ -169,7 +169,7 @@ const BaseAddressBookInput = ({ autoFocus={true} error={!!validationText} fullWidth - variant="filled" + variant="outlined" label={validationText ? validationText : label} InputLabelProps={{ shrink: true, required: true, classes: labelStyles }} InputProps={{ ...params.InputProps, classes: inputStyles }} diff --git a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts index 870b94858d..4eae9a1533 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts @@ -14,8 +14,11 @@ export const useTextFieldLabelStyle = makeStyles( export const useTextFieldInputStyle = makeStyles( createStyles({ root: { - fontSize: '14px', - width: '420px', + fontSize: '16px', + padding: '0 !important', + }, + input: { + padding: '16px !important', }, }), ) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts index 38d9a5d5b5..7aaf3a69bc 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts @@ -1,12 +1,12 @@ import { createStyles, makeStyles } from '@material-ui/core' -import { sm } from 'src/theme/variables' +import { sm, md } from 'src/theme/variables' export const useSelectedTokenStyles = makeStyles( createStyles({ container: { minHeight: '55px', - padding: 0, + padding: `0 ${md}`, width: '100%', }, tokenData: { diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx index dd4430092f..5fc4fcd213 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx @@ -293,7 +293,7 @@ const SendFunds = ({ )} - + From 8e7bd815dcb4b8cc8d2f36907912684ac6012dc0 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 22 Feb 2022 16:26:41 +0100 Subject: [PATCH 04/10] =?UTF-8?q?style:=20Adjust=20SendCollectible=20input?= =?UTF-8?q?=20styles,=20disp=C3=83lay=20placeholder=20value=20if=20not=20s?= =?UTF-8?q?elected?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CollectibleSelectField/index.tsx | 3 +- .../CollectibleSelectField/style.ts | 27 ----------------- .../TokenSelectField/index.tsx | 3 +- .../SendCollectible/TokenSelectField/style.ts | 30 ------------------- .../screens/SendCollectible/index.tsx | 2 +- .../screens/SendCollectible/style.ts | 30 ++++++++++++++++++- src/theme/mui.ts | 6 ---- 7 files changed, 34 insertions(+), 67 deletions(-) delete mode 100644 src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts delete mode 100644 src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx index 0d4781a757..84bb5393c6 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx @@ -3,7 +3,7 @@ import ListItemText from '@material-ui/core/ListItemText' import MenuItem from '@material-ui/core/MenuItem' import { makeStyles } from '@material-ui/core/styles' -import { selectStyles, selectedTokenStyles } from './style' +import { selectStyles, selectedTokenStyles } from '../style' import Field from 'src/components/forms/Field' import SelectField from 'src/components/forms/SelectField' @@ -65,6 +65,7 @@ export const CollectibleSelectField = ({ initialValue, tokens }: CollectibleSele disabled={!tokens.length} initialValue={initialValue} name="nftTokenId" + displayEmpty renderValue={(nftTokenId) => } validate={required} > diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts deleted file mode 100644 index 890830fa4c..0000000000 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/style.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { sm } from 'src/theme/variables' -import { createStyles } from '@material-ui/core' - -export const selectedTokenStyles = createStyles({ - container: { - minHeight: '55px', - padding: 0, - width: '100%', - }, - tokenData: { - padding: 0, - margin: 0, - lineHeight: '14px', - }, - tokenImage: { - marginRight: sm, - }, -}) - -export const selectStyles = createStyles({ - selectMenu: { - paddingRight: 0, - }, - tokenImage: { - marginRight: sm, - }, -}) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx index ef87b7c695..a826773567 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx @@ -3,7 +3,7 @@ import ListItemText from '@material-ui/core/ListItemText' import MenuItem from '@material-ui/core/MenuItem' import { makeStyles } from '@material-ui/core/styles' -import { selectStyles, selectedTokenStyles } from './style' +import { selectStyles, selectedTokenStyles } from '../style' import Field from 'src/components/forms/Field' import SelectField from 'src/components/forms/SelectField' @@ -68,6 +68,7 @@ const TokenSelectField = ({ assets, initialValue }: TokenSelectFieldProps): Reac disabled={!assetsAddresses.length} initialValue={initialValue} name="assetAddress" + displayEmpty renderValue={(assetAddress) => } validate={required} > diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts deleted file mode 100644 index 0737ce130e..0000000000 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/style.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { sm } from 'src/theme/variables' -import { createStyles } from '@material-ui/core' - -export const selectedTokenStyles = createStyles({ - container: { - minHeight: '55px', - padding: 0, - width: '100%', - }, - tokenData: { - padding: 0, - margin: 0, - lineHeight: '14px', - }, - tokenImage: { - display: 'block', - marginRight: sm, - height: 28, - width: 'auto', - }, -}) - -export const selectStyles = createStyles({ - selectMenu: { - paddingRight: 0, - }, - tokenImage: { - marginRight: sm, - }, -}) diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx index 1b1dbd6898..f036f276c3 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx @@ -216,7 +216,7 @@ const SendCollectible = ({ - + Date: Wed, 23 Feb 2022 17:25:21 +0100 Subject: [PATCH 05/10] style: Adjust Contract interaction inputs --- src/components/forms/TextField/index.tsx | 2 +- .../screens/AddressBookInput/style.ts | 3 -- .../ContractInteraction/ContractABI/index.tsx | 2 +- .../EthAddressInput/index.tsx | 2 +- .../MethodsDropdown/index.tsx | 13 +++-- .../MethodsDropdown/style.ts | 50 +++++++++++++++++++ .../InputComponent/ArrayTypeInput.tsx | 2 +- .../InputComponent/index.tsx | 4 +- .../RenderInputParams/index.tsx | 2 +- .../components/CurrencyDropdown/index.tsx | 11 +++- .../safe/components/CurrencyDropdown/style.ts | 1 + .../helpers/EditTxParametersForm/index.tsx | 10 ++-- src/theme/mui.ts | 14 ++++-- 13 files changed, 93 insertions(+), 23 deletions(-) create mode 100644 src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/style.ts diff --git a/src/components/forms/TextField/index.tsx b/src/components/forms/TextField/index.tsx index 51456d038b..78b42bb021 100644 --- a/src/components/forms/TextField/index.tsx +++ b/src/components/forms/TextField/index.tsx @@ -78,7 +78,7 @@ const TextField = (props: Props): React.ReactElement => { return ( { return ( - + ) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx index 3b7dcc26df..210c75f982 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx @@ -78,7 +78,7 @@ export const EthAddressInput = ({ placeholder={text} onChange={handleInputChange} testId={name} - text={text} + label={text} type="text" validate={validate} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx index 4fff2b911a..5b69c871fb 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx @@ -19,6 +19,8 @@ import { DropdownListTheme } from 'src/theme/mui' import { extractUsefulMethods, AbiItemExtended } from 'src/logic/contractInteraction/sources/ABIService' import { Text } from '@gnosis.pm/safe-react-components' import styled from 'styled-components' +import { Button } from '@material-ui/core' +import { useButtonStyles } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/style' const MENU_WIDTH = '452px' @@ -32,6 +34,7 @@ interface MethodsDropdownProps { export const MethodsDropdown = ({ onChange }: MethodsDropdownProps): ReactElement | null => { const classes = useDropdownStyles({ buttonWidth: MENU_WIDTH }) + const buttonClasses = useButtonStyles({ buttonWidth: MENU_WIDTH }) const { input: { value: abi }, meta: { valid }, @@ -79,19 +82,19 @@ export const MethodsDropdown = ({ onChange }: MethodsDropdownProps): ReactElemen } return ( - + <> - + (props.buttonWidth ? props.buttonWidth : buttonWidth), + outline: 'none', + padding: '16px', + textAlign: 'left', + '&:active': { + opacity: '0.8', + }, + }, + buttonInner: { + boxSizing: 'border-box', + display: 'block', + height: '100%', + lineHeight: '24px', + position: 'relative', + padding: '0 !important', + width: '100%', + '&::after': { + borderLeft: '5px solid transparent', + borderRight: '5px solid transparent', + borderTop: '5px solid #5d6d74', + content: '""', + height: '0', + position: 'absolute', + right: '8px', + top: '9px', + width: '0', + }, + }, + openMenuButton: { + '&::after': { + borderBottom: '5px solid #5d6d74', + borderLeft: '5px solid transparent', + borderRight: '5px solid transparent', + borderTop: 'none', + }, + }, +}) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/ArrayTypeInput.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/ArrayTypeInput.tsx index 2d98fb37a1..d696a5f566 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/ArrayTypeInput.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/ArrayTypeInput.tsx @@ -44,7 +44,7 @@ const typePlaceholder = (text: string, type: string): string => { } const ArrayTypeInput = ({ name, text, type }: { name: string; text: string; type: string }): React.ReactElement => ( - + ) export default ArrayTypeInput diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx index 600c282f3e..910974373d 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/InputComponent/index.tsx @@ -39,7 +39,7 @@ export const InputComponent = ({ type, keyValue, placeholder }: Props): ReactEle name={keyValue} placeholder={placeholder} testId={keyValue} - text={placeholder} + label={placeholder} type="text" validate={composeValidators(required, mustBeAddressHash)} /> @@ -57,7 +57,7 @@ export const InputComponent = ({ type, keyValue, placeholder }: Props): ReactEle name={keyValue} placeholder={placeholder} testId={keyValue} - text={placeholder} + label={placeholder} type="text" validate={required} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx index 4ff7436310..acc2aa425b 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/RenderInputParams/index.tsx @@ -23,7 +23,7 @@ export const RenderInputParams = (): ReactElement | null => { const key = generateFormFieldKey(type, method.signatureHash, index) return ( - + ) diff --git a/src/routes/safe/components/CurrencyDropdown/index.tsx b/src/routes/safe/components/CurrencyDropdown/index.tsx index 71f963d477..09fd05479e 100644 --- a/src/routes/safe/components/CurrencyDropdown/index.tsx +++ b/src/routes/safe/components/CurrencyDropdown/index.tsx @@ -21,6 +21,7 @@ import { getNativeCurrency } from 'src/config' import { sameString } from 'src/utils/strings' import { fetchSafeTokens } from 'src/logic/tokens/store/actions/fetchSafeTokens' import { currentSafe } from 'src/logic/safe/store/selectors' +import { Button } from '@material-ui/core' export const CurrencyDropdown = ({ testId }: { testId: string }): React.ReactElement | null => { const dispatch = useDispatch() @@ -58,11 +59,17 @@ export const CurrencyDropdown = ({ testId }: { testId: string }): React.ReactEle return ( <> - + - + {ethereumTxParametersTitle(isExecution)} - + Date: Wed, 23 Feb 2022 18:02:16 +0100 Subject: [PATCH 06/10] style: Replace text prop with label prop in all Field elements --- src/components/forms/AddressInput/index.tsx | 2 +- src/routes/CreateSafePage/steps/NameNewSafeStep.tsx | 2 +- src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx | 2 +- src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx | 2 +- .../components/AddressBook/CreateEditEntryModal/index.tsx | 2 +- .../screens/ContractInteraction/NativeCoinValue/index.tsx | 2 +- .../screens/ContractInteraction/SendCustomTx/index.tsx | 2 +- .../SendCollectible/CollectibleSelectField/index.tsx | 2 +- .../screens/SendCollectible/TokenSelectField/index.tsx | 2 +- .../Balances/SendModal/screens/SendCollectible/style.ts | 4 ++-- .../SendModal/screens/SendFunds/TokenSelectField/index.tsx | 2 +- .../SendModal/screens/SendFunds/TokenSelectField/style.ts | 6 +++--- .../ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx | 2 +- .../Settings/ManageOwners/EditOwnerModal/index.tsx | 2 +- .../ReplaceOwnerModal/screens/OwnerForm/index.tsx | 2 +- src/routes/safe/components/Settings/SafeDetails/index.tsx | 2 +- .../Settings/SpendingLimit/FormFields/Amount.tsx | 7 +------ .../Settings/SpendingLimit/NewLimitModal/Create.tsx | 4 ++-- src/theme/mui.ts | 4 +++- 19 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/components/forms/AddressInput/index.tsx b/src/components/forms/AddressInput/index.tsx index a29d810c16..d5e4925756 100644 --- a/src/components/forms/AddressInput/index.tsx +++ b/src/components/forms/AddressInput/index.tsx @@ -117,7 +117,7 @@ const AddressInput = ({ inputAdornment={adornment} name={name} placeholder={placeholder} - text={text} + label={text} spellCheck={false} validate={allValidators} inputProps={{ diff --git a/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx b/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx index 6d54b60455..48cbd68884 100644 --- a/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx +++ b/src/routes/CreateSafePage/steps/NameNewSafeStep.tsx @@ -88,7 +88,7 @@ function NameNewSafeStep(): ReactElement { component={TextField} name={FIELD_CREATE_CUSTOM_SAFE_NAME} placeholder={formValues[FIELD_CREATE_SUGGESTED_SAFE_NAME]} - text="Safe name" + label="Safe name" type="text" testId="create-safe-name-field" /> diff --git a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx index 7c8074a3c4..2010cd5a94 100644 --- a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx +++ b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx @@ -159,7 +159,7 @@ function LoadSafeAddressStep(): ReactElement { component={TextField} name={FIELD_LOAD_CUSTOM_SAFE_NAME} placeholder={safeName} - text="Safe name" + label="Safe name" type="text" testId="load-safe-name-field" /> diff --git a/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx index 8d6bfd0cba..acf7e21e18 100644 --- a/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx +++ b/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx @@ -52,7 +52,7 @@ function LoadSafeOwnersStep(): ReactElement { initialValue={name} name={ownerFieldName} placeholder={ownerName} - text="Owner Name" + label="Owner Name" type="text" validate={minMaxLength(0, 50)} testId={`load-safe-owner-name-${index}`} diff --git a/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.tsx b/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.tsx index fc45f4966d..937be4b2aa 100644 --- a/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.tsx +++ b/src/routes/safe/components/AddressBook/CreateEditEntryModal/index.tsx @@ -92,7 +92,7 @@ export const CreateEditEntryModal = ({ name="name" placeholder="Name*" testId={CREATE_ENTRY_INPUT_NAME_ID} - text="Name*" + label="Name*" type="text" validate={composeValidators(required, validAddressBookName)} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/NativeCoinValue/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/NativeCoinValue/index.tsx index 8ed1f1d3de..9ef1d50493 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/NativeCoinValue/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/NativeCoinValue/index.tsx @@ -61,7 +61,7 @@ export const NativeCoinValue = ({ onSetMax }: NativeCoinValueProps): React.React }} name="value" placeholder="Value" - text="Value" + label="Value" type="text" validate={!disabled && composeValidators(mustBeFloat, maxValue(ethBalance))} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx index 485d1d956f..f6721e1e6e 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx @@ -115,7 +115,7 @@ const SendCustomTx = ({ initialValues, isABI, onClose, onNext, switchMethod }: P }} name="value" placeholder="Value*" - text="Value*" + label="Value*" type="text" validate={composeValidators(mustBeFloat, maxValue(ethBalance || '0'), minValue(0))} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx index 84bb5393c6..a0de6448f5 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/CollectibleSelectField/index.tsx @@ -27,7 +27,7 @@ const SelectedCollectible = ({ tokenId, tokens }: SelectedCollectibleProps): Rea const shortener = textShortener({ charsStart: 40, charsEnd: 0 }) return ( - + {token ? ( <> diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx index a826773567..7152b642c2 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/TokenSelectField/index.tsx @@ -28,7 +28,7 @@ const SelectedToken = ({ assetAddress, assets }: SelectedTokenProps): React.Reac const shortener = textShortener({ charsStart: 40, charsEnd: 0 }) return ( - + {asset && asset.numberOfTokens ? ( <> diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/style.ts index 4b8918ed1c..3be27b99c8 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/style.ts @@ -17,8 +17,8 @@ export const styles = createStyles({ export const selectedTokenStyles = createStyles({ container: { - minHeight: '55px', - padding: `0 ${md}`, + background: 'none !important', + padding: '0', width: '100%', }, tokenData: { diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.tsx index 74645c5a71..e58b60dc6f 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.tsx @@ -25,7 +25,7 @@ const SelectedToken = ({ tokenAddress, tokens }: SelectTokenProps): ReactElement const token = tokens.find(({ address }) => address === tokenAddress) return ( - + {token ? ( <> diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts index 7aaf3a69bc..60f6a45064 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/style.ts @@ -1,12 +1,12 @@ import { createStyles, makeStyles } from '@material-ui/core' -import { sm, md } from 'src/theme/variables' +import { sm } from 'src/theme/variables' export const useSelectedTokenStyles = makeStyles( createStyles({ container: { - minHeight: '55px', - padding: `0 ${md}`, + background: 'none !important', + padding: '0', width: '100%', }, tokenData: { diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx index 5b6c942dd8..a3eb8f62f0 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.tsx @@ -104,7 +104,7 @@ export const OwnerForm = ({ onClose, onSubmit, initialValues }: OwnerFormProps): name="ownerName" placeholder="Owner name*" testId={ADD_OWNER_NAME_INPUT_TEST_ID} - text="Owner name*" + label="Owner name*" type="text" validate={composeValidators(required, validAddressBookName)} /> diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx index c0aa57830d..c86c6c0949 100644 --- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx @@ -66,7 +66,7 @@ export const EditOwnerModal = ({ isOpen, onClose, owner }: OwnProps): React.Reac name="ownerName" placeholder="Owner name*" testId={RENAME_OWNER_INPUT_TEST_ID} - text="Owner name*" + label="Owner name*" type="text" validate={composeValidators(required, validAddressBookName)} /> diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.tsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.tsx index b5aecb0b91..248cb83350 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.tsx +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.tsx @@ -132,7 +132,7 @@ export const OwnerForm = ({ onClose, onSubmit, owner, initialValues }: OwnerForm name="ownerName" placeholder="Owner name*" testId={REPLACE_OWNER_NAME_INPUT_TEST_ID} - text="Owner name*" + label="Owner name*" type="text" validate={composeValidators(required, validAddressBookName)} /> diff --git a/src/routes/safe/components/Settings/SafeDetails/index.tsx b/src/routes/safe/components/Settings/SafeDetails/index.tsx index 1dc2bb65b6..c467d7e39d 100644 --- a/src/routes/safe/components/Settings/SafeDetails/index.tsx +++ b/src/routes/safe/components/Settings/SafeDetails/index.tsx @@ -186,7 +186,7 @@ const SafeDetails = (): ReactElement => { name="safeName" placeholder="Safe name*" testId={SAFE_NAME_INPUT_TEST_ID} - text="Safe name*" + label="Safe name*" type="text" validate={composeValidators(required, validAddressBookName)} /> diff --git a/src/routes/safe/components/Settings/SpendingLimit/FormFields/Amount.tsx b/src/routes/safe/components/Settings/SpendingLimit/FormFields/Amount.tsx index e6cabfa58c..ec9eb042ec 100644 --- a/src/routes/safe/components/Settings/SpendingLimit/FormFields/Amount.tsx +++ b/src/routes/safe/components/Settings/SpendingLimit/FormFields/Amount.tsx @@ -1,4 +1,3 @@ -import { TextField as SRCTextField } from '@gnosis.pm/safe-react-components' import { ReactElement } from 'react' import { useField } from 'react-final-form' import { useSelector } from 'react-redux' @@ -8,9 +7,9 @@ import GnoField from 'src/components/forms/Field' import { composeValidators, minValue, mustBeFloat, required } from 'src/components/forms/validator' import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector' import { useStyles } from 'src/routes/safe/components/Settings/SpendingLimit/style' +import TextField from 'src/components/forms/TextField' export const Field = styled(GnoField)` - margin: 8px 0; width: 100%; ` @@ -18,10 +17,6 @@ const AmountInput = styled.div` grid-area: amountInput; ` -const TextField = styled(SRCTextField)` - margin: 0; -` - const Amount = (): ReactElement => { const classes = useStyles() diff --git a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx index 135527b48b..8c80070c2b 100644 --- a/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx +++ b/src/routes/safe/components/Settings/SpendingLimit/NewLimitModal/Create.tsx @@ -10,10 +10,10 @@ import Hairline from 'src/components/layout/Hairline' import { getStepTitle } from 'src/routes/safe/components/Balances/SendModal/utils' const FormContainer = styled.div` - padding: 24px 8px 24px 24px; + padding: 24px; align-items: center; display: grid; - grid-template-columns: 4fr 1fr; + grid-template-columns: 4fr auto; grid-template-rows: 6fr; gap: 16px 8px; grid-template-areas: diff --git a/src/theme/mui.ts b/src/theme/mui.ts index 1f00f8d276..66be04ab35 100644 --- a/src/theme/mui.ts +++ b/src/theme/mui.ts @@ -267,7 +267,9 @@ const theme = createTheme({ }, MuiSelect: { outlined: { - padding: '0 !important', + padding: '8px 16px', + minHeight: '56px !important', + boxSizing: 'border-box', }, }, MuiFilledInput: { From 635035db714a4438a9087971faca6b1510667074 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Tue, 1 Mar 2022 17:04:41 +0100 Subject: [PATCH 07/10] fix: Linting and extract mui styles to global overrides --- src/components/forms/SelectField/index.tsx | 22 +++++++++++++++++-- .../screens/AddressBookInput/style.ts | 4 ---- src/theme/mui.ts | 16 +++++++++++++- 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/components/forms/SelectField/index.tsx b/src/components/forms/SelectField/index.tsx index e905ccead6..9cd46d4733 100644 --- a/src/components/forms/SelectField/index.tsx +++ b/src/components/forms/SelectField/index.tsx @@ -1,12 +1,30 @@ import FormControl from '@material-ui/core/FormControl' import FormHelperText from '@material-ui/core/FormHelperText' import InputLabel from '@material-ui/core/InputLabel' -import Select from '@material-ui/core/Select' +import Select, { SelectProps } from '@material-ui/core/Select' +import { FieldMetaState } from 'react-final-form' +import { FormControlProps } from '@material-ui/core/FormControl/FormControl' const style = { minWidth: '100%', } +type Props = { + classes: SelectProps['classes'] + label: SelectProps['label'] + renderValue: SelectProps['renderValue'] + disableError: boolean + formControlProps: FormControlProps + input: { + name: string + onChange?: () => void + value: string + placeholder: string + type: string + } + meta: FieldMetaState +} + const SelectInput = ({ classes, disableError, @@ -16,7 +34,7 @@ const SelectInput = ({ meta, renderValue, ...rest -}) => { +}: Props): React.ReactElement => { const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched && !disableError const inputProps = { ...restInput, diff --git a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts index 5356178abb..4a6a8dfd82 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts @@ -10,10 +10,6 @@ export const useTextFieldLabelStyle = makeStyles( export const useTextFieldInputStyle = makeStyles( createStyles({ - root: { - fontSize: '16px', - padding: '0 !important', - }, input: { padding: '16px !important', }, diff --git a/src/theme/mui.ts b/src/theme/mui.ts index db109cde97..875ec0a399 100644 --- a/src/theme/mui.ts +++ b/src/theme/mui.ts @@ -154,7 +154,7 @@ const theme = createTheme({ }, MuiFormControl: { root: { - flex: 1, + width: '100%', }, }, MuiInput: { @@ -228,8 +228,19 @@ const theme = createTheme({ }, }, }, + MuiAutocomplete: { + inputRoot: { + padding: '0 !important', + }, + root: { + input: { + padding: '16px', + }, + }, + }, MuiOutlinedInput: { root: { + padding: 0, borderRadius: xs, color: primary, fontFamily: secondaryFontFamily, @@ -265,6 +276,9 @@ const theme = createTheme({ color: disabled, }, }, + adornedEnd: { + paddingRight: md, + }, }, MuiSelect: { outlined: { From 2ad449be1104ed284c09cdcc0c431d05b6209ce5 Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 2 Mar 2022 11:31:36 +0100 Subject: [PATCH 08/10] fix: Input elements in safe creation and adjust label colors --- .../steps/OwnersAndConfirmationsNewSafeStep.tsx | 9 +++++---- src/theme/mui.ts | 13 +++++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx b/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx index 472b5eca80..d2beb47989 100644 --- a/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx +++ b/src/routes/CreateSafePage/steps/OwnersAndConfirmationsNewSafeStep.tsx @@ -16,7 +16,7 @@ import ButtonHelper from 'src/components/ButtonHelper' import SelectField from 'src/components/forms/SelectField' import { useStepper } from 'src/components/Stepper/stepperContext' import { providerNameSelector } from 'src/logic/wallets/store/selectors' -import { disabled, extraSmallFontSize, lg, sm, xs } from 'src/theme/variables' +import { disabled, extraSmallFontSize, lg, sm, xs, md } from 'src/theme/variables' import Hairline from 'src/components/layout/Hairline' import Row from 'src/components/layout/Row' import Col from 'src/components/layout/Col' @@ -154,7 +154,8 @@ function OwnersAndConfirmationsNewSafeStep(): ReactElement { component={TextField} name={nameFieldName} placeholder={ownerName} - text="Owner Name" + label="Owner Name" + InputLabelProps={{ shrink: true }} type="text" validate={minMaxLength(0, 50)} testId={nameFieldName} @@ -279,8 +280,8 @@ const RowHeader = styled(Row)` ` const OwnerNameField = styled(Field)` - margin-right: ${sm}; - margin-bottom: ${sm}; + margin-right: ${md}; + margin-bottom: ${md}; ` const CheckIconAddressAdornment = styled(CheckCircle)` color: #03ae60; diff --git a/src/theme/mui.ts b/src/theme/mui.ts index 875ec0a399..65ee5f71a0 100644 --- a/src/theme/mui.ts +++ b/src/theme/mui.ts @@ -27,6 +27,7 @@ import { smallFontSize, xs, black300, + black400, } from './variables' const palette = { @@ -222,7 +223,6 @@ const theme = createTheme({ }, MuiInputLabel: { outlined: { - color: primary, '&$error': { color: error, }, @@ -257,7 +257,7 @@ const theme = createTheme({ borderColor: secondary, }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: black300, + borderColor: black400, borderWidth: '1px', }, '&.Mui-error .MuiOutlinedInput-notchedOutline': { @@ -285,6 +285,8 @@ const theme = createTheme({ padding: '8px 16px', minHeight: '56px !important', boxSizing: 'border-box', + display: 'flex', + alignItems: 'center', }, }, MuiFilledInput: { @@ -486,6 +488,13 @@ const theme = createTheme({ }, }, }, + MuiFormLabel: { + root: { + '&$focused': { + color: black400, + }, + }, + }, MuiFormControlLabel: { label: { '&$disabled': { From a2ec3cdc40fbf76ce3dc5b598ca639c2447eb11d Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Wed, 2 Mar 2022 11:34:35 +0100 Subject: [PATCH 09/10] fix: Remove redundant label for custom tx value input --- .../SendModal/screens/ContractInteraction/SendCustomTx/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx index f6721e1e6e..cff32dd9c5 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx @@ -115,7 +115,6 @@ const SendCustomTx = ({ initialValues, isABI, onClose, onNext, switchMethod }: P }} name="value" placeholder="Value*" - label="Value*" type="text" validate={composeValidators(mustBeFloat, maxValue(ethBalance || '0'), minValue(0))} /> From e331aaa76ee34c7750f3ed24d1f473c649130abb Mon Sep 17 00:00:00 2001 From: Usame Algan Date: Thu, 3 Mar 2022 10:43:45 +0100 Subject: [PATCH 10/10] fix: Shrink owner name labels by default on load safe --- src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx | 4 ++-- src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx index 2010cd5a94..56e7856c7d 100644 --- a/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx +++ b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx @@ -15,7 +15,7 @@ import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper' import { isValidAddress } from 'src/utils/isValidAddress' import { isChecksumAddress } from 'src/utils/checksumAddress' import { getSafeInfo } from 'src/logic/safe/utils/safeInformation' -import { lg, secondary } from 'src/theme/variables' +import { lg, secondary, md } from 'src/theme/variables' import { AddressBookEntry, makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook' import { currentNetworkAddressBookAsMap } from 'src/logic/addressBook/store/selectors' import { @@ -256,7 +256,7 @@ const Container = styled(Block)` const FieldContainer = styled(Block)` display: flex; max-width: 480px; - margin-top: 12px; + margin-top: ${md}; ` const CheckIconAddressAdornment = styled(CheckCircle)` diff --git a/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx index acf7e21e18..d89f7bab26 100644 --- a/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx +++ b/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx @@ -53,6 +53,7 @@ function LoadSafeOwnersStep(): ReactElement { name={ownerFieldName} placeholder={ownerName} label="Owner Name" + InputLabelProps={{ shrink: true }} type="text" validate={minMaxLength(0, 50)} testId={`load-safe-owner-name-${index}`} @@ -86,7 +87,7 @@ const HeaderContainer = styled(Row)` const OwnerContainer = styled(Row)` padding: 0 ${lg}; - margin-bottom: 12px; + margin-bottom: ${md}; ` const OwnerAddressContainer = styled(Row)`