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..0e8f9bab7 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,99 @@ } } -.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 (max-width: 1440px) { + background-image: none; + } - @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: 22px; 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 (max-width: 1440px) { + right: 8%; } - @media screen and (max-width: 1379px) and (min-width: 1100px) { - font-size: 1rem; + .legacy-lab-header { + margin-bottom: 32px; + font-weight: 600; + + .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: 32px; + color: $PR-orange; + } } - 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-text { + margin-bottom: 32px; } - 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-list { + margin-bottom: 32px; + list-style-type: none; + padding-left: 0; - .start-date { - font-weight: bold; - margin-bottom: 2rem; - font-size: 1.5rem; - font-family: 'UsualBold', sans-serif; - } + li { + margin-bottom: 16px; - p { - font-size: 1rem; - width: 50%; - font-family: 'UsualRegular', sans-serif; - } + .legacy-lab-list-icon { + color: $PR-orange; + } + } - a { - font-size: 1rem; - font-style: italic; - font-weight: bold; - font-family: 'UsualBold', sans-serif; - } - - 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/app/auth/components/auth/auth.components.spec.ts b/src/app/auth/components/auth/auth.components.spec.ts index 68f86080a..f0259684c 100644 --- a/src/app/auth/components/auth/auth.components.spec.ts +++ b/src/app/auth/components/auth/auth.components.spec.ts @@ -1,17 +1,44 @@ -import { Shallow } from 'shallow-render'; -import { AuthRoutingModule } from '@auth/auth.routes'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { + faLeafOak, + faListCheck, + faCircleVideo, + faUserGroupSimple, +} from '@fortawesome/pro-regular-svg-icons'; import { AuthComponent } from './auth.component'; describe('AuthComponent', () => { - let shallow: Shallow; + let component: AuthComponent; + let fixture: ComponentFixture; beforeEach(async () => { - shallow = new Shallow(AuthComponent, AuthRoutingModule); + await TestBed.configureTestingModule({ + declarations: [AuthComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + 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 create', async () => { - const { instance } = await shallow.render(); + it('should open legacy lab URL in same tab when openLegacyLab is called', () => { + spyOn(window, 'open'); + component.openLegacyLab(); - expect(instance).toBeTruthy(); + expect(window.open).toHaveBeenCalledWith( + 'http://permanent.org/legacy-lab/', + '_self', + ); }); }); 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;