Change wasm init failed banner to a toast (#7043)

* Change wasm init failed banner to a toast
Closes #6976 for good!

* Move :(

* Rm testing bit

* Align left and bot suggestions

* Update src/components/WasmErrToast.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

src/components/WasmErrBanner.tsx

@@ -1,64 +0,0 @@
-import { Dialog } from '@headlessui/react'
-import { useState } from 'react'
-
-import { ActionButton } from '@src/components/ActionButton'
-import { useKclContext } from '@src/lang/KclProvider'
-
-export function WasmErrBanner() {
-  const [isBannerDismissed, setBannerDismissed] = useState(false)
-
-  const { wasmInitFailed } = useKclContext()
-
-  if (!wasmInitFailed) return null
-
-  return (
-    <Dialog
-      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">
-            Problem with our WASM blob :(
-          </h2>
-          <ActionButton
-            Element="button"
-            onClick={() => setBannerDismissed(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>
-          <a
-            href="https://webassembly.org/"
-            rel="noopener noreferrer"
-            target="_blank"
-            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
-          >
-            WASM or web assembly
-          </a>{' '}
-          is core part of how our app works. It might because you OS is not
-          up-to-date. If you're able to update your OS to a later version, try
-          that. If not create an issue on{' '}
-          <a
-            href="https://github.com/KittyCAD/modeling-app"
-            rel="noopener noreferrer"
-            target="_blank"
-            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
-          >
-            our Github
-          </a>
-          .
-        </p>
-      </Dialog.Panel>
-    </Dialog>
-  )
-}

src/components/WasmErrToast.tsx

@@ -0,0 +1,55 @@
+import { ActionButton } from '@src/components/ActionButton'
+
+export type WasmErrorToastProps = {
+  onDismiss: () => void
+}
+export function WasmErrToast({ onDismiss }: WasmErrorToastProps) {
+  return (
+    <div
+      data-testid="wasm-init-failed-toast"
+      className="flex items-center gap-6 min-w-md"
+    >
+      <span className="flex-none w-24 text-3xl font-mono text-center">:(</span>
+      <div className="flex flex-col justify-between gap-6 min-w-80">
+        <section>
+          <h2>Problem with our WASM blob</h2>
+          <p className="text-sm text-chalkboard-70 dark:text-chalkboard-30">
+            <a
+              href="https://webassembly.org/"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+            >
+              WASM or web assembly
+            </a>{' '}
+            is core part of how our app works. It might be because your OS is not
+            up-to-date. If you're able to update your OS to a later version, try
+            that. If not create an issue on{' '}
+            <a
+              href="https://github.com/KittyCAD/modeling-app"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+            >
+              our Github
+            </a>
+            .
+          </p>
+        </section>
+        <div className="flex justify-end gap-8">
+          <ActionButton
+            Element="button"
+            iconStart={{
+              icon: 'close',
+            }}
+            data-negative-button="dismiss"
+            name="dismiss"
+            onClick={onDismiss}
+          >
+            Dismiss
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}