Docker shit

frontend/src/darkmode.rs

@@ -19,23 +19,60 @@ use yew::prelude::*;
 /// ```
 #[function_component]
 pub fn ThemeToggle() -> Html {
+    let is_dark = use_state(|| {
+        if let Some(window) = web_sys::window() {
+            if let Some(document) = window.document() {
+                if let Some(html) = document.document_element() {
+                    return html.get_attribute("data-theme").unwrap_or_default() == "dark";
+                }
+            }
+        }
+        false
+    });
+
     let onclick = {
-        Callback::from(|_| {
+        let is_dark = is_dark.clone();
+        Callback::from(move |_| {
             if let Some(window) = web_sys::window() {
                 if let Some(document) = window.document() {
                     if let Some(html) = document.document_element() {
                         let current = html.get_attribute("data-theme").unwrap_or_default();
                         let new_theme = if current == "dark" { "" } else { "dark" };
                         let _ = html.set_attribute("data-theme", new_theme);
+                        is_dark.set(new_theme == "dark");
                     }
                 }
             }
         })
     };
 
+    let icon_html = if *is_dark {
+        // Sun SVG for dark mode
+        html! {
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
+                <circle cx="12" cy="12" r="4" />
+                <path d="M12 2v2" />
+                <path d="M12 20v2" />
+                <path d="m4.93 4.93 1.41 1.41" />
+                <path d="m17.66 17.66 1.41 1.41" />
+                <path d="M2 12h2" />
+                <path d="M20 12h2" />
+                <path d="m6.34 17.66-1.41 1.41" />
+                <path d="m19.07 4.93-1.41 1.41" />
+            </svg>
+        }
+    } else {
+        // Moon SVG for light mode
+        html! {
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon">
+                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+            </svg>
+        }
+    };
+
     html! {
-        <button {onclick} class="sidebar-button">
-            {"🌙"}
+        <button {onclick} class="sidebar-button theme-toggle-btn">
+            {icon_html}
         </button>
     }
 }

frontend/src/pages/setup.rs

@@ -20,6 +20,7 @@ pub struct AdminSetupScheme {
     pub first_name: String,
     pub last_name: String,
     pub username: String,
+    pub is_admin: bool,
     pub pwd: String,
 }
 
@@ -154,6 +155,7 @@ pub fn initial_admin_setup() -> Html {
                     first_name: first_name_val,
                     last_name: last_name_val,
                     username: username_val,
+                    is_admin: true,
                     pwd: pwd_val,
                 };
 

frontend/src/styles/_variables.scss

@@ -11,6 +11,8 @@
   --color: #000000;
   --color-container: #f0f0f0;
   --color-text: #000000;
+  --color-placeholder: #757575;
+  --color-input: #1a1a1a;
 }
 
 [data-theme='dark'] {
@@ -26,4 +28,7 @@
   --color: #000000;
   --color-container: #1a1a1a;
   --color-text: #000000;
+  --color-placeholder: #a0a0a0;
+  --color-input: #f0f0f0;
 }
+

frontend/src/styles/components/_darkmode.scss

@@ -6,11 +6,17 @@
 	  padding: 0.75rem;
 	  font-size: 1rem;
 	  border-radius: 0.5rem;
-	  color: white;
+	  color: var(--color-input);
 	  border: none;
 	  cursor: pointer;
 	  margin-bottom: 15px;
 	}
+
+	input::placeholder,
+	textarea::placeholder {
+	  color: var(--color-placeholder);
+	  opacity: 1;
+	}
 	
 	button:hover  {
 	  cursor: pointer;

frontend/src/styles/components/_sidebar.scss

@@ -55,6 +55,12 @@
     cursor: pointer;
     text-align: left;
     margin-top: var(--spacing-sm);
+
+    &.theme-toggle-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
   .sidebar-header {

frontend/src/styles/main.scss

@@ -90,10 +90,12 @@ body {
     padding: 16px;
     font-size: 1.8rem;
     background-color: #f0f0f0;
+    color: var(--color-input);
     box-shadow: #6d6d6d;
     box-shadow: 6px 6px 8px;
   }
 
+
   input[type="checkbox"] {
     width: auto;
   }
@@ -123,4 +125,15 @@ body {
   box-sizing: border-box;
 }
 
+input, select, textarea {
+  color: var(--color-input);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-placeholder);
+  opacity: 1;
+}
+
+