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>
This commit is contained in:
Frank Noirot
2023-12-14 15:48:06 -05:00
committed by GitHub
parent c6e97e729a
commit bf68a87897
4 changed files with 40 additions and 36 deletions

View File

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

View File

@ -60,6 +60,7 @@
}, },
"scripts": { "scripts": {
"start": "vite", "start": "vite",
"start:prod": "vite preview --port=3000",
"serve": "vite serve --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": "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", "build:local": "vite build",

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -10,45 +10,48 @@ const DownloadAppBanner = () => {
return ( return (
<Dialog <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} open={!isBannerDismissed}
onClose={() => ({})} onClose={() => ({})}
> >
<Dialog.Panel className="max-w-3xl mx-auto"> <Dialog.Overlay className="fixed inset-0 bg-chalkboard-100/50" />
<div className="flex gap-2 justify-between items-start"> <Dialog.Panel className="absolute inset-0 top-auto bg-warn-20 text-warn-80 px-8 py-4">
<h2 className="text-xl font-bold mb-4"> <div className="max-w-3xl mx-auto">
KittyCAD Modeling App is better as a desktop app! <div className="flex gap-2 justify-between items-start">
</h2> <h2 className="text-xl font-bold mb-4">
<ActionButton KittyCAD Modeling App is better as a desktop app!
Element="button" </h2>
onClick={() => setBannerDismissed(true)} <ActionButton
icon={{ Element="button"
icon: 'close', onClick={() => setBannerDismissed(true)}
className: 'p-1', icon={{
bgClassName: icon: 'close',
'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80', className: 'p-1',
iconClassName: bgClassName:
'text-warn-10 group-hover:text-warn-10 dark:text-warn-10 dark:group-hover:text-warn-10', 'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80',
}} iconClassName:
className="!p-0 !bg-transparent !border-transparent" '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> </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.Panel>
</Dialog> </Dialog>
) )