Styling

safe-global · Dec 27, 2024 · e2d6762 · e2d6762
1 parent 16ee499
commit e2d6762
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 65 deletions.
diff --git a/apps/web/src/components/transactions/TxDetails/TxNote.tsx b/apps/web/src/components/transactions/TxDetails/TxNote.tsx
@@ -1,8 +1,7 @@
-import { DataRow } from '@/components/common/Table/DataRow'
 import useAsync from '@/hooks/useAsync'
 import { useCurrentChain } from '@/hooks/useChains'
 import { isMultisigDetailedExecutionInfo } from '@/utils/transaction-guards'
-import { Box, Divider } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 
 const TxNote = ({ txDetails }: { txDetails: TransactionDetails }) => {
@@ -32,11 +31,15 @@ const TxNote = ({ txDetails }: { txDetails: TransactionDetails }) => {
 
   return note ? (
     <>
-      <Box m={2} py={1}>
-        <DataRow title="Proposer note:">{note}</DataRow>
+      <Box my={1} mx={2} py={1}>
+        <Typography variant="h5">Description</Typography>
+
+        <Typography p={2} mt={1} borderRadius={1} bgcolor="background.main">
+          {note}
+        </Typography>
       </Box>
 
-      <Divider sx={{ mb: 2 }} />
+      <Divider />
     </>
   ) : null
 }

diff --git a/apps/web/src/components/transactions/TxDetails/styles.module.css b/apps/web/src/components/transactions/TxDetails/styles.module.css
@@ -12,9 +12,10 @@
 }
 
 .shareLink {
-  position: absolute;
-  right: 16px;
-  top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  margin: var(--space-1);
+  margin-bottom: -40px;
 }
 
 .loading,
@@ -61,7 +62,7 @@
   margin-top: var(--space-2);
 }
 
-.buttons > * {
+.buttons>* {
   flex: 1;
 }
 
@@ -83,4 +84,4 @@
     border-left: 0;
     border-top: 1px solid var(--color-border-light);
   }
-}
+}
diff --git a/apps/web/src/components/transactions/TxSummary/styles.module.css b/apps/web/src/components/transactions/TxSummary/styles.module.css
@@ -29,9 +29,9 @@
 }
 
 .gridContainer.conflictGroup {
-  grid-template-columns: var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(
-      --grid-status
-    ) var(--grid-actions);
+  grid-template-columns:
+    var(--grid-type) var(--grid-info) var(--grid-date) var(--grid-confirmations) var(--grid-status)
+    var(--grid-actions);
   grid-template-areas: 'type info date confirmations status actions';
 }
 

