11 files changed, 146 insertions, 35 deletions
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts
index 4b76654..c83db8a 100644
--- a/ufund-ui/src/app/app-routing.module.ts
+++ b/ufund-ui/src/app/app-routing.module.ts
@@ -8,12 +8,12 @@ import {FundingBasketComponent} from './components/funding-basket/funding-basket
 import {NeedPageComponent} from './components/need-page/need-page.component';
 
 const routes: Routes = [
-    {path: '', component: HomePageComponent},
-    {path: 'login', component: LoginComponent},
-    {path: 'cupboard', component: CupboardComponent},
-    {path: 'dashboard', component: DashboardComponent},
-    {path: 'basket', component: FundingBasketComponent},
-    {path: 'need/:id', component: NeedPageComponent}
+    { path: '',          component: HomePageComponent,      title: "Home | JS"      },
+    { path: 'login',     component: LoginComponent,         title: "Login | JS"     },
+    { path: 'cupboard',  component: CupboardComponent,      title: "Cupboard | JS"  },
+    { path: 'dashboard', component: DashboardComponent,     title: "Dashboard | JS" },
+    { path: 'basket',    component: FundingBasketComponent, title: "Basket | JS"    },
+    { path: 'need/:id',  component: NeedPageComponent,      title: "Need | JS"      }
 ];
 
 @NgModule({
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index e69de29..17bbed7 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -0,0 +1,30 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: light-dark(#d3d3d3, black) solid 1px;
+    padding: 0 10px;
+    background-color: light-dark(#f5f5f5, #2e2e2e);
+
+    h1 {
+        padding: 0;
+        margin: 0;
+
+    }
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    a {
+        color: light-dark(black, white);
+    }
+}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index a490237..3058117 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,6 +1,17 @@
-
-<h1>jelly solutions</h1>
-<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button>
-<hr>
+<div id="header">
+    <span>
+        <a routerLink="/">
+            <h1>Jelly Solutions</h1>
+        </a>
+    </span>
+    <div>
+        <a routerLink="/dashboard">Dashboard</a>
+        <a routerLink="/cupboard">Cupboard</a>
+        <a routerLink="/basket">Basket</a>
+        <span>{{currentUser$ | async}}</span>
+        <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button>
+        <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button>
+    </div>
+</div>
 
 <router-outlet />
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/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css
index e69de29..5f65225 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.css
+++ b/ufund-ui/src/app/components/home-page/home-page.component.css
@@ -0,0 +1,7 @@
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html
index d41e670..b2eed0b 100644
--- a/ufund-ui/src/app/components/home-page/home-page.component.html
+++ b/ufund-ui/src/app/components/home-page/home-page.component.html
@@ -1,3 +1,2 @@
-<a routerLink="/login">
-    Login/Sign Up
-</a>
-\ No newline at end of file
+<h1>Helping fund coral reef and marine life conservation</h1>
+<button routerLink="/cupboard">View needs</button>
diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css
index 435cc87..4bfcbb8 100644
--- a/ufund-ui/src/app/components/login/login.component.css
+++ b/ufund-ui/src/app/components/login/login.component.css
@@ -1,8 +1,24 @@
-:host, .border {
-  display: flex;
-  flex-direction: column;
-    max-width: 300px;
-    gap: 5px
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");
+}
+
+#box {
+    display: flex;
+    flex-direction: column;
+    max-width: 350px;
+    gap: 10px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.1);
+    padding: 30px;
+    color: white;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
 }
 
 .border {
diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html
index 2cdb6d0..e04ec23 100644
--- a/ufund-ui/src/app/components/login/login.component.html
+++ b/ufund-ui/src/app/components/login/login.component.html
@@ -1,7 +1,12 @@
-<span *ngIf="next" style="color: red">You must be logged in to view this page</span>
-<p>Login:</p>
-<input placeholder="Username" type="text" #username>
-<input placeholder="Password" type="password" #password>
-<button type="button" (click)="login(username.value, password.value)">Login</button>
-<button type="button" (click)="signup(username.value, password.value)">Create Account</button>
-<span *ngIf="statusText">{{statusText | async}}</span>
+<div id="box">
+    <span *ngIf="next" style="color: red">You must be logged in to view this page</span>
+    <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>
+    <div>
+        New? <a href="/">Create an account</a>
+    </div>
+<!--    <button type="button" (click)="signup(username.value, password.value)">Create Account</button>-->
+    <span *ngIf="statusText">{{statusText | async}}</span>
+</div>
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/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 90fd459..b2579c9 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -1,4 +1,4 @@
-<button routerLink="/dashboard">Back to dashboard</button>
+<button routerLink="/cupboard">Back to cupboard</button>
 <h1>Viewing Need: {{need?.name}}</h1>
 <a>internal id: {{need?.id}}</a>
 <div style="display: flex; column-gap: 6px;">
@@ -19,4 +19,4 @@
 
 <p>Goal: {{need?.maxGoal}}</p>
 <p>Current: {{need?.current}}</p>
-<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
-\ No newline at end of file
+<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css
index 90d4ee0..bad2232 100644
--- a/ufund-ui/src/styles.css
+++ b/ufund-ui/src/styles.css
@@ -1 +1,44 @@
 /* You can add global styles to this file, and also import other style files */
+
+:root {
+    color-scheme: light dark;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+    height: 100%;
+    background-color: light-dark(white, #242424);
+}
+
+body {
+    font-family: sans-serif;
+}
+
+input {
+    font-size: 14pt;
+    padding: 5px;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
+}
+
+button, .button {
+    font-size: 14pt;
+    padding: 6px 10px;
+    border-radius: 5px;
+    border-style: none;
+    background-color: light-dark(#ebebeb, #3a3a3a);
+
+    &:hover {
+        background-color: light-dark(#e1e1e1, #444444);
+    }
+}