From 154630e0c8ac41da9f9417c316461f9cd75bec17 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Mon, 10 Jul 2023 13:43:15 +0200
Subject: [PATCH] Small UI adjustments

---
 src/components/common/AddressInput/index.tsx  |  2 +-
 .../flows/RemoveOwner/ReviewRemoveOwner.tsx   |  2 +-
 .../tx-flow/flows/SignMessage/SignMessage.tsx |  8 ++--
 .../flows/TokenTransfer/SendAmountBlock.tsx   |  6 +--
 .../flows/TokenTransfer/SendToBlock.tsx       |  4 +-
 .../tx-flow/flows/UpdateSafe/index.tsx        |  3 +-
 src/components/tx/DecodedTx/index.tsx         |  2 +-
 .../tx/SignOrExecuteForm/styles.module.css    |  3 +-
 .../tx/modals/ExecuteTxModal/index.tsx        | 20 ----------
 .../tx/modals/RejectTxModal/RejectTx.tsx      | 37 -------------------
 .../tx/modals/RejectTxModal/index.tsx         | 19 ----------
 .../tx/security/redefine/styles.module.css    |  1 +
 12 files changed, 16 insertions(+), 91 deletions(-)
 delete mode 100644 src/components/tx/modals/ExecuteTxModal/index.tsx
 delete mode 100644 src/components/tx/modals/RejectTxModal/RejectTx.tsx
 delete mode 100644 src/components/tx/modals/RejectTxModal/index.tsx

diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
index f993f50dfa..82ba6d2d2b 100644
--- a/src/components/common/AddressInput/index.tsx
+++ b/src/components/common/AddressInput/index.tsx
@@ -128,7 +128,7 @@ const AddressInput = ({
 
           // Display the current short name in the adornment, unless the value contains the same prefix
           startAdornment: (
-            <InputAdornment position="end">
+            <InputAdornment position="end" sx={{ ml: 0 }}>
               <Skeleton variant="circular" width={32} height={32} animation={false} sx={{ marginRight: '0.5em' }} />
               {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
             </InputAdornment>
diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
index f2429db92f..3c59f4b35c 100644
--- a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
@@ -17,7 +17,7 @@ import commonCss from '@/components/tx-flow/common/styles.module.css'
 export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }): ReactElement => {
   const addressBook = useAddressBook()
   const { setSafeTx, setSafeTxError } = useContext(SafeTxContext)
-  const { safe, safeAddress } = useSafeInfo()
+  const { safe } = useSafeInfo()
   const { removedOwner, threshold } = params
 
   useEffect(() => {
diff --git a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
index 4df39d5b2a..9e9f7b788b 100644
--- a/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
+++ b/src/components/tx-flow/flows/SignMessage/SignMessage.tsx
@@ -200,11 +200,9 @@ const SignMessage = ({ message, safeAppId, requestId }: ProposeProps | ConfirmPr
 
       <TxCard>
         <CardActions>
-          <Box display="flex" justifyContent="space-between" width="100%">
-            <Button variant="contained" color="primary" onClick={onSign} disabled={isDisabled}>
-              Sign
-            </Button>
-          </Box>
+          <Button variant="contained" color="primary" onClick={onSign} disabled={isDisabled}>
+            Sign
+          </Button>
         </CardActions>
       </TxCard>
     </>
diff --git a/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx b/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
index 1304186795..204956eaec 100644
--- a/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx
@@ -16,7 +16,7 @@ export const AmountBlock = ({
   children?: ReactNode
 }) => {
   return (
-    <Grid item className={css.token}>
+    <Grid item md={10} className={css.token}>
       <TokenIcon logoUri={tokenInfo.logoUri} tokenSymbol={tokenInfo.symbol} />
       <Typography fontWeight="bold">{tokenInfo.symbol}</Typography>
       {children}
@@ -41,8 +41,8 @@ const SendAmountBlock = ({
   title?: string
 }) => {
   return (
-    <Grid container gap={1} alignItems="center">
-      <Grid item xs={4} md={2}>
+    <Grid container alignItems="center" sx={{ gap: 1 }}>
+      <Grid item md>
         <Typography variant="body2" color="text.secondary">
           {title}
         </Typography>
diff --git a/src/components/tx-flow/flows/TokenTransfer/SendToBlock.tsx b/src/components/tx-flow/flows/TokenTransfer/SendToBlock.tsx
index ef53ecd127..8ae39346cd 100644
--- a/src/components/tx-flow/flows/TokenTransfer/SendToBlock.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/SendToBlock.tsx
@@ -3,13 +3,13 @@ import EthHashInfo from '@/components/common/EthHashInfo'
 
 const SendToBlock = ({ address, title = 'To' }: { address: string; title?: string }) => {
   return (
-    <Grid container gap={1} alignItems="center">
+    <Grid container alignItems="center" sx={{ gap: 1 }}>
       <Grid item md>
         <Typography variant="body2" color="text.secondary" noWrap>
           {title}
         </Typography>
       </Grid>
-      <Grid item xs={8} md={10}>
+      <Grid item md={10}>
         <Typography variant="body2" component="div">
           <EthHashInfo address={address} shortAddress={false} hasExplorer showCopyButton />
         </Typography>
diff --git a/src/components/tx-flow/flows/UpdateSafe/index.tsx b/src/components/tx-flow/flows/UpdateSafe/index.tsx
index ed382103f8..082272d015 100644
--- a/src/components/tx-flow/flows/UpdateSafe/index.tsx
+++ b/src/components/tx-flow/flows/UpdateSafe/index.tsx
@@ -1,9 +1,10 @@
 import TxLayout from '@/components/tx-flow/common/TxLayout'
 import { UpdateSafeReview } from './UpdateSafeReview'
+import SettingsIcon from '@/public/images/sidebar/settings.svg'
 
 const UpdateSafeFlow = () => {
   return (
-    <TxLayout title="Update Safe Account version">
+    <TxLayout title="Confirm transaction" subtitle="Update Safe Account version" icon={SettingsIcon}>
       <UpdateSafeReview />
     </TxLayout>
   )
diff --git a/src/components/tx/DecodedTx/index.tsx b/src/components/tx/DecodedTx/index.tsx
index b47e6322c6..11bc8f50aa 100644
--- a/src/components/tx/DecodedTx/index.tsx
+++ b/src/components/tx/DecodedTx/index.tsx
@@ -68,7 +68,7 @@ const DecodedTx = ({ tx, txId }: DecodedTxProps): ReactElement | null => {
     trackEvent({ ...MODALS_EVENTS.TX_DETAILS, label: expanded ? 'Open' : 'Close' })
   }
 
-  if (isRejection) return null
+  if (isRejection || !tx) return null
 
   return (
     <div>
diff --git a/src/components/tx/SignOrExecuteForm/styles.module.css b/src/components/tx/SignOrExecuteForm/styles.module.css
index 6cba048d08..0e07207069 100644
--- a/src/components/tx/SignOrExecuteForm/styles.module.css
+++ b/src/components/tx/SignOrExecuteForm/styles.module.css
@@ -46,7 +46,8 @@
   margin-top: var(--space-2) !important;
 }
 
-.mobileTxCheckMessages {
+.mobileTxCheckMessages,
+.mobileTxCheckMessages:empty {
   display: none;
 }
 
diff --git a/src/components/tx/modals/ExecuteTxModal/index.tsx b/src/components/tx/modals/ExecuteTxModal/index.tsx
deleted file mode 100644
index 64a8438cc3..0000000000
--- a/src/components/tx/modals/ExecuteTxModal/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-
-import type { TxModalProps } from '@/components/tx/TxModal'
-import TxModal from '@/components/tx/TxModal'
-import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
-import type { TxStepperProps } from '@/components/tx/TxStepper/useTxStepper'
-import ConfirmProposedTx from '@/components/tx-flow/flows/ConfirmTx/ConfirmProposedTx'
-
-export const ExecuteTxSteps: TxStepperProps['steps'] = [
-  {
-    label: 'Execute transaction',
-    render: (data) => <ConfirmProposedTx txSummary={data as TransactionSummary} />,
-  },
-]
-
-const ExecuteTxModal = (props: Omit<TxModalProps, 'steps'>) => {
-  return <TxModal {...props} steps={ExecuteTxSteps} />
-}
-
-export default ExecuteTxModal
diff --git a/src/components/tx/modals/RejectTxModal/RejectTx.tsx b/src/components/tx/modals/RejectTxModal/RejectTx.tsx
deleted file mode 100644
index da0b8b6f5c..0000000000
--- a/src/components/tx/modals/RejectTxModal/RejectTx.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { ReactElement } from 'react'
-import { Typography } from '@mui/material'
-import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
-
-import useAsync from '@/hooks/useAsync'
-import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
-import { createRejectTx } from '@/services/tx/tx-sender'
-
-type RejectTxProps = {
-  txNonce: number
-  onSubmit: () => void
-}
-
-const RejectTx = ({ txNonce, onSubmit }: RejectTxProps): ReactElement => {
-  const [rejectTx, rejectError] = useAsync<SafeTransaction>(() => {
-    return createRejectTx(txNonce)
-  }, [txNonce])
-
-  // TODO: Need to use the SafeTxProvider here
-  return (
-    <SignOrExecuteForm isRejection onSubmit={onSubmit}>
-      <Typography mb={2}>
-        To reject the transaction, a separate rejection transaction will be created to replace the original one.
-      </Typography>
-
-      <Typography mb={2}>
-        Transaction nonce: <b>{txNonce}</b>
-      </Typography>
-
-      <Typography mb={2}>
-        You will need to confirm the rejection transaction with your currently connected wallet.
-      </Typography>
-    </SignOrExecuteForm>
-  )
-}
-
-export default RejectTx
diff --git a/src/components/tx/modals/RejectTxModal/index.tsx b/src/components/tx/modals/RejectTxModal/index.tsx
deleted file mode 100644
index 48b01ba826..0000000000
--- a/src/components/tx/modals/RejectTxModal/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-
-import type { TxStepperProps } from '@/components/tx/TxStepper/useTxStepper'
-import type { TxModalProps } from '@/components/tx/TxModal'
-import TxModal from '@/components/tx/TxModal'
-import RejectTx from '@/components/tx/modals/RejectTxModal/RejectTx'
-
-export const RejectTxSteps: TxStepperProps['steps'] = [
-  {
-    label: 'Reject transaction',
-    render: (data, onSubmit) => <RejectTx txNonce={data as number} onSubmit={onSubmit} />,
-  },
-]
-
-const RejectTxModal = (props: Omit<TxModalProps, 'steps'>) => {
-  return <TxModal {...props} steps={RejectTxSteps} />
-}
-
-export default RejectTxModal
diff --git a/src/components/tx/security/redefine/styles.module.css b/src/components/tx/security/redefine/styles.module.css
index ac5e3fbcdb..2edcc9f66f 100644
--- a/src/components/tx/security/redefine/styles.module.css
+++ b/src/components/tx/security/redefine/styles.module.css
@@ -40,6 +40,7 @@
 .balanceChange {
   display: flex;
   margin-bottom: 6px;
+  align-items: center;
 }
 
 .balanceChange:last-child {