Allow warning banner to be dismissed (#286)

src/components/DownloadAppBanner.tsx

@@ -1,10 +1,38 @@
+import { Dialog } from '@headlessui/react'
+import { useStore } from '../useStore'
+import { ActionButton } from './ActionButton'
+import { faX } from '@fortawesome/free-solid-svg-icons'
+
 const DownloadAppBanner = () => {
+  const { isBannerDismissed, setBannerDismissed } = useStore((s) => ({
+    isBannerDismissed: s.isBannerDismissed,
+    setBannerDismissed: s.setBannerDismissed,
+  }))
+
   return (
-    <div className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4">
+    <Dialog
-      <div className="max-w-3xl mx-auto">
+      className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4"
+      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: faX,
+              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">
@@ -21,8 +49,8 @@ const DownloadAppBanner = () => {
           </a>{' '}
           to download the app for the best experience.
         </p>
-      </div>
+      </Dialog.Panel>
-    </div>
+    </Dialog>
   )
 }
 

src/useStore.ts

@@ -211,6 +211,8 @@ export interface StoreState {
   setOnboardingStatus: (status: string) => void
   theme: Themes
   setTheme: (theme: Themes) => void
+  isBannerDismissed: boolean
+  setBannerDismissed: (isBannerDismissed: boolean) => void
   openPanes: PaneType[]
   setOpenPanes: (panes: PaneType[]) => void
   homeMenuItems: {
@@ -414,6 +416,8 @@ export const useStore = create<StoreState>()(
       setOnboardingStatus: (onboardingStatus) => set({ onboardingStatus }),
       theme: Themes.System,
       setTheme: (theme) => set({ theme }),
+      isBannerDismissed: false,
+      setBannerDismissed: (isBannerDismissed) => set({ isBannerDismissed }),
       openPanes: ['code'],
       setOpenPanes: (openPanes) => set({ openPanes }),
       showHomeMenu: true,