Merge pull request #487 from PermanentOrg/PER-9760-upgrade-congrats-screen

design changes to final onboarding screen

Author: meisekimiu

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.html

@@ -5,6 +5,15 @@
   </div>
   <div class="content-container">
     <div>
+      <p class="get-started-text">
+        Get started by uploading your first files, or learn more about your new
+        archive by
+        <a
+          target="_blank"
+          href="https://permanent.zohodesk.com/portal/en/kb/permanent-legacy-foundation"
+          >viewing our help articles here.</a
+        >
+      </p>
       <div class="archive-info">
         <div>
           <img
@@ -20,22 +29,20 @@
         </div>
       </div>
       <hr />
-      <p class="get-started-text">
-        Get started by uploading your first files, or learn more about your new
-        archive by viewing our help articles through the ‘?’ button in the lower
-        right-hand corner.
-      </p>
     </div>
     <div class="button-container">
-      <pr-button
-        [orientation]="'right'"
-        [variant]="'secondary'"
-        [icon]="'/accept'"
-        [size]="'fill'"
-        [disabled]="isArchiveSubmitted"
-        (buttonClick)="finalizeArchive()"
-        >Done</pr-button
-      >
+      <div class="button">
+        <pr-button
+          [orientation]="'right'"
+          [variant]="'secondary'"
+          [icon]="'/accept'"
+          [size]="'fill'"
+          [disabled]="isArchiveSubmitted"
+          (buttonClick)="finalizeArchive()"
+          [style]="{ justifyContent: 'center' }"
+          >Done</pr-button
+        >
+      </div>
     </div>
   </div>
 </div>

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.scss

@@ -28,12 +28,12 @@ p {
 
 .square {
   border-radius: 6px;
-  background: #a6f4c5;
+  background: rgba(255, 255, 255, 0.08);
   width: 72px;
   padding: 6px;
 
   & > span {
-    color: rgba(19, 27, 74, 1);
+    color: white;
   }
 }
 
@@ -84,7 +84,20 @@ hr {
 }
 
 .button-container {
+  display: flex;
+  justify-content: flex-end;
   @media screen and (max-width: 465px) {
     padding: 20px;
   }
 }
+
+.button {
+  width: 50%;
+}
+
+.get-started-text {
+  & > a {
+    color: white;
+  }
+  margin-bottom: 2rem;
+}