(feature) Wording and styles improvements in modals (#1974)

* add external icon in safe version (settings)

* change wording in receive modal

* fix Modal titles and color on back/cancel button

* move toggle to the left
(contract interaction modal)

* add title "Method" for drop down

* review lettercase in titles and buttons

* add contract address label in contract interaction

* fix label for input "Contract address"

* fix label when use custom data (Contract address)

* fix external link component on Safe version

* change Label "Recipient" to "Contract address"

src/components/App/ReceiveModal.tsx

@@ -94,7 +94,7 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props): ReactElement =
     <>
       <Row align="center" className={classes.heading} grow>
         <Paragraph noMargin size="xl" weight="bolder">
-          Receive funds
+          Receive assets
         </Paragraph>
         <IconButton disableRipple onClick={onClose}>
           <Close className={classes.close} />
@@ -106,7 +106,7 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props): ReactElement =
       </Paragraph>
       <Paragraph className={classes.annotation} noMargin size="lg">
         This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send{' '}
-        {networkInfo.nativeCoin.name} and ERC-20 tokens to this address!
+        {networkInfo.nativeCoin.name} and assets to this address (e.g. ETH, ERC20, ERC721)!
       </Paragraph>
       <Col layout="column" middle="xs">
         <Paragraph className={classes.safeName} noMargin size="lg" weight="bold">

src/components/AppLayout/Sidebar/SafeHeader/index.tsx

@@ -171,7 +171,7 @@ const SafeHeader = ({
         <StyledButton size="md" disabled={!granted} color="primary" variant="contained" onClick={onNewTransactionClick}>
           <FixedIcon type="arrowSentWhite" />
           <Text size="lg" color="white">
-            New Transaction
+            New transaction
           </Text>
         </StyledButton>
       </Container>

src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx

@@ -116,7 +116,7 @@ const ChooseTxType = ({ onClose, recipientAddress, setActiveScreen }: ChooseTxTy
                 className={classNames(classes.leftIcon, classes.iconSmall)}
                 src={ContractInteractionIcon}
               />
-              Contract Interaction
+              Contract interaction
             </Button>
           )}
         </Col>

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

@@ -30,7 +30,7 @@ const Buttons = ({ onClose }: ButtonProps) => {
 
   return (
     <Row align="center" className={classes.buttonRow}>
-      <Button minWidth={140} onClick={onClose}>
+      <Button minWidth={140} onClick={onClose} color="secondary">
         Cancel
       </Button>
       <Button

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

@@ -88,6 +88,7 @@ export const EthAddressInput = ({
               setIsValidAddress={() => {}}
               fieldMutator={onScannedValue}
               pristine={pristine}
+              label="Contract address"
             />
           )}
         </Col>

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

@@ -17,9 +17,15 @@ import CheckIcon from 'src/routes/safe/components/CurrencyDropdown/img/check.svg
 import { useDropdownStyles } from 'src/routes/safe/components/CurrencyDropdown/style'
 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'
 
 const MENU_WIDTH = '452px'
 
+const StyledText = styled(Text)`
+  padding: 4px 0 0 8px;
+`
+
 interface MethodsDropdownProps {
   onChange: (method: AbiItem) => void
 }
@@ -78,9 +84,13 @@ export const MethodsDropdown = ({ onChange }: MethodsDropdownProps): ReactElemen
         <MuiThemeProvider theme={DropdownListTheme}>
           <>
             <button className={classes.button} onClick={handleClick} type="button">
-              <span className={classNames(classes.buttonInner, anchorEl && classes.openMenuButton)}>
+              <StyledText
-                {(selectedMethod as Record<string, string>).name}
+                size="md"
-              </span>
+                color="placeHolder"
+                className={classNames(classes.buttonInner, anchorEl && classes.openMenuButton)}
+              >
+                {(selectedMethod as Record<string, string>).name || 'Method'}
+              </StyledText>
             </button>
             <Menu
               anchorEl={anchorEl}

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

@@ -133,7 +133,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
     >
       {(txParameters, toggleEditMode) => (
         <>
-          <Header onClose={onClose} subTitle="2 of 2" title="Contract Interaction" />
+          <Header onClose={onClose} subTitle="2 of 2" title="Contract interaction" />
           <Hairline />
           <Block className={classes.formContainer}>
             <Row margin="xs">
@@ -223,7 +223,7 @@ const ContractInteractionReview = ({ onClose, onPrev, tx }: Props): React.ReactE
           </div>
 
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} onClick={onPrev}>
+            <Button minWidth={140} onClick={onPrev} color="secondary">
               Back
             </Button>
             <Button

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

@@ -99,7 +99,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
         <>
           <Row align="center" className={classes.heading} grow>
             <Paragraph className={classes.headingText} noMargin weight="bolder">
-              Send Custom Tx
+              Contract interaction
             </Paragraph>
             <Paragraph className={classes.annotation}>2 of 2</Paragraph>
             <IconButton disableRipple onClick={onClose}>
@@ -182,7 +182,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
             </Block>
           )}
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} onClick={onPrev}>
+            <Button minWidth={140} onClick={onPrev} color="secondary">
               Back
             </Button>
             <Button

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

@@ -100,7 +100,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
     <>
       <Row align="center" className={classes.heading} grow>
         <Paragraph className={classes.manage} noMargin weight="bolder">
-          Send custom transactions
+          Contract interaction
         </Paragraph>
         <Paragraph className={classes.annotation}>1 of 2</Paragraph>
         <IconButton disableRipple onClick={onClose}>
@@ -161,7 +161,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
                   >
                     <Row margin="xs">
                       <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
-                        Recipient
+                        Contract address
                       </Paragraph>
                     </Row>
                     <Row align="center" margin="md">
@@ -203,6 +203,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
                           pristine={pristine}
                           setIsValidAddress={setIsValidAddress}
                           setSelectedEntry={setSelectedEntry}
+                          label="Contract address"
                         />
                       </Col>
                       <Col center="xs" className={classes} middle="xs" xs={1}>
@@ -255,14 +256,14 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
                     />
                   </Col>
                 </Row>
-                <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                <Paragraph color="disabled" noMargin size="lg" style={{ letterSpacing: '-0.5px' }}>
-                  Use custom data (hex encoded)
                   <Switch onChange={() => saveForm(args[2].values)} checked={!isABI} />
+                  Use custom data (hex encoded)
                 </Paragraph>
               </Block>
               <Hairline />
               <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} onClick={onClose}>
