Make web app warning banner in the middle of the screen and simpler (#4044)

* Make web app warning banner in the middle of the screen and simpler

* Some dark mode styles were whack

* Better wording for second sentence

* Update text in popup and appearance of download link

* Make download link first in focus order

src/components/DownloadAppBanner.tsx

@@ -11,46 +11,17 @@ const DownloadAppBanner = () => {
 
   return (
     <Dialog
-      className="fixed inset-0 z-50"
+      className="fixed inset-0 z-50 grid place-items-center"
       open={!isBannerDismissed}
       onClose={() => ({})}
     >
-      <Dialog.Overlay className="fixed inset-0 bg-chalkboard-100/50" />
+      <Dialog.Overlay className="fixed inset-0 bg-chalkboard-10/80 dark:bg-chalkboard-100/70" />
-      <Dialog.Panel className="absolute inset-0 top-auto bg-warn-20 text-warn-80 px-8 py-4">
+      <Dialog.Panel className="relative max-w-xl bg-warn-20 text-warn-80 px-8 py-4 rounded-md">
         <div className="max-w-3xl mx-auto">
-          <div className="flex gap-2 justify-between items-start">
+          <h2 className="text-2xl font-bold mb-4">Be warned!</h2>
-            <h2 className="text-xl font-bold mb-4">
-              Modeling App is better as a desktop app!
-            </h2>
-            <ActionButton
-              Element="button"
-              onClick={() => setIsBannerDismissed(true)}
-              iconStart={{
-                icon: 'close',
-                className: 'p-1',
-                bgClassName:
-                  'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80',
-                iconClassName:
-                  'text-warn-10 group-hover:text-warn-10 dark:text-warn-10 dark:group-hover:text-warn-10',
-              }}
-              className="!p-0 !bg-transparent !border-transparent"
-            />
-          </div>
           <p>
-            The browser version of the app only saves your data temporarily in{' '}
+            Zoo Modeling App Desktop is more reliable! The web app is not
-            <code className="text-base inline-block px-0.5 bg-warn-30/50 rounded">
+            officially supported.
-              localStorage
-            </code>
-            , and isn't backed up anywhere! Visit{' '}
-            <a
-              href="https://zoo.dev/modeling-app/download"
-              rel="noopener noreferrer"
-              target="_blank"
-              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
-            >
-              our website
-            </a>{' '}
-            to download the app for the best experience.
           </p>
           {!navigator?.userAgent.includes('Chrome') && (
             <p className="mt-6">
@@ -67,6 +38,33 @@ const DownloadAppBanner = () => {
               to download it.
             </p>
           )}
+          <div className="flex flex-row-reverse gap-4 justify-between mt-6">
+            <ActionButton
+              Element="externalLink"
+              to="https://zoo.dev/modeling-app/download"
+              className="group text-warn-10 dark:!text-warn-10 pr-1 border-warn-70 hover:border-warn-80 dark:!border-warn-70 dark:hover:!border-warn-80 bg-warn-70 group-hover:bg-warn-80 dark:bg-warn-70 dark:group-hover:bg-warn-80"
+              iconEnd={{
+                icon: 'arrowRight',
+                iconClassName: 'text-warn-10 dark:text-warn-10',
+                bgClassName: '!bg-transparent',
+              }}
+            >
+              Download Desktop App
+            </ActionButton>
+            <ActionButton
+              Element="button"
+              onClick={() => setIsBannerDismissed(true)}
+              className="group text-warn-80 bg-warn-10 border-warn-50 hover:border-warn-80 hover:bg-warn-10 dark:bg-warn-10 dark:!border-warn-50 dark:hover:!border-warn-80 dark:text-warn-80 dark:hover:bg-warn-10"
+              iconStart={{
+                icon: 'checkmark',
+                iconClassName: 'text-warn-10 dark:text-warn-10',
+                bgClassName:
+                  'bg-warn-50 group-hover:bg-warn-80 dark:bg-warn-50 dark:group-hover:bg-warn-80',
+              }}
+            >
+              Proceed at my own risk
+            </ActionButton>
+          </div>
         </div>
       </Dialog.Panel>
     </Dialog>