Merge pull request #421 from PermanentOrg/PER-9567-redesign-create-ar…

…chive-only

Separate the archive creation Pr

src/app/component-library/components/button/button.component.html

@@ -1,18 +1,19 @@
 <!-- @format  -->
 <button
-  [attr.type]="attr"
+  [attr.type]="buttonType"
   class="button"
   [ngClass]="[
     'button-' + variant,
     'button-' + size,
     'button-' + mode,
     'button-' + height,
+    size === 'fill' && !icon && !faIcon ? 'button-fill-no-icon' : '',
     orientation === 'right' ? 'button-reverse' : ''
   ]"
   [disabled]="disabled"
   (click)="onClick($event)"
 >
   <img *ngIf="icon" class="icon" src="{{ 'assets/svg/' + icon + '.svg' }}" />
   <fa-icon class="icon" *ngIf="faIcon" [icon]="['fas', faIcon]"></fa-icon>
-  <p class="button-text">{{ text }}</p>
+  <p class="button-text"><ng-content></ng-content></p>
 </button>

src/app/component-library/components/button/button.component.scss

@@ -1,24 +1,32 @@
 /* @format */
 @import 'variables';
 
-@mixin darkButton {
-  background-color: rgba(19, 27, 74, 1);
-  border: 1px solid rgba(19, 27, 74, 1);
+@mixin darkButton($isLink: false) {
+  background-color: rgba(255, 255, 255, 0);
+  border: 1px solid rgba(255, 255, 255, 0.32);
 
   & > .button-text {
     color: white;
     margin: 0;
     @include bodyMedium;
+
+    @if $isLink {
+      font-size: 14px;
+    }
   }
 }
 
-@mixin lightButton {
+@mixin lightButton($isLink: false) {
   background-color: $white;
   border: 1px solid rgba(184, 187, 201, 1);
   & > .button-text {
     color: rgba(19, 27, 74, 1);
     margin: 0;
     @include bodyMedium;
+
+    @if $isLink {
+      font-size: 14px;
+    }
   }
 
   & > .icon {
@@ -27,6 +35,11 @@
 }
 
 .button {
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   &:focus {
     outline: none;
   }
@@ -53,8 +66,10 @@
 
   &-primary {
     &.button-light {
-      //the button on a white background will be blue
       @include darkButton();
+      &:focus {
+        border: 2px solid white;
+      }
     }
     &.button-dark {
       @include lightButton();
@@ -64,6 +79,9 @@
   &-secondary {
     &.button-light {
       @include lightButton();
+      &:focus {
+        border: 2px solid black;
+      }
     }
     &.button-dark {
       @include darkButton();
@@ -88,8 +106,12 @@
 
   &-fill {
     width: 100%;
-    padding: 0px 24px;
+    padding: 12px 24px;
     height: 56px;
+    justify-content: space-between;
+    &-no-icon {
+      justify-content: center;
+    }
   }
 
   &-fill.button-large {
@@ -101,4 +123,26 @@
     margin: 0;
     @include bodyMedium;
   }
+
+  &-link {
+    margin-left: 4px;
+    padding: 0px;
+    &.button-dark {
+      @include darkButton(true);
+      font-size: 14px;
+      border: 1px solid transparent;
+    }
+    &.button-light {
+      @include lightButton(true);
+      font-size: 14px;
+      border: 1px solid transparent;
+    }
+
+    &:focus {
+      outline: none;
+      background-color: #e0e0e0;
+      box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
+      border-color: #159ce4;
+    }
+  }
 }

src/app/component-library/components/button/button.component.spec.ts

@@ -105,12 +105,12 @@ describe('ButtonComponent', () => {
 
     expect(button.nativeElement.type).toEqual('button');
 
-    instance.attr = 'submit';
+    instance.buttonType = 'submit';
     fixture.detectChanges();
 
     expect(button.nativeElement.type).toEqual('submit');
 
-    instance.attr = 'reset';
+    instance.buttonType = 'reset';
     fixture.detectChanges();
 
     expect(button.nativeElement.type).toEqual('reset');

src/app/component-library/components/button/button.component.ts

@@ -1,12 +1,12 @@
 /* @format */
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
-type VARIANT = 'primary' | 'secondary' | 'tertiary';
+type VARIANT = 'primary' | 'secondary' | 'tertiary' | 'link';
 type MODE = 'light' | 'dark';
 type SIZE = 'hug' | 'fill';
 type ORIENTATION = 'left' | 'right';
 type HEIGHT = 'medium' | 'large';
-type ATTR = 'submit' | 'reset' | 'button';
+type TYPE = 'submit' | 'reset' | 'button';
 
 @Component({
   selector: 'pr-button',
@@ -15,7 +15,6 @@ type ATTR = 'submit' | 'reset' | 'button';
 })
 export class ButtonComponent {
   //Inputs
-  @Input() text: string = '';
   @Input() variant: VARIANT = 'primary';
   @Input() height: HEIGHT = 'medium';
   @Input() mode: MODE = 'light';
@@ -24,7 +23,7 @@ export class ButtonComponent {
   @Input() icon: string = '';
   @Input() orientation: ORIENTATION = 'left';
   @Input() faIcon: string = '';
-  @Input() attr: ATTR = 'button';
+  @Input() buttonType: TYPE = 'button';
 
   //Outputs
   @Output() buttonClick = new EventEmitter<MouseEvent>();

src/app/component-library/components/form-input/form-input.component.html

@@ -1,7 +1,7 @@
 <!-- @format -->
 <div
   class="input-vertical-label"
-  [class.hidden]="isLabelHidden()"
+  [class.hidden]="isLabelHidden() || hideLabel"
   [class.input-vertical-label-light]="variant === 'light'"
   [class.input-vertical-label-dark]="variant === 'dark'"
 >
@@ -14,15 +14,18 @@
 ></fa-icon>
 <input
   [type]="type"
-  (input)="onInputChange($event.target.value)"
   class="form-control form-input"
+  (input)="onInputChange($event)"
   [id]="fieldName"
   [name]="fieldName"
   [placeholder]="placeholder"
+  [formControl]="control"
+  [class.form-input-with-text]="!isLabelHidden()"
   [class.validate-dirty]="config && config.validateDirty"
   [class.form-input-errors]="errors"
   [class.form-input-light]="variant === 'light'"
   [class.form-input-dark]="variant === 'dark'"
+  [style]="styling"
 />
 <div class="input-vertical-error" [class.hidden]="!errors">
   {{ errors }}

src/app/component-library/components/form-input/form-input.component.scss

@@ -13,9 +13,13 @@
   line-height: 24px;
   font-weight: 600;
   border: 1px solid $form-border;
-  padding: 12px;
+  padding: 14px 24px 14px 24px;
   height: 48px;
 
+  &-with-text {
+    padding: 28px 24px 14px 24px;
+  }
+
   &-light.form-input-errors {
     background-color: $form-background-error;
     border: 1px solid $form-border-error;
@@ -41,7 +45,7 @@
   }
 
   &-dark {
-    background-color: $form-background-dark;
+    background: rgba(255, 255, 255, 0.08);
     opacity: 0.8;
     color: white;
     border: 1px solid transparent;
@@ -62,8 +66,8 @@
   font-size: 10px;
   font-weight: 400;
   text-transform: uppercase;
-  left: 12px;
-  top: 4px;
+  left: 24px;
+  top: 7px;
   &-dark {
     color: $form-label-dark;
   }

src/app/component-library/components/form-input/form-input.component.ts

@@ -32,7 +32,7 @@ export interface FormInputConfig {
 }
 
 @Component({
-  selector: 'pr-form-input-comp',
+  selector: 'pr-form-input-glam',
   templateUrl: './form-input.component.html',
   styleUrls: ['./form-input.component.scss'],
 })
@@ -48,6 +48,8 @@ export class FormInputComponent implements OnInit, AfterViewInit {
     message: string;
     value?: number | string;
   }[] = [];
+  @Input() styling = {};
+  @Input() hideLabel: boolean = false;
 
   @HostBinding('class.right-align') rightAlign = false;
   @HostBinding('class.input-vertical') inputVertical = true;
@@ -157,7 +159,7 @@ export class FormInputComponent implements OnInit, AfterViewInit {
         inputField.setAttribute('spellcheck', this.config.spellcheck);
       }
 
-      if ((this.config.autoselect && this.control.value) || this.value) {
+      if (this.config.autoselect && (this.control.value || this.value)) {
         inputField.addEventListener('focus', (event) => {
           inputField.setSelectionRange(0, inputField.value.length);
         });

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

@@ -0,0 +1,38 @@
+<!-- @format  -->
+<div class="greetings-container">
+  <p>
+    Hello, <b>{{ name }}.</b>
+  </p>
+  <p>Welcome to Permanent!</p>
+</div>
+<div class="text-buttons-container">
+  <div class="text">
+    <p>We’re so glad you’re here!</p>
+    <p>
+      At Permanent, it is our mission to provide a safe and secure place to
+      store, preserve, and share the digital legacy of all people, whether
+      that's for you or for your friends, family, interests or organizations.
+    </p>
+    <p>
+      We know that starting this journey can sometimes be overwhelming, but
+      don’t worry. We’re here to help you every step of the way.
+    </p>
+  </div>
+  <div class="buttons">
+    <pr-button
+      [icon]="'/onboarding/plus'"
+      [orientation]="'right'"
+      (buttonClick)="createArchiveForMe()"
+      class="create-archive-for-me"
+      >Create archive for me</pr-button
+    >
+    <pr-button
+      [icon]="'/onboarding/arrow-right'"
+      [orientation]="'right'"
+      [variant]="'secondary'"
+      (buttonClick)="getStarted()"
+      class="get-started"
+      >Get started</pr-button
+    >
+  </div>
+</div>

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

@@ -0,0 +1,60 @@
+/* @format */
+@import 'fonts';
+
+:host {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  gap: 64px;
+  margin-top: 64px;
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+  }
+
+  @media screen and (min-width: 602px) and (max-width: 900px) {
+    height: 100vh;
+  }
+
+  @media screen and (max-width: 364px) {
+    height: 106vh;
+  }
+}
+
+p {
+  color: white;
+}
+
+.greetings-container {
+  width: 50%;
+
+  @media screen and (max-width: 600px) {
+    width: 100%;
+  }
+  & > p {
+    font-size: 50px;
+    font-family: 'UsualRegular', sans-serif;
+  }
+}
+
+.text-buttons-container {
+  flex-direction: column;
+  justify-content: space-between;
+  width: 50%;
+  display: flex;
+  height: 75vh;
+
+  @media screen and (max-width: 600px) {
+    height: 60vh;
+  }
+
+  & > .text > p {
+    font-size: 16px;
+    font-family: 'UsualLight', sans-serif;
+  }
+
+  & > .buttons {
+    display: flex;
+    gap: 32px;
+  }
+}