Merge pull request #441 from PermanentOrg/PER-9757-update-name-your-a…

…rchive-screen
PermanentOrg · Sep 17, 2024 · 4138f2e · 4138f2e
2 parents ddfb0a2 + 1b81675
commit 4138f2e
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 45 deletions.
diff --git a/src/app/component-library/components/button/button.component.html b/src/app/component-library/components/button/button.component.html
@@ -12,6 +12,7 @@
   ]"
   [disabled]="disabled"
   (click)="onClick($event)"
+  [style]="style"
 >
   <img *ngIf="icon" class="icon" src="{{ 'assets/svg/' + icon + '.svg' }}" />
   <fa-icon class="icon" *ngIf="faIcon" [icon]="['fas', faIcon]"></fa-icon>

diff --git a/src/app/component-library/components/button/button.component.ts b/src/app/component-library/components/button/button.component.ts
@@ -24,7 +24,7 @@ export class ButtonComponent {
   @Input() orientation: ORIENTATION = 'left';
   @Input() faIcon: string = '';
   @Input() buttonType: TYPE = 'button';
-  @Input() textColor: { color: string };
+  @Input() style = {};
 
   //Outputs
   @Output() buttonClick = new EventEmitter<MouseEvent>();

diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.html b/src/app/onboarding/components/create-new-archive/create-new-archive.component.html
@@ -92,13 +92,13 @@ <h3>What is your new archive called?</h3>
   >
     <div class="heading-container">
       <h1 *ngIf="screen === 'create'" class="heading">
-        Create your first <b>Archive</b>
+        Create your first <b class="bold">Archive</b>
       </h1>
       <h1 *ngIf="screen === 'name-archive'" class="heading">
-        Create your first
+        Create your
         <br />
         <pr-archive-type-icon [type]="archiveTypeTag" />
-        <b>{{ headerText }}</b> Archive
+        &nbsp;<b>{{ headerText }}</b> Archive
       </h1>
     </div>
     <pr-select-archive-type-screen

diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss b/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss
@@ -229,14 +229,14 @@ h3 {
 }
 
 .new-account-screens-container {
-  width: 95%;
+  width: 100%;
 }
 
 .heading-container {
   width: 50%;
   & > .heading {
     color: white;
-    font-family: 'UsualRegular', sans-serif;
+    font-family: 'UsualLight', sans-serif;
   }
 }
 
@@ -249,3 +249,7 @@ h3 {
     flex-direction: column;
   }
 }
+
+.bold {
+  font-family: 'UsualExtraBold', sans-serif;
+}
diff --git a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.html b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.html
@@ -1,48 +1,54 @@
 <div class="archive-naming">
   <div>
     <p>
-      Name your new archive. This is the legal or official name of the person,
-      family, group, or organization the archive is about. You can edit the name
-      later if needed.
+      Name your new archive. This is the formal or official name of the person,
+      family, group, or organization the archive represents.
     </p>
     <div class="name-archive-input">
       <p class="the-text">The</p>
       <pr-form-input-glam
         type="text"
-        fieldName="name"
+        fieldName="archiveName"
         [variant]="'dark'"
-        [control]="nameForm.controls['name']"
         [iconPosition]="{ right: '-25px' }"
+        [control]="nameForm.controls['archiveName']"
         [styling]="{
           height: '50px',
           padding: '0px',
           'padding-left': '80px',
           'font-size': '24px'
         }"
         [hideLabel]="true"
-        placeholder="Archive Subject"
+        placeholder=""
       ></pr-form-input-glam>
       <p class="archive-text">Archive</p>
     </div>
   </div>
 
   <div class="buttons-container">
