From 1ac878b4aaa19ab889c7a98b7dab6acd57c778b3 Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Sat, 5 Apr 2025 22:00:00 -0400
Subject: finish styling basket and list; add persistent theme via
 localStorage. -ak

---
 ufund-ui/src/app/app.component.ts                       | 17 ++++++++++++++++-
 .../funding-basket/funding-basket.component.css         |  6 +++---
 .../funding-basket/funding-basket.component.html        |  2 +-
 .../app/components/need-list/need-list.component.css    |  8 --------
 .../app/components/need-list/need-list.component.html   |  2 +-
 ufund-ui/src/styles.css                                 | 10 +++++++++-
 6 files changed, 30 insertions(+), 15 deletions(-)

(limited to 'ufund-ui')

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 635061c..2fecc2d 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -38,6 +38,15 @@ export class AppComponent implements OnInit {
             this.authService.restoreLogin(dataParsed.username, dataParsed.key)
             console.log("Key found", dataParsed.key)
         }
+
+        let theme = localStorage.getItem("theme")
+        if(!theme) {
+            // if no color scheme is set, get the system settings
+            let preferredTheme = this.document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";
+            localStorage.setItem("theme",preferredTheme);
+            theme = preferredTheme;
+        }
+        this.document.body.parentElement!.setAttribute("theme",theme);
     }
 
     login() {
@@ -50,8 +59,14 @@ export class AppComponent implements OnInit {
     }
 
     toggleColorScheme() {
-        let newTheme = this.document.body.parentElement!.getAttribute("theme") == "light" ? "dark" : "light";
+        let theme = localStorage.getItem("theme");
+        // fallback
+        if (!theme) {
+            theme = "light";
+        }
+        let newTheme = theme == "light" ? "dark" : "light";
         this.document.body.parentElement!.setAttribute("theme",newTheme);
+        localStorage.setItem("theme", newTheme);
         console.log(newTheme, this.document.body.parentElement);
     }
 
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
index c46ef57..bd41fda 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css
@@ -11,7 +11,7 @@
 }
 
 .needEntry {
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     display: flex;
     flex-direction: column;
     border-radius: 5px;
@@ -66,13 +66,13 @@
 
 .clickable {
     padding: 10px;
-    background-color: #3a3a3a;
+    background-color: var(--secondary-color);
     border-radius: 5px;
     cursor: pointer;
 }
 
 .clickable:hover {
-    background-color: #444444;
+    background-color: var(--tertiary-color);
 }
 
 .actionArea {
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
index 52b35c1..b88ef31 100644
--- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
+++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html
@@ -63,7 +63,7 @@
                 </div>
 
                 <div class="actionArea">
-                    <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution">
+                    <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution sort-scheme">
                     <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)">
                         <span class="icon">delete</span> Remove from Basket
                     </button>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 0172ff4..56ae6a6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -37,14 +37,6 @@ select {
     }
 }
 
-.sort-scheme {
-    background-color: var(--background-color);
-    border-style: solid;
-    border-color: var(--foreground-color);
-    border-radius: 5px;
-    border-width: 1px;
-}
-
 #sortArea {
     display: flex;
     flex-direction: row;
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 18da39c..e9f70f6 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -1,7 +1,7 @@
 <div id="header">
     <div id="searchArea">
         <form id="search-form" #searchForm="ngForm">
-            <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
+            <input type="text" name="search" class="wide-input sort-scheme" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel>
             <input type="reset" value="Clear" (click)="search(null)"> <br>
         </form>
     </div>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 9fce47d..09e354c 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -65,7 +65,7 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
     border-radius: 9999px;
     border-style: none;
     font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--background-color);
+    background-color: var(--tertiary-color);
     display: flex;
     gap: 5px;
     text-align: center;
@@ -91,6 +91,14 @@ button, input[type=button], input[type=reset], input[type=submit], .button {
     font-family: 'Material Symbols Outlined'
 }
 
+.sort-scheme {
+    background-color: var(--background-color);
+    border-style: solid;
+    border-color: var(--tertiary-color);
+    border-radius: 5px;
+    border-width: 1px;
+}
+
 h1 {
     font-size: 40px;
 }
-- 
cgit v1.2.3