feat: add toast to report on success

catto-labs · Aug 14, 2023 · e929126 · e929126
1 parent aa8d6b0
commit e929126
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,8 @@
     "@supabase/supabase-js": "^2.32.0",
     "@unocss/reset": "^0.54.2",
     "solid-js": "^1.7.11",
-    "solid-start": "^0.2.30"
+    "solid-start": "^0.2.30",
+    "solid-toast": "^0.5.0"
   },
   "engines": {
     "node": ">=16"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/root.tsx b/src/root.tsx
@@ -26,6 +26,7 @@ import {
 import FullscreenLoader, { FullscreenLoaderEntry } from "@/components/FullscreenLoader";
 import { getProfileWithSession, supabase } from "@/supabase/client";
 import { setAuth } from "@/stores/auth";
+import { Toaster } from "solid-toast";
 
 export default function Root() {
   onMount(async () => {
@@ -55,6 +56,7 @@ export default function Root() {
         <Meta name="theme-color" content="#ffffff" />
       </Head>
       <Body class="h-full min-h-screen bg-crust bg-[url(https://source.unsplash.com/collection/175083)] bg-cover bg-center bg-no-repeat font-sans">
+        <Toaster/>
         <FullscreenLoaderEntry />
 
         <Suspense fallback={

diff --git a/src/routes/account.tsx b/src/routes/account.tsx
@@ -4,6 +4,7 @@ import { auth, setAuth } from "@/stores/auth";
 
 import Header from "@/components/landing/Header";
 import FullscreenLoader from "@/components/FullscreenLoader";
+import toast from "solid-toast";
 
 export default function Account() {
   const [username, setUsername] = createSignal(auth.profile?.username ?? "");
@@ -38,6 +39,7 @@ export default function Account() {
 
     const json = await response.json();
     setAuth("profile", json.data);
+    toast.success("Updated your account data.");
   };
 
   return (

diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
@@ -126,7 +126,7 @@ const Layout: Component = () => {
         }}
       >
         <input type="text"
-          class="mb-3 rounded-md px-3 py-2 text-text outline-none"
+          class="mb-3 rounded-md px-3 py-2 text-text bg-base outline-none placeholder-text-subtext1"
           placeholder="Enter a name for your folder..."
           value={newFolderName()}
           onInput={event => setNewFolderName(event.target.value)}