Make web warning less annoying (#1206)

* Put a proper overlay behind the web app warning banner
Resolves #1197

* Add outline to kcma logo in readme
Resolves #1159

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* retrigger CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

README.md

@@ -1,4 +1,4 @@
-![KittyCAD Modeling App](/public/kcma-logomark.png)
+![KittyCAD Modeling App](/public/kcma-logomark-outlined.png)
 
 ## KittyCAD Modeling App
 

package.json

@@ -60,6 +60,7 @@
   },
   "scripts": {
     "start": "vite",
+    "start:prod": "vite preview --port=3000",
     "serve": "vite serve --port=3000",
     "build": "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source \"$HOME/.cargo/env\" && curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y && yarn build:wasm && vite build",
     "build:local": "vite build",

src/components/DownloadAppBanner.tsx

@@ -10,45 +10,48 @@ const DownloadAppBanner = () => {
 
   return (
     <Dialog
-      className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4"
+      className="fixed inset-0 z-50"
       open={!isBannerDismissed}
       onClose={() => ({})}
     >
-      <Dialog.Panel className="max-w-3xl mx-auto">
-        <div className="flex gap-2 justify-between items-start">
-          <h2 className="text-xl font-bold mb-4">
-            KittyCAD Modeling App is better as a desktop app!
-          </h2>
-          <ActionButton
-            Element="button"
-            onClick={() => setBannerDismissed(true)}
-            icon={{
-              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"
-          />
+      <Dialog.Overlay className="fixed inset-0 bg-chalkboard-100/50" />
+      <Dialog.Panel className="absolute inset-0 top-auto bg-warn-20 text-warn-80 px-8 py-4">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex gap-2 justify-between items-start">
+            <h2 className="text-xl font-bold mb-4">
+              KittyCAD Modeling App is better as a desktop app!
+            </h2>
+            <ActionButton
+              Element="button"
+              onClick={() => setBannerDismissed(true)}
+              icon={{
+                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{' '}
+            <code className="text-base inline-block px-0.5 bg-warn-30/50 rounded">
+              localStorage
+            </code>
+            , and isn't backed up anywhere! Visit{' '}
+            <a
+              href="https://kittycad.io/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>
         </div>
-        <p>
-          The browser version of the app only saves your data temporarily in{' '}
-          <code className="text-base inline-block px-0.5 bg-warn-30/50 rounded">
-            localStorage
-          </code>
-          , and isn't backed up anywhere! Visit{' '}
-          <a
-            href="https://kittycad.io/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>
       </Dialog.Panel>
     </Dialog>
   )