From ea2aa7c76c4c5361e493a27584d526daa366f3d4 Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Sat, 15 Mar 2025 16:44:58 +0100
Subject: [PATCH] fix react example styling

---
 examples/react/src/App.tsx           |   1 -
 examples/react/src/routes/_index.tsx | 128 +++++++++++++--------------
 examples/react/src/routes/admin.tsx  |   1 +
 examples/react/src/styles.css        |  39 ++++----
 4 files changed, 85 insertions(+), 84 deletions(-)

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index e122556..2e2a25b 100644
--- a/examples/react/src/App.tsx
+++ b/examples/react/src/App.tsx
@@ -8,7 +8,6 @@ import IndexPage from "~/routes/_index";
 const Admin = lazy(() => import("~/routes/admin"));
 import { Center } from "~/components/Center";
 import { ClientProvider } from "bknd/client";
-import "bknd/dist/styles.css";
 
 export default function () {
    const [app, setApp] = useState<App | undefined>(undefined);
diff --git a/examples/react/src/routes/_index.tsx b/examples/react/src/routes/_index.tsx
index 227ab5f..4f57317 100644
--- a/examples/react/src/routes/_index.tsx
+++ b/examples/react/src/routes/_index.tsx
@@ -12,73 +12,72 @@ export default function IndexPage({ app }: { app: App }) {
    const total = todos?.body.meta.total || 0;
 
    return (
-      <div id="app">
-         <Center className="flex-col gap-10 max-w-96 mx-auto text-lg">
-            <div className="flex flex-col gap-2 items-center">
-               <img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
-               <p className="font-mono">local</p>
-            </div>
+      <Center className="flex-col gap-10 max-w-96 mx-auto">
+         <div className="flex flex-col gap-2 items-center">
+            <img src="/bknd.svg" alt="bknd" className="w-48 dark:invert" />
+            <p className="font-mono">local</p>
+         </div>
 
-            <div className="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
-               <h2 className="font-mono mb-1 opacity-70">
-                  <code>What's next? ({total})</code>
-               </h2>
-               <div className="flex flex-col w-full gap-2">
-                  {total > limit && (
-                     <div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
-                        {total - limit} more todo(s) hidden
-                     </div>
-                  )}
-                  <div className="flex flex-col gap-3">
-                     {todos?.reverse().map((todo) => (
-                        <div className="flex flex-row" key={String(todo.id)}>
-                           <div className="flex flex-row flex-grow items-center gap-3 ml-1">
-                              <input
-                                 type="checkbox"
-                                 className="flex-shrink-0 cursor-pointer"
-                                 defaultChecked={!!todo.done}
-                                 onChange={async () => {
-                                    await $q.update({ done: !todo.done }, todo.id);
-                                 }}
-                              />
-                              <div className="text-foreground/90 leading-none">{todo.title}</div>
-                           </div>
-                           <button
-                              type="button"
-                              className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
-                              onClick={async () => {
-                                 await $q._delete(todo.id);
-                              }}
-                           >
-                              ❌
-                           </button>
-                        </div>
-                     ))}
+         <div className="flex flex-col border border-foreground/15 w-full py-4 px-5 gap-2">
+            <h2 className="font-mono mb-1 opacity-70">
+               <code>What's next? ({total})</code>
+            </h2>
+            <div className="flex flex-col w-full gap-2">
+               {total > limit && (
+                  <div className="bg-foreground/10 flex justify-center p-1 text-xs rounded text-foreground/40">
+                     {total - limit} more todo(s) hidden
                   </div>
-                  <form
-                     className="flex flex-row w-full gap-3 mt-2"
-                     key={todos?.map((t) => t.id).join()}
-                     action={async (formData: FormData) => {
-                        const title = formData.get("title") as string;
-                        await $q.create({ title });
-                     }}
-                  >
-                     <input
-                        type="text"
-                        name="title"
-                        placeholder="New todo"
-                        className="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none"
-                     />
-                     <button type="submit" className="cursor-pointer">
-                        Add
-                     </button>
-                  </form>
+               )}
+               <div className="flex flex-col gap-3">
+                  {todos?.reverse().map((todo) => (
+                     <div className="flex flex-row" key={String(todo.id)}>
+                        <div className="flex flex-row flex-grow items-center gap-3 ml-1">
+                           <input
+                              type="checkbox"
+                              className="flex-shrink-0 cursor-pointer"
+                              defaultChecked={!!todo.done}
+                              onChange={async () => {
+                                 await $q.update({ done: !todo.done }, todo.id);
+                              }}
+                           />
+                           <div className="text-foreground/90 leading-none">{todo.title}</div>
+                        </div>
+                        <button
+                           type="button"
+                           className="cursor-pointer grayscale transition-all hover:grayscale-0 text-xs "
+                           onClick={async () => {
+                              await $q._delete(todo.id);
+                           }}
+                        >
+                           ❌
+                        </button>
+                     </div>
+                  ))}
                </div>
+               <form
+                  className="flex flex-row w-full gap-3 mt-2"
+                  key={todos?.map((t) => t.id).join()}
+                  action={async (formData: FormData) => {
+                     const title = formData.get("title") as string;
+                     await $q.create({ title });
+                  }}
+               >
+                  <input
+                     type="text"
+                     name="title"
+                     placeholder="New todo"
+                     className="py-2 px-4 flex flex-grow rounded-sm bg-foreground/10 focus:bg-foreground/20 transition-colors outline-none"
+                  />
+                  <button type="submit" className="cursor-pointer">
+                     Add
+                  </button>
+               </form>
             </div>
+         </div>
 
-            <div className="flex flex-col items-center gap-1">
-               <a href="/admin">Go to Admin ➝</a>
-               {/*<div className="opacity-50 text-sm">
+         <div className="flex flex-col items-center gap-1">
+            <a href="/admin">Go to Admin ➝</a>
+            {/*<div className="opacity-50 text-sm">
                   {user ? (
                      <p>
                         Authenticated as <b>{user.email}</b>
@@ -87,8 +86,7 @@ export default function IndexPage({ app }: { app: App }) {
                      <a href="/admin/auth/login">Login</a>
                   )}
                </div>*/}
-            </div>
-         </Center>
-      </div>
+         </div>
+      </Center>
    );
 }
diff --git a/examples/react/src/routes/admin.tsx b/examples/react/src/routes/admin.tsx
index 0f390af..efb5d12 100644
--- a/examples/react/src/routes/admin.tsx
+++ b/examples/react/src/routes/admin.tsx
@@ -1,5 +1,6 @@
 import { Admin, type BkndAdminProps } from "bknd/ui";
 import type { App } from "bknd";
+import "bknd/dist/styles.css";
 
 export default function AdminPage({
    app,
diff --git a/examples/react/src/styles.css b/examples/react/src/styles.css
index 3f4f365..4e0bdd8 100644
--- a/examples/react/src/styles.css
+++ b/examples/react/src/styles.css
@@ -1,25 +1,28 @@
-/* @todo: currently not working nicely */
-#app {
-   @import "tailwindcss";
+@import "tailwindcss";
+
+:root {
+   --background: #ffffff;
+   --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
    :root {
-      --background: #ffffff;
-      --foreground: #171717;
+      --background: #0a0a0a;
+      --foreground: #ededed;
    }
+}
 
-   @media (prefers-color-scheme: dark) {
-      :root {
-         --background: #0a0a0a;
-         --foreground: #ededed;
-      }
-   }
+@theme {
+   --color-background: var(--background);
+   --color-foreground: var(--foreground);
+}
 
-   @theme {
-      --color-background: var(--background);
-      --color-foreground: var(--foreground);
-   }
-
-   width: 100%;
-   min-height: 100dvh;
+body {
    @apply bg-background text-foreground flex;
    font-family: Arial, Helvetica, sans-serif;
 }
+
+#root {
+   width: 100%;
+   min-height: 100dvh;
+}