Merge pull request #528 from PermanentOrg/PER-10036-swap-out-sign-in-image

Per 10036 swap out sign in image

Author: meisekimiu

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

@@ -1,11 +1,12 @@
 <pr-announcement></pr-announcement>
-<div class="auth-root">
+<div class="auth-root legacy-lab">
   <div class="auth-container">
-    <div
-      class="image"
-      aria-description='Black and white photo of a child with a bicycle stopped in front of a black milk truck with a man standing by the door. The milk truck reads "Haadsma&#39;s Dairy." The photo appears to be from the 1950s.'
-    >
-      <div class="testimony">
+    <div class="image legacy-lab">
+      <div
+        class="legacy-lab-center-slice"
+        aria-label="The Legacy Lab by Permanent"
+      ></div>
+      <!-- <div class="testimony">
         <p class="text">
           At Permanent, we celebrate our members’ hard work through our Public
           Gallery and archive spotlights. Explore our gallery and, when you’re
@@ -18,6 +19,25 @@
         <p class="text archive-data">
           Haadsma Dairy Truck | The Haadsma Dairy Archive
         </p>
+      </div> -->
+      <div class="legacy-lab-container">
+        <div class="legacy-lab-text">
+          <h1 class="header">Legacy Lab</h1>
+          <h2 class="start-date">Begins March 3rd</h2>
+          <p>
+            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>
+          <ul>
+            <li>Daily Tasks</li>
+            <li>Video Tutorials</li>
+            <li>Peer Support</li>
+          </ul>
+          <a href="https://permanent.org/legacy-lab/"
+            >Sign Up for Legacy Lab Today!</a
+          >
+        </div>
       </div>
     </div>
     <div class="auth">

src/app/auth/components/auth/auth.component.scss

@@ -17,7 +17,9 @@
   flex-shrink: 1;
 
   @media screen {
-    padding: 20px 0px;
+    &:not(.legacy-lab) {
+      padding: 20px 0px;
+    }
   }
 }
 
@@ -56,6 +58,26 @@
 }
 
 .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_image.png');
@@ -136,3 +158,56 @@
     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;
+  }
+
+  .start-date {
+    font-weight: bold;
+    margin-bottom: 2rem;
+    font-size: 1.5rem;
+    font-family: 'UsualBold', sans-serif;
+  }
+
+  p {
+    font-size: 1rem;
+    width: 50%;
+    font-family: 'UsualRegular', sans-serif;
+  }
+
+  a {
+    font-size: 1rem;
+    font-style: italic;
+    font-weight: bold;
+    font-family: 'UsualBold', sans-serif;
+  }
+
+  ul {
+    margin-bottom: 2rem;
+
+    & > li {
+      font-family: 'UsualRegular', sans-serif;
+      position: relative;
+    }
+  }
+}
+
+.legacy-lab-container {
+  margin-left: 50px;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+  justify-content: center;
+}