Dark mode!

6 files changed, 39 insertions, 11 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 63608c0..17bbed7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -8,12 +8,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-bottom: black solid 1px;
+    border-bottom: light-dark(#d3d3d3, black) solid 1px;
     padding: 0 10px;
+    background-color: light-dark(#f5f5f5, #2e2e2e);
 
     h1 {
         padding: 0;
         margin: 0;
+
     }
 
     div {
@@ -21,4 +23,8 @@
         align-items: center;
         gap: 10px;
     }
+
+    a {
+        color: light-dark(black, white);
+    }
 }
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..c8add60 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,6 +1,6 @@
 :host {
     display: block;
-    border: 2px solid #000;
+    /*border: 2px solid #000;*/
     border-radius: 5px;
     padding: 10px 20px;
 }
@@ -9,7 +9,7 @@
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
-   border-radius: 5px;  
+   border-radius: 5px;
    width: 20%;
    visibility: visible;
 
@@ -17,5 +17,5 @@
 
 #create-button {
    padding: 10px 20px;
-   
-}
\ No newline at end of file
+
+}
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index cae0992..c752de3 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -10,11 +10,12 @@
     display: flex;
     flex-direction: column;
     max-width: 330px;
-    gap: 5px;
+    gap: 7px;
     backdrop-filter: blur(10px);
     background-color: rgba(0, 0, 0, 0.1);
     padding: 30px;
     color: white;
+    border-radius: 5px;
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index aff108f..516b07b 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,6 +1,6 @@
 <div id="box">
     <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-    <p>Login:</p>
+    <h1>Login</h1>
     <input placeholder="Username" type="text" #username>
     <input placeholder="Password" type="password" #password>
     <button type="button" (click)="login(username.value, password.value)">Login</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 bbc3f2c..fa3ed4f 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
@@ -4,7 +4,7 @@
     display: block;
     width: 30%;
     border-radius: 5px;
-    
+
 }
 
 li, div {
@@ -16,9 +16,9 @@ li, div {
 }
 
 #search-form {
-    background-color: #d9d9d9;
+    background-color: light-dark(#d9d9d9, #1b1b1b);
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
-    border-radius: 5px;  
+    border-radius: 5px;
     visibility: visible;
- }
\ No newline at end of file
+ }
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index fdf67c7..dc7dcea 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1,5 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
+:root {
+    color-scheme: light dark;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -7,6 +11,7 @@
 html, body {
     margin: 0;
     height: 100%;
+    background-color: light-dark(white, #242424);
 }
 
 body {
@@ -15,8 +20,24 @@ body {
 
 input {
     font-size: 14pt;
+    padding: 5px;
+    border-radius: 5px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
 }
 
 button, .button {
     font-size: 14pt;
+    padding: 5px 10px;
+    border-radius: 5px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
 }