Add themes, update layout, fix pages

Made username carry over between modals too

.github/workflows/github-actions-demo.yml

@@ -40,6 +40,8 @@ jobs:
         run: npm install -g sass
       - name: Install tailwindcss via npm
         run: npm install -D tailwindcss
+      - name: Install daisy ui via npm
+        run: npm i -D daisyui@latest
       - name: Compile css
         run: npm run build
         # TODO -> Remove wasm-opt-version once perseus is updated

README.md

@@ -16,11 +16,17 @@ Run `curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh`
 https://nodejs.org/en
 (todo look into:)
 https://pnpm.io/
+`npm i -D daisyui@latest`
 
 ### Unix based systems:
 
 `sudo apt install nodejs`
 `sudo apt install npm`
+`npm i -D daisyui@latest`
+
+For easy UI see:
+
+https://daisyui.com/components/button/
 
 ## 3. Install Perseus, for real-time updates while developing
 

package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "daisyui": "^4.12.10",
     "tailwindcss": "^3.4.10"
   }
 }

src/capsules/forgot_password_form.rs

@@ -4,12 +4,18 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::{
+    components::{
+        static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             state_enums::{ OpenState},
             templates::get_api_path,
-            global_state::{AppStateRx},
             endpoints::FORGOT_PASSWORD,
             models::{
                 auth::ForgotPasswordRequest,
@@ -52,6 +58,13 @@ fn forgot_password_form_capsule<G: Html>(
     state: &ForgotPasswordFormStateRx,
     _props: ForgotPasswordFormProps,
 ) -> View<G> {
+    // If there's a tentative username, set it
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
+
     let close_modal = move |_event: Event| {
         #[cfg(client)]
         {
@@ -103,42 +116,26 @@ fn forgot_password_form_capsule<G: Html>(
     };
 
     view! { cx,
-        div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){
-                            "Close"
-                        }
-                    }
-                    div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
-                        h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Forgot Password"}
+        dialog (class="modal-open modal modal-bottom sm:modal-middle animate-none") {
+            div (class="modal-box"){
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Forgot Password"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
 
-                        (match state.error.get().as_ref() != "" {
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
 
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
-                            input (bind:value = state.username, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white") {}
-                        }
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Contact Info"}
-                            input (bind:value = state.how_to_reach, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                        }
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
 
-                        button (on:click = handle_submit, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Submit"}
-                    }
+                // Password field
+                div (class = "label") { span (class = "label-text") { "Contact Info" } }
+                input (bind:value = state.how_to_reach, class = "input input-bordered w-full")
+
+                // Submit button
+                div (class = "flex justify-center mt-6") {
+                    button (on:click = handle_submit, class="btn"){"Submit"}
                 }
             }
         }

src/capsules/login_form.rs

@@ -4,11 +4,17 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::{
+    components::{
+        static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+    },
+    global_state::AppStateRx,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
             endpoints::LOGIN,
-            global_state::{AppStateRx},
             models::auth::{LoginInfo, LoginResponse, WebAuthInfo},
             models::generic::GenericResponse,
             state_enums::{OpenState},
@@ -52,6 +58,13 @@ fn login_form_capsule<G: Html>(
     state: &LoginFormStateRx,
     props: LoginFormProps,
 ) -> View<G> {
+    // If there's a tentative username, set it
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    state
+        .username
+        .set((*global_state.auth.pending_username.get()).clone());
+    global_state.auth.pending_username.set(String::new());
+
     let close_modal = move |_event: Event| {
         #[cfg(client)]
         {
@@ -68,23 +81,19 @@ fn login_form_capsule<G: Html>(
         {
             spawn_local_scoped(cx, async move {
                 let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+                // Update tentative username
+                global_state
+                    .auth
+                    .pending_username
+                    .set((*state.username.get()).clone());
+
+                // Open new modal
                 global_state
                     .modals_open
                     .forgot_password
                     .set(OpenState::Open);
-                // Close modal
-                state.reset();
-                global_state.modals_open.login.set(OpenState::Closed);
-            });
-        }
-    };
 
-    let handle_register = move |_event: Event| {
-        #[cfg(client)]
-        {
-            spawn_local_scoped(cx, async move {
-                let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
-                global_state.modals_open.register.set(OpenState::Open);
                 // Close modal
                 state.reset();
                 global_state.modals_open.login.set(OpenState::Closed);
@@ -139,60 +148,44 @@ fn login_form_capsule<G: Html>(
     };
 
     view! { cx,
-        div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){
-                            "Close"
-                        }
-                    }
-                    div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
-                        h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Sign in"}
+        dialog (class="modal-open modal modal-bottom sm:modal-middle") {
+            div (class="modal-box"){
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Sign in"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
 
-                        (match state.error.get().as_ref() != "" {
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
 
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
-                            input (bind:value = state.username, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white") {}
-                        }
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Password"}
-                            input (bind:value = state.password, type = "password", class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                        }
-                        div (class="flex justify-between"){
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
+
+                // Password field
+                div (class = "label") { span (class = "label-text") { "Password" } }
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
+
+                // Remember me button and forget password button
+                div (class="flex justify-between items-center mt-1"){
+                    // Remember me button
                     (match props.remember_me {
                         true => { view!{ cx,
-                                    div (class="flex items-start"){
-                                        div (class="flex items-center h-5"){
-                                            input (bind:checked = state.remember_me, type = "checkbox", class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600") {}
-                                        }
-                                        div (class="text-sm ml-3"){
-                                            label (class="font-medium text-gray-900 dark:text-gray-300"){"Remember me"}
+                            div (class = "flex items-start  form-control") {
+                                label (class = "label cursor-pointer") {
+                                    span (class = "label-text mr-4") { "Remember me" }
+                                    input (bind:checked = state.remember_me, type = "checkbox", class = "checkbox")
                                 }
                             }
                         }},
                         false => view!{cx, },
                     })
-                            button (on:click = handle_forgot_password, class="text-sm text-blue-700 hover:underline dark:text-blue-500"){"Lost Password?"}
-                        }
-                        button (on:click = handle_log_in, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Log in"}
-                        div (class="text-sm font-medium text-gray-500 dark:text-gray-300"){
-                            button (on:click = handle_register, class="text-blue-700 hover:underline dark:text-blue-500"){"Create account"}
-                        }
+                    // Forget password button
+                    button (on:click = handle_forgot_password, class="flex  link link-primary"){"Lost Password?"}
                 }
+
+                // Log in button
+                div (class = "flex justify-center") {
+                    button (on:click = handle_log_in, class="btn"){"Log in"}
                 }
             }
         }

src/capsules/register_form.rs

@@ -4,6 +4,10 @@ use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
 use web_sys::Event;
 
+use crate::components::{
+    static_components::close_button::CloseButtonSvg, sub_components::error_block::ErrorBlock,
+};
+
 cfg_if::cfg_if! {
     if #[cfg(client)] {
         use crate::{
@@ -102,9 +106,14 @@ fn register_form_capsule<G: Html>(
                     return;
                 }
 
+                // Update tentative username
+                global_state
+                    .auth
+                    .pending_username
+                    .set((*state.username.get()).clone());
+
                 // Open login modal
                 global_state.modals_open.login.set(OpenState::Open);
-                state.reset();
 
                 // Close modal
                 state.reset();
@@ -114,69 +123,48 @@ fn register_form_capsule<G: Html>(
     };
 
     view! { cx,
-        div (class="overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center"){
-            div (class="relative md:mx-auto w-full md:w-1/2 lg:w-1/3 z-0 my-10") {
-                div (class="bg-white rounded-lg shadow relative dark:bg-gray-700"){
-                    div (class="flex justify-end p-2"){
-                        button (on:click = close_modal, class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"){
-                            "Close"
-                        }
-                    }
-                    div (class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8") {
-                        h3 (class="text-xl font-medium text-gray-900 dark:text-white"){"Register"}
+        dialog (class="modal-open modal modal-bottom sm:modal-middle"){
+            div (class="modal-box") {
+                // Header row - title and close button
+                h3 (class="text-lg font-bold mb-4 text-center"){"Register"}
+                button (on:click = close_modal, class = "btn btn-circle right-2 top-2 absolute") { CloseButtonSvg {} }
 
+                // Add component for handling error messages
+                ErrorBlock(error = state.error.clone())
 
-                        (match state.error.get().as_ref() != "" {
-                            true => { view!{cx,
-                                div (role="alert") {
-                                    div (class="bg-red-500 text-white font-bold rounded-t px-4 py-2") {
-                                        "Error"
-                                    }
-                                    div (class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"){
-                                        p {(state.error.get())}
-                                    }
-                                }
-                            }},
-                            false => {view!{cx,}},
-                        })
+                // Username field
+                div (class = "label") { span (class = "label-text") { "Username" } }
+                input (bind:value = state.username, class = "input input-bordered w-full")
+
+                // Password field
+                div (class = "label") { span (class = "label-text") { "Password" } }
+                input (bind:value = state.password, type = "password", class = "input input-bordered w-full")
 
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300") {"Username"}
-                            input (bind:value = state.username, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white") {}
-                        }
-                        div {
-                            label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Password"}
-                            input (bind:value = state.password, type = "password", class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                        }
                 (match props.registration_code {
                     true => { view! {cx,
-                                div {
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Registration code"}
-                                    input (bind:value = state.registration_code, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                                }
+                        div (class = "label") { span (class = "label-text") { "Registration Code" } }
+                        input (bind:value = state.registration_code, class = "input input-bordered w-full")
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.nickname {
                     true => { view! {cx,
-                                div {
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Nickname (optional)"}
-                                    input (bind:value = state.nickname, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                                }
+                        div (class = "label") { span (class = "label-text") { "Nickname (Optional)" } }
+                        input (bind:value = state.nickname, class = "input input-bordered w-full")
                     }},
                     false => {view!{cx,}},
                 })
                 (match props.email {
                     true => { view! {cx,
-                                div {
-                                    label (class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300"){"Email (optional)"}
-                                    input (bind:value = state.email, class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"){}
-                                }
+                        div (class = "label") { span (class = "label-text") { "Email (Optional)" } }
+                        input (bind:value = state.email, class = "input input-bordered w-full")
                     }},
                     false => {view!{cx,}},
                 })
-                        button (on:click = handle_register, class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"){"Register"}
-                    }
+
+                // Register button
+                div (class = "flex justify-center mt-6") {
+                    button (on:click = handle_register, class="btn"){"Register"}
                 }
             }
         }

src/components/header.rs

@@ -3,8 +3,9 @@ use sycamore::prelude::*;
 use web_sys::Event;
 
 use crate::{
+    components::static_components::menu_button::MenuButtonSvg,
     global_state::AppStateRx,
-    state_enums::{GameState, LoginState},
+    state_enums::{ContentState, LoginState},
 };
 
 cfg_if::cfg_if! {
@@ -17,12 +18,81 @@ cfg_if::cfg_if! {
 
 #[derive(Prop)]
 pub struct HeaderProps {
-    pub game: GameState,
+    pub content_state: ContentState,
+}
+
+// TODO update to have user preferences
+#[component]
+fn LinkList<G: Html>(cx: Scope) -> View<G> {
+    // Get global state to get style info
+    let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+
+    view! { cx,
+        li {
+            a (href = "pool") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pool.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pool.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pool" }
+                }
+            }
+        }
+        li {
+            a (href = "table_tennis") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.table_tennis.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.table_tennis.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Table Tennis" }
+                }
+            }
+        }
+        li {
+            a (href = "pickleball") {
+                label (class = "swap") {
+                    input (
+                        type="radio",
+                        name = "theme-dropdown",
+                        class = "theme-controller",
+                        value = (*global_state.style.theme.pickleball.get()),
+                    ) {}
+                    p (class = (
+                        if *global_state.style.theme.current.get() == *global_state.style.theme.pickleball.get(){
+                            "font-bold"
+                        }
+                        else {
+                            ""
+                        }
+                    )){ "Pickleball" }
+                }
+            }
+        }
+    }
 }
 
 #[component]
 pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
-    // Get global state to get authentication info
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     let handle_log_in = move |_event: Event| {
@@ -56,50 +126,46 @@ pub fn Header<G: Html>(cx: Scope, props: HeaderProps) -> View<G> {
     };
 
     view! { cx,
-        header {
-            div (class = "flex items-center justify-between w-full md:text-center h-20") {
-                div(class = "flex-1") {}
-
+        header (class="navbar bg-base-100") {
+            // Navigation
+            div (class="navbar-start") {
+                div (class="dropdown") {
+                    div (tabindex="0", role="button", class="btn btn-ghost lg:hidden") { MenuButtonSvg {} }
+                    ul (tabindex = "0", class = "menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow" ) {
+                        LinkList {}
+                    }
+                }
+                ul (class="menu menu-horizontal px-1 hidden lg:flex") {
+                    LinkList {}
+                }
+            }
             // Title
-                div(class = "text-gray-700 text-2xl font-semibold py-2") {
-                   (props.game.to_string()) " - Season 1"
+            div (class="navbar-center lg:flex") {
+                (props.content_state.to_string())
             }
-
-                // Login / register or user buttons
-                div(class = "flex-1 py-2") {(
-                    match *global_state.auth.state.get() {
-                        LoginState::NotAuthenticated => {
-                            view! { cx,
-                                button(on:click = handle_register, class = "text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700") {
-                                    "Register"
-                                }
-                                button(on:click = handle_log_in, class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
-                                    "Log in"
-                                }
-                            }
-                        }
-                        LoginState::Authenticated => {
-                            view! { cx,
-                                div {
-                                    "Hello "
-                                        (global_state.auth.username.get().as_ref().clone().unwrap_or("".to_owned()))
-                                }
-                                button(on:click = handle_log_out, class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800") {
+            // User buttons
+            div (class="navbar-end") {
+                (match *global_state.auth.state.get() {
+                    LoginState::Authenticated => { view! { cx,
+                        button(on:click = handle_log_out, class = "btn btn-primary mr-2") {
                             "Log out"
                         }
+                    } },
+                    LoginState::NotAuthenticated => { view! { cx,
+                        button(on:click = handle_register, class = "btn btn-primary mr-2") {
+                            "Register"
                         }
+                        button(on:click = handle_log_in, class = "btn btn-secondary mr-2") {
+                            "Log in"
                         }
-                        // Will only appear for a few seconds
-                        LoginState::Unknown => {
-                            view! { cx,
+                    } },
+                    LoginState::Unknown => { view! { cx,
                         div (class = "px-5 py-2.5 me-2 mb-2") {
                             "Loading..."
                         }
-                            }
-                        },
+                    } },
                 })
             }
         }
     }
 }
-}

src/components/layout.rs

@@ -6,14 +6,14 @@ use crate::{
     },
     components::header::Header,
     global_state::AppStateRx,
-    state_enums::{GameState, OpenState},
+    state_enums::{ContentState, OpenState},
 };
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
 #[derive(Prop)]
 pub struct LayoutProps<'a, G: Html> {
-    pub game: GameState,
+    pub content_state: ContentState,
     pub children: Children<'a, G>,
 }
 
@@ -22,19 +22,39 @@ pub struct LayoutProps<'a, G: Html> {
 #[component]
 pub fn Layout<'a, G: Html>(
     cx: Scope<'a>,
-    LayoutProps { game, children }: LayoutProps<'a, G>,
+    LayoutProps {
+        content_state,
+        children,
+    }: LayoutProps<'a, G>,
 ) -> View<G> {
-    let children = children.call(cx);
-
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
+    // Set the theme
+    global_state.style.theme.current.set(match content_state {
+        ContentState::None => (*global_state.style.theme.default.get()).clone(),
+        ContentState::Pool => (*global_state.style.theme.pool.get()).clone(),
+        ContentState::Pickleball => (*global_state.style.theme.pickleball.get()).clone(),
+        ContentState::TableTennis => (*global_state.style.theme.table_tennis.get()).clone(),
+    });
+    #[cfg(client)]
+    let _ = web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .document_element()
+        .unwrap()
+        .set_attribute("data-theme", &global_state.style.theme.current.get());
+
+    let children = children.call(cx);
 
     // Check if the client is authenticated or not
     #[cfg(client)]
     global_state.auth.detect_state();
 
+    let content_state_header = content_state.clone();
+
     view! { cx,
         // Main page header, including login functionality
-        Header(game = game)
+        Header(content_state = content_state_header)
 
         // Modals
         section(class = "flex-2") {
@@ -83,24 +103,25 @@ pub fn Layout<'a, G: Html>(
         }
 
         main(style = "my-8") {
+            (match content_state {
+                ContentState::None => view!{ cx, },
+                ContentState::Pool => view!{ cx,
                     // Body header
-            div {
                     div (class = "container mx-auto px-6 py-3") {
                         nav (class = "sm:flex sm:justify-center sm:items-center mt-4 hidden") {
                             div (class = "flex flex-col sm:flex-row"){
-                            a(href = "add-game-form",
+                                a(href = "pool/add-game-form",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "Add game result" }
-                            a(href = "one-v-one-board",
+                                a(href = "pool/one-v-one-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "1v1 Leaderboard" }
-                            a(href = "overall-board",
+                                a(href = "pool/overall-board",
                                     class = "mt-3 text-gray-600 hover:underline sm:mx-3 sm:mt-0"
                                 ) { "Overall Leaderboard" }
                             }
                         }
                     }
-            }
                     // Content body
                     div(class = "container mx-auto px-6") {
                         div(class = "md:flex mt-8 md:-mx-4") {
@@ -109,6 +130,10 @@ pub fn Layout<'a, G: Html>(
                             }
                         }
                     }
+                },
+                ContentState::Pickleball => view!{ cx, },
+                ContentState::TableTennis => view!{ cx, },
+            })
         }
     }
 }

src/components/mod.rs

@@ -1,2 +1,4 @@
 mod header;
 pub mod layout;
+pub mod static_components;
+pub mod sub_components;

src/components/static_components/close_button.rs

@@ -0,0 +1,21 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn CloseButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns = "http://www.w3.org/2000/svg",
+            class = "h-6 w-6 stroke-primary",
+            fill = "none",
+            viewBox = "0 0 24 24",
+        ) {
+            path (
+               stroke-linecap = "round",
+               stroke-linejoin = "round",
+               stroke-width = "2",
+               d = "M6 18L18 6M6 6l12 12"
+            ){}
+        }
+    }
+}

src/components/static_components/indicator.rs

@@ -0,0 +1,22 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn ErrorSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-6 w-6 shrink-0 stroke-current",
+            fill="none",
+            viewBox="0 0 24 24",
+        )
+        {
+            path (
+                stroke-linecap="round",
+                stroke-linejoin="round",
+                stroke-width="2",
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
+            ){}
+        }
+    }
+}

src/components/static_components/menu_button.rs

@@ -0,0 +1,20 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+#[component]
+pub fn MenuButtonSvg<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        svg (
+            xmlns="http://www.w3.org/2000/svg",
+            class="h-5 w-5",
+            fill="none",
+            viewBox="0 0 24 24",
+            stroke="currentColor"){
+                path (
+                    stroke-linecap="round",
+                    stroke-linejoin="round",
+                    stroke-width="2",
+                    d="M4 6h16M4 12h8m-8 6h16") {}
+        }
+    }
+}

src/components/static_components/mod.rs

@@ -0,0 +1,3 @@
+pub mod close_button;
+pub mod indicator;
+pub mod menu_button;

src/components/sub_components/error_block.rs

@@ -0,0 +1,25 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+use crate::components::static_components::indicator::ErrorSvg;
+
+#[component(inline_props)]
+pub fn ErrorBlock<'a, G: Html>(cx: Scope<'a>, error: RcSignal<String>) -> View<G> {
+    let error = create_ref(cx, error);
+    let is_empty = create_selector(cx, || error.get().is_empty());
+
+    view! { cx,
+        (match !(*is_empty.get()) {
+            true => { view!{cx,
+                div (role="alert", class="alert alert-error") {
+                    // Error icon
+                    ErrorSvg {}
+
+                    // Error text
+                    span {(*error.get())}
+                }
+            }},
+            false => {view!{cx,}},
+        })
+    }
+}

src/components/sub_components/mod.rs

@@ -0,0 +1 @@
+pub mod error_block;

src/global_state.rs

@@ -15,17 +15,76 @@ pub struct AppState {
     pub auth: AuthData,
     #[rx(nested)]
     pub modals_open: ModalOpenData,
+    #[rx(nested)]
+    pub style: StyleData,
 }
 
 #[derive(Serialize, Deserialize, ReactiveState, Clone)]
 #[rx(alias = "AuthDataRx")]
 pub struct AuthData {
     pub state: LoginState,
+    pub pending_username: String,
     pub username: Option<String>,
     pub remember_me: Option<bool>,
     pub auth_info: Option<WebAuthInfo>,
 }
 
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ModalOpenDataRx")]
+pub struct ModalOpenData {
+    pub login: OpenState,
+    pub register: OpenState,
+    pub forgot_password: OpenState,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "StyleDataRx")]
+pub struct StyleData {
+    #[rx(nested)]
+    pub theme: ThemeData,
+}
+
+#[derive(Serialize, Deserialize, ReactiveState, Clone)]
+#[rx(alias = "ThemeDataRx")]
+pub struct ThemeData {
+    pub current: String,
+    pub pool: String,
+    pub pickleball: String,
+    pub table_tennis: String,
+    pub default: String,
+}
+
+pub fn get_global_state_creator() -> GlobalStateCreator {
+    GlobalStateCreator::new().build_state_fn(get_build_state)
+}
+
+#[engine_only_fn]
+pub async fn get_build_state() -> AppState {
+    AppState {
+        auth: AuthData {
+            state: LoginState::Unknown,
+            pending_username: String::new(),
+            username: None,
+            remember_me: None,
+            auth_info: None,
+        },
+        modals_open: ModalOpenData {
+            login: OpenState::Closed,
+            register: OpenState::Closed,
+            forgot_password: OpenState::Closed,
+        },
+        style: StyleData {
+            theme: ThemeData {
+                current: "light".to_owned(),
+                pool: "autumn".to_owned(),
+                pickleball: "lemonade".to_owned(),
+                table_tennis: "nord".to_owned(),
+                default: "light".to_owned(),
+            },
+        },
+    }
+}
+
 impl AuthDataRx {
     #[cfg(client)]
     pub fn handle_log_in(&self, auth_info: WebAuthInfo) {
@@ -72,35 +131,6 @@ impl AuthDataRx {
     }
 }
 
-#[derive(Serialize, Deserialize, ReactiveState, Clone)]
-#[rx(alias = "ModalOpenDataRx")]
-pub struct ModalOpenData {
-    pub login: OpenState,
-    pub register: OpenState,
-    pub forgot_password: OpenState,
-}
-
-pub fn get_global_state_creator() -> GlobalStateCreator {
-    GlobalStateCreator::new().build_state_fn(get_build_state)
-}
-
-#[engine_only_fn]
-pub async fn get_build_state() -> AppState {
-    AppState {
-        auth: AuthData {
-            state: LoginState::Unknown,
-            username: None,
-            remember_me: None,
-            auth_info: None,
-        },
-        modals_open: ModalOpenData {
-            login: OpenState::Closed,
-            register: OpenState::Closed,
-            forgot_password: OpenState::Closed,
-        },
-    }
-}
-
 // Client only code to check if they're authenticated
 #[cfg(client)]
 impl AuthDataRx {

src/main.rs

@@ -70,17 +70,20 @@ pub fn main<G: Html>() -> PerseusApp<G> {
 
     PerseusApp::new()
         .global_state_creator(crate::global_state::get_global_state_creator())
+        .template(crate::templates::index::get_template())
+        .template(crate::templates::pickleball::index::get_template())
         .template(crate::templates::pool::index::get_template())
         .template(crate::templates::pool::add_game_form::get_template())
         .template(crate::templates::pool::one_v_one_board::get_template())
         .template(crate::templates::pool::overall_board::get_template())
+        .template(crate::templates::table_tennis::index::get_template())
         .capsule_ref(&*crate::capsules::login_form::LOGIN_FORM)
         .capsule_ref(&*crate::capsules::forgot_password_form::FORGOT_PASSWORD_FORM)
         .capsule_ref(&*crate::capsules::register_form::REGISTER_FORM)
         .error_views(crate::error_views::get_error_views())
         .index_view(|cx| {
             view! { cx,
-                html (class = "flex w-full h-full"){
+                html (class = "flex w-full h-full", data-theme = "light"){
                     head {
                         meta(charset = "UTF-8")
                         meta(name = "viewport", content = "width=device-width, initial-scale=1.0")

src/state_enums.rs

@@ -10,23 +10,23 @@ pub enum LoginState {
 }
 
 #[derive(Serialize, Deserialize, Clone)]
-pub enum GameState {
+pub enum ContentState {
     None,
     Pool,
     Pickleball,
     TableTennis,
 }
 
-impl Display for GameState {
+impl Display for ContentState {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         write!(
             f,
             "{}",
             match self {
-                GameState::None => "",
-                GameState::Pool => "Pool",
-                GameState::Pickleball => "Pickle Ball",
-                GameState::TableTennis => "Table Tennis",
+                ContentState::None => "",
+                ContentState::Pool => "Pool",
+                ContentState::Pickleball => "Pickle Ball",
+                ContentState::TableTennis => "Table Tennis",
             }
         )
     }

src/templates/index.rs

@@ -0,0 +1,24 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::None) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("").view(index_page).head(head).build()
+}

src/templates/mod.rs

@@ -1,3 +1,4 @@
+pub mod index;
 pub mod pickleball;
 pub mod pool;
 pub mod table_tennis;

src/templates/pickleball/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::Pickleball) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("pickleball")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/pickleball/mod.rs

@@ -0,0 +1 @@
+pub mod index;

src/templates/pool/add_game_form.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
@@ -31,7 +31,7 @@ fn add_game_form_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, state: &'a PageStat
     };
 
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             div (class = "flex flex-wrap") {
                 select {
                     option (value="red")
@@ -91,7 +91,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 // Template
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("add-game-form")
+    Template::build("pool/add-game-form")
         .request_state_fn(get_request_state)
         .view_with_state(add_game_form_page)
         .head(head)

src/templates/pool/index.rs

@@ -1,10 +1,10 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             // Anything we put in here will be rendered inside the `<main>` block of the layout
             p { "Hello World!" }
             br {}
@@ -20,5 +20,5 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("").view(index_page).head(head).build()
+    Template::build("pool").view(index_page).head(head).build()
 }

src/templates/pool/one_v_one_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, state_enums::GameState};
+use crate::{components::layout::Layout, state_enums::ContentState};
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
 use sycamore::prelude::*;
@@ -9,7 +9,7 @@ struct PageState {}
 
 fn one_v_one_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageStateRx) -> View<G> {
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             p { "leaderboard" }
         }
     }
@@ -31,7 +31,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("one-v-one-board")
+    Template::build("pool/one-v-one-board")
         .request_state_fn(get_request_state)
         .view_with_state(one_v_one_board_page)
         .head(head)

src/templates/pool/overall_board.rs

@@ -1,4 +1,4 @@
-use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::GameState};
+use crate::{components::layout::Layout, global_state::AppStateRx, state_enums::ContentState};
 
 use perseus::prelude::*;
 use serde::{Deserialize, Serialize};
@@ -12,7 +12,7 @@ fn overall_board_page<'a, G: Html>(cx: BoundedScope<'_, 'a>, _state: &'a PageSta
     let _global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
     view! { cx,
-        Layout(game = GameState::Pool) {
+        Layout(content_state = ContentState::Pool) {
             ul {
                 (View::new_fragment(
                     vec![],
@@ -38,7 +38,7 @@ fn head(cx: Scope) -> View<SsrNode> {
 }
 
 pub fn get_template<G: Html>() -> Template<G> {
-    Template::build("overall-board")
+    Template::build("pool/overall-board")
         .request_state_fn(get_request_state)
         .view_with_state(overall_board_page)
         .head(head)

src/templates/table_tennis/index.rs

@@ -0,0 +1,27 @@
+use crate::{components::layout::Layout, state_enums::ContentState};
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+fn index_page<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        Layout(content_state = ContentState::TableTennis) {
+            // Anything we put in here will be rendered inside the `<main>` block of the layout
+            p { "Hello World!" }
+            br {}
+        }
+    }
+}
+
+#[engine_only_fn]
+fn head(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        title { "Index Page" }
+    }
+}
+
+pub fn get_template<G: Html>() -> Template<G> {
+    Template::build("table_tennis")
+        .view(index_page)
+        .head(head)
+        .build()
+}

src/templates/table_tennis/mod.rs

@@ -0,0 +1 @@
+pub mod index;

tailwind.config.js

@@ -1,3 +1,5 @@
+const { default: daisyui } = require("daisyui");
+
 module.exports = {
   purge: {
     mode: "all",
@@ -10,5 +12,8 @@ module.exports = {
   },
   theme: {},
   variants: {},
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: ["light", "dark", "lemonade", "autumn", "nord"],
+  },
 };