diff --git a/angular.json b/angular.json index 1c621318c..22fe3346f 100644 --- a/angular.json +++ b/angular.json @@ -26,14 +26,14 @@ "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ - { - "glob": "**/*", - "input": "public" - } + "src/assets" ], "styles": [ - "src/styles.scss" + "src/assets/styles/styles.scss" ], + "stylePreprocessorOptions": { + "includePaths": ["src"] + }, "scripts": [] }, "configurations": { @@ -67,7 +67,8 @@ "buildTarget": "osf:build:production" }, "development": { - "buildTarget": "osf:build:development" + "buildTarget": "osf:build:development", + "hmr": false } }, "defaultConfiguration": "development" @@ -85,14 +86,14 @@ "tsConfig": "tsconfig.spec.json", "inlineStyleLanguage": "scss", "assets": [ - { - "glob": "**/*", - "input": "public" - } + "src/assets" ], "styles": [ - "src/styles.scss" + "src/assets/styles/styles.scss" ], + "stylePreprocessorOptions": { + "includePaths": ["src"] + }, "scripts": [] } }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 91925a99c..67e7bd4cd 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,22 +1 @@ -@if (!isPortrait()) { -
- -
-
- - - -
-
-
-} @else { -
-
-
- - - -
-
-
-} + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 946ee6b10..e69de29bb 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,42 +0,0 @@ -.layout-desktop { - display: flex; - height: 100vh; - - .content { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - width: 100%; - border: 6px solid #24384a; - border-radius: 12px; - box-sizing: content-box; - - .content-wrapper { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - } - } -} - -.layout-tablet { - display: flex; - height: 100vh; - - .content { - flex: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - width: 100%; - - .content-wrapper { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - } - } -} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9cf5f4200..a3e0702c5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,29 +1,14 @@ -import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; -import { SidenavComponent } from '@core/components/sidenav/sidenav.component'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { HeaderComponent } from '@core/components/header/header.component'; -import { MainContentComponent } from '@core/components/main-content/main-content.component'; -import { FooterComponent } from '@core/components/footer/footer.component'; -import { TopnavComponent } from '@core/components/topnav/topnav.component'; -import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens'; -import { toSignal } from '@angular/core/rxjs-interop'; @Component({ selector: 'osf-root', - imports: [ - SidenavComponent, - RouterOutlet, - HeaderComponent, - MainContentComponent, - FooterComponent, - TopnavComponent, - ], + imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.scss', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent { - private isPortrait$ = inject(IS_PORTRAIT); - isPortrait = toSignal(this.isPortrait$); + title = 'osf'; } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 75242042d..299d37be2 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -5,6 +5,7 @@ import { provideStore } from '@ngxs/store'; import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin'; import { providePrimeNG } from 'primeng/config'; import Aura from '@primeng/themes/aura'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { @@ -15,8 +16,15 @@ export const appConfig: ApplicationConfig = { providePrimeNG({ theme: { preset: Aura, + options: { + cssLayer: { + name: 'primeng', + order: 'base, primeng, reset', + }, + }, }, }), + provideNoopAnimations(), provideHttpClient(), ], }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb5f..e057e7903 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,34 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const routes: Routes = [ + { + path: '', + loadComponent: () => + import('./core/components/root/root.component').then( + (mod) => mod.RootComponent, + ), + children: [ + { + path: 'sign-up', + loadComponent: () => + import('./features/auth/sign-up/sign-up.component').then( + (mod) => mod.SignUpComponent, + ), + }, + { + path: 'home', + loadComponent: () => + import('./features/home/home.component').then( + (mod) => mod.HomeComponent, + ), + }, + { + path: 'support', + loadComponent: () => + import('./features/support/support.component').then( + (mod) => mod.SupportComponent, + ), + }, + ], + }, +]; diff --git a/src/app/core/components/footer/footer.component.html b/src/app/core/components/footer/footer.component.html index 28c0d7d79..bf5af1c1b 100644 --- a/src/app/core/components/footer/footer.component.html +++ b/src/app/core/components/footer/footer.component.html @@ -1 +1,42 @@ -

footer works!

+ diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss index 64a90091f..b19f4caba 100644 --- a/src/app/core/components/footer/footer.component.scss +++ b/src/app/core/components/footer/footer.component.scss @@ -1,4 +1,50 @@ +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; + :host { - height: 50px; - background: aqua; + height: auto; + display: block; + + .footer-nav, + .footer-secondary-nav { + @include mix.flex-center-between; + color: var.$dark-blue-1; + padding: 0 1.5rem; + + .footer-links, + .footer-socials { + @include mix.flex-center; + } + + .separator { + margin: 0 0.5rem; + } + + a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + .footer-nav { + height: 4.2rem; + background-color: var.$bg-blue-3; + + .footer-socials { + @include mix.flex-center; + gap: 0.5rem; + } + } + + .footer-secondary-nav { + height: 2.6rem; + background-color: var.$bg-blue-2; + + .footer-copyright { + @include mix.flex-center; + } + } } diff --git a/src/app/core/components/footer/footer.component.ts b/src/app/core/components/footer/footer.component.ts index 711bcacdf..8ffd106d9 100644 --- a/src/app/core/components/footer/footer.component.ts +++ b/src/app/core/components/footer/footer.component.ts @@ -1,10 +1,40 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { NgOptimizedImage } from '@angular/common'; +import { SocialIcon } from '@osf/shared/entities/social-icon.interface'; @Component({ standalone: true, selector: 'osf-footer', - imports: [], + imports: [NgOptimizedImage], templateUrl: './footer.component.html', styleUrl: './footer.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FooterComponent {} +export class FooterComponent { + protected readonly socialIcons: SocialIcon[] = [ + { + name: 'x', + icon: 'assets/icons/socials/x.svg', + url: '#', + ariaLabel: 'X (formerly Twitter)', + }, + { + name: 'facebook', + icon: 'assets/icons/socials/facebook.svg', + url: '#', + ariaLabel: 'Facebook', + }, + { + name: 'group', + icon: 'assets/icons/socials/group.svg', + url: '#', + ariaLabel: 'Group', + }, + { + name: 'github', + icon: 'assets/icons/socials/github.svg', + url: '#', + ariaLabel: 'GitHub', + }, + ]; +} diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index ddbaa8fc6..cff5286ce 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -1,2 +1,3 @@ - - + Sign Up + + diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss index 49b29c8fa..fa4543f6e 100644 --- a/src/app/core/components/header/header.component.scss +++ b/src/app/core/components/header/header.component.scss @@ -1,7 +1,9 @@ +@use "assets/styles/mixins" as mix; + :host { - position: absolute; - height: 50px; - top: 0; - right: 0; - background: transparent; + height: 4.5rem; + padding-right: 1rem; + width: 100%; + @include mix.flex-center-right; + gap: 1rem; } diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts index 011749b13..c775c429e 100644 --- a/src/app/core/components/header/header.component.ts +++ b/src/app/core/components/header/header.component.ts @@ -1,10 +1,13 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { RouterLink } from '@angular/router'; @Component({ standalone: true, selector: 'osf-header', - imports: [], + imports: [Button, RouterLink], templateUrl: './header.component.html', styleUrl: './header.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class HeaderComponent {} diff --git a/src/app/core/components/main-content/main-content.component.html b/src/app/core/components/main-content/main-content.component.html index 924dcc79b..67e7bd4cd 100644 --- a/src/app/core/components/main-content/main-content.component.html +++ b/src/app/core/components/main-content/main-content.component.html @@ -1,3 +1 @@ -
-

main-content works!

-
+ diff --git a/src/app/core/components/main-content/main-content.component.scss b/src/app/core/components/main-content/main-content.component.scss index be3b91cdb..e9dab5325 100644 --- a/src/app/core/components/main-content/main-content.component.scss +++ b/src/app/core/components/main-content/main-content.component.scss @@ -1,12 +1,6 @@ -:host { - min-height: calc(100% - 100px); - padding-top: 50px; - background: antiquewhite; +@use "assets/styles/mixins" as mix; - .content-body { - flex: 1; - } - .main-container { - height: 100px; - } +:host { + @include mix.flex-column; + flex: 1; } diff --git a/src/app/core/components/main-content/main-content.component.ts b/src/app/core/components/main-content/main-content.component.ts index b8dbf3e05..da36545ef 100644 --- a/src/app/core/components/main-content/main-content.component.ts +++ b/src/app/core/components/main-content/main-content.component.ts @@ -1,10 +1,12 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; @Component({ standalone: true, selector: 'osf-main-content', - imports: [], + imports: [RouterOutlet], templateUrl: './main-content.component.html', styleUrl: './main-content.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class MainContentComponent {} diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html new file mode 100644 index 000000000..07ef9e8a4 --- /dev/null +++ b/src/app/core/components/root/root.component.html @@ -0,0 +1,22 @@ +@if (!isPortrait()) { +
+ +
+
+ + + +
+
+
+} @else { +
+
+
+ + + +
+
+
+} diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss new file mode 100644 index 000000000..40c1a7d1b --- /dev/null +++ b/src/app/core/components/root/root.component.scss @@ -0,0 +1,40 @@ +@use "assets/styles/mixins" as mix; + +.layout-desktop { + display: flex; + height: 100vh; + background-color: #24384a; + + .content-wrapper { + flex: 1; + overflow-y: auto; + margin: 6px; + background-color: white; + border-radius: 1rem; + + .content { + @include mix.flex-column; + min-height: 100%; + background: url("/assets/images/sign-up-background.png") center no-repeat; + background-size: cover; + } + } +} + +.layout-tablet { + @include mix.flex-center; + height: 100vh; + + .content-wrapper { + flex: 1; + overflow-y: auto; + @include mix.flex-column; + width: 100%; + + .content { + position: relative; + @include mix.flex-column; + flex: 1; + } + } +} diff --git a/src/app/core/components/root/root.component.spec.ts b/src/app/core/components/root/root.component.spec.ts new file mode 100644 index 000000000..d625e1b0f --- /dev/null +++ b/src/app/core/components/root/root.component.spec.ts @@ -0,0 +1,31 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RootComponent } from './root.component'; + +describe('RootComponent', () => { + let component: RootComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RootComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(RootComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should detect portrait mode correctly', () => { + spyOnProperty(window, 'innerHeight').and.returnValue(1000); + spyOnProperty(window, 'innerWidth').and.returnValue(800); + expect(component.isPortrait()).toBeTrue(); + + spyOnProperty(window, 'innerHeight').and.returnValue(800); + spyOnProperty(window, 'innerWidth').and.returnValue(1000); + expect(component.isPortrait()).toBeFalse(); + }); +}); diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts new file mode 100644 index 000000000..23361ce2b --- /dev/null +++ b/src/app/core/components/root/root.component.ts @@ -0,0 +1,29 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SidenavComponent } from '@core/components/sidenav/sidenav.component'; +import { HeaderComponent } from '@core/components/header/header.component'; +import { MainContentComponent } from '@core/components/main-content/main-content.component'; +import { FooterComponent } from '@core/components/footer/footer.component'; +import { TopnavComponent } from '@core/components/topnav/topnav.component'; +import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens'; +import { toSignal } from '@angular/core/rxjs-interop'; + +@Component({ + selector: 'osf-root', + standalone: true, + imports: [ + CommonModule, + SidenavComponent, + HeaderComponent, + MainContentComponent, + FooterComponent, + TopnavComponent, + ], + templateUrl: './root.component.html', + styleUrls: ['./root.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class RootComponent { + #isPortrait$ = inject(IS_PORTRAIT); + isPortrait = toSignal(this.#isPortrait$); +} diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html index 3442f3ab8..bc639e4db 100644 --- a/src/app/core/components/sidenav/sidenav.component.html +++ b/src/app/core/components/sidenav/sidenav.component.html @@ -1,6 +1,25 @@ -

OSF

-
    -
  • Home
    • -
  • Search OSF
    • -
  • Support
    • -
+OSF Logo + diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss index bfd821be9..204303333 100644 --- a/src/app/core/components/sidenav/sidenav.component.scss +++ b/src/app/core/components/sidenav/sidenav.component.scss @@ -1,7 +1,31 @@ +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; + :host { - display: flex; - flex-direction: column; - width: 250px; - height: 100%; - color: white; + @include mix.flex-column; + width: 19rem; + padding: 1.5rem; + + .sidebar-nav { + margin-top: 2rem; + width: 100%; + + ul { + .nav-link { + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 1rem; + width: 100%; + height: 3.4rem; + gap: 0.5rem; + } + + .active { + font-weight: 700; + background-color: var.$dark-blue-2; + border-radius: 0.5rem; + } + } + } } diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts index 2a69cd824..22a2ff473 100644 --- a/src/app/core/components/sidenav/sidenav.component.ts +++ b/src/app/core/components/sidenav/sidenav.component.ts @@ -1,10 +1,24 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { RouterLink, RouterLinkActive } from '@angular/router'; +import { NgOptimizedImage } from '@angular/common'; +import { NavItem } from '@osf/shared/entities/nav-item.interface'; @Component({ standalone: true, selector: 'osf-sidenav', - imports: [], + imports: [RouterLink, RouterLinkActive, NgOptimizedImage], templateUrl: './sidenav.component.html', styleUrl: './sidenav.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class SidenavComponent {} +export class SidenavComponent { + protected readonly navItems: NavItem[] = [ + { path: '/home', label: 'Home', icon: 'assets/icons/menu/home.svg' }, + { path: '', label: 'Search OSF', icon: 'assets/icons/menu/search.svg' }, + { + path: '/support', + label: 'Support', + icon: 'assets/icons/menu/support.svg', + }, + ]; +} diff --git a/src/app/core/components/topnav/topnav.component.ts b/src/app/core/components/topnav/topnav.component.ts index 04e47034d..03add4819 100644 --- a/src/app/core/components/topnav/topnav.component.ts +++ b/src/app/core/components/topnav/topnav.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ standalone: true, @@ -6,5 +6,6 @@ import { Component } from '@angular/core'; imports: [], templateUrl: './topnav.component.html', styleUrl: './topnav.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class TopnavComponent {} diff --git a/src/app/core/services/json-api/json-api.service.ts b/src/app/core/services/json-api/json-api.service.ts index 0a934ab88..37769e667 100644 --- a/src/app/core/services/json-api/json-api.service.ts +++ b/src/app/core/services/json-api/json-api.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { map, Observable } from 'rxjs'; import { @@ -10,7 +10,7 @@ import { providedIn: 'root', }) export class JsonApiService { - constructor(private http: HttpClient) {} + http: HttpClient = inject(HttpClient); get(url: string): Observable { return this.http diff --git a/src/app/features/auth/auth.service.ts b/src/app/features/auth/auth.service.ts index 7bacfdd15..a730effa5 100644 --- a/src/app/features/auth/auth.service.ts +++ b/src/app/features/auth/auth.service.ts @@ -9,22 +9,25 @@ import { SetAuthToken, ClearAuth } from '@core/store/auth'; providedIn: 'root', }) export class AuthService { - private readonly API_URL = 'VALID_API_URL'; - private readonly AUTH_TOKEN_KEY = ''; + readonly #API_URL = 'VALID_API_URL'; + readonly #AUTH_TOKEN_KEY = ''; - private readonly http: HttpClient = inject(HttpClient); - private readonly store: Store = inject(Store); + readonly #http: HttpClient = inject(HttpClient); + readonly #store: Store = inject(Store); //TODO: rewrite/refactor methods according to the API async login(credentials: LoginCredentials): Promise { try { const response = await firstValueFrom( - this.http.post(`${this.API_URL}/auth/login`, credentials), + this.#http.post( + `${this.#API_URL}/auth/login`, + credentials, + ), ); if (response.accessToken) { - this.setAuthToken(response.accessToken); - this.store.dispatch(new SetAuthToken(response.accessToken)); + this.#setAuthToken(response.accessToken); + this.#store.dispatch(new SetAuthToken(response.accessToken)); } } catch (error) { console.error('Login failed:', error); @@ -33,22 +36,24 @@ export class AuthService { } logout(): void { - localStorage.removeItem(this.AUTH_TOKEN_KEY); - this.store.dispatch(new ClearAuth()); + localStorage.removeItem(this.#AUTH_TOKEN_KEY); + this.#store.dispatch(new ClearAuth()); } getAuthToken(): string | null { - return localStorage.getItem(this.AUTH_TOKEN_KEY); + return localStorage.getItem(this.#AUTH_TOKEN_KEY); } - private setAuthToken(token: string): void { - localStorage.setItem(this.AUTH_TOKEN_KEY, token); + #setAuthToken(token: string): void { + localStorage.setItem(this.#AUTH_TOKEN_KEY, token); } - private checkInitialAuthState(): void { - const token: string | null = this.getAuthToken(); - if (token) { - this.store.dispatch(new SetAuthToken(token)); - } - } + // not sure if it's gonna be used, comment out for now + + // #checkInitialAuthState(): void { + // const token: string | null = this.getAuthToken(); + // if (token) { + // this.#store.dispatch(new SetAuthToken(token)); + // } + // } } diff --git a/src/app/features/auth/sign-in/sign-in.component.html b/src/app/features/auth/sign-in/sign-in.component.html deleted file mode 100644 index 371a36b70..000000000 --- a/src/app/features/auth/sign-in/sign-in.component.html +++ /dev/null @@ -1 +0,0 @@ -

sign-in works!

diff --git a/src/app/features/auth/sign-in/sign-in.component.ts b/src/app/features/auth/sign-in/sign-in.component.ts deleted file mode 100644 index 9190b9eb0..000000000 --- a/src/app/features/auth/sign-in/sign-in.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'osf-sign-in', - imports: [], - templateUrl: './sign-in.component.html', - styleUrl: './sign-in.component.scss', -}) -export class SignInComponent {} diff --git a/src/app/features/auth/sign-up/sign-up.component.html b/src/app/features/auth/sign-up/sign-up.component.html index 7e8b79f67..63b237cbd 100644 --- a/src/app/features/auth/sign-up/sign-up.component.html +++ b/src/app/features/auth/sign-up/sign-up.component.html @@ -1 +1,5 @@ -

sign-up works!

+ diff --git a/src/app/features/auth/sign-up/sign-up.component.scss b/src/app/features/auth/sign-up/sign-up.component.scss index e69de29bb..c47f5347a 100644 --- a/src/app/features/auth/sign-up/sign-up.component.scss +++ b/src/app/features/auth/sign-up/sign-up.component.scss @@ -0,0 +1,18 @@ +@use "assets/styles/mixins" as mix; +@use "assets/styles/variables" as var; + +:host { + @include mix.flex-column-center; + flex: 1; + + .sign-up-container { + @include mix.flex-column-center; + flex: 1; + width: 30rem; + border-radius: 0.9rem; + margin: 0.5rem 0; + justify-content: center; + background-color: white; + border: 1px solid var.$grey-2; + } +} diff --git a/src/app/features/auth/sign-up/sign-up.component.ts b/src/app/features/auth/sign-up/sign-up.component.ts index 98abe8cbe..d029b9689 100644 --- a/src/app/features/auth/sign-up/sign-up.component.ts +++ b/src/app/features/auth/sign-up/sign-up.component.ts @@ -1,9 +1,57 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; +import { + FormBuilder, + FormGroup, + Validators, + ReactiveFormsModule, +} from '@angular/forms'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; +import { PasswordModule } from 'primeng/password'; +import { CheckboxModule } from 'primeng/checkbox'; +import { DividerModule } from 'primeng/divider'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'osf-sign-up', - imports: [], + standalone: true, + imports: [ + CommonModule, + ReactiveFormsModule, + ButtonModule, + InputTextModule, + PasswordModule, + CheckboxModule, + DividerModule, + ], templateUrl: './sign-up.component.html', styleUrl: './sign-up.component.scss', }) -export class SignUpComponent {} +export class SignUpComponent { + signUpForm: FormGroup; + fb: FormBuilder = inject(FormBuilder); + + constructor() { + this.signUpForm = this.fb.group({ + fullName: ['', Validators.required], + email: ['', [Validators.required, Validators.email]], + password: ['', [Validators.required, Validators.minLength(8)]], + confirmPassword: ['', Validators.required], + agreeToTerms: [false, Validators.requiredTrue], + }); + } + + onSubmit() { + if (this.signUpForm.valid) { + console.log('Form submitted:', this.signUpForm.value); + } else { + console.log('Form is invalid'); + Object.keys(this.signUpForm.controls).forEach((key) => { + const control = this.signUpForm.get(key); + if (control?.invalid) { + control.markAsTouched(); + } + }); + } + } +} diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html new file mode 100644 index 000000000..31391fdaa --- /dev/null +++ b/src/app/features/home/home.component.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts new file mode 100644 index 000000000..d0ec219bf --- /dev/null +++ b/src/app/features/home/home.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; + +@Component({ + selector: 'osf-home', + imports: [Button], + templateUrl: './home.component.html', + styleUrl: './home.component.scss', +}) +export class HomeComponent {} diff --git a/src/app/features/support/support.component.html b/src/app/features/support/support.component.html new file mode 100644 index 000000000..16f3c7279 --- /dev/null +++ b/src/app/features/support/support.component.html @@ -0,0 +1 @@ +

support works!

diff --git a/src/app/features/support/support.component.scss b/src/app/features/support/support.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/features/support/support.component.spec.ts b/src/app/features/support/support.component.spec.ts new file mode 100644 index 000000000..d81848075 --- /dev/null +++ b/src/app/features/support/support.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SupportComponent } from './support.component'; + +describe('SupportComponent', () => { + let component: SupportComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SupportComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(SupportComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/support/support.component.ts b/src/app/features/support/support.component.ts new file mode 100644 index 000000000..b49ea2bf8 --- /dev/null +++ b/src/app/features/support/support.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'osf-support', + imports: [], + templateUrl: './support.component.html', + styleUrl: './support.component.scss', +}) +export class SupportComponent {} diff --git a/src/app/shared/entities/nav-item.interface.ts b/src/app/shared/entities/nav-item.interface.ts new file mode 100644 index 000000000..ecc524998 --- /dev/null +++ b/src/app/shared/entities/nav-item.interface.ts @@ -0,0 +1,5 @@ +export interface NavItem { + path: string; + label: string; + icon?: string; +} diff --git a/src/app/shared/entities/social-icon.interface.ts b/src/app/shared/entities/social-icon.interface.ts new file mode 100644 index 000000000..48809e6d9 --- /dev/null +++ b/src/app/shared/entities/social-icon.interface.ts @@ -0,0 +1,6 @@ +export interface SocialIcon { + name: string; + icon: string; + url: string; + ariaLabel: string; +} diff --git a/src/assets/fonts/OpenSans-Bold.ttf b/src/assets/fonts/OpenSans-Bold.ttf new file mode 100644 index 000000000..98c74e0a4 Binary files /dev/null and b/src/assets/fonts/OpenSans-Bold.ttf differ diff --git a/src/assets/fonts/OpenSans-ExtraBold.ttf b/src/assets/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 000000000..4eb339352 Binary files /dev/null and b/src/assets/fonts/OpenSans-ExtraBold.ttf differ diff --git a/src/assets/fonts/OpenSans-Light.ttf b/src/assets/fonts/OpenSans-Light.ttf new file mode 100644 index 000000000..ea175cc30 Binary files /dev/null and b/src/assets/fonts/OpenSans-Light.ttf differ diff --git a/src/assets/fonts/OpenSans-Medium.ttf b/src/assets/fonts/OpenSans-Medium.ttf new file mode 100644 index 000000000..ae716936e Binary files /dev/null and b/src/assets/fonts/OpenSans-Medium.ttf differ diff --git a/src/assets/fonts/OpenSans-Regular.ttf b/src/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 000000000..67803bb64 Binary files /dev/null and b/src/assets/fonts/OpenSans-Regular.ttf differ diff --git a/src/assets/fonts/OpenSans-SemiBold.ttf b/src/assets/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 000000000..e5ab46443 Binary files /dev/null and b/src/assets/fonts/OpenSans-SemiBold.ttf differ diff --git a/src/assets/icons/content/collect.svg b/src/assets/icons/content/collect.svg new file mode 100644 index 000000000..578129aab --- /dev/null +++ b/src/assets/icons/content/collect.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/assets/icons/content/design.svg b/src/assets/icons/content/design.svg new file mode 100644 index 000000000..ed58ab406 --- /dev/null +++ b/src/assets/icons/content/design.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/content/publish.svg b/src/assets/icons/content/publish.svg new file mode 100644 index 000000000..07ac57577 --- /dev/null +++ b/src/assets/icons/content/publish.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/content/quotes.svg b/src/assets/icons/content/quotes.svg new file mode 100644 index 000000000..b3058a9a6 --- /dev/null +++ b/src/assets/icons/content/quotes.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/content/search.svg b/src/assets/icons/content/search.svg new file mode 100644 index 000000000..a7b66fed5 --- /dev/null +++ b/src/assets/icons/content/search.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/menu/collections.svg b/src/assets/icons/menu/collections.svg new file mode 100644 index 000000000..fd98f14a2 --- /dev/null +++ b/src/assets/icons/menu/collections.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/copy.svg b/src/assets/icons/menu/copy.svg new file mode 100644 index 000000000..7573b0285 --- /dev/null +++ b/src/assets/icons/menu/copy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/menu/donate.svg b/src/assets/icons/menu/donate.svg new file mode 100644 index 000000000..0dc08577f --- /dev/null +++ b/src/assets/icons/menu/donate.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/menu/home.svg b/src/assets/icons/menu/home.svg new file mode 100644 index 000000000..28ac1e653 --- /dev/null +++ b/src/assets/icons/menu/home.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/menu/hosting.svg b/src/assets/icons/menu/hosting.svg new file mode 100644 index 000000000..e2a621fac --- /dev/null +++ b/src/assets/icons/menu/hosting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/menu/institutions.svg b/src/assets/icons/menu/institutions.svg new file mode 100644 index 000000000..6b1288a06 --- /dev/null +++ b/src/assets/icons/menu/institutions.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/menu/meetings.svg b/src/assets/icons/menu/meetings.svg new file mode 100644 index 000000000..08247183b --- /dev/null +++ b/src/assets/icons/menu/meetings.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/menu/my projects.svg b/src/assets/icons/menu/my projects.svg new file mode 100644 index 000000000..26ef2bc17 --- /dev/null +++ b/src/assets/icons/menu/my projects.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/menu/profile.svg b/src/assets/icons/menu/profile.svg new file mode 100644 index 000000000..a1e0adcd7 --- /dev/null +++ b/src/assets/icons/menu/profile.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/menu/search.svg b/src/assets/icons/menu/search.svg new file mode 100644 index 000000000..4ba49442d --- /dev/null +++ b/src/assets/icons/menu/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/menu/settings.svg b/src/assets/icons/menu/settings.svg new file mode 100644 index 000000000..fe6579a34 --- /dev/null +++ b/src/assets/icons/menu/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/menu/support.svg b/src/assets/icons/menu/support.svg new file mode 100644 index 000000000..a2dcee93a --- /dev/null +++ b/src/assets/icons/menu/support.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/socials/facebook.svg b/src/assets/icons/socials/facebook.svg new file mode 100644 index 000000000..c19118b70 --- /dev/null +++ b/src/assets/icons/socials/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/socials/github.svg b/src/assets/icons/socials/github.svg new file mode 100644 index 000000000..f5b75e298 --- /dev/null +++ b/src/assets/icons/socials/github.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/socials/group.svg b/src/assets/icons/socials/group.svg new file mode 100644 index 000000000..b6425be8f --- /dev/null +++ b/src/assets/icons/socials/group.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/socials/linkedin.svg b/src/assets/icons/socials/linkedin.svg new file mode 100644 index 000000000..355302e55 --- /dev/null +++ b/src/assets/icons/socials/linkedin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/socials/website.svg b/src/assets/icons/socials/website.svg new file mode 100644 index 000000000..b5fd04607 --- /dev/null +++ b/src/assets/icons/socials/website.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/socials/x.svg b/src/assets/icons/socials/x.svg new file mode 100644 index 000000000..d24c9149f --- /dev/null +++ b/src/assets/icons/socials/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/arrow down.svg b/src/assets/icons/system/arrow down.svg new file mode 100644 index 000000000..23e61fe40 --- /dev/null +++ b/src/assets/icons/system/arrow down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/calendar-silhouette.svg b/src/assets/icons/system/calendar-silhouette.svg new file mode 100644 index 000000000..76fe76e80 --- /dev/null +++ b/src/assets/icons/system/calendar-silhouette.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/code.svg b/src/assets/icons/system/code.svg new file mode 100644 index 000000000..ee79b900a --- /dev/null +++ b/src/assets/icons/system/code.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/copy.svg b/src/assets/icons/system/copy.svg new file mode 100644 index 000000000..c8d623227 --- /dev/null +++ b/src/assets/icons/system/copy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/data.svg b/src/assets/icons/system/data.svg new file mode 100644 index 000000000..1c44f2a69 --- /dev/null +++ b/src/assets/icons/system/data.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/doc.svg b/src/assets/icons/system/doc.svg new file mode 100644 index 000000000..f97d8f7ee --- /dev/null +++ b/src/assets/icons/system/doc.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/dots.svg b/src/assets/icons/system/dots.svg new file mode 100644 index 000000000..a8bd14aa0 --- /dev/null +++ b/src/assets/icons/system/dots.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/double-arrow-left.svg b/src/assets/icons/system/double-arrow-left.svg new file mode 100644 index 000000000..07bd784b2 --- /dev/null +++ b/src/assets/icons/system/double-arrow-left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/system/download.svg b/src/assets/icons/system/download.svg new file mode 100644 index 000000000..effb2ce46 --- /dev/null +++ b/src/assets/icons/system/download.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/email.svg b/src/assets/icons/system/email.svg new file mode 100644 index 000000000..b673949fe --- /dev/null +++ b/src/assets/icons/system/email.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/eye hidden.svg b/src/assets/icons/system/eye hidden.svg new file mode 100644 index 000000000..2b5d24879 --- /dev/null +++ b/src/assets/icons/system/eye hidden.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/eye view.svg b/src/assets/icons/system/eye view.svg new file mode 100644 index 000000000..95bef4eec --- /dev/null +++ b/src/assets/icons/system/eye view.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/filter.svg b/src/assets/icons/system/filter.svg new file mode 100644 index 000000000..d1ab1c273 --- /dev/null +++ b/src/assets/icons/system/filter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/folder.svg b/src/assets/icons/system/folder.svg new file mode 100644 index 000000000..85b8d7410 --- /dev/null +++ b/src/assets/icons/system/folder.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/system/image.svg b/src/assets/icons/system/image.svg new file mode 100644 index 000000000..cf9027c1e --- /dev/null +++ b/src/assets/icons/system/image.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/information.svg b/src/assets/icons/system/information.svg new file mode 100644 index 000000000..dc0de734f --- /dev/null +++ b/src/assets/icons/system/information.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/system/list.svg b/src/assets/icons/system/list.svg new file mode 100644 index 000000000..8454e0f43 --- /dev/null +++ b/src/assets/icons/system/list.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/system/materials.svg b/src/assets/icons/system/materials.svg new file mode 100644 index 000000000..44668bf8a --- /dev/null +++ b/src/assets/icons/system/materials.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/minus.svg b/src/assets/icons/system/minus.svg new file mode 100644 index 000000000..5fd382234 --- /dev/null +++ b/src/assets/icons/system/minus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/system/orchid.svg b/src/assets/icons/system/orchid.svg new file mode 100644 index 000000000..6d2bd412a --- /dev/null +++ b/src/assets/icons/system/orchid.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/system/padlock-unlock.svg b/src/assets/icons/system/padlock-unlock.svg new file mode 100644 index 000000000..ca66a4abb --- /dev/null +++ b/src/assets/icons/system/padlock-unlock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/padlock.svg b/src/assets/icons/system/padlock.svg new file mode 100644 index 000000000..c01a08488 --- /dev/null +++ b/src/assets/icons/system/padlock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/papers.svg b/src/assets/icons/system/papers.svg new file mode 100644 index 000000000..b73c497d0 --- /dev/null +++ b/src/assets/icons/system/papers.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/pdf.svg b/src/assets/icons/system/pdf.svg new file mode 100644 index 000000000..313e63c5b --- /dev/null +++ b/src/assets/icons/system/pdf.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/plus.svg b/src/assets/icons/system/plus.svg new file mode 100644 index 000000000..7f5b5f0cb --- /dev/null +++ b/src/assets/icons/system/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/question-mark.svg b/src/assets/icons/system/question-mark.svg new file mode 100644 index 000000000..80521ee6b --- /dev/null +++ b/src/assets/icons/system/question-mark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/system/search.svg b/src/assets/icons/system/search.svg new file mode 100644 index 000000000..b830733a7 --- /dev/null +++ b/src/assets/icons/system/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/settings.svg b/src/assets/icons/system/settings.svg new file mode 100644 index 000000000..ae08ad998 --- /dev/null +++ b/src/assets/icons/system/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/sort-1.svg b/src/assets/icons/system/sort-1.svg new file mode 100644 index 000000000..71e0f1dd5 --- /dev/null +++ b/src/assets/icons/system/sort-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/system/sort-2.svg b/src/assets/icons/system/sort-2.svg new file mode 100644 index 000000000..5af7495ef --- /dev/null +++ b/src/assets/icons/system/sort-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/sort-3.svg b/src/assets/icons/system/sort-3.svg new file mode 100644 index 000000000..f42ff625d --- /dev/null +++ b/src/assets/icons/system/sort-3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/supplements.svg b/src/assets/icons/system/supplements.svg new file mode 100644 index 000000000..1cc88ee20 --- /dev/null +++ b/src/assets/icons/system/supplements.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/icons/system/trash.svg b/src/assets/icons/system/trash.svg new file mode 100644 index 000000000..4f7796dd6 --- /dev/null +++ b/src/assets/icons/system/trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/system/upload.svg b/src/assets/icons/system/upload.svg new file mode 100644 index 000000000..ec30e1e39 --- /dev/null +++ b/src/assets/icons/system/upload.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/system/warning.svg b/src/assets/icons/system/warning.svg new file mode 100644 index 000000000..2d9e4da2f --- /dev/null +++ b/src/assets/icons/system/warning.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/help-button.svg b/src/assets/images/help-button.svg new file mode 100644 index 000000000..3ef25edd3 --- /dev/null +++ b/src/assets/images/help-button.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 000000000..97f04ab2b --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/sign-up-background.png b/src/assets/images/sign-up-background.png new file mode 100644 index 000000000..105d00bdd Binary files /dev/null and b/src/assets/images/sign-up-background.png differ diff --git a/src/assets/styles/_fonts.scss b/src/assets/styles/_fonts.scss new file mode 100644 index 000000000..5dab88fa3 --- /dev/null +++ b/src/assets/styles/_fonts.scss @@ -0,0 +1,41 @@ +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "Open Sans"; + src: url("/assets/fonts/OpenSans-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; +} diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss new file mode 100644 index 000000000..670b38bc3 --- /dev/null +++ b/src/assets/styles/_mixins.scss @@ -0,0 +1,28 @@ +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +@mixin flex-center-between { + display: flex; + justify-content: space-between; + align-items: center; +} + +@mixin flex-center-right { + display: flex; + justify-content: flex-end; + align-items: center; +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin flex-column-center { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss new file mode 100644 index 000000000..f6a84670f --- /dev/null +++ b/src/assets/styles/_variables.scss @@ -0,0 +1,100 @@ +// Theme Specific Variables + +// Fonts +$openSans: var(--openSans); + +// Colors +// Primary Blue +$pr-blue-1: var(--pr-blue-1); +$pr-blue-2: var(--pr-blue-2); +$pr-blue-3: var(--pr-blue-3); + +// Dark Blue +$dark-blue-1: var(--dark-blue-1); +$dark-blue-2: var(--dark-blue-2); + +// Background Blue +$bg-blue-2: var(--bg-blue-2); +$bg-blue-3: var(--bg-blue-3); + +// Grey +$grey-1: var(--grey-1); +$grey-2: var(--grey-2); +$grey-3: var(--grey-3); +$grey-outline: var(--grey-outline); + +// Green +$green-1: var(--green-1); +$green-2: var(--green-2); +$green-3: var(--green-3); + +// Red +$red-1: var(--red-1); +$red-2: var(--red-2); +$red-3: var(--red-3); + +// Yellow +$yellow-1: var(--yellow-1); +$yellow-2: var(--yellow-2); + +// Additional Colors +$green-1-alt: var(--green-1-alt); +$green-2-alt: var(--green-2-alt); +$blue-1: var(--blue-1); +$blue-2: var(--blue-2); + +// Background Colors +$green-1-bg: var(--green-1-bg); +$green-2-bg: var(--green-2-bg); +$blue-1-bg: var(--blue-1-bg); +$blue-2-bg: var(--blue-2-bg); + +:root { + // Fonts + --openSans: "Open Sans", sans-serif; + + // Primary Blue Colors + --pr-blue-1: #337ab7; + --pr-blue-2: #84aed2; + --pr-blue-3: #0089ff; + + // Dark Blue Colors + --dark-blue-1: #24384a; + --dark-blue-2: #384b5c; + + // Background Blue Colors + --bg-blue-2: #e6f1fc; + --bg-blue-3: #f1f8fd; + + // Grey Colors + --grey-1: #8b97a4; + --grey-2: #e0e1e2; + --grey-3: #eff0f1; + --grey-outline: #00000029; + + // Green Colors + --green-1: #357935; + --green-2: #d7e4d7; + --green-3: #26ac26; + + // Red Colors + --red-1: #b73333; + --red-2: #f1d6d6; + --red-3: #e40303; + + // Yellow Colors + --yellow-1: #8a6d3a; + --yellow-2: #fcf8e3; + + // Additional Colors + --green-1-alt: #37b183; + --green-2-alt: #35aea9; + --blue-1: #3792b1; + --blue-2: #3379b7; + + // Background Colors + --green-1-bg: #ebf7f3; + --green-2-bg: #ebf7f6; + --blue-1-bg: #ebf4f7; + --blue-2-bg: #ebf2f8; +} diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss new file mode 100644 index 000000000..11c1588e0 --- /dev/null +++ b/src/assets/styles/overrides/button.scss @@ -0,0 +1,128 @@ +@use "../variables" as var; +@use "../mixins" as mix; + +.p-button { + border: none; + padding: 0.7rem 1.15rem; + font-size: 1rem; + background-color: var.$pr-blue-1; + + .p-button-label { + font-weight: 700; + } + + &:hover { + background-color: var.$pr-blue-3; + } + + &:disabled { + background-color: var.$pr-blue-2; + } +} + +.p-button.p-button-success { + background-color: var.$green-1; + + &:hover { + background-color: var.$green-3; + } + + &:disabled { + background-color: var.$green-2; + } +} + +.p-button.p-button-danger { + background-color: var.$red-1; + + &:hover { + background-color: var.$red-3; + } + + &:disabled { + background-color: var.$red-2; + } +} + +.p-button.p-button-contrast { + background-color: var.$dark-blue-1; + + &:hover { + background-color: var.$dark-blue-2; + } + + &:disabled { + background-color: var.$grey-1; + } +} + +.p-button.p-button-secondary { + background-color: var.$bg-blue-3; + color: var.$pr-blue-1; + + &:hover { + background-color: var.$bg-blue-2; + color: var.$pr-blue-3; + } + + &:disabled { + background-color: var.$grey-3; + color: var.$pr-blue-2; + } +} + +.p-button.p-button-info { + color: var.$dark-blue-1; + background-color: transparent; + + .p-button-label { + font-weight: 400; + } + + &:hover { + outline: 1px solid var.$grey-2; + } + + &:disabled { + color: var.$grey-1; + } +} + +.btn-icon-text, +.btn-icon-text-success { + .p-button { + background-color: transparent; + color: var.$pr-blue-1; + font-weight: 600; + @include mix.flex-center; + box-shadow: 0 0 4px 0 var.$grey-outline; + + &:hover { + color: var.$pr-blue-3; + } + + &:disabled { + color: var.$grey-1; + } + } +} + +.btn-icon-text { + .p-button { + color: var.$pr-blue-1; + + &:hover { + color: var.$pr-blue-3; + } + } +} + +.btn-icon-text-success { + .p-button { + color: var.$green-1; + + &:hover { + color: var.$green-3; + } + } +} diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss new file mode 100644 index 000000000..8abf9b7bd --- /dev/null +++ b/src/assets/styles/styles.scss @@ -0,0 +1,56 @@ +@use "fonts"; +@use "variables"; +@use "mixins"; +@use "./overrides/button"; + +@layer base, primeng, reset; + +@layer base { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } +} + +@layer reset { + html, + body { + font-family: variables.$openSans; + font-weight: 400; + font-size: 14px; + } + + h1 { + font-size: 1.7rem; + } + + h2 { + font-size: 1.3rem; + } + + h3 { + font-size: 1rem; + } + + h1, + h2, + h3 { + font-weight: 700; + text-transform: capitalize; + } + + li { + list-style: none; + } + + a, + a:visited { + text-decoration: none; + color: inherit; + } + + button { + color: white; + } +} diff --git a/src/styles.scss b/src/styles.scss deleted file mode 100644 index a0951c557..000000000 --- a/src/styles.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ - -@layer pringe-ng-override { -} - -html, -body { - height: 100%; - margin: 0; - padding: 0; - background: #24384a; -} diff --git a/tsconfig.json b/tsconfig.json index 823db6cc0..356bdf0fa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,8 @@ "paths": { "@osf/*": ["app/*"], "@core/*": ["app/core/*"], - "@shared/*": ["app/shared/*"] + "@shared/*": ["app/shared/*"], + "@styles/*": ["assets/styles/*"] } }, "angularCompilerOptions": {