reduce clicks in open dialog

src/dialogs/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HelpIcon, TickCircleIcon, WarningSignIcon, InfoSignIcon, Checkbox } from 'evergreen-ui';
+import { ArrowRightIcon, HelpIcon, TickCircleIcon, WarningSignIcon, InfoSignIcon, Checkbox } from 'evergreen-ui';
 import i18n from 'i18next';
 import { Trans } from 'react-i18next';
 import withReactContent from 'sweetalert2-react-content';
@@ -97,17 +97,36 @@ export async function askForFfPath(defaultPath) {
 }
 
 export async function askForFileOpenAction(inputOptions) {
-  const { value } = await Swal.fire({
+  let value;
-    text: i18n.t('You opened a new file. What do you want to do?'),
+  function onClick(key) {
-    icon: 'question',
+    value = key;
-    input: 'radio',
+    Swal.close();
-    inputValue: 'open',
+  }
-    showCancelButton: true,
+
-    customClass: { input: 'swal2-losslesscut-radio' },
+  const swal = ReactSwal.fire({
-    inputOptions,
+    html: (
-    inputValidator: (v) => !v && i18n.t('You need to choose something!'),
+      <div style={{ textAlign: 'left' }}>
+        <div style={{ marginBottom: '1em' }}>{i18n.t('You opened a new file. What do you want to do?')}</div>
+
+        {Object.entries(inputOptions).map(([key, text]) => (
+          <button type="button" key={key} onClick={() => onClick(key)} className="button-unstyled" style={{ display: 'block', marginBottom: '.5em' }}>
+            <ArrowRightIcon color="rgba(0,0,0,0.5)" verticalAlign="middle" /> {text}
+          </button>
+        ))}
+
+        <button type="button" onClick={() => onClick()} className="button-unstyled" style={{ display: 'block', marginTop: '.5em' }}>
+          <ArrowRightIcon color="rgba(150,0,0,1)" /> {i18n.t('Cancel')}
+        </button>
+
+      </div>
+    ),
+    showCancelButton: false,
+    showConfirmButton: false,
+    showCloseButton: false,
   });
 
+  await swal;
+
   return value;
 }
 

src/main.css

@@ -75,3 +75,11 @@ code.highlighted {
 .segment-list-entry:hover .enabled {
   display: inherit;
 }
+
+.button-unstyled {
+  all: unset;
+  cursor: pointer;
+}
+.button-unstyled:focus {
+  outline: revert;
+}