-    <pr-button
-      [orientation]="'right'"
-      (buttonClick)="backToCreate()"
-      [icon]="'/onboarding/back'"
-      class="back-button"
-      >Back</pr-button
-    >
-    <pr-button
-      [orientation]="'right'"
-      [variant]="'secondary'"
-      [icon]="'/onboarding/arrow-right'"
-      [disabled]="!nameForm.valid"
-      (buttonClick)="createArchive()"
-      [size]="'fill'"
-      class="create-archive-button"
-      >Create the archive</pr-button
-    >
+    <div class="back-button-container">
+      <pr-button
+        [orientation]="'right'"
+        (buttonClick)="backToCreate()"
+        [icon]="'/onboarding/back'"
+        [size]="'fill'"
+        [style]="{ justifyContent: 'center' }"
+        class="back-button"
+        >Back</pr-button
+      >
+    </div>
+    <div class="create-archive-button-container">
+      <pr-button
+        [orientation]="'right'"
+        [variant]="'secondary'"
+        [icon]="'/onboarding/arrow-right'"
+        [disabled]="!nameForm.valid"
+        (buttonClick)="createArchive()"
+        [size]="'fill'"
+        class="create-archive-button"
+        [style]="{ justifyContent: 'center' }"
+        >Next</pr-button
+      >
+    </div>
   </div>
 </div>
diff --git a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.scss
@@ -9,6 +9,10 @@
   @media screen and (max-width: 592px) {
     width: auto;
   }
+
+  @media screen and (min-width: 769px) {
+    margin-left: 64px;
+  }
 }
 
 .archive-type-name {
@@ -55,7 +59,7 @@
     top: 5px;
   }
   & > .archive-text {
-    right: 16px;
+    right: 50px;
     top: 5px;
   }
 }