+                <Button minWidth={140} onClick={onClose} color="secondary">
                   Cancel
                 </Button>
                 <Button

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

@@ -93,7 +93,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
 
   return (
     <>
-      <Header onClose={onClose} subTitle="1 of 2" title="Contract Interaction" />
+      <Header onClose={onClose} subTitle="1 of 2" title="Contract interaction" />
       <Hairline />
       <GnoForm
         decorators={[ensResolver]}
@@ -112,7 +112,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
                 <EthAddressInput
                   name="contractAddress"
                   onScannedValue={mutators.setContractAddress}
-                  text="Contract Address*"
+                  text="Contract address*"
                 />
                 <ContractABI />
                 <MethodsDropdown onChange={mutators.setSelectedMethod} />
@@ -120,9 +120,9 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
                 <RenderInputParams />
                 <RenderOutputParams />
                 <FormErrorMessage />
-                <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
+                <Paragraph color="disabled" noMargin size="lg" style={{ letterSpacing: '-0.5px' }}>
-                  Use custom data (hex encoded)
                   <Switch checked={!isABI} onChange={() => saveForm(rest.values)} />
+                  Use custom data (hex encoded)
                 </Paragraph>
               </Block>
               <Hairline />

src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx

@@ -149,7 +149,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
         <>
           <Row align="center" className={classes.heading} grow>
             <Paragraph className={classes.headingText} noMargin weight="bolder">
-              Send Collectible
+              Send collectible
             </Paragraph>
             <Paragraph className={classes.annotation}>2 of 2</Paragraph>
             <IconButton disableRipple onClick={onClose}>
@@ -218,7 +218,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
             />
           </div>
           <Row align="center" className={classes.buttonRow}>
-            <Button minWidth={140} onClick={onPrev}>
+            <Button minWidth={140} onClick={onPrev} color="secondary">
               Back
             </Button>
             <Button

src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx

@@ -188,7 +188,7 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
           {/* Header */}
           <Row align="center" className={classes.heading} grow data-testid="send-funds-review-step">
             <Paragraph className={classes.headingText} noMargin weight="bolder">
-              Send Funds
+              Send funds
             </Paragraph>
             <Paragraph className={classes.annotation}>2 of 2</Paragraph>
             <IconButton disableRipple onClick={onClose}>

src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx

@@ -120,7 +120,7 @@ const SendCollectible = ({
     <>
       <Row align="center" className={classes.heading} grow>
         <Paragraph className={classes.manage} noMargin weight="bolder">
-          Send Collectible
+          Send collectible
         </Paragraph>
         <Paragraph className={classes.annotation}>1 of 2</Paragraph>
         <IconButton disableRipple onClick={onClose}>
@@ -267,7 +267,7 @@ const SendCollectible = ({
               </Block>
               <Hairline />
               <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} onClick={onClose}>
+                <Button minWidth={140} onClick={onClose} color="secondary">
                   Cancel
                 </Button>
                 <Button

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx

@@ -160,7 +160,7 @@ const SendFunds = ({
     <>
       <Row align="center" className={classes.heading} grow data-testid="modal-title-send-funds">
         <Paragraph className={classes.manage} noMargin weight="bolder">
-          Send Funds
+          Send funds
         </Paragraph>
         <Paragraph className={classes.annotation}>1 of 2</Paragraph>
         <IconButton disableRipple onClick={onClose}>
@@ -322,7 +322,7 @@ const SendFunds = ({
               </Block>
               <Hairline />
               <Row align="center" className={classes.buttonRow}>
-                <Button minWidth={140} onClick={onClose}>
+                <Button minWidth={140} onClick={onClose} color="secondary">
                   Cancel
                 </Button>
                 <Button

src/routes/safe/components/Settings/SafeDetails/index.tsx

@@ -22,7 +22,9 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { UpdateSafeModal } from 'src/routes/safe/components/Settings/UpdateSafeModal'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import updateSafe from 'src/logic/safe/store/actions/updateSafe'
-import Link from 'src/components/layout/Link'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+
 import {
   latestMasterContractVersionSelector,
   safeCurrentVersionSelector,
@@ -40,6 +42,15 @@ export const SAFE_NAME_UPDATE_SAFE_BTN_TEST_ID = 'update-safe-name-btn'
 
 const useStyles = makeStyles(styles)
 
+const StyledLink = styled(Link)`
+  margin: 12px 0 0 0;
+`
+const StyledIcon = styled(Icon)`
+  position: relative;
+  top: 3px;
+  left: 6px;
+`
+
 const SafeDetails = (): React.ReactElement => {
   const classes = useStyles()
   const isUserOwner = useSelector(grantedSelector)
@@ -111,12 +122,13 @@ const SafeDetails = (): React.ReactElement => {
           <Block className={classes.formContainer}>
             <Heading tag="h2">Safe Version</Heading>
             <Row align="end" grow>
-              <Paragraph className={classes.versionNumber}>
+              <StyledLink rel="noreferrer noopener" target="_blank" href={safeInfo?.deployerRepoUrl}>
-                <Link className={classes.link} color="black" target="_blank" to={safeInfo?.deployerRepoUrl}>
+                <Text size="xl" as="span" color="primary">
                   {getSafeVersion()}
                   {getSafeVersionUpdate()}
-                </Link>
+                </Text>
-              </Paragraph>
+                <StyledIcon size="sm" type="externalLink" color="primary" />
+              </StyledLink>
             </Row>
             {safeNeedsUpdate && isUserOwner ? (
               <Row align="end" grow>
@@ -137,9 +149,9 @@ const SafeDetails = (): React.ReactElement => {
           </Block>
           <Block className={classes.formContainer}>
             <Heading tag="h2">Modify Safe name</Heading>
-            <Paragraph>
+            <Paragraph size="lg">
-              You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or any
+              You can change the name of this Safe. This name is only stored locally <br />
-              third parties.
+              and never shared with Gnosis or any third parties.
             </Paragraph>
             <Block className={classes.root}>
               <Field

src/routes/safe/components/Settings/SafeDetails/style.ts

@@ -1,5 +1,5 @@
 import { createStyles } from '@material-ui/core/styles'
-import { boldFont, border, lg, sm, connected } from 'src/theme/variables'
+import { boldFont, border, lg, sm } from 'src/theme/variables'
 
 export const styles = createStyles({
   formContainer: {
@@ -21,14 +21,4 @@ export const styles = createStyles({
     position: 'absolute',
     width: '100%',
   },
-  versionNumber: {
-    height: '21px',
-  },
-  link: {
-    color: `${connected}`,
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
 })