refactor login-page and need-list to support light/dark mode

2 files changed, 55 insertions, 14 deletions

diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index b56b4eb..fc1d9da 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -2,29 +2,60 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
-    /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/
-    background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg");
+    width: 100vw;
+    height: 150vh;
+    overflow: hidden;
+    background-color: transparent;
     background-blend-mode: darken;
-    margin-top: -66px
+    margin-top: -150px;
+    overflow: hidden;
+}
+
+#bg-cr {
+    position: absolute;
+    margin-top: -150px;
+    top:0;
+    width: 100vw;
+    height: calc(100vh + 150px);
+    background: linear-gradient(to bottom, rgba(84, 45, 0, 0) 30%, rgba(84, 45, 0, 0.1) 40%), url("/login-cr.png");
+    opacity: calc(var(--opacity-cr));
+    z-index: 1;
+}
 
+#bg-jf {
+    position: absolute;
+    top:0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 30%), url("/login-jf.png");
+    opacity: var(--opacity-jf);
+    z-index: 1;
 }
 
 #box {
     display: flex;
     flex-direction: column;
-    max-width: 350px;
+    align-items: center;
+    aspect-ratio: 4/5;
+    min-height: 50vh;
+    margin-top: 15vh;
     gap: 10px;
+    /* background-color: var(--background-color); */
     backdrop-filter: blur(10px);
-    background-color: rgba(0, 0, 0, 0.1);
-    padding: 30px;
+    padding: 50px 40px;
     color: white;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
-    border-color: rgb(140, 140, 255);
+    border-color: var(--highlight-color);
+    z-index: 2;
 }
 
+#greeting {
+    font-size: 32px;
+    /* text-decoration: underline;
+    text-decoration-color: var(--highlight-color); */
+}
 .border {
     border-style: solid;
     border-width: 1px;
@@ -34,3 +65,10 @@
     background-color: white;
     box-shadow: 0 0 10px 10px black;
 }
+
+#signup {
+    color: var(--highlight-color);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: var(--highlight-color);
+}
\ No newline at end of file
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 1017d0f..27eab96 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,9 +1,12 @@
 <div id="box">
-    <h1>Login</h1>
-    <input placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)">
-    <input placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)">
-    <button type="button" (click)="login(username.value, password.value)">Login</button>
-    <div>
-        New? <a routerLink="/signup">Create an account</a>
+    <h1 id="greeting">Login</h1>
+    <input class="form-input" placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)">
+    <input class="form-input" placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)">
+    <button  class="form-submit" type="button" (click)="login(username.value, password.value)">Login</button>
+    <div style="display: flex; column-gap: 4px;">
+        <p>New?</p> <a routerLink="/signup"><p id="signup">Create an account.</p></a>
     </div>
 </div>
+<div id="bg-cr"></div>
+<div id="bg-jf"></div>
+