diff --git a/.fantasticonrc.js b/.fantasticonrc.js index 706822e1c..9769026ca 100644 --- a/.fantasticonrc.js +++ b/.fantasticonrc.js @@ -3,4 +3,5 @@ module.exports = { outputDir: 'src/assets/icons/dist', normalize: true, descent: 45, + prefix: 'osf-icon', }; diff --git a/angular.json b/angular.json index 22fe3346f..ceb7cd7ca 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,8 @@ "src/assets" ], "styles": [ - "src/assets/styles/styles.scss" + "src/assets/styles/styles.scss", + "src/assets/icons/dist/icons.css" ], "stylePreprocessorOptions": { "includePaths": ["src"] diff --git a/src/app/core/components/footer/footer.component.html b/src/app/core/components/footer/footer.component.html index 044dc876e..38d8f1598 100644 --- a/src/app/core/components/footer/footer.component.html +++ b/src/app/core/components/footer/footer.component.html @@ -11,13 +11,12 @@
@for (icon of socialIcons; track icon.name) { - - + + }
diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss index 1efd8e180..06d33990b 100644 --- a/src/app/core/components/footer/footer.component.scss +++ b/src/app/core/components/footer/footer.component.scss @@ -14,6 +14,10 @@ .footer-links, .footer-socials { @include mix.flex-center; + + a { + color: var.$dark-blue-1; + } } .separator { @@ -28,6 +32,19 @@ .footer-socials { @include mix.flex-center; gap: 0.5rem; + + .icon-link { + @include mix.flex-center; + height: 2.6rem; + width: 2.6rem; + border-radius: 0.5rem; + background-color: var.$pr-blue-1; + + i { + color: white; + font-size: 1.4rem; + } + } } } diff --git a/src/app/core/components/footer/footer.component.ts b/src/app/core/components/footer/footer.component.ts index 7cb6fb3ff..717931595 100644 --- a/src/app/core/components/footer/footer.component.ts +++ b/src/app/core/components/footer/footer.component.ts @@ -1,12 +1,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { NgOptimizedImage } from '@angular/common'; import { SocialIcon } from '@osf/shared/entities/social-icon.interface'; import { RouterLink } from '@angular/router'; @Component({ standalone: true, selector: 'osf-footer', - imports: [NgOptimizedImage, RouterLink], + imports: [RouterLink], templateUrl: './footer.component.html', styleUrl: './footer.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, @@ -14,26 +13,22 @@ import { RouterLink } from '@angular/router'; export class FooterComponent { protected readonly socialIcons: SocialIcon[] = [ { - name: 'x', - icon: 'assets/icons/socials/x.svg', + name: 'twitter', 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/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html index bc639e4db..a02272279 100644 --- a/src/app/core/components/sidenav/sidenav.component.html +++ b/src/app/core/components/sidenav/sidenav.component.html @@ -10,12 +10,13 @@ [routerLinkActiveOptions]="{ exact: true }" > @if (item.icon) { - + + + + + + + } {{ item.label }} diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts index 22a2ff473..fefc1756d 100644 --- a/src/app/core/components/sidenav/sidenav.component.ts +++ b/src/app/core/components/sidenav/sidenav.component.ts @@ -13,12 +13,12 @@ import { NavItem } from '@osf/shared/entities/nav-item.interface'; }) 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: '/home', label: 'Home', icon: 'home' }, + { path: '', label: 'Search OSF', icon: 'search' }, { path: '/support', label: 'Support', - icon: 'assets/icons/menu/support.svg', + icon: 'support', }, ]; } 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 63b237cbd..0e3c33912 100644 --- a/src/app/features/auth/sign-up/sign-up.component.html +++ b/src/app/features/auth/sign-up/sign-up.component.html @@ -1,5 +1,113 @@

Create A Free Account

-
+
+
+ + + + + Orchid icon + + + + +
+ + + or + + +
+
+ + +
+ +
+ + +
+ +
+ + + @if ( + signUpForm.controls["password"].errors && + signUpForm.get("password")?.touched + ) { + + Your password needs to be at least 8 characters long, include both + lower- and upper-case characters, and have at least one number or + special character + + } +
+ +
+ + + @if ( + signUpForm.get("confirmPassword")?.errors?.["passwordMismatch"] && + signUpForm.get("confirmPassword")?.touched + ) { + Passwords must match + } +
+ +
+ + +
+
+ + +
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 c47f5347a..06ab1dd3c 100644 --- a/src/app/features/auth/sign-up/sign-up.component.scss +++ b/src/app/features/auth/sign-up/sign-up.component.scss @@ -6,13 +6,74 @@ flex: 1; .sign-up-container { - @include mix.flex-column-center; + @include mix.flex-column; flex: 1; - width: 30rem; - border-radius: 0.9rem; - margin: 0.5rem 0; - justify-content: center; - background-color: white; - border: 1px solid var.$grey-2; + color: var.$dark-blue-1; + width: 32rem; + margin: 2rem 0; + padding: 2rem; + background: white; + border-radius: 0.6rem; + box-shadow: 0 2px 4px var.$grey-outline; + + h2 { + text-align: center; + } + + form { + @include mix.flex-column; + flex: 1; + + .divider-text { + background: white; + } + + .btn-group { + @include mix.flex-column; + gap: 1rem; + margin-top: 2rem; + color: var.$dark-blue-1; + } + + .form-fields { + flex: 1; + + .field { + margin-bottom: 1rem; + + .text-danger { + color: var.$red-1; + font-weight: 600; + } + } + + .field-checkbox { + @include mix.flex-align-center; + margin: 1.5rem 0; + + label { + margin-bottom: 0; + margin-left: 0.5rem; + + a { + font-weight: 700; + color: var.$pr-blue-1; + + &:hover { + text-decoration: underline; + } + } + } + } + } + + .btn-full-width { + justify-self: baseline; + + i { + font-size: 1.45rem; + } + } + } } } 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 d029b9689..f17026a88 100644 --- a/src/app/features/auth/sign-up/sign-up.component.ts +++ b/src/app/features/auth/sign-up/sign-up.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, inject, OnInit, signal } from '@angular/core'; import { FormBuilder, FormGroup, @@ -10,7 +10,9 @@ 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'; +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { PASSWORD_REGEX, passwordMatchValidator } from './sign-up.helper'; +import { Router, RouterLink } from '@angular/router'; @Component({ selector: 'osf-sign-up', @@ -23,35 +25,46 @@ import { CommonModule } from '@angular/common'; PasswordModule, CheckboxModule, DividerModule, + NgOptimizedImage, + RouterLink, ], templateUrl: './sign-up.component.html', styleUrl: './sign-up.component.scss', }) -export class SignUpComponent { - signUpForm: FormGroup; +export class SignUpComponent implements OnInit { + signUpForm: FormGroup = new FormGroup({}); + passwordRegex: RegExp = PASSWORD_REGEX; + isFormSubmitted = signal(false); + fb: FormBuilder = inject(FormBuilder); + router: Router = inject(Router); + + ngOnInit(): void { + this.initializeForm(); + } - 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], - }); + initializeForm(): void { + this.signUpForm = this.fb.group( + { + fullName: ['', Validators.required], + email: ['', [Validators.required, Validators.email]], + password: [ + '', + [Validators.required, Validators.pattern(this.passwordRegex)], + ], + confirmPassword: ['', Validators.required], + agreeToTerms: [false, Validators.requiredTrue], + }, + { + validators: passwordMatchValidator(), + }, + ); } - onSubmit() { + onSubmit(): void { 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(); - } - }); + this.isFormSubmitted.set(true); + this.router.navigate(['/home']); } } } diff --git a/src/app/features/auth/sign-up/sign-up.helper.ts b/src/app/features/auth/sign-up/sign-up.helper.ts new file mode 100644 index 000000000..4e6cf47d5 --- /dev/null +++ b/src/app/features/auth/sign-up/sign-up.helper.ts @@ -0,0 +1,33 @@ +import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; + +export const PASSWORD_REGEX = + /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\w\s]).{8,}$/; + +export function passwordMatchValidator( + passwordField = 'password', + confirmPasswordField = 'confirmPassword', +): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const password = control.get(passwordField); + const confirmPassword = control.get(confirmPasswordField); + + if (!password || !confirmPassword) { + return null; + } + + if (confirmPassword.errors && !confirmPassword.errors['passwordMismatch']) { + return null; + } + + if (password.value !== confirmPassword.value) { + const error = { passwordMismatch: true }; + confirmPassword.setErrors(error); + return error; + } else { + const errors = { ...confirmPassword.errors }; + delete errors['passwordMismatch']; + confirmPassword.setErrors(Object.keys(errors).length ? errors : null); + return null; + } + }; +} diff --git a/src/app/features/auth/sign-in/sign-in.component.scss b/src/app/features/home/home.component.scss similarity index 100% rename from src/app/features/auth/sign-in/sign-in.component.scss rename to src/app/features/home/home.component.scss diff --git a/src/app/features/auth/sign-in/sign-in.component.spec.ts b/src/app/features/home/home.component.spec.ts similarity index 55% rename from src/app/features/auth/sign-in/sign-in.component.spec.ts rename to src/app/features/home/home.component.spec.ts index d9432eda1..7737f1c89 100644 --- a/src/app/features/auth/sign-in/sign-in.component.spec.ts +++ b/src/app/features/home/home.component.spec.ts @@ -1,17 +1,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { SignInComponent } from './sign-in.component'; +import { HomeComponent } from './home.component'; -describe('SignInComponent', () => { - let component: SignInComponent; - let fixture: ComponentFixture; +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [SignInComponent], + imports: [HomeComponent], }).compileComponents(); - fixture = TestBed.createComponent(SignInComponent); + fixture = TestBed.createComponent(HomeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/shared/entities/social-icon.interface.ts b/src/app/shared/entities/social-icon.interface.ts index 48809e6d9..95355cec0 100644 --- a/src/app/shared/entities/social-icon.interface.ts +++ b/src/app/shared/entities/social-icon.interface.ts @@ -1,6 +1,5 @@ export interface SocialIcon { name: string; - icon: string; url: string; ariaLabel: string; } diff --git a/src/assets/icons/dist/icons.css b/src/assets/icons/dist/icons.css index 86f300ab0..9980ea504 100644 --- a/src/assets/icons/dist/icons.css +++ b/src/assets/icons/dist/icons.css @@ -1,11 +1,11 @@ @font-face { font-family: "icons"; - src: url("./icons.eot?a11024f4fc074f80f5fb9c55606821cc#iefix") format("embedded-opentype"), -url("./icons.woff2?a11024f4fc074f80f5fb9c55606821cc") format("woff2"), -url("./icons.woff?a11024f4fc074f80f5fb9c55606821cc") format("woff"); + src: url("./icons.eot?e66420b71be7d7b7facef2a3a4b1caa6#iefix") format("embedded-opentype"), +url("./icons.woff2?e66420b71be7d7b7facef2a3a4b1caa6") format("woff2"), +url("./icons.woff?e66420b71be7d7b7facef2a3a4b1caa6") format("woff"); } -i[class^="icon-"]:before, i[class*=" icon-"]:before { +i[class^="osf-icon-"]:before, i[class*=" osf-icon-"]:before { font-family: icons !important; font-style: normal; font-weight: normal !important; @@ -16,165 +16,168 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before { -moz-osx-font-smoothing: grayscale; } -.icon-x:before { +.osf-icon-x:before { content: "\f101"; } -.icon-website:before { +.osf-icon-website:before { content: "\f102"; } -.icon-warning:before { +.osf-icon-warning:before { content: "\f103"; } -.icon-upload:before { +.osf-icon-upload:before { content: "\f104"; } -.icon-trash:before { +.osf-icon-twitter:before { content: "\f105"; } -.icon-support:before { +.osf-icon-trash:before { content: "\f106"; } -.icon-supplements:before { +.osf-icon-support:before { content: "\f107"; } -.icon-sort-3:before { +.osf-icon-supplements:before { content: "\f108"; } -.icon-sort-2:before { +.osf-icon-sort-3:before { content: "\f109"; } -.icon-sort-1:before { +.osf-icon-sort-2:before { content: "\f10a"; } -.icon-settings:before { +.osf-icon-sort-1:before { content: "\f10b"; } -.icon-search:before { +.osf-icon-settings:before { content: "\f10c"; } -.icon-quotes:before { +.osf-icon-search:before { content: "\f10d"; } -.icon-question-mark:before { +.osf-icon-quotes:before { content: "\f10e"; } -.icon-publish:before { +.osf-icon-question-mark:before { content: "\f10f"; } -.icon-profile:before { +.osf-icon-publish:before { content: "\f110"; } -.icon-plus:before { +.osf-icon-profile:before { content: "\f111"; } -.icon-pdf:before { +.osf-icon-plus:before { content: "\f112"; } -.icon-papers:before { +.osf-icon-pdf:before { content: "\f113"; } -.icon-padlock:before { +.osf-icon-papers:before { content: "\f114"; } -.icon-padlock-unlock:before { +.osf-icon-padlock:before { content: "\f115"; } -.icon-orchid:before { +.osf-icon-padlock-unlock:before { content: "\f116"; } -.icon-my-projects:before { +.osf-icon-orcid:before { content: "\f117"; } -.icon-minus:before { +.osf-icon-my-projects:before { content: "\f118"; } -.icon-meetings:before { +.osf-icon-minus:before { content: "\f119"; } -.icon-materials:before { +.osf-icon-meetings:before { content: "\f11a"; } -.icon-list:before { +.osf-icon-materials:before { content: "\f11b"; } -.icon-linkedin:before { +.osf-icon-list:before { content: "\f11c"; } -.icon-institutions:before { +.osf-icon-linkedin:before { content: "\f11d"; } -.icon-information:before { +.osf-icon-institutions:before { content: "\f11e"; } -.icon-image:before { +.osf-icon-information:before { content: "\f11f"; } -.icon-hosting:before { +.osf-icon-image:before { content: "\f120"; } -.icon-home:before { +.osf-icon-hosting:before { content: "\f121"; } -.icon-group:before { +.osf-icon-home:before { content: "\f122"; } -.icon-github:before { +.osf-icon-group:before { content: "\f123"; } -.icon-folder:before { +.osf-icon-github:before { content: "\f124"; } -.icon-filter:before { +.osf-icon-folder:before { content: "\f125"; } -.icon-facebook:before { +.osf-icon-filter:before { content: "\f126"; } -.icon-eye-view:before { +.osf-icon-facebook:before { content: "\f127"; } -.icon-eye-hidden:before { +.osf-icon-eye-view:before { content: "\f128"; } -.icon-email:before { +.osf-icon-eye-hidden:before { content: "\f129"; } -.icon-download:before { +.osf-icon-email:before { content: "\f12a"; } -.icon-double-arrow-left:before { +.osf-icon-download:before { content: "\f12b"; } -.icon-dots:before { +.osf-icon-double-arrow-left:before { content: "\f12c"; } -.icon-donate:before { +.osf-icon-dots:before { content: "\f12d"; } -.icon-doc:before { +.osf-icon-donate:before { content: "\f12e"; } -.icon-design:before { +.osf-icon-doc:before { content: "\f12f"; } -.icon-data:before { +.osf-icon-design:before { content: "\f130"; } -.icon-copy:before { +.osf-icon-data:before { content: "\f131"; } -.icon-collections:before { +.osf-icon-copy:before { content: "\f132"; } -.icon-collect:before { +.osf-icon-collections:before { content: "\f133"; } -.icon-code:before { +.osf-icon-collect:before { content: "\f134"; } -.icon-calendar-silhouette:before { +.osf-icon-code:before { content: "\f135"; } -.icon-arrow-down:before { +.osf-icon-calendar-silhouette:before { content: "\f136"; } +.osf-icon-arrow-down:before { + content: "\f137"; +} diff --git a/src/assets/icons/dist/icons.eot b/src/assets/icons/dist/icons.eot index 2bf9a61b2..161ea7453 100644 Binary files a/src/assets/icons/dist/icons.eot and b/src/assets/icons/dist/icons.eot differ diff --git a/src/assets/icons/dist/icons.html b/src/assets/icons/dist/icons.html index 0d644ee67..4404dccbe 100644 --- a/src/assets/icons/dist/icons.html +++ b/src/assets/icons/dist/icons.html @@ -45,7 +45,6 @@ -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; - color: #666; } @@ -56,7 +55,7 @@

icons

- +
x @@ -64,7 +63,7 @@

icons

- +
website @@ -72,7 +71,7 @@

icons

- +
warning @@ -80,7 +79,7 @@

icons

- +
upload @@ -88,7 +87,15 @@

icons

- + + +
+ twitter +
+ +
+ +
trash @@ -96,7 +103,7 @@

icons

- +
support @@ -104,7 +111,7 @@

icons

- +
supplements @@ -112,7 +119,7 @@

icons

- +
sort-3 @@ -120,7 +127,7 @@

icons

- +
sort-2 @@ -128,7 +135,7 @@

icons

- +
sort-1 @@ -136,7 +143,7 @@

icons

- +
settings @@ -144,7 +151,7 @@

icons

- +
search @@ -152,7 +159,7 @@

icons

- +
quotes @@ -160,7 +167,7 @@

icons

- +
question-mark @@ -168,7 +175,7 @@

icons

- +
publish @@ -176,7 +183,7 @@

icons

- +
profile @@ -184,7 +191,7 @@

icons

- +
plus @@ -192,7 +199,7 @@

icons

- +
pdf @@ -200,7 +207,7 @@

icons

- +
papers @@ -208,7 +215,7 @@

icons

- +
padlock @@ -216,7 +223,7 @@

icons

- +
padlock-unlock @@ -224,15 +231,15 @@

icons

- +
- orchid + orcid
- +
my-projects @@ -240,7 +247,7 @@

icons

- +
minus @@ -248,7 +255,7 @@

icons

- +
meetings @@ -256,7 +263,7 @@

icons

- +
materials @@ -264,7 +271,7 @@

icons

- +
list @@ -272,7 +279,7 @@

icons

- +
linkedin @@ -280,7 +287,7 @@

icons

- +
institutions @@ -288,7 +295,7 @@

icons

- +
information @@ -296,7 +303,7 @@

icons

- +
image @@ -304,7 +311,7 @@

icons

- +
hosting @@ -312,7 +319,7 @@

icons

- +
home @@ -320,7 +327,7 @@

icons

- +
group @@ -328,7 +335,7 @@

icons

- +
github @@ -336,7 +343,7 @@

icons

- +
folder @@ -344,7 +351,7 @@

icons

- +
filter @@ -352,7 +359,7 @@

icons

- +
facebook @@ -360,7 +367,7 @@

icons

- +
eye-view @@ -368,7 +375,7 @@

icons

- +
eye-hidden @@ -376,7 +383,7 @@

icons

- +
email @@ -384,7 +391,7 @@

icons

- +
download @@ -392,7 +399,7 @@

icons

- +
double-arrow-left @@ -400,7 +407,7 @@

icons

- +
dots @@ -408,7 +415,7 @@

icons

- +
donate @@ -416,7 +423,7 @@

icons

- +
doc @@ -424,7 +431,7 @@

icons

- +
design @@ -432,7 +439,7 @@

icons

- +
data @@ -440,7 +447,7 @@

icons

- +
copy @@ -448,7 +455,7 @@

icons

- +
collections @@ -456,7 +463,7 @@

icons

- +
collect @@ -464,7 +471,7 @@

icons

- +
code @@ -472,7 +479,7 @@

icons

- +
calendar-silhouette @@ -480,7 +487,7 @@

icons

- +
arrow-down diff --git a/src/assets/icons/dist/icons.json b/src/assets/icons/dist/icons.json index 678edd229..5ba341dc7 100644 --- a/src/assets/icons/dist/icons.json +++ b/src/assets/icons/dist/icons.json @@ -3,54 +3,55 @@ "website": 61698, "warning": 61699, "upload": 61700, - "trash": 61701, - "support": 61702, - "supplements": 61703, - "sort-3": 61704, - "sort-2": 61705, - "sort-1": 61706, - "settings": 61707, - "search": 61708, - "quotes": 61709, - "question-mark": 61710, - "publish": 61711, - "profile": 61712, - "plus": 61713, - "pdf": 61714, - "papers": 61715, - "padlock": 61716, - "padlock-unlock": 61717, - "orchid": 61718, - "my-projects": 61719, - "minus": 61720, - "meetings": 61721, - "materials": 61722, - "list": 61723, - "linkedin": 61724, - "institutions": 61725, - "information": 61726, - "image": 61727, - "hosting": 61728, - "home": 61729, - "group": 61730, - "github": 61731, - "folder": 61732, - "filter": 61733, - "facebook": 61734, - "eye-view": 61735, - "eye-hidden": 61736, - "email": 61737, - "download": 61738, - "double-arrow-left": 61739, - "dots": 61740, - "donate": 61741, - "doc": 61742, - "design": 61743, - "data": 61744, - "copy": 61745, - "collections": 61746, - "collect": 61747, - "code": 61748, - "calendar-silhouette": 61749, - "arrow-down": 61750 + "twitter": 61701, + "trash": 61702, + "support": 61703, + "supplements": 61704, + "sort-3": 61705, + "sort-2": 61706, + "sort-1": 61707, + "settings": 61708, + "search": 61709, + "quotes": 61710, + "question-mark": 61711, + "publish": 61712, + "profile": 61713, + "plus": 61714, + "pdf": 61715, + "papers": 61716, + "padlock": 61717, + "padlock-unlock": 61718, + "orcid": 61719, + "my-projects": 61720, + "minus": 61721, + "meetings": 61722, + "materials": 61723, + "list": 61724, + "linkedin": 61725, + "institutions": 61726, + "information": 61727, + "image": 61728, + "hosting": 61729, + "home": 61730, + "group": 61731, + "github": 61732, + "folder": 61733, + "filter": 61734, + "facebook": 61735, + "eye-view": 61736, + "eye-hidden": 61737, + "email": 61738, + "download": 61739, + "double-arrow-left": 61740, + "dots": 61741, + "donate": 61742, + "doc": 61743, + "design": 61744, + "data": 61745, + "copy": 61746, + "collections": 61747, + "collect": 61748, + "code": 61749, + "calendar-silhouette": 61750, + "arrow-down": 61751 } \ No newline at end of file diff --git a/src/assets/icons/dist/icons.ts b/src/assets/icons/dist/icons.ts index b9ef537c2..f442859c3 100644 --- a/src/assets/icons/dist/icons.ts +++ b/src/assets/icons/dist/icons.ts @@ -3,6 +3,7 @@ export type IconsId = | 'website' | 'warning' | 'upload' + | 'twitter' | 'trash' | 'support' | 'supplements' @@ -20,7 +21,7 @@ export type IconsId = | 'papers' | 'padlock' | 'padlock-unlock' - | 'orchid' + | 'orcid' | 'my-projects' | 'minus' | 'meetings' @@ -59,6 +60,7 @@ export type IconsKey = | 'Website' | 'Warning' | 'Upload' + | 'Twitter' | 'Trash' | 'Support' | 'Supplements' @@ -76,7 +78,7 @@ export type IconsKey = | 'Papers' | 'Padlock' | 'PadlockUnlock' - | 'Orchid' + | 'Orcid' | 'MyProjects' | 'Minus' | 'Meetings' @@ -115,6 +117,7 @@ export enum Icons { Website = 'website', Warning = 'warning', Upload = 'upload', + Twitter = 'twitter', Trash = 'trash', Support = 'support', Supplements = 'supplements', @@ -132,7 +135,7 @@ export enum Icons { Papers = 'papers', Padlock = 'padlock', PadlockUnlock = 'padlock-unlock', - Orchid = 'orchid', + Orcid = 'orcid', MyProjects = 'my-projects', Minus = 'minus', Meetings = 'meetings', @@ -172,54 +175,55 @@ export const ICONS_CODEPOINTS: Record = { [Icons.Website]: '61698', [Icons.Warning]: '61699', [Icons.Upload]: '61700', - [Icons.Trash]: '61701', - [Icons.Support]: '61702', - [Icons.Supplements]: '61703', - [Icons.Sort3]: '61704', - [Icons.Sort2]: '61705', - [Icons.Sort1]: '61706', - [Icons.Settings]: '61707', - [Icons.Search]: '61708', - [Icons.Quotes]: '61709', - [Icons.QuestionMark]: '61710', - [Icons.Publish]: '61711', - [Icons.Profile]: '61712', - [Icons.Plus]: '61713', - [Icons.Pdf]: '61714', - [Icons.Papers]: '61715', - [Icons.Padlock]: '61716', - [Icons.PadlockUnlock]: '61717', - [Icons.Orchid]: '61718', - [Icons.MyProjects]: '61719', - [Icons.Minus]: '61720', - [Icons.Meetings]: '61721', - [Icons.Materials]: '61722', - [Icons.List]: '61723', - [Icons.Linkedin]: '61724', - [Icons.Institutions]: '61725', - [Icons.Information]: '61726', - [Icons.Image]: '61727', - [Icons.Hosting]: '61728', - [Icons.Home]: '61729', - [Icons.Group]: '61730', - [Icons.Github]: '61731', - [Icons.Folder]: '61732', - [Icons.Filter]: '61733', - [Icons.Facebook]: '61734', - [Icons.EyeView]: '61735', - [Icons.EyeHidden]: '61736', - [Icons.Email]: '61737', - [Icons.Download]: '61738', - [Icons.DoubleArrowLeft]: '61739', - [Icons.Dots]: '61740', - [Icons.Donate]: '61741', - [Icons.Doc]: '61742', - [Icons.Design]: '61743', - [Icons.Data]: '61744', - [Icons.Copy]: '61745', - [Icons.Collections]: '61746', - [Icons.Collect]: '61747', - [Icons.Code]: '61748', - [Icons.CalendarSilhouette]: '61749', - [Icons.ArrowDown]: '61750', + [Icons.Twitter]: '61701', + [Icons.Trash]: '61702', + [Icons.Support]: '61703', + [Icons.Supplements]: '61704', + [Icons.Sort3]: '61705', + [Icons.Sort2]: '61706', + [Icons.Sort1]: '61707', + [Icons.Settings]: '61708', + [Icons.Search]: '61709', + [Icons.Quotes]: '61710', + [Icons.QuestionMark]: '61711', + [Icons.Publish]: '61712', + [Icons.Profile]: '61713', + [Icons.Plus]: '61714', + [Icons.Pdf]: '61715', + [Icons.Papers]: '61716', + [Icons.Padlock]: '61717', + [Icons.PadlockUnlock]: '61718', + [Icons.Orcid]: '61719', + [Icons.MyProjects]: '61720', + [Icons.Minus]: '61721', + [Icons.Meetings]: '61722', + [Icons.Materials]: '61723', + [Icons.List]: '61724', + [Icons.Linkedin]: '61725', + [Icons.Institutions]: '61726', + [Icons.Information]: '61727', + [Icons.Image]: '61728', + [Icons.Hosting]: '61729', + [Icons.Home]: '61730', + [Icons.Group]: '61731', + [Icons.Github]: '61732', + [Icons.Folder]: '61733', + [Icons.Filter]: '61734', + [Icons.Facebook]: '61735', + [Icons.EyeView]: '61736', + [Icons.EyeHidden]: '61737', + [Icons.Email]: '61738', + [Icons.Download]: '61739', + [Icons.DoubleArrowLeft]: '61740', + [Icons.Dots]: '61741', + [Icons.Donate]: '61742', + [Icons.Doc]: '61743', + [Icons.Design]: '61744', + [Icons.Data]: '61745', + [Icons.Copy]: '61746', + [Icons.Collections]: '61747', + [Icons.Collect]: '61748', + [Icons.Code]: '61749', + [Icons.CalendarSilhouette]: '61750', + [Icons.ArrowDown]: '61751', }; diff --git a/src/assets/icons/dist/icons.woff b/src/assets/icons/dist/icons.woff index 06073931c..96e1eaffd 100644 Binary files a/src/assets/icons/dist/icons.woff and b/src/assets/icons/dist/icons.woff differ diff --git a/src/assets/icons/dist/icons.woff2 b/src/assets/icons/dist/icons.woff2 index 2c663eb14..b57a283de 100644 Binary files a/src/assets/icons/dist/icons.woff2 and b/src/assets/icons/dist/icons.woff2 differ diff --git a/src/assets/icons/source/facebook.svg b/src/assets/icons/source/facebook.svg index 6dece59ae..a19d99bba 100644 --- a/src/assets/icons/source/facebook.svg +++ b/src/assets/icons/source/facebook.svg @@ -1,6 +1,5 @@ - + - - + diff --git a/src/assets/icons/source/github.svg b/src/assets/icons/source/github.svg index de11dbd89..e191e036d 100644 --- a/src/assets/icons/source/github.svg +++ b/src/assets/icons/source/github.svg @@ -1,6 +1,5 @@ - + - - + diff --git a/src/assets/icons/source/group.svg b/src/assets/icons/source/group.svg index e0c1daefe..67109e5a7 100644 --- a/src/assets/icons/source/group.svg +++ b/src/assets/icons/source/group.svg @@ -1,11 +1,10 @@ - + - - - - - - - + + + + + + diff --git a/src/assets/icons/source/orchid.svg b/src/assets/icons/source/orcid.svg similarity index 100% rename from src/assets/icons/source/orchid.svg rename to src/assets/icons/source/orcid.svg diff --git a/src/assets/icons/source/search.svg b/src/assets/icons/source/search.svg index 6a57fe44b..273c69191 100644 --- a/src/assets/icons/source/search.svg +++ b/src/assets/icons/source/search.svg @@ -1,6 +1,5 @@ - + - - + diff --git a/src/assets/icons/source/twitter.svg b/src/assets/icons/source/twitter.svg new file mode 100644 index 000000000..e45577c01 --- /dev/null +++ b/src/assets/icons/source/twitter.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/orcid.svg b/src/assets/images/orcid.svg new file mode 100644 index 000000000..1ef0be7a2 --- /dev/null +++ b/src/assets/images/orcid.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss index 670b38bc3..87a4c6b78 100644 --- a/src/assets/styles/_mixins.scss +++ b/src/assets/styles/_mixins.scss @@ -10,6 +10,11 @@ align-items: center; } +@mixin flex-align-center { + display: flex; + align-items: center; +} + @mixin flex-center-right { display: flex; justify-content: flex-end; diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss index 7a3cda74a..9f5143535 100644 --- a/src/assets/styles/overrides/button.scss +++ b/src/assets/styles/overrides/button.scss @@ -91,7 +91,8 @@ } .btn-icon-text, -.btn-icon-text-success { +.btn-icon-text-success, +.form-btn { .p-button { background-color: transparent; color: var.$pr-blue-1; @@ -128,3 +129,25 @@ } } } + +.btn-full-width { + .p-button { + width: 100%; + } +} + +.form-btn { + .p-button { + @include mix.flex-center; + gap: 0.7rem; + color: var.$dark-blue-1; + + &:hover { + color: var.$dark-blue-2; + } + + .p-button-label { + font-weight: 400; + } + } +} diff --git a/src/assets/styles/overrides/checkbox.scss b/src/assets/styles/overrides/checkbox.scss new file mode 100644 index 000000000..23fc09a47 --- /dev/null +++ b/src/assets/styles/overrides/checkbox.scss @@ -0,0 +1,27 @@ +@use "../variables" as var; + +.p-checkbox { + width: 1.4rem; + height: 1.4rem; + border-color: var.$grey-2; +} + +.p-checkbox-box { + width: 1.4rem; + height: 1.4rem; + background: white; + border-color: var.$grey-2; +} + +.p-checkbox-checked { + .p-checkbox-box { + border: 1px solid var.$pr-blue-1; + background: var.$pr-blue-1; + } + + .p-checkbox-icon { + color: white; + font-size: 20px; + width: 0.7rem; + } +} diff --git a/src/assets/styles/overrides/divider.scss b/src/assets/styles/overrides/divider.scss new file mode 100644 index 000000000..658ba5fa2 --- /dev/null +++ b/src/assets/styles/overrides/divider.scss @@ -0,0 +1,16 @@ +@use "../variables" as var; + +.p-divider { + color: var.$dark-blue-1; + margin: 2rem 0; +} + +.p-divider-content { + background: white; + padding: 0 1rem; + color: var.$dark-blue-1; +} + +.p-divider-horizontal:before { + border-block-start: 1px solid var.$grey-2; +} diff --git a/src/assets/styles/overrides/input.scss b/src/assets/styles/overrides/input.scss new file mode 100644 index 000000000..01d1b1b0f --- /dev/null +++ b/src/assets/styles/overrides/input.scss @@ -0,0 +1,35 @@ +@use "../variables" as var; + +.p-inputtext { + color: var.$dark-blue-1; + width: 100%; + background: white; + border-color: var.$grey-2; +} + +.p-password { + width: 100%; +} + +label { + display: block; + color: var.$grey-1; + margin-bottom: 0.3rem; + font-weight: 400; +} + +.p-inputtext.ng-touched.ng-invalid, +.p-inputtext.ng-dirty.ng-invalid { + border: 1px solid var.$red-1; +} + +p-password.ng-touched.ng-invalid { + .p-password-input { + border: 1px solid var.$red-1; + } +} + +.p-inputtext.ng-touched.ng-invalid::placeholder, +.p-inputtext.ng-dirty.ng-invalid::placeholder { + color: var.$grey-1; +} diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss index a87fa941e..a2efb0bc4 100644 --- a/src/assets/styles/styles.scss +++ b/src/assets/styles/styles.scss @@ -1,7 +1,10 @@ @use "fonts"; -@use "variables"; -@use "mixins"; +@use "variables" as var; +@use "mixins" as mix; @use "./overrides/button"; +@use "./overrides/input"; +@use "./overrides/checkbox"; +@use "./overrides/divider"; @layer base, primeng, reset; @@ -16,7 +19,7 @@ @layer reset { html, body { - font-family: variables.$openSans; + font-family: var.$openSans; font-weight: 400; font-size: 14px; } @@ -38,7 +41,7 @@ h3 { font-weight: 700; text-transform: capitalize; - color: variables.$dark-blue-1; + color: var.$dark-blue-1; } li { @@ -48,13 +51,17 @@ a, a:visited { text-decoration: none; - color: variables.$pr-blue-1; + color: var.$pr-blue-1; } a:hover { text-decoration: underline; } + i { + @include mix.flex-center; + } + button { color: white; }