"add second device" dialog improvements

CHANGELOG.md

@@ -4,11 +4,13 @@
 
 ### Changed
 - Update translations (2024-04-04) #3746
+- minor improvements to "add second device" dialog #3748
 - Remove deprecated translations #3756
 
 ### Fixed
 - fix chat audit dialog was going out of viewport on smaller screens #3736
 - fix long names breaking layout of reactions dialog #3736
+- hide "add second device" instructions when transfer has started #3748
 - improve chat scroll performance #3743
 
 <a id="1_44_1"></a>

src/renderer/components/dialogs/SetupMultiDevice/SendBackupDialog.tsx

@@ -159,21 +159,25 @@ export function SendBackupDialog({ onClose }: DialogProps) {
             <DialogContent>
               <SendBackup>
                 <SendBackupMain>
-                  {error}
                   {stage === 'awaiting_scan' && svgUrl && qrContent && (
                     <img className={styles.qrCode} src={svgUrl} />
                   )}
-                  {stage === 'preparing' && <>{tx('preparing_account')}</>}
-                  {stage === 'transferring' && <>{tx('transferring')}</>}
-                  {progress && stage !== 'awaiting_scan' && (
-                    <>
-                      <br />
-                      <progress value={progress} max={1000} />
-                    </>
-                  )}
+                  <SendBackupMainProgress
+                    style={stage === 'transferring' ? { width: '100%' } : {}}
+                  >
+                    {stage === 'preparing' && <>{tx('preparing_account')}</>}
+                    {stage === 'transferring' && <>{tx('transferring')}</>}
+                    {progress && stage !== 'awaiting_scan' && (
+                      <>
+                        <br />
+                        <progress value={progress} max={1000} />
+                      </>
+                    )}
+                  </SendBackupMainProgress>
                 </SendBackupMain>
-                <SendBackupSteps />
+                {stage !== 'transferring' && <SendBackupSteps />}
               </SendBackup>
+              {error}
             </DialogContent>
           </DialogBody>
           <DialogFooter>
@@ -212,6 +216,17 @@ function SendBackupMain({ children }: PropsWithChildren<{}>) {
   return <div className={styles.sendBackupMain}>{children}</div>
 }
 
+function SendBackupMainProgress({
+  children,
+  style,
+}: PropsWithChildren<{ style: React.CSSProperties }>) {
+  return (
+    <div className={styles.sendBackupMainProgress} style={style}>
+      {children}
+    </div>
+  )
+}
+
 function SendBackupSteps() {
   const tx = useTranslationFunction()
 

src/renderer/components/dialogs/SetupMultiDevice/styles.module.scss

@@ -2,11 +2,23 @@
   display: flex;
   flex-wrap: wrap;
   min-width: 300px;
+  justify-content: space-between;
 }
 
 .sendBackupMain {
-  max-width: 339px;
-  min-width: 200px;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.sendBackupMainProgress {
+  display: flex;
+  flex-direction: column;
+
+  progress {
+    width: 100%;
+  }
 }
 
 .sendBackupSteps {