diff --git a/apps/web/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx b/apps/web/src/components/tx/SignOrExecuteForm/SignOrExecuteForm.tsx
@@ -139,6 +139,42 @@ export const SignOrExecuteForm = ({
     [setCustomOrigin, props.origin],
   )
 
+  const getForm = () => {
+    const commonProps = {
+      ...props,
+      safeTx,
+      isCreation,
+      origin: customOrigin,
+      onSubmit: onFormSubmit,
+    }
+    if (isCounterfactualSafe && !isProposing) {
+      return <CounterfactualForm {...commonProps} onlyExecute />
+    }
+
+    if (!isCounterfactualSafe && willExecute && !isProposing) {
+      return <ExecuteForm {...commonProps} />
+    }
+
+    if (!isCounterfactualSafe && willExecuteThroughRole) {
+      return (
+        <ExecuteThroughRoleForm
+          {...commonProps}
+          role={(allowingRole || mostLikelyRole)!}
+          safeTxError={safeTxError}
+          onSubmit={onRoleExecutionSubmit}
+        />
+      )
+    }
+
+    if (!isCounterfactualSafe && !willExecute && !willExecuteThroughRole && !isProposing) {
+      return <SignForm {...commonProps} isBatchable={isBatchable} />
+    }
+
+    if (isProposing) {
+      return <ProposerForm {...commonProps} onSubmit={onProposerFormSubmit} />
+    }
+  }
+
   return (
     <>
       <TxCard>
@@ -196,32 +232,7 @@ export const SignOrExecuteForm = ({
 
         <Blockaid />
 
-        {isCounterfactualSafe && !isProposing && (
-          <CounterfactualForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} onlyExecute />
-        )}
-        {!isCounterfactualSafe && willExecute && !isProposing && (
-          <ExecuteForm {...props} safeTx={safeTx} isCreation={isCreation} onSubmit={onFormSubmit} />
-        )}
-        {!isCounterfactualSafe && willExecuteThroughRole && (
-          <ExecuteThroughRoleForm
-            {...props}
-            safeTx={safeTx}
-            safeTxError={safeTxError}
-            onSubmit={onRoleExecutionSubmit}
-            role={(allowingRole || mostLikelyRole)!}
-          />
-        )}
-        {!isCounterfactualSafe && !willExecute && !willExecuteThroughRole && !isProposing && (
-          <SignForm
-            {...props}
-            safeTx={safeTx}
-            isBatchable={isBatchable}
-            isCreation={isCreation}
-            onSubmit={onFormSubmit}
-          />
-        )}
-
-        {isProposing && <ProposerForm {...props} safeTx={safeTx} onSubmit={onProposerFormSubmit} />}
+        {getForm()}
       </TxCard>
     </>
   )

diff --git a/apps/web/src/components/tx/SignOrExecuteForm/TxNoteForm.tsx b/apps/web/src/components/tx/SignOrExecuteForm/TxNoteForm.tsx
@@ -1,37 +1,57 @@
-import { useState } from 'react'
-import { Button, Stack, TextField, Typography } from '@mui/material'
+import { useCallback, useState } from 'react'
+import { InputAdornment, Stack, TextField, Typography } from '@mui/material'
 import TxCard from '@/components/tx-flow/common/TxCard'
+import InfoIcon from '@/public/images/notifications/info.svg'
+
+const MAX_NOTE_LENGTH = 120
 
 const TxNoteForm = ({ onSubmit }: { onSubmit: (note: string) => void }) => {
   const [note, setNote] = useState('')
 
-  const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    const formData = new FormData(e.currentTarget)
-    const value = formData.get('note') as string
-    if (value) {
-      onSubmit(value)
-      setNote(value)
-    }
-  }
+  const onInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setNote(e.target.value)
+  }, [])
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onSubmit(e.target.value.slice(0, MAX_NOTE_LENGTH))
+    },
+    [onSubmit],
+  )
 
   return (
     <TxCard>
-      <form onSubmit={onFormSubmit}>
-        <Typography variant="h6">Add a note</Typography>
-
-        <TextField name="note" label="Transaction description" fullWidth margin="normal" disabled={!!note} />
-
-        <Stack direction="row" spacing={2} alignItems="center" justifyContent="flex-end" sx={{ mt: 1 }}>
-          <Typography variant="caption" flex={1}>
-            Attention: transaction notes are public
-          </Typography>
-          {note && <Typography variant="body2">Note added</Typography>}
-          <Button variant="outlined" type="submit" disabled={!!note}>
-            Add note
-          </Button>
-        </Stack>
-      </form>
+      <Stack direction="row" alignItems="center" gap={1}>
+        <Typography variant="h5">What does this transaction do?</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Optional
+        </Typography>
+      </Stack>
+
+      <TextField
+        name="note"
+        label="Add description"
+        fullWidth
+        slotProps={{
+          htmlInput: { maxLength: MAX_NOTE_LENGTH },
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">
+                <Typography variant="caption" mt={3}>
+                  {note.length}/{MAX_NOTE_LENGTH}
+                </Typography>
+              </InputAdornment>
+            ),
+          },
+        }}
+        onInput={onInput}
+        onChange={onChange}
+      />
+
+      <Typography variant="caption" color="text.secondary" display="flex" alignItems="center">
+        <InfoIcon height="1.2em" />
+        This description will be publicly visible and accessible to anyone.
+      </Typography>
     </TxCard>
   )
 }