From b4a9cd9d540d42a61bee9045d41ada392305a8d5 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Fri, 4 Apr 2025 14:53:32 -0400 Subject: add light/dark mode toggle, only homepage is fully functional. -ak --- .../src/app/components/home-page/home-page.component.css | 16 ++++++++++++---- .../app/components/home-page/home-page.component.html | 10 +++++++--- .../src/app/components/home-page/home-page.component.ts | 16 ++++++++++++++-- 3 files changed, 33 insertions(+), 9 deletions(-) (limited to 'ufund-ui/src/app/components') 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 a10377f..f6e5631 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 @@ -6,7 +6,6 @@ justify-content: center; overflow: clip; } - #hero { display: flex; /*flex-direction: column;*/ @@ -19,12 +18,21 @@ h1 { max-width: 1200px; } +#cr { + opacity: var(--opacity-cr); +} + #jf { - /*position: absolute;*/ + opacity: var(--opacity-jf); +} + +.text-highlight { + text-decoration: underline; + color: var(--highlight-color); } #right { - max-width: 500px; + max-width: 450px; max-height: 500px; display: flex; justify-content: center; @@ -33,6 +41,6 @@ h1 { } #left { - max-width: 500px; + max-width: 550px; z-index: 1; } 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 7a7ff96..051132e 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,10 +1,14 @@
-

Helping fund coral reef and marine life conservation

+

Helping fund coral reef and + marine life conservation.

View our online cupboard holding all needs related to sea life preservation

- +
diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts index 95e8962..71c2549 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.ts +++ b/ufund-ui/src/app/components/home-page/home-page.component.ts @@ -1,4 +1,5 @@ -import {Component} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-home-page', @@ -6,6 +7,17 @@ import {Component} from '@angular/core'; templateUrl: './home-page.component.html', styleUrl: './home-page.component.css' }) -export class HomePageComponent { +export class HomePageComponent implements OnInit { + + constructor( + @Inject(DOCUMENT) private document: Document + ) {} + ngOnInit(): void { + console.log(this.document.documentElement); + } + + + + } -- cgit v1.2.3 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 +++--- .../components/need-list/need-list.component.css | 14 ++++-- .../components/need-list/need-list.component.html | 4 +- .../components/need-page/need-page.component.css | 2 +- 5 files changed, 69 insertions(+), 20 deletions(-) (limited to 'ufund-ui/src/app/components') 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 @@
-

Login

- - - -
- New? Create an account +

Login

+ + + +
+

New?

Create an account.
+
+
+ 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 e17609b..0172ff4 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 @@ -5,7 +5,7 @@ } .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -37,6 +37,14 @@ select { } } +.sort-scheme { + background-color: var(--background-color); + border-style: solid; + border-color: var(--foreground-color); + border-radius: 5px; + border-width: 1px; +} + #sortArea { display: flex; flex-direction: row; @@ -86,7 +94,7 @@ select { .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; height: 130px; @@ -96,7 +104,7 @@ select { } .clickable:hover { - background-color: #444444; + background-color: var(--tertiary-color); } .actionArea { diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index 84f80dc..18da39c 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -7,7 +7,7 @@
- @@ -16,7 +16,7 @@ {{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}} - +
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 44db4b4..47aa8b3 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -47,7 +47,7 @@ aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; - box-shadow: rgb(0, 40, 70) 0 0 50px; + box-shadow: var(--dark-highlight-clor) 0 0 50px; } .urgent { -- cgit v1.2.3 From 1ac878b4aaa19ab889c7a98b7dab6acd57c778b3 Mon Sep 17 00:00:00 2001 From: Akash Keshav <112591754+domesticchores@users.noreply.github.com> Date: Sat, 5 Apr 2025 22:00:00 -0400 Subject: finish styling basket and list; add persistent theme via localStorage. -ak --- .../app/components/funding-basket/funding-basket.component.css | 6 +++--- .../app/components/funding-basket/funding-basket.component.html | 2 +- ufund-ui/src/app/components/need-list/need-list.component.css | 8 -------- ufund-ui/src/app/components/need-list/need-list.component.html | 2 +- 4 files changed, 5 insertions(+), 13 deletions(-) (limited to 'ufund-ui/src/app/components') diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index c46ef57..bd41fda 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -11,7 +11,7 @@ } .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -66,13 +66,13 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; } .clickable:hover { - background-color: #444444; + background-color: var(--tertiary-color); } .actionArea { diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index 52b35c1..b88ef31 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -63,7 +63,7 @@
- + 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 0172ff4..56ae6a6 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 @@ -37,14 +37,6 @@ select { } } -.sort-scheme { - background-color: var(--background-color); - border-style: solid; - border-color: var(--foreground-color); - border-radius: 5px; - border-width: 1px; -} - #sortArea { display: flex; flex-direction: row; diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index 18da39c..e9f70f6 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -1,7 +1,7 @@ Already have an account? Log in
+
+
-- cgit v1.2.3