From ac6fa949a754778f268fb91f0b32464c153191ef Mon Sep 17 00:00:00 2001
From: Akash Keshav <112591754+domesticchores@users.noreply.github.com>
Date: Fri, 4 Apr 2025 20:49:15 -0400
Subject: refactor login-page and need-list to support light/dark mode

---
 .../src/app/components/login/login.component.css   | 54 ++++++++++++++++++----
 .../src/app/components/login/login.component.html  | 15 +++---
 2 files changed, 55 insertions(+), 14 deletions(-)

(limited to 'ufund-ui/src/app/components/login')

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>
+
-- 
cgit v1.2.3


From 0d0959d6ac3e81869ba848371d9b6ea12710debc Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 7 Apr 2025 11:52:24 -0400
Subject: Fix colors on login / signup pages

---
 ufund-ui/src/app/components/login/login.component.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'ufund-ui/src/app/components/login')

diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index fc1d9da..f38865b 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -8,7 +8,6 @@
     background-color: transparent;
     background-blend-mode: darken;
     margin-top: -150px;
-    overflow: hidden;
 }
 
 #bg-cr {
@@ -40,10 +39,9 @@
     min-height: 50vh;
     margin-top: 15vh;
     gap: 10px;
-    /* background-color: var(--background-color); */
+    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
     backdrop-filter: blur(10px);
     padding: 50px 40px;
-    color: white;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
@@ -71,4 +69,4 @@
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-decoration-color: var(--highlight-color);
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3


From bb4e0e55fee7ec8f34c36e6299301d612a0de2ce Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Mon, 7 Apr 2025 16:46:53 -0400
Subject: Redo login page

---
 .../src/app/components/login/login.component.css   | 40 ++++++++++++++++++----
 .../src/app/components/login/login.component.html  |  9 +++--
 2 files changed, 37 insertions(+), 12 deletions(-)

(limited to 'ufund-ui/src/app/components/login')

diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index f38865b..810d924 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -7,7 +7,7 @@
     overflow: hidden;
     background-color: transparent;
     background-blend-mode: darken;
-    margin-top: -150px;
+    margin-top: -66px;
 }
 
 #bg-cr {
@@ -16,7 +16,8 @@
     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");
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg");
+    background-size: cover;
     opacity: calc(var(--opacity-cr));
     z-index: 1;
 }
@@ -26,31 +27,38 @@
     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");
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg");
+    /*backdrop-filter: brightness(1%);*/
+    background-size: cover;
     opacity: var(--opacity-jf);
     z-index: 1;
 }
 
 #box {
+    animation: ease-in-out fadeIn .1s;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    /*align-items: center;*/
     aspect-ratio: 4/5;
     min-height: 50vh;
-    margin-top: 15vh;
+    /*margin-top: 15vh;*/
     gap: 10px;
     background-color: color-mix(in srgb, var(--background-color), transparent 50%);
     backdrop-filter: blur(10px);
-    padding: 50px 40px;
+    padding: 30px;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
     border-color: var(--highlight-color);
     z-index: 2;
+    justify-content: center;
 }
 
 #greeting {
-    font-size: 32px;
+    color: var(--highlight-color);
+    padding: 0;
+    margin: 0;
+    /*font-size: 32px;*/
     /* text-decoration: underline;
     text-decoration-color: var(--highlight-color); */
 }
@@ -70,3 +78,21 @@
     text-decoration-thickness: 1px;
     text-decoration-color: var(--highlight-color);
 }
+
+input {
+    width: 100%;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+@keyframes fadeIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 27eab96..8b8f5b3 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,11 +1,10 @@
 <div id="box">
-    <h1 id="greeting">Login</h1>
+    <h2 id="greeting">Welcome back,</h2>
+    <h1>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>
+    <button type="button" (click)="login(username.value, password.value)">Login</button>
+    <span>New? <a routerLink="/signup">Create an account.</a></span>
 </div>
 <div id="bg-cr"></div>
 <div id="bg-jf"></div>
-- 
cgit v1.2.3