verify account page updated

src/app/page/raw-landing-layout/sign-up-success/sign-up-success.component.html

@@ -1,11 +1,11 @@
 <div class="raw-landing-raw-content-page">
-  <div class="hero">
+  <div class="hero sign-up-success-content">
     <div class="brand-logo-wrapper hero-content">
-      <div class="bounce-stage">
-        <img [src]="brand.brandLogo" alt="logo" class="bounce brand-logo" height="100"/>
+      <div>
+        <img [src]="brand.brandLogo" alt="logo" class="brand-logo" height="150"/>
       </div>
-      <h2>Registration success 🎉</h2>
+      <h1>Registration successful 🎉</h1>
     </div>
-    <h6>{{'Verification email sent to: '}} <span style="color: var(--brand-color)">{{email}}</span></h6>
+    <h3>{{'Verification email sent to: '}} <span>{{email}}</span></h3>
   </div>
 </div>

src/app/page/raw-landing-layout/sign-up-success/sign-up-success.component.scss

@@ -1 +1,4 @@
-/* Intentionally blank */
+.sign-up-success-content span {
+  color: var(--brand-color);
+  font-weight: normal;
+}

src/app/page/raw-landing-layout/sign-up-success/sign-up-success.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ThemeService } from '../../../service/theme/theme.service';
 
 @Component( {
@@ -9,14 +9,15 @@ import { ThemeService } from '../../../service/theme/theme.service';
 } )
 export class SignUpSuccessComponent implements OnInit {
 
-  email = '';
+  email = 'email@domain.com';
 
   brand = {
     brandLogo: '',
   };
 
   constructor(
       private route: ActivatedRoute,
+      public router: Router,
       private themeService: ThemeService ) {
   }
 

src/app/page/raw-landing-layout/verify-account/verify-account.component.html

@@ -1,20 +1,22 @@
 <div class="raw-landing-raw-content-page">
-  <div class="hero">
+  <div class="hero verify-account-content">
     <div class="brand-logo-wrapper hero-content">
-      <div class="bounce-stage">
-        <img [src]="brand.brandLogo" alt="logo" class="bounce brand-logo" height="100"/>
+      <div>
+        <img [src]="loading ? brand.brandLogoMerge : (error ? brand.brandLogoBroken : brand.brandLogoMerged)" alt="logo" class="brand-logo" height="150"/>
       </div>
-      <h2 *ngIf="loading">Verifying account..</h2>
-      <h2 *ngIf="!loading && error">An error occurred</h2>
-      <h2 *ngIf="!loading && !error">Account verified!</h2>
-    </div>
-    <h6 *ngIf="error" class="error-text">Sorry about that!</h6>
-    <h6 *ngIf="!loading && !error">Please proceed with login</h6>
-    <div *ngIf="!loading && !error" class="section-submit">
-      <app-button1 (click)="router.navigate(['/login'])" [text]="'LOG IN'"></app-button1>
-    </div>
-    <div *ngIf="!loading && error" class="section-submit">
-      <app-button1 (click)="router.navigate(['/'])" [text]="'HOME'"></app-button1>
+      <h1 *ngIf="loading">Verifying account..</h1>
+      <h1 *ngIf="!loading && error">Account verification failed</h1>
+      <h1 *ngIf="!loading && !error">Account verified 🎉</h1>
     </div>
+
+    <h3 *ngIf="!loading && !error">Please proceed with login</h3>
+    <app-button1 *ngIf="!loading && !error" [text]="'LOG IN'" [brandColor]="true" [isSleekButton]="true"
+                 (click)="router.navigate([URLS.login])">
+    </app-button1>
+
+    <h3 *ngIf="!loading && error">Something went wrong!</h3>
+    <app-button1 *ngIf="!loading && error" [text]="'HOME'" [brandColor]="true" [isSleekButton]="true"
+                 (click)="router.navigate([URLS.root])">
+    </app-button1>
   </div>
 </div>

src/app/page/raw-landing-layout/verify-account/verify-account.component.scss

@@ -1 +1,7 @@
-/* Intentionally blank */
+.verify-account-content h3 {
+  color: var(--brand-color);
+}
+
+.verify-account-content app-button1 {
+  margin-top: 40px;
+}

src/app/page/raw-landing-layout/verify-account/verify-account.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
+import { URLS } from '../../../data/constant';
 import { AuthenticationService } from '../../../service/auth/authentication.service';
 import { InformationService } from '../../../service/information/information.service';
 import { LoadingService } from '../../../service/loading/loading.service';
@@ -18,9 +19,13 @@ export class VerifyAccountComponent implements OnInit, OnDestroy {
   token = '';
 
   brand = {
-    brandLogo: '',
+    brandLogoBroken: '',
+    brandLogoMerge: '',
+    brandLogoMerged: '',
   };
 
+  URLS = URLS;
+
   constructor( private route: ActivatedRoute,
       public router: Router,
       private authenticationService: AuthenticationService,

src/app/service/theme/theme.service.ts

@@ -21,7 +21,8 @@ export class ThemeService {
   public brand = {
     brandLogo: '',
     brandLogoBroken: '',
-    brandLogoMerge: ''
+    brandLogoMerge: '',
+    brandLogoMerged: ''
   };
 
   private maxAspectRatioMedia;
@@ -77,6 +78,7 @@ export class ThemeService {
     this.brand.brandLogo = './assets/logo/brand-logo.png';
     this.brand.brandLogoBroken = './assets/logo/brand-logo-broken.png';
     this.brand.brandLogoMerge = './assets/logo/brand-logo-merge.gif';
+    this.brand.brandLogoMerged = './assets/logo/brand-logo-merged.png';
 
     if ( version ) {
       this.appVersion = version;