(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"
2021-03-09 05:56:09 -03:00 · 2021-03-09 05:56:09 -03:00 · 69f0e346a0
parent b733cb1c85
commit 69f0e346a0
16 changed files with 61 additions and 47 deletions
--- a/src/components/App/ReceiveModal.tsx
+++ b/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">
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/ChooseTxType/index.tsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Buttons/index.tsx
+++ b/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
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx
+++ b/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>
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/MethodsDropdown/index.tsx
+++ b/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)}>
-                {(selectedMethod as Record<string, string>).name}
-              </span>
+              <StyledText
+                size="md"
+                color="placeHolder"
+                className={classNames(classes.buttonInner, anchorEl && classes.openMenuButton)}
+              >
+                {(selectedMethod as Record<string, string>).name || 'Method'}
+              </StyledText>
            </button>
            <Menu
              anchorEl={anchorEl}
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/Review/index.tsx
+++ b/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
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/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
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/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' }}>
-                  Use custom data (hex encoded)
+                <Paragraph color="disabled" noMargin size="lg" style={{ letterSpacing: '-0.5px' }}>
                  <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
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/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' }}>
-                  Use custom data (hex encoded)
+                <Paragraph color="disabled" noMargin size="lg" style={{ letterSpacing: '-0.5px' }}>
                  <Switch checked={!isABI} onChange={() => saveForm(rest.values)} />
+                  Use custom data (hex encoded)
                </Paragraph>
              </Block>
              <Hairline />
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/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
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
+++ b/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}>
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
+++ b/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
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/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
--- a/src/routes/safe/components/Settings/SafeDetails/index.tsx
+++ b/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}>
-                <Link className={classes.link} color="black" target="_blank" to={safeInfo?.deployerRepoUrl}>
+              <StyledLink rel="noreferrer noopener" target="_blank" href={safeInfo?.deployerRepoUrl}>
+                <Text size="xl" as="span" color="primary">
                  {getSafeVersion()}
                  {getSafeVersionUpdate()}
-                </Link>
-              </Paragraph>
+                </Text>
+                <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>
-              You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or any
-              third parties.
+            <Paragraph size="lg">
+              You can change the name of this Safe. This name is only stored locally <br />
+              and never shared with Gnosis or any third parties.
            </Paragraph>
            <Block className={classes.root}>
              <Field
--- a/src/routes/safe/components/Settings/SafeDetails/style.ts
+++ b/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',
-    },
-  },
 })