fix: Close accordion on form submit

safe-global · Oct 26, 2023 · d8775d1 · d8775d1
1 parent 9b77c84
commit d8775d1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/public/images/common/bar-chart.svg b/public/images/common/bar-chart.svg
diff --git a/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx b/src/components/settings/SecurityLogin/SocialSignerExport/ExportMPCAccountModal.tsx
@@ -107,7 +107,14 @@ const ExportMPCAccountModal = ({ onClose, open }: { onClose: () => void; open: b
             )}
             {error && <ErrorMessage className={css.modalError}>{error}</ErrorMessage>}
 
-            <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
+            <Box
+              display="flex"
+              flexDirection="row"
+              justifyContent="space-between"
+              alignItems="center"
+              width="100%"
+              mt={2}
+            >
               <Button variant="outlined" onClick={handleClose}>
                 Close
               </Button>

diff --git a/src/components/settings/SecurityLogin/SocialSignerMFA/index.tsx b/src/components/settings/SecurityLogin/SocialSignerMFA/index.tsx
@@ -83,6 +83,7 @@ const SocialSignerMFA = () => {
   const mpcCoreKit = useMPC()
   const [passwordStrength, setPasswordStrength] = useState<PasswordStrength>()
   const [submitError, setSubmitError] = useState<string>()
+  const [open, setOpen] = useState<boolean>(false)
 
   const formMethods = useForm<PasswordFormData>({
     mode: 'all',
@@ -107,6 +108,8 @@ const SocialSignerMFA = () => {
 
     try {
       await enableMFA(mpcCoreKit, data)
+      onReset()
+      setOpen(false)
     } catch (e) {
       setSubmitError('The password you entered is incorrect. Please try again.')
     }
@@ -118,6 +121,10 @@ const SocialSignerMFA = () => {
     setSubmitError(undefined)
   }
 
+  const toggleAccordion = () => {
+    setOpen((prev) => !prev)
+  }
+
   const confirmPassword = watch(PasswordFieldNames.confirmPassword)
   const newPassword = watch(PasswordFieldNames.newPassword)
   const passwordsEmpty = confirmPassword === '' && newPassword === ''
@@ -137,7 +144,7 @@ const SocialSignerMFA = () => {
             Protect your social login signer with a password. It will be used to restore access in another browser or on
             another device.
           </Typography>
-          <Accordion>
+          <Accordion expanded={open} defaultExpanded={false} onChange={toggleAccordion}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Box display="flex" alignItems="center" gap={1}>
                 <SvgIcon component={CheckIcon} sx={{ color: isPasswordSet ? 'success.main' : 'border.light' }} />

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -70,6 +70,10 @@ input[type='number'] {
   stroke: var(--color-border-main);
 }
 
+.illustration-very-light-stroke {
+  stroke: var(--color-border-light);
+}
+
 .illustration-background-stroke {
   stroke: var(--color-logo-background);
 }