Redo login page

8 files changed, 80 insertions, 13 deletions

diff --git a/ufund-ui/public/login-cr.jpg b/ufund-ui/public/login-cr.jpg
new file mode 100644
index 0000000..6e267ae
--- /dev/null
+++ b/ufund-ui/public/login-cr.jpg
diff --git a/ufund-ui/public/login-cr.png b/ufund-ui/public/login-cr.png
deleted file mode 100644
index 6419821..0000000
--- a/ufund-ui/public/login-cr.png
+++ /dev/null
diff --git a/ufund-ui/public/login-jf.jpg b/ufund-ui/public/login-jf.jpg
new file mode 100644
index 0000000..769fe2a
--- /dev/null
+++ b/ufund-ui/public/login-jf.jpg
diff --git a/ufund-ui/public/login-jf.png b/ufund-ui/public/login-jf.png
deleted file mode 100644
index ef0e111..0000000
--- a/ufund-ui/public/login-jf.png
+++ /dev/null
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>
diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css
index 207135f..4073931 100644
--- a/ufund-ui/src/app/components/signup/signup.component.css
+++ b/ufund-ui/src/app/components/signup/signup.component.css
@@ -11,17 +11,19 @@
 }
 
 #box {
+    animation: ease-in-out fadeIn .1s;
     display: flex;
     flex-direction: column;
     max-width: 500px;
     gap: 10px;
     backdrop-filter: blur(10px);
     background-color: color-mix(in srgb, var(--background-color), transparent 50%);
-    padding: 30px;
+    padding: 90px 30px;
     border-radius: 5px;
     border-style: solid;
     border-width: 1px;
     border-color: var(--highlight-color);
+    z-index: 2;
 
     & > div {
         display: flex;
@@ -85,3 +87,41 @@
     }
 }
 
+h1 {
+    margin-top: 0;
+}
+
+#bg-cr {
+    position: absolute;
+    margin-top: -150px;
+    top:0;
+    width: 100vw;
+    height: calc(100vh + 150px);
+    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;
+}
+
+#bg-jf {
+    position: absolute;
+    top:0;
+    width: 100vw;
+    height: 100vh;
+    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;
+}
+
+@keyframes fadeIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
+
diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html
index ef2fc27..78f5099 100644
--- a/ufund-ui/src/app/components/signup/signup.component.html
+++ b/ufund-ui/src/app/components/signup/signup.component.html
@@ -26,3 +26,5 @@
     </div>
     <span>Already have an account? <a routerLink="/login">Log in</a></span>
 </div>
+<div id="bg-cr"></div>
+<div id="bg-jf"></div>