dded cancel`

Author: LianaHus

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -100,6 +100,9 @@ const css = csjs`
     transition: .5s ease-out;
     z-index: 1000;
   }
+  .migrationBtn {
+    width: 100px;
+  }
 }
 `
 
@@ -414,23 +417,42 @@ export class LandingPage extends ViewPlugin {
         }, 1000)
       }
     }
+    const onAcceptDownloadn = async () => {
+      await downloadFiles()
+      const el = document.getElementById('modal-dialog')
+      el.parentElement.removeChild(el)
+      migrate()
+    }
+
+    const onDownload = () => {
+      const el = document.getElementById('modal-dialog')
+      el.parentElement.removeChild(el)
+      migrate()
+    }
+
+    const onCancel = () => {
+      const el = document.getElementById('modal-dialog')
+      el.parentElement.removeChild(el)
+    }
 
     const migrateWorkspace = async () => {
       modalDialog(
         'File system Migration',
-        yo`<span>Do you want to download your files to local device first?</span>`,
+        yo`
+          <span>Do you want to download your files to local device first?</span>
+          <div class="d-flex justify-content-around pt-3 mt-3 border-top">
+            <button class="btn btn-sm btn-primary" onclick=${async () => onAcceptDownloadn()}>Download and Migrate</button>
+            <button class="btn btn-sm btn-secondary ${css.migrationBtn}" onclick=${() => onDownload()}>Migrate</button>
+            <button class="btn btn-sm btn-secondary ${css.migrationBtn}" onclick=${() => onCancel()}>Cancel</button>
+          </div>
+        `,
         {
-          label: 'Download and Migrate',
-          fn: async () => {
-            await downloadFiles()
-            migrate()
-          }
+          label: '',
+          fn: null
         },
         {
-          label: 'Migrate',
-          fn: () => {
-            migrate()
-          }
+          label: '',
+          fn: null
         }
       )
     }