From 210a10ce381e71ad0b60841b0cbe9346d4d5547b Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Thu, 4 Sep 2025 14:50:35 +0300 Subject: [PATCH 1/6] [PER-10283] Change login screen graphic for legacy lab --- src/app/auth/auth.routes.ts | 2 + .../auth/components/auth/auth.component.html | 51 +++-- .../auth/components/auth/auth.component.scss | 200 +++++++----------- .../auth/components/auth/auth.component.ts | 17 +- src/assets/img/Legacy-Hero-Image.svg | 50 +++++ src/styles/_colors.scss | 3 + src/styles/_variables.scss | 5 + 7 files changed, 190 insertions(+), 138 deletions(-) create mode 100644 src/assets/img/Legacy-Hero-Image.svg diff --git a/src/app/auth/auth.routes.ts b/src/app/auth/auth.routes.ts index 6eefbd9fc..ae4c31d5b 100644 --- a/src/app/auth/auth.routes.ts +++ b/src/app/auth/auth.routes.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { RecaptchaModule } from 'ng-recaptcha-2'; @@ -62,6 +63,7 @@ const routes: Routes = [ @NgModule({ imports: [ RouterModule.forChild(routes), + FontAwesomeModule, SharedModule, AnnouncementModule, RecaptchaModule, diff --git a/src/app/auth/components/auth/auth.component.html b/src/app/auth/components/auth/auth.component.html index e711eb0f6..4cb407e24 100644 --- a/src/app/auth/components/auth/auth.component.html +++ b/src/app/auth/components/auth/auth.component.html @@ -1,19 +1,46 @@
-
-
-

- At Permanent, we’re committed to helping communities preserve their - legacies. Byte4Byte is our storage grant program for nonprofits - that provides free, permanent storage to help you protect the stories - and movements shaping your community. Keep history accessible for - generations. +

+
+
+

Legacy Lab

+

Begins October 6th

+
+

+ At Permanent, we believe in the power of preserving your story. Join + Legacy Lab, a free four-week course where you'll create a lasting + archive and learn through:

-
- Learn more about Byte4Byte +
    +
  • + Daily Tasks +
    • +
  • + Video Tutorials +
    • +
  • + Peer Support through Community Groups +
    • +
+
diff --git a/src/app/auth/components/auth/auth.component.scss b/src/app/auth/components/auth/auth.component.scss index 298b1e8f1..e72f982e8 100644 --- a/src/app/auth/components/auth/auth.component.scss +++ b/src/app/auth/components/auth/auth.component.scss @@ -57,42 +57,6 @@ } } -.image { - &.legacy-lab { - background: url('../../../../assets/img/legacy_lab_sign_in_stripe.png'); - background-size: contain; - background-position: center right 1.5rem; - background-repeat: repeat-y; - } - - .legacy-lab-center-slice { - z-index: 0; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: url('../../../../assets/img/legacy_lab_sign_in_image.png'); - background-size: contain; - background-position: center right 1.5rem; - background-repeat: no-repeat; - } - - position: relative; - height: 100%; - background: url('../../../../assets/img/sign_in_byte4byte.jpg'); - background-size: cover; - background-position: center center; - flex-grow: 1; - border-radius: 1em; - - margin-left: 20px; - - @include beforeDesktop { - display: none; - } -} - .permanent-logo { margin-bottom: 32px; @include beforeDesktop { @@ -104,112 +68,98 @@ } } -.testimony { - position: absolute; - background: rgba(255, 255, 255, 0.9); - padding: 2.5% 5%; - left: 64px; - bottom: 64px; - border-radius: 12px; - width: calc((100% - 128px) / 2); +.legacy-lab-container { + position: relative; + height: 100%; + background: url('../../../../assets/img/Legacy-Hero-Image.svg'); + background-color: $PR-blue-900; + background-repeat: no-repeat; + background-size: contain; + background-position: top right; + flex-grow: 1; + border-radius: 1em; + margin-left: 20px; - @media screen and (min-width: 1024px) and (max-width: 1279px) { - width: calc(100% - 64px); - left: 32px; - bottom: 32px; + @include beforeDesktop { + display: none; } - & > .text { - font-family: 'UsualRegular', sans-serif; + .legacy-lab-testimony { + position: absolute; + right: 40%; + top: 150px; + padding: 2.5% 5%; + border-radius: 12px; + font-size: 14px; font-weight: 400; line-height: 24px; - font-size: 0.8rem; - @media screen and (min-width: 1800px) { - font-size: 1rem; - } + color: $white; + letter-spacing: 0%; + font-style: regular; - @media screen and (max-width: 1099px) and (min-width: 901px) { - font-size: 0.7rem; + @media screen and (min-width: 1024px) and (max-width: 1279px) { + right: 30%; } - @media screen and (max-width: 1379px) and (min-width: 1100px) { - font-size: 1rem; + @media screen and (max-width: 1279px) { + top: 80px; } - color: #131b4a; - } - - & > .link { - font-family: 'UsualRegular', sans-serif; - font-weight: 300; - line-height: 24px; - font-size: 0.8rem; - @media screen and (min-width: 1800px) { - font-size: 1.1rem; + .legacy-lab-header { + margin-bottom: 32px; + + .legacy-lab-header-title { + font-weight: 600; + font-style: medium; + font-size: 56px; + line-height: 72px; + letter-spacing: -2%; + margin-bottom: 16px; + } + + .legacy-lab-header-sub-title { + font-size: 16px; + color: $PR-orange; + } } - color: #131b4a; - } - - & > .archive-data { - font-size: 10px; - } - & > p { - margin: 0; - } -} - -.legacy-lab-text { - color: white; - - .start-date, - a { - color: #ff9933; - } - - .header { - font-size: 2.5rem; - font-weight: bold; - font-family: 'UsualBold', sans-serif; - } + .legacy-lab-text { + margin-bottom: 32px; + } - .start-date { - font-weight: bold; - margin-bottom: 2rem; - font-size: 1.5rem; - font-family: 'UsualBold', sans-serif; - } + .legacy-lab-list { + margin-bottom: 32px; + list-style-type: none; + padding-left: 0; - p { - font-size: 1rem; - width: 50%; - font-family: 'UsualRegular', sans-serif; - } + li { + margin-bottom: 16px; - a { - font-size: 1rem; - font-style: italic; - font-weight: bold; - font-family: 'UsualBold', sans-serif; - } + .legacy-lab-list-icon { + color: $PR-orange; + } + } - ul { - margin-bottom: 2rem; + .legacy-lab-list-icon { + color: $PR-orange; + margin-right: 16px; + } + } - & > li { - font-family: 'UsualRegular', sans-serif; - position: relative; + .legacy-lab-button { + all: unset; + cursor: pointer; + background: $linear-gradient-background-orange-purple; + padding: 20px 32px; + border-radius: 62px; + font-weight: 600; + font-style: medium; + font-size: 16px; + letter-spacing: -1%; + + .legacy-lab-button-icon { + margin-left: 16px; + } } } } - -.legacy-lab-container { - position: relative; - z-index: 1; - margin-left: 50px; - margin-top: 20px; - display: flex; - flex-direction: column; - height: 80%; - justify-content: center; -} diff --git a/src/app/auth/components/auth/auth.component.ts b/src/app/auth/components/auth/auth.component.ts index 95b51d72a..bc4d7a958 100644 --- a/src/app/auth/components/auth/auth.component.ts +++ b/src/app/auth/components/auth/auth.component.ts @@ -1,4 +1,10 @@ import { Component } from '@angular/core'; +import { + faLeafOak, + faListCheck, + faCircleVideo, + faUserGroupSimple, +} from '@fortawesome/pro-regular-svg-icons'; @Component({ selector: 'pr-auth', @@ -6,4 +12,13 @@ import { Component } from '@angular/core'; styleUrls: ['./auth.component.scss'], standalone: false, }) -export class AuthComponent {} +export class AuthComponent { + openLegacyLab() { + window.open('http://permanent.org/legacy-lab/', '_self'); + } + + public leafOakIcon = faLeafOak; + public listCheckIcon = faListCheck; + public circleVideoIcon = faCircleVideo; + public userGroupSimpleIcon = faUserGroupSimple; +} diff --git a/src/assets/img/Legacy-Hero-Image.svg b/src/assets/img/Legacy-Hero-Image.svg new file mode 100644 index 000000000..133b40929 --- /dev/null +++ b/src/assets/img/Legacy-Hero-Image.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 04ff86d89..207d0efd1 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -7,6 +7,9 @@ $PR-orange: #ff9933; $PR-blue-light: #5261b7; $PR-blue-lightest: #41496e; +$PR-blue-900: #131b4a; +$PR-blue-800: #2b325c; + $PR-orange-light: #ffc779; $PR-orange-lightest: #ffead5; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index dadcbaa15..ac58c47f9 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -102,6 +102,11 @@ $form-label-dark: rgba(255, 255, 255, 0.64); $form-error-red: rgba(240, 68, 56, 1); $linear-gradient-background: linear-gradient(90deg, #131b4a 0%, #364493 100%); +$linear-gradient-background-orange-purple: linear-gradient( + 90deg, + $PR-orange 0%, + $PR-purple 100% +); @mixin public-centered { max-width: $public-max-width; From cff2a15b4a8b58f2bc808fdf6ffa4445ac7d3d92 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Fri, 5 Sep 2025 18:55:56 +0300 Subject: [PATCH 2/6] [PER-10283] Add unit tests --- .../components/auth/auth.components.spec.ts | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/src/app/auth/components/auth/auth.components.spec.ts b/src/app/auth/components/auth/auth.components.spec.ts index 68f86080a..0d8454ece 100644 --- a/src/app/auth/components/auth/auth.components.spec.ts +++ b/src/app/auth/components/auth/auth.components.spec.ts @@ -1,17 +1,40 @@ -import { Shallow } from 'shallow-render'; -import { AuthRoutingModule } from '@auth/auth.routes'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { AuthComponent } from './auth.component'; +import { + faLeafOak, + faListCheck, + faCircleVideo, + faUserGroupSimple, +} from '@fortawesome/pro-regular-svg-icons'; describe('AuthComponent', () => { - let shallow: Shallow; + let component: AuthComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - shallow = new Shallow(AuthComponent, AuthRoutingModule); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AuthComponent], + }).compileComponents(); - it('should create', async () => { - const { instance } = await shallow.render(); + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - expect(instance).toBeTruthy(); - }); + it('should create the component', () => { + expect(component).toBeTruthy(); + }); + + it('should have correct icon bindings', () => { + expect(component.leafOakIcon).toBe(faLeafOak); + expect(component.listCheckIcon).toBe(faListCheck); + expect(component.circleVideoIcon).toBe(faCircleVideo); + expect(component.userGroupSimpleIcon).toBe(faUserGroupSimple); + }); + + it('should open legacy lab URL in same tab when openLegacyLab is called', () => { + spyOn(window, 'open'); + component.openLegacyLab(); + expect(window.open).toHaveBeenCalledWith('http://permanent.org/legacy-lab/', '_self'); + }); }); From 74532f0cec8d966b4b8ec741aa5970cb5fa780ff Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Fri, 5 Sep 2025 19:00:35 +0300 Subject: [PATCH 3/6] [PER-10283] Fixed linting issues --- .../components/auth/auth.components.spec.ts | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/src/app/auth/components/auth/auth.components.spec.ts b/src/app/auth/components/auth/auth.components.spec.ts index 0d8454ece..f0259684c 100644 --- a/src/app/auth/components/auth/auth.components.spec.ts +++ b/src/app/auth/components/auth/auth.components.spec.ts @@ -1,40 +1,44 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AuthComponent } from './auth.component'; import { - faLeafOak, - faListCheck, - faCircleVideo, - faUserGroupSimple, + faLeafOak, + faListCheck, + faCircleVideo, + faUserGroupSimple, } from '@fortawesome/pro-regular-svg-icons'; +import { AuthComponent } from './auth.component'; describe('AuthComponent', () => { - let component: AuthComponent; - let fixture: ComponentFixture; + let component: AuthComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AuthComponent], + }).compileComponents(); - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AuthComponent], - }).compileComponents(); + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - fixture = TestBed.createComponent(AuthComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + it('should create the component', () => { + expect(component).toBeTruthy(); + }); - it('should create the component', () => { - expect(component).toBeTruthy(); - }); + it('should have correct icon bindings', () => { + expect(component.leafOakIcon).toBe(faLeafOak); + expect(component.listCheckIcon).toBe(faListCheck); + expect(component.circleVideoIcon).toBe(faCircleVideo); + expect(component.userGroupSimpleIcon).toBe(faUserGroupSimple); + }); - it('should have correct icon bindings', () => { - expect(component.leafOakIcon).toBe(faLeafOak); - expect(component.listCheckIcon).toBe(faListCheck); - expect(component.circleVideoIcon).toBe(faCircleVideo); - expect(component.userGroupSimpleIcon).toBe(faUserGroupSimple); - }); + it('should open legacy lab URL in same tab when openLegacyLab is called', () => { + spyOn(window, 'open'); + component.openLegacyLab(); - it('should open legacy lab URL in same tab when openLegacyLab is called', () => { - spyOn(window, 'open'); - component.openLegacyLab(); - expect(window.open).toHaveBeenCalledWith('http://permanent.org/legacy-lab/', '_self'); - }); + expect(window.open).toHaveBeenCalledWith( + 'http://permanent.org/legacy-lab/', + '_self', + ); + }); }); From 6767b63a2df092f3ac2ef4db3c87881bc48f8224 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Mon, 8 Sep 2025 14:21:58 +0300 Subject: [PATCH 4/6] [PER-10283] Make text bigger --- src/app/auth/components/auth/auth.component.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/auth/components/auth/auth.component.scss b/src/app/auth/components/auth/auth.component.scss index e72f982e8..cdb99a706 100644 --- a/src/app/auth/components/auth/auth.component.scss +++ b/src/app/auth/components/auth/auth.component.scss @@ -90,7 +90,7 @@ top: 150px; padding: 2.5% 5%; border-radius: 12px; - font-size: 14px; + font-size: 22px; font-weight: 400; line-height: 24px; color: $white; @@ -107,6 +107,7 @@ .legacy-lab-header { margin-bottom: 32px; + font-weight: 600; .legacy-lab-header-title { font-weight: 600; @@ -118,7 +119,7 @@ } .legacy-lab-header-sub-title { - font-size: 16px; + font-size: 32px; color: $PR-orange; } } From 279ba2f24428ff4a5245d9cfb7b3c3ee25f36722 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Thu, 18 Sep 2025 15:44:47 +0300 Subject: [PATCH 5/6] [PER-10283] Remove backbround image on smaller screens --- src/app/auth/components/auth/auth.component.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/auth/components/auth/auth.component.scss b/src/app/auth/components/auth/auth.component.scss index cdb99a706..a66162f61 100644 --- a/src/app/auth/components/auth/auth.component.scss +++ b/src/app/auth/components/auth/auth.component.scss @@ -80,6 +80,10 @@ border-radius: 1em; margin-left: 20px; +@media screen and (max-width: 1440px) { + background-image: none; +} + @include beforeDesktop { display: none; } @@ -97,12 +101,8 @@ letter-spacing: 0%; font-style: regular; - @media screen and (min-width: 1024px) and (max-width: 1279px) { - right: 30%; - } - - @media screen and (max-width: 1279px) { - top: 80px; + @media screen and (max-width: 1440px) { + right: 8%; } .legacy-lab-header { From e8fd29576d980b7c211d2fdb40d559f7d2569583 Mon Sep 17 00:00:00 2001 From: aasandei-vsp Date: Thu, 18 Sep 2025 15:59:15 +0300 Subject: [PATCH 6/6] [PER-10283] Fix linting --- src/app/auth/components/auth/auth.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/auth/components/auth/auth.component.scss b/src/app/auth/components/auth/auth.component.scss index a66162f61..0e8f9bab7 100644 --- a/src/app/auth/components/auth/auth.component.scss +++ b/src/app/auth/components/auth/auth.component.scss @@ -80,9 +80,9 @@ border-radius: 1em; margin-left: 20px; -@media screen and (max-width: 1440px) { - background-image: none; -} + @media screen and (max-width: 1440px) { + background-image: none; + } @include beforeDesktop { display: none;