UI updates 195

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -292,8 +292,8 @@ export class DfServiceDetailsComponent implements OnInit {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
 
-  getBackgroundImage(typeLable: string) {
-    const image = this.images?.find(img => img.label == typeLable);
+  getBackgroundImage(typeLabel: string) {
+    const image = this.images?.find(img => img.label == typeLabel);
     if (!image) {
       return '';
     }
@@ -315,8 +315,7 @@ export class DfServiceDetailsComponent implements OnInit {
 
   openDialog() {
     const dialogRef = this.dialog.open(DfPaywallModal);
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    dialogRef.afterClosed().subscribe(result => {});
+    dialogRef.afterClosed().subscribe();
   }
 }
 interface ImageObject {

src/app/adf-user-management/adf-user-management.scss

@@ -3,11 +3,16 @@
   flex-direction: column;
   justify-content: center;
   height: 100%;
+  margin: 25% 0;
   .user-management-card {
     padding: 16px 16px;
     margin: 0 auto;
     min-width: 300px;
     max-width: 445px;
+    box-shadow: var(--mdc-elevated-card-container-elevation);
+    --mdc-elevated-card-container-shape: 4px;
+    --mdc-outlined-card-container-shape: 4px;
+    --mdc-outlined-card-outline-width: 1px;
     mat-card-header {
       padding-bottom: 16px;
     }

src/app/adf-user-management/df-login/df-login.component.scss

@@ -2,6 +2,7 @@
   display: block;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 16px;
 }
 
 .left-panel img {

src/app/shared/components/df-side-nav/df-side-nav.component.html

@@ -4,13 +4,19 @@
   [class.logged-in]="isLoggedIn$ | async">
   <ng-container *ngIf="isLoggedIn$ | async">
     <mat-toolbar>
-      <button
-        mat-icon-button
-        (click)="sideNav.toggle()"
-        [attr.aria-label]="'toggleNav' | transloco">
-        <fa-icon [icon]="faBars"></fa-icon>
-      </button>
-      <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+      <div class="button-wrapper">
+        <button
+          mat-icon-button
+          (click)="sideNav.toggle()"
+          [attr.aria-label]="'toggleNav' | transloco">
+          <fa-icon [icon]="faBars"></fa-icon>
+        </button>
+        <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+      </div>
+      <div class="search-bar">
+        <fa-icon [icon]="faMagnifyingGlass" class="search-icon"></fa-icon>
+        <input type="text" class="search-input" placeholder="Search" />
+      </div>
       <span class="spacer"></span>
       <ng-container *ngIf="availableLanguages.length > 1">
         <button
@@ -85,12 +91,6 @@ <h3>API Scripting</h3>
         </div>
       </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
-        <button class="search-btn" mat-button (click)="handleSearchClick()">
-          {{ 'searchFeatures' | transloco }}
-          <span>
-            <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-          </span>
-        </button>
         <ng-container
           *ngTemplateOutlet="
             navList;
@@ -99,36 +99,38 @@ <h3>API Scripting</h3>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content class="sidenav-content">
-      <ng-container *ngIf="isLoggedIn$ | async">
-        <div class="banner" *ngIf="(hasError$ | async) === false">
-          <h1 class="page-header">
-            <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
-              <ng-container *ngIf="breadcrumb.path; else current">
-                <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
-                  ><ng-component
-                    *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-                </a>
-              </ng-container>
-
-              <ng-template #current>
-                <ng-component
-                  *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-              </ng-template>
-              <ng-template #breadcrumbLabel>
-                <ng-container *ngIf="breadcrumb.translationKey; else label">
-                  <span>{{ breadcrumb.translationKey | transloco }}</span>
+      <div class="content-wrapper">
+        <ng-container *ngIf="isLoggedIn$ | async">
+          <div class="banner" *ngIf="(hasError$ | async) === false">
+            <h1 class="page-header">
+              <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
+                <ng-container *ngIf="breadcrumb.path; else current">
+                  <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
+                    ><ng-component
+                      *ngTemplateOutlet="breadcrumbLabel"></ng-component>
+                  </a>
                 </ng-container>
-                <ng-template #label>
-                  <span>{{ breadcrumb.label }}</span>
+
+                <ng-template #current>
+                  <ng-component
+                    *ngTemplateOutlet="breadcrumbLabel"></ng-component>
                 </ng-template>
-              </ng-template>
-              <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
-            </ng-container>
-          </h1>
+                <ng-template #breadcrumbLabel>
+                  <ng-container *ngIf="breadcrumb.translationKey; else label">
+                    <span>{{ breadcrumb.translationKey | transloco }}</span>
+                  </ng-container>
+                  <ng-template #label>
+                    <span>{{ breadcrumb.label }}</span>
+                  </ng-template>
+                </ng-template>
+                <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
+              </ng-container>
+            </h1>
+          </div>
+        </ng-container>
+        <div class="main" [class.no-error]="(hasError$ | async) === false">
+          <ng-content></ng-content>
         </div>
-      </ng-container>
-      <div class="main" [class.no-error]="(hasError$ | async) === false">
-        <ng-content></ng-content>
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
@@ -142,15 +144,24 @@ <h1 class="page-header">
         class="nav-item"
         [class.active]="isActive(item)"
         (click)="handleNavClick(item)">
-        {{ navLabel(item.path) | transloco }}
+        <span class="nav-item">
+          <ng-container *ngIf="item?.icon">
+            <img [src]="item.icon" [alt]="item.path" />
+          </ng-container>
+          {{ navLabel(item.path) | transloco }}
+        </span>
       </button>
     </div>
     <ng-template #subRoutes>
       <mat-expansion-panel
         [class.mat-elevation-z0]="true"
         [expanded]="isActive(item)">
         <mat-expansion-panel-header class="parent-route">
-          {{ navLabel(item.path) | transloco }}
+          <span class="nav-item">
+            <ng-container *ngIf="item?.icon">
+              <img [src]="item.icon" [alt]="item.path" /> </ng-container
+            >{{ navLabel(item.path) | transloco }}
+          </span>
         </mat-expansion-panel-header>
         <mat-nav-list>
           <ng-container

src/app/shared/components/df-side-nav/df-side-nav.component.scss

@@ -4,7 +4,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 $red-palette: mat.define-palette(mat.$red-palette);
 
 .logo {
-  height: 30px;
+  height: 40px;
   cursor: pointer;
 }
 
@@ -16,7 +16,48 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .mat-toolbar {
-  min-height: 64px;
+  background-color: #f6f2fa;
+  padding: 16px;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+
+  .button-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    img {
+      margin-bottom: -4px;
+    }
+  }
+
+  .search-bar {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    border: 1px solid #ebe7ef;
+    border-radius: 50px;
+    background-color: #ebe7ef;
+    overflow: hidden;
+    width: 300px;
+    height: 50px;
+    font-size: 24px;
+  }
+  .search-input {
+    border: none;
+    background-color: #ebe7ef;
+    color: #47464f;
+    font-size: 20px;
+    &:focus {
+      outline: none;
+    }
+  }
+  .search-icon {
+    color: #47464f;
+    padding-left: 14px;
+  }
 }
 
 .search-btn {
@@ -44,7 +85,7 @@ $red-palette: mat.define-palette(mat.$red-palette);
 .sidenav-container {
   flex: 1 1 auto;
   .sidenav {
-    background-color: mat.get-color-from-palette($df-purple-palette, 900);
+    background-color: #0f0761;
     min-width: 40%;
     border: none;
     transition: min-width 0.3s ease-out;
@@ -84,7 +125,7 @@ $red-palette: mat.define-palette(mat.$red-palette);
     }
     .logged-in & {
       min-width: 20%;
-      background-color: white;
+      background-color: #f6f2fa;
     }
     .logged-in.small & {
       min-width: 40%;
@@ -94,10 +135,13 @@ $red-palette: mat.define-palette(mat.$red-palette);
       font-weight: 400;
       height: 48px;
       padding: 0 16px;
+      gap: 4px;
+      background: #f6f2fa;
     }
     ::ng-deep {
       .mat-expansion-panel-body {
         padding: 0 0 0 16px !important;
+        background: #f6f2fa;
       }
     }
     .nav-item {
@@ -107,22 +151,45 @@ $red-palette: mat.define-palette(mat.$red-palette);
       font-weight: 400;
       border-radius: 0;
       justify-content: left;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      ::ng-deep .mat-mdc-button-touch-target {
+        background-color: #f6f2fa;
+      }
       &.active {
-        background-color: mat.get-color-from-palette($df-purple-palette, 200);
+        ::ng-deep .mat-mdc-button-touch-target {
+          background-color: #e3dfff !important;
+          border-top-right-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+        background-color: #e3dfff !important;
+        border-top-right-radius: 50px;
+        border-bottom-right-radius: 50px;
+        border-top-left-radius: 0;
+        width: 95%;
       }
     }
   }
   .sidenav-content {
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding: 8px 20px 24px;
+    // justify-content: center;
+    background: #f6f2fa;
+    .content-wrapper {
+      border: 1px solid #fff;
+      background: #fff;
+      border-radius: 16px;
+      // margin-top: 72px;
+    }
     .banner {
       flex-shrink: 0;
       width: 100%;
-      padding-bottom: 60px;
-      background-color: mat.get-color-from-palette($df-purple-palette, 900);
+      padding-bottom: 40px;
+
       .page-header {
-        color: white;
         padding: 32px 16px 0 16px;
       }
     }
@@ -160,6 +227,9 @@ $red-palette: mat.define-palette(mat.$red-palette);
   .mat-expansion-panel-body {
     overflow-x: auto;
   }
+  .mat-expansion-panel {
+    background: #f6f2fa;
+  }
 }
 
 .license-expired {