Modal window reponsiveness

protofire · Apr 18, 2022 · 374c108 · 374c108
1 parent d168267
commit 374c108
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/components/tx/SignProposedTx/index.tsx b/components/tx/SignProposedTx/index.tsx
@@ -42,13 +42,18 @@ const SignProposedTx = ({
 
   return (
     <div className={css.container}>
-      <Typography variant="h6">Needs your signature</Typography>
+      <Typography variant="h6">Confirm transaction</Typography>
 
-      <p>Transaction id {txSummary.id}</p>
+      <div>
+        Transaction id
+      </div>
+      <pre style={{ overflow: 'auto', width: '100%' }}>
+        {txSummary.id}
+      </pre>
 
       <div className={css.submit}>
         <Button variant="contained" onClick={onSign}>
-          Sign transaction
+          Sign
         </Button>
       </div>
 

diff --git a/components/tx/TxModal/index.tsx b/components/tx/TxModal/index.tsx
@@ -16,6 +16,8 @@ const style = {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 600,
+  maxWidth: '100vw',
+  maxHeight: '90vh',
   bgcolor: 'background.paper',
   boxShadow: 24,
   p: 4,
@@ -59,9 +61,11 @@ type TxModalProps = {
 const TxModal = ({ onClose, txSummary }: TxModalProps) => {
   const steps = txSummary ? signTxSteps : tokenTransferSteps
 
+  const onClick = (e: React.MouseEvent) => e.stopPropagation()
+
   return (
     <Modal open onClose={onClose} aria-labelledby="modal-title" aria-describedby="modal-description">
-      <Box sx={style}>
+      <Box sx={style} onClick={onClick}>
         <TxStepper steps={steps} initialStepData={[txSummary]} />
       </Box>
     </Modal>

diff --git a/components/tx/TxStepper/index.tsx b/components/tx/TxStepper/index.tsx
@@ -25,10 +25,6 @@ const TxStepper = ({ steps, initialStepData }: TxStepperProps): ReactElement =>
     setActiveStep((prevActiveStep) => prevActiveStep - 1)
   }
 
-  const handleReset = () => {
-    setActiveStep(0)
-  }
-
   const onSubmit = (data: unknown) => {
     const allData = [...stepData]
     allData[activeStep + 1] = data
@@ -53,12 +49,7 @@ const TxStepper = ({ steps, initialStepData }: TxStepperProps): ReactElement =>
       {steps[activeStep].render(onSubmit, stepData[activeStep])}
 
       <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-        {activeStep === steps.length - 1 ? (
-          <>
-            <Box sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}>Create another transaction</Button>
-          </>
-        ) : (
+        {activeStep < steps.length - 1 && (
           <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
             Back
           </Button>