@@ -70,7 +74,7 @@
   }
 
   @media screen and (max-width: 768px) {
-    height: 65vh;
+    height: 45vh;
   }
 
   @media screen and (min-width: 768px) and (max-width: 900px) {
@@ -85,3 +89,11 @@
 .create-archive-button {
   width: 100%;
 }
+
+.back-button-container {
+  width: 50%;
+}
+
+.create-archive-button-container {
+  width: 50%;
+}
diff --git a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.spec.ts b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.spec.ts
@@ -24,7 +24,7 @@ describe('NameArchiveScreenComponent', () => {
     const { instance } = await shallow.render();
 
     expect(instance.nameForm).toBeTruthy();
-    expect(instance.nameForm.controls['name'].value).toBe('');
+    expect(instance.nameForm.controls['archiveName'].value).toBe('');
   });
 
   it('should patch the form value with input name on init', async () => {
@@ -33,7 +33,9 @@ describe('NameArchiveScreenComponent', () => {
     });
     instance.ngOnInit();
 
-    expect(instance.nameForm.controls['name'].value).toBe('Test Archive');
+    expect(instance.nameForm.controls['archiveName'].value).toBe(
+      'Test Archive',
+    );
   });
 
   it('should emit backToCreate event when backToCreate is called', async () => {
@@ -45,7 +47,7 @@ describe('NameArchiveScreenComponent', () => {
 
   it('should emit archiveCreated event with form value when createArchive is called and form is valid', async () => {
     const { instance, outputs } = await shallow.render();
-    instance.nameForm.controls['name'].setValue('Valid Archive Name');
+    instance.nameForm.controls['archiveName'].setValue('Valid Archive Name');
     instance.createArchive();
 
     expect(outputs.archiveCreatedEmitter.emit).toHaveBeenCalledWith(
@@ -55,7 +57,7 @@ describe('NameArchiveScreenComponent', () => {
 
   it('should not emit archiveCreated event when createArchive is called and form is invalid', async () => {
     const { instance, outputs } = await shallow.render();
-    instance.nameForm.controls['name'].setValue('');
+    instance.nameForm.controls['archiveName'].setValue('');
     instance.createArchive();
 
     expect(outputs.archiveCreatedEmitter.emit).not.toHaveBeenCalled();
@@ -73,7 +75,7 @@ describe('NameArchiveScreenComponent', () => {
   it('should call createArchive when create archive button is clicked', async () => {
     const { fixture, instance } = await shallow.render();
     spyOn(instance, 'createArchive');
-    instance.nameForm.controls['name'].setValue('Valid Archive Name');
+    instance.nameForm.controls['archiveName'].setValue('Valid Archive Name');
     fixture.detectChanges();
 
     const createButton = fixture.debugElement.query(
@@ -86,7 +88,7 @@ describe('NameArchiveScreenComponent', () => {
 
   it('should call createArchive when create archive button is clicked and form is valid', async () => {
     const { fixture, instance } = await shallow.render();
-    instance.nameForm.controls['name'].setValue('Valid Archive Name');
+    instance.nameForm.controls['archiveName'].setValue('Valid Archive Name');
     fixture.detectChanges();
 
     spyOn(instance, 'createArchive');

diff --git a/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.ts b/src/app/onboarding/components/glam/name-archive-screen/name-archive-screen.component.ts
@@ -20,12 +20,12 @@ export class NameArchiveScreenComponent implements OnInit {
 
   constructor(private fb: UntypedFormBuilder) {
     this.nameForm = fb.group({
-      name: ['', [Validators.required]],
+      archiveName: ['', [Validators.required]],
     });
   }
 
   ngOnInit(): void {
-    this.nameForm.patchValue({ name: this.name });
+    this.nameForm.patchValue({ archiveName: this.name });
   }
 
   public backToCreate(): void {
@@ -34,7 +34,7 @@ export class NameArchiveScreenComponent implements OnInit {
 
   public createArchive(): void {
     if (this.nameForm.valid) {
-      this.archiveCreatedEmitter.emit(this.nameForm.value.name);
+      this.archiveCreatedEmitter.emit(this.nameForm.value.archiveName);
     }
   }
 }
diff --git a/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html b/src/app/onboarding/components/glam/pending-archive/pending-archive.component.html
@@ -18,7 +18,7 @@
       [mode]="isSelected ? 'dark' : 'light'"
       [orientation]="'right'"
       [icon]="isSelected ? '/accept-green' : ''"
-      [textColor]="isSelected ? { color: '#32D583' } : {}"
+      [style]="isSelected ? { color: '#32D583' } : {}"
     >
       Accept
     </pr-button>

diff --git a/src/app/onboarding/components/glam/types/archive-types.ts b/src/app/onboarding/components/glam/types/archive-types.ts
@@ -108,7 +108,7 @@ export const archiveCreationHeaderText = [
   },
   {
     type: OnboardingTypes.famhist,
-    text: 'History',
+    text: 'Family History',
   },
   {
     type: OnboardingTypes.community,

diff --git a/src/app/onboarding/components/onboarding/onboarding.component.scss b/src/app/onboarding/components/onboarding/onboarding.component.scss
@@ -21,7 +21,7 @@ $mobile-transition-breakpoint: 1200px;
   }
   @media only screen and (max-width: $mobile-breakpoint) {
     width: auto;
-    margin: 20px;
+    margin: 10px;
   }
   width: 70%;
   margin: 0 auto;
@@ -41,7 +41,7 @@ $mobile-transition-breakpoint: 1200px;
 .progress-bar {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
   margin: 1.5em 0;
 }
 

diff --git a/src/app/shared/utilities/forms.ts b/src/app/shared/utilities/forms.ts
@@ -59,6 +59,9 @@ export const FORM_ERROR_MESSAGES = {
   name: {
     required: 'Full name required',
   },
+  archiveName: {
+    required: 'Archive name required',
+  },
   invitation: {
     required: 'Invitation code required',
   },

diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -3,7 +3,7 @@
   src: url('../assets/fonts/Usual/Usual-Bold.woff2') format('woff2'),
     url('../assets/fonts/Usual/Usual-Bold.woff') format('woff'),
     url('../assets/fonts/Usual/Usual-Bold.ttf') format('truetype');
-  font-weight: bold;
+  font-weight :bolder;
   font-style: normal;
 }