fix: make configuration wizard work smoothly (#2332)

This fixes a number of issues pointed out by the
ticket.

Fixes: WEB-14

src/app/core/shell/sidenav/sidenav.component.html

@@ -160,6 +160,7 @@
 </div>
 
 <ng-template #templateLogo let-popover="popover">
+  <h2>{{ 'labels.text.Home' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Welcome page logo from anywhere' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">

src/app/core/shell/toolbar/toolbar.component.html

@@ -304,26 +304,6 @@
     >
       {{ 'labels.buttons.Back' | translate }}
     </button>
-    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themePicker)">
-      {{ 'labels.buttons.Next' | translate }}
-    </button>
-  </div>
-</ng-template>
-
-<ng-template #templateThemePicker let-popover="popover">
-  <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
-  <p class="mw300">{{ 'labels.text.Choose a theme as per organization will' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-      {{ 'labels.buttons.Close' | translate }}
-    </button>
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="popover.close(); showPopover(templateLanguageSelector, languageSelector)"
-    >
-      {{ 'labels.buttons.Back' | translate }}
-    </button>
     <button
       mat-raised-button
       color="primary"
@@ -341,7 +321,31 @@
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
-    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themePicker)">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateLanguageSelector, languageSelector)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themeToggle)">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #templateThemePicker let-popover="popover">
+  <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Choose to work with a dark or bright background' | translate }}</p>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateNotifications, notifications)"
+    >
       {{ 'labels.buttons.Back' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateAppMenu, appMenu)">
@@ -357,11 +361,7 @@
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="popover.close(); showPopover(templateNotifications, notifications)"
-    >
+    <button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateThemePicker, themeToggle)">
       {{ 'labels.buttons.Back' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">

src/app/home/home.component.html

@@ -59,21 +59,39 @@
 <ng-template #templateButtonDashboard let-popover="popover">
   <h2>{{ 'labels.heading.Dashboard' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This will navigate the user to the dashboard component.' | translate }}</p>
-  <ng-container
-    *ngTemplateOutlet="
-      popoverButtons;
-      context: { popover: popover, prev: null, next: { template: templateSearchActivity, target: searchActivity } }
-    "
-  ></ng-container>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'top', true)"
+    >
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
+  </div>
 </ng-template>
 
 <ng-template #templateSearchActivity let-popover="popover">
   <h2>{{ 'labels.heading.Search Activity' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.This will navigate the user to the searched activity.' | translate }}</p>
-  <ng-container
-    *ngTemplateOutlet="
-      popoverButtons;
-      context: { popover: popover, prev: { template: templateButtonDashboard, target: buttonDashboard }, next: null }
-    "
-  ></ng-container>
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
+      {{ 'labels.buttons.Close' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)"
+    >
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
+      {{ 'labels.buttons.Next' | translate }}
+    </button>
+  </div>
 </ng-template>

src/app/organization/organization.component.html

@@ -362,7 +362,7 @@
 
 <ng-template #templateEmployee let-popover="popover">
   <h2>{{ 'labels.heading.Manage Employees' | translate }}</h2>
-  <p class="mw300">{{ 'labels.text.View, edit and/or delete your organization's employees' | translate }}</p>
+  <p class="mw300">{{ 'labels.text.View, edit and delete employees of your organization' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}