[PER-10283] Change login screen graphic for legacy lab

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,

src/app/auth/components/auth/auth.component.html

@@ -1,19 +1,46 @@
 <pr-announcement></pr-announcement>
 <div class="auth-root">
 	<div class="auth-container">
-		<div class="image">
-			<div class="testimony">
-				<p class="text">
-					At Permanent, we’re committed to helping communities preserve their
-					legacies. <b>Byte4Byte</b> 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.
+		<div class="legacy-lab-container">
+			<div class="legacy-lab-testimony">
+				<div class="legacy-lab-header">
+					<h1 class="legacy-lab-header-title">Legacy Lab</h1>
+					<h2 class="legacy-lab-header-sub-title">Begins October 6th</h2>
+				</div>
+				<p class="legacy-lab-text">
+					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:
 				</p>
-				<br />
-				<a class="link" href="https://www.permanent.org/byte4byte/"
-					>Learn more about Byte4Byte</a
-				>
+				<ul class="legacy-lab-list">
+					<li>
+						<fa-icon
+							class="legacy-lab-list-icon"
+							[icon]="listCheckIcon"
+						></fa-icon
+						>Daily Tasks
+					</li>
+					<li>
+						<fa-icon
+							class="legacy-lab-list-icon"
+							[icon]="circleVideoIcon"
+						></fa-icon
+						>Video Tutorials
+					</li>
+					<li>
+						<fa-icon
+							class="legacy-lab-list-icon"
+							[icon]="userGroupSimpleIcon"
+						></fa-icon
+						>Peer Support through Community Groups
+					</li>
+				</ul>
+				<button (click)="openLegacyLab()" class="legacy-lab-button">
+					Sign Up for Legacy Lab Today!<fa-icon
+						class="legacy-lab-button-icon"
+						[icon]="leafOakIcon"
+					></fa-icon>
+				</button>
 			</div>
 		</div>
 		<div class="auth">

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;
-}

src/app/auth/components/auth/auth.component.ts

@@ -1,9 +1,24 @@
 import { Component } from '@angular/core';
+import {
+	faLeafOak,
+	faListCheck,
+	faCircleVideo,
+	faUserGroupSimple,
+} from '@fortawesome/pro-regular-svg-icons';
 
 @Component({
 	selector: 'pr-auth',
 	templateUrl: './auth.component.html',
 	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;
+}

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<AuthComponent>;
+	let component: AuthComponent;
+	let fixture: ComponentFixture<AuthComponent>;
 
 	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',
+		);
 	});
 });