feat: add email compose option and refine layout

src/pages/Error.jsx

@@ -1,46 +1,63 @@
+import { Chrome } from '../components/PageElements';
+
 export default function Error({ error, children }) {
   return (
-    <article className="">
-      <div className="p-10">
-        <h2 className="my-0 text-indigo-600">This is a little embarrassing...</h2>
-        <p className="mt-10">
-          There was an error in the application that caused it to crash. Here are some technical details.{' '}
-          <span role="img" aria-label="nerd emoji">
-            🤓
-          </span>
+    <article>
+      <Chrome>
+        <h2 className="text-indigo-600">This is a little embarrassing...</h2>
+        <p>
+          We are really sorry. There was an error in the application that caused it to crash. The best way to make this
+          not happen again for you or anyone else is to report the issue to us. It should only take a few moments.
         </p>
-        {error && error.message ? (
-          <>
-            <label htmlFor="message">Error message:</label>
-            <pre id="message" className="overflow-auto text-base text-gray-400">{`${error.message}`}</pre>
-          </>
-        ) : null}
-        {error && error.stack ? (
-          <>
-            <label htmlFor="stack">Stack trace:</label>
-            <pre id="stack" className="overflow-auto text-base text-gray-400">{`${error.stack}`}</pre>
-          </>
-        ) : null}
-        {error && !error.message && !error.stack ? (
-          <pre className="overflow-auto text-base text-gray-400">{error.toString()}</pre>
-        ) : null}
-        <div className="flex justify-between">
-          {window.ugrc ? (
+        <h2 className="mb-8 text-center">Report by</h2>
+        <section className="grid grid-cols-2 gap-4 mb-8 text-center">
+          <div className="px-3 py-2 border rounded">
+            <h3 className="mt-0">GitHub account</h3>
+            <button type="button" onClick={() => window.ugrc.openIssue({ message: error.message, stack: error.stack })}>
+              Let&apos;s go
+            </button>
+          </div>
+          <div className="px-3 py-2 border rounded">
+            <h3 className="mt-0">Email</h3>
+            <button type="button" onClick={() => window.ugrc.openEmail({ message: error.message, stack: error.stack })}>
+              Compose
+            </button>
+          </div>
+        </section>
+        <h2 className="mb-8 text-center text-indigo-600">Thank you so much!</h2>
+        {children || (
+          <p>
+            You may now{' '}
+            <button className="font-bold text-yellow-500 hover:text-yellow-300" onClick={window.ugrc.relaunchApp}>
+              restart the application
+            </button>{' '}
+            and try geocoding again.
+          </p>
+        )}
+        <details className="mt-6">
+          <summary>
+            <span role="img" aria-label="nerd emoji">
+              🤓
+            </span>{' '}
+            Technical Details
+          </summary>
+          {error && error.message ? (
             <>
-              <button type="button" onClick={window.ugrc.relaunchApp}>
-                Restart application
-              </button>
-              <button
-                type="button"
-                onClick={() => window.ugrc.openIssue({ message: error.message, stack: error.stack })}
-              >
-                Report this issue
-              </button>
+              <label htmlFor="message">Error message:</label>
+              <pre id="message" className="overflow-auto text-base text-gray-400">{`${error.message}`}</pre>
             </>
           ) : null}
-        </div>
-        {children}
-      </div>
+          {error && error.stack ? (
+            <>
+              <label htmlFor="stack">Stack trace:</label>
+              <pre id="stack" className="overflow-auto text-base text-gray-400">{`${error.stack}`}</pre>
+            </>
+          ) : null}
+          {error && !error.message && !error.stack ? (
+            <pre className="overflow-auto text-base text-gray-400">{error.toString()}</pre>
+          ) : null}
+        </details>
+      </Chrome>
     </article>
   );
 }

src/pages/Routes.jsx

@@ -14,9 +14,17 @@ import ErrorPage from './Error.jsx';
 const RouterErrorPage = ({ error }) => {
   return (
     <ErrorPage error={error}>
-      <Link className="mt-2" type="back-button" to="/?skip-forward=1" replace={true}>
-        &larr; Back
-      </Link>
+      <p>
+        You may now{' '}
+        <Link className="font-bold text-yellow-500 hover:text-yellow-300" to="/?skip-forward=1" replace={true}>
+          go back
+        </Link>{' '}
+        to the previous page to check your settings to try again or{' '}
+        <button className="font-bold text-yellow-500 hover:text-yellow-300" onClick={window.ugrc.relaunchApp}>
+          restart the application
+        </button>{' '}
+        to see if that helps.
+      </p>
     </ErrorPage>
   );
 };

src/services/errors.js

@@ -1,4 +1,4 @@
-const { app, ipcMain } = require('electron');
+const { app, ipcMain, shell } = require('electron');
 const { openNewGitHubIssue } = require('electron-util');
 const osName = require('os-name');
 
@@ -7,21 +7,14 @@ ipcMain.on('relaunchApp', () => {
   app.exit();
 });
 
-ipcMain.on('openIssue', (_, { message, stack }) => {
-  openNewGitHubIssue({
-    user: 'agrc',
-    repo: 'api-client',
-    labels: ['bug', 'triage'],
-    title: 'App Crash Report',
-    // indents in the string template cause issues with GitHub markdown
-    body: `
-### Code of Conduct
+function getBody(message, stack) {
+  return `### What happened?
+
 
-- [ ] I agree to follow this project's Code of Conduct
 
-### Is there an existing issue for this?
+### Steps To Reproduce
+
 
-- [ ] I have searched the existing issues
 
 ### App Version
 
@@ -35,14 +28,6 @@ ${process.versions.electron}
 
 ${osName()}
 
-### What happened?
-
-
-
-### Steps To Reproduce
-
-
-
 ### Relevant log output
 
 #### Error message
@@ -51,9 +36,28 @@ ${osName()}
 
 #### Stack trace
 
-\`\`\`
+\`\`\`st
 ${stack}
 \`\`\`
-`,
+`;
+}
+
+ipcMain.on('openEmail', (_, { message, stack }) => {
+  const body = getBody(message, stack);
+
+  setImmediate(() =>
+    shell.openExternal(
+      `mailto:ugrc-developers@utah.gov?subject=API Client - App Crash Report&body=${body.replace(/\n/gm, '%0D%0A')}`
+    )
+  );
+});
+
+ipcMain.on('openIssue', (_, { message, stack }) => {
+  openNewGitHubIssue({
+    user: 'agrc',
+    repo: 'api-client',
+    labels: ['bug', 'triage'],
+    title: 'App Crash Report',
+    body: getBody(message, stack),
   });
 });

src/services/preload.js

@@ -17,4 +17,5 @@ contextBridge.exposeInMainWorld('ugrc', {
   isMacOS: () => process.platform === 'darwin',
   relaunchApp: () => ipcRenderer.send('relaunchApp'),
   openIssue: (content) => ipcRenderer.send('openIssue', content),
+  openEmail: (content) => ipcRenderer.send('openEmail', content),
 });

src/styles/tailwind.css

@@ -47,7 +47,8 @@
   h3 {
     @apply my-5 text-3xl font-extrabold tracking-tight text-gray-800 select-none;
   }
-  p {
+  p,
+  summary {
     @apply mb-6 text-lg font-medium text-gray-800;
   }
   label {