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/components/forms/SelectField/index.tsx b/src/components/forms/SelectField/index.tsx index c18f35e2ef..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, @@ -32,6 +50,7 @@ const SelectInput = ({ onChange={onChange} renderValue={renderValue} value={value} + variant="outlined" {...rest} /> {showError && {meta.error || meta.submitError}} diff --git a/src/components/forms/TextField/index.tsx b/src/components/forms/TextField/index.tsx index 6ef67fffca..78b42bb021 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: { @@ -84,15 +78,15 @@ const TextField = (props: Props): React.ReactElement => { return ( ) 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/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/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx b/src/routes/LoadSafePage/steps/LoadSafeAddressStep.tsx index 7c8074a3c4..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 { @@ -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" /> @@ -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 8d6bfd0cba..d89f7bab26 100644 --- a/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx +++ b/src/routes/LoadSafePage/steps/LoadSafeOwnersStep.tsx @@ -52,7 +52,8 @@ function LoadSafeOwnersStep(): ReactElement { initialValue={name} name={ownerFieldName} placeholder={ownerName} - text="Owner Name" + 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)` 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/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..4a6a8dfd82 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts +++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts @@ -4,18 +4,14 @@ export const useTextFieldLabelStyle = makeStyles( createStyles({ root: { overflow: 'hidden', - borderRadius: 4, - fontSize: '15px', - width: '500px', }, }), ) export const useTextFieldInputStyle = makeStyles( createStyles({ - root: { - fontSize: '14px', - width: '420px', + input: { + padding: '16px !important', }, }), ) diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ContractABI/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ContractABI/index.tsx index 65f45b1078..2500dcb585 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ContractABI/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ContractABI/index.tsx @@ -56,7 +56,7 @@ const ContractABI = (): React.ReactElement => { 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/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/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/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx index 485d1d956f..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*" - text="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 0d4781a757..c5a5c3af8c 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' @@ -27,7 +27,7 @@ const SelectedCollectible = ({ tokenId, tokens }: SelectedCollectibleProps): Rea const shortener = textShortener({ charsStart: 40, charsEnd: 0 }) return ( - + {token ? ( <> @@ -40,7 +40,7 @@ const SelectedCollectible = ({ tokenId, tokens }: SelectedCollectibleProps): Rea /> ) : ( - + Select a token* )} @@ -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..f1ed86a54c 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' @@ -28,7 +28,7 @@ const SelectedToken = ({ assetAddress, assets }: SelectedTokenProps): React.Reac const shortener = textShortener({ charsStart: 40, charsEnd: 0 }) return ( - + {asset && asset.numberOfTokens ? ( <> @@ -41,7 +41,7 @@ const SelectedToken = ({ assetAddress, assets }: SelectedTokenProps): React.Reac /> ) : ( - + Select an asset* )} @@ -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 = ({ - + 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 38d9a5d5b5..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 @@ -5,8 +5,8 @@ import { sm } from 'src/theme/variables' export const useSelectedTokenStyles = makeStyles( createStyles({ container: { - minHeight: '55px', - padding: 0, + background: 'none !important', + padding: '0', 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 = ({ )} - + 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 ( <> - + 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/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx index 2a615ac83f..1b380c914e 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: 20px 12px; ` const StyledLink = styled(Link)` margin: 16px 0 0 0; @@ -54,11 +54,13 @@ const StyledLink = styled(Link)` } ` const StyledText = styled(Text)` - margin: 0 0 4px 0; + margin: 0 0 16px 0; ` + const StyledTextMt = styled(Text)` - margin: 16px 0 4px 0; + margin: 16px 0; ` + const useStyles = makeStyles(styles) interface Props { @@ -151,7 +153,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 +164,7 @@ export const EditTxParametersForm = ({ name="safeTxGas" defaultValue={safeTxGas} placeholder="SafeTxGas" - text="SafeTxGas" + label="SafeTxGas" type="number" min="0" component={TextField} @@ -182,7 +184,7 @@ export const EditTxParametersForm = ({ name="ethNonce" defaultValue={ethNonce} placeholder="Nonce" - text="Nonce" + label="Nonce" type="number" component={TextField} disabled={!areEthereumParamsVisible(parametersStatus)} @@ -191,7 +193,7 @@ export const EditTxParametersForm = ({ name="ethGasLimit" defaultValue={ethGasLimit} placeholder="Gas limit" - text="Gas limit" + label="Gas limit" type="number" component={TextField} disabled={!areEthereumParamsVisible(parametersStatus)} @@ -202,7 +204,7 @@ export const EditTxParametersForm = ({ defaultValue={ethGasPrice} type="number" placeholder={gasPriceText} - text={gasPriceText} + label={gasPriceText} component={TextField} disabled={!areEthereumParamsVisible(parametersStatus)} /> @@ -214,7 +216,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)} /> diff --git a/src/theme/mui.ts b/src/theme/mui.ts index db4472ea0d..65ee5f71a0 100644 --- a/src/theme/mui.ts +++ b/src/theme/mui.ts @@ -26,6 +26,8 @@ import { sm, smallFontSize, xs, + black300, + black400, } from './variables' const palette = { @@ -151,17 +153,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 + width: '100%', }, }, MuiInput: { @@ -227,6 +221,74 @@ const theme = createTheme({ marginTop: '0 !important', }, }, + MuiInputLabel: { + outlined: { + '&$error': { + color: error, + }, + }, + }, + MuiAutocomplete: { + inputRoot: { + padding: '0 !important', + }, + root: { + input: { + padding: '16px', + }, + }, + }, + MuiOutlinedInput: { + root: { + padding: 0, + borderRadius: xs, + color: primary, + fontFamily: secondaryFontFamily, + fontSize: largeFontSize, + '&:$disabled': { + color: '#0000ff', + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: black300, + transition: 'borderColor 0.2s ease-in-out 0s', + borderWidth: '1px', + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: secondary, + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: black400, + borderWidth: '1px', + }, + '&.Mui-error .MuiOutlinedInput-notchedOutline': { + borderColor: error, + }, + }, + input: { + color: primary, + display: 'flex', + height: 'auto', + letterSpacing: '0.5px', + padding: md, + lineHeight: '1.5', + textOverflow: 'ellipsis', + '&::-webkit-input-placeholder': { + color: disabled, + }, + }, + adornedEnd: { + paddingRight: md, + }, + }, + MuiSelect: { + outlined: { + padding: '8px 16px', + minHeight: '56px !important', + boxSizing: 'border-box', + display: 'flex', + alignItems: 'center', + }, + }, MuiFilledInput: { underline: { '&::before': { @@ -426,6 +488,13 @@ const theme = createTheme({ }, }, }, + MuiFormLabel: { + root: { + '&$focused': { + color: black400, + }, + }, + }, MuiFormControlLabel: { label: { '&$disabled': {