style: Outlined input migration

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={{

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<any>
+}
+
 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 && <FormHelperText>{meta.error || meta.submitError}</FormHelperText>}

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 (
     <MuiTextField
       error={hasError && showError}
-      helperText={hasError && showError ? errorMessage : helperText || ' '}
+      helperText={hasError && showError ? errorMessage : helperText || ''}
       inputProps={inputProps} // blank in order to force to have helper text
       InputProps={inputRootProps}
       multiline={multiline}
       name={name}
       onChange={onChange}
       rows={rows}
-      style={overflowStyle}
       value={value}
+      variant="outlined"
       {...rest}
     />
   )

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"
           />

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;

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)`

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)`

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)}
                       />

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 }}

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',
     },
   }),
 )

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ContractABI/index.tsx

@@ -56,7 +56,7 @@ const ContractABI = (): React.ReactElement => {
   return (
     <Row margin="sm">
       <Col>
-        <TextAreaField name="abi" placeholder="ABI*" text="ABI*" type="text" validate={hasUsefulMethods} />
+        <TextAreaField name="abi" placeholder="ABI*" label="ABI*" type="text" validate={hasUsefulMethods} />
       </Col>
     </Row>
   )

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}
             />

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 (
-    <Row margin="sm">
+    <Row margin="md">
       <Col>
         <MuiThemeProvider theme={DropdownListTheme}>
           <>
-            <button className={classes.button} onClick={handleClick} type="button">
+            <Button className={buttonClasses.button} onClick={handleClick} variant="outlined">
               <StyledText
-                size="md"
+                size="xl"
                 color="placeHolder"
-                className={classNames(classes.buttonInner, anchorEl && classes.openMenuButton)}
+                className={classNames(buttonClasses.buttonInner, anchorEl && buttonClasses.openMenuButton)}
               >
                 {(selectedMethod as Record<string, string>).name || 'Method'}
               </StyledText>
-            </button>
+            </Button>
             <Menu
               anchorEl={anchorEl}
               anchorOrigin={{

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/style.ts

@@ -0,0 +1,50 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const buttonWidth = '140px'
+export const useButtonStyles = makeStyles({
+  button: {
+    borderRadius: '4px',
+    boxSizing: 'border-box',
+    color: '#5d6d74',
+    cursor: 'pointer',
+    fontSize: '16px',
+    fontWeight: 'normal',
+    lineHeight: '1.5',
+    marginRight: '20px',
+    minWidth: (props: any) => (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',
+    },
+  },
+})

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))}
           />

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 => (
-  <TextAreaField name={name} placeholder={typePlaceholder(text, type)} text={text} type="text" validate={validator} />
+  <TextAreaField name={name} placeholder={typePlaceholder(text, type)} label={text} type="text" validate={validator} />
 )
 
 export default ArrayTypeInput

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}
             />

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 (
-          <Row key={key} margin="sm">
+          <Row key={key} margin="md">
             <InputComponent type={type} keyValue={key} placeholder={placeholder} />
           </Row>
         )

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))}
                     />