[DO-1385] Implement initial UX Design (#1)

* chore: stash progress * chore: stash progress * feat: Implemented base layout * chore: cleanup * chore: review feedback
Cofinity-X-Archive · Oct 10, 2023 · eac44b1 · eac44b1
1 parent ccb8a8e
commit eac44b1
Show file tree

Hide file tree

Showing 28 changed files with 548 additions and 211 deletions.
diff --git a/frontend/src/app/modules/core/layout/header/header.component.html b/frontend/src/app/modules/core/layout/header/header.component.html
@@ -21,9 +21,9 @@
 
 <div class="header--container">
   <nav class="header--menu-container">
-    <img src="/assets/images/logo.svg" alt="Trace-x" class="header--logo cursor-pointer" routerLink="dashboard" />
+    <img src="/assets/images/logo.svg" alt="Cofinity-X" class="header--logo cursor-pointer" routerLink="dashboard" />
 
-    <div class="header--menu">
+    <div class="header--menu label-large">
       <ng-container *ngTemplateOutlet="menuItem; context: { value: 'dashboard', role: 'user' }"></ng-container>
       <ng-container *ngTemplateOutlet="menuItem; context: { value: 'parts', role: 'user' }"></ng-container>
       <ng-container *ngTemplateOutlet="menuItem; context: { value: 'otherParts', role: 'user' }"></ng-container>
@@ -33,7 +33,7 @@
     </div>
 
     <div class="header--user">
-      <app-button variant="flat" color="accent" (click)="openDocumentation()" >
+      <app-button variant="flat" color="accent" (click)="openDocumentation()">
         {{ 'actions.help' | i18n }}
       </app-button>
 
@@ -53,15 +53,8 @@ <h3>{{ 'pageTitle.' + activeMenu | i18n }}</h3>
 </div>
 
 <ng-template let-type="value" let-role="role" #menuItem>
-  <a
-    class="header--menu__item"
-    *appHasRole="[role]"
-    [routerLink]="['/' + type]"
-    [class.selected]="type === activeMenu"
-  >
-    <app-text-with-icon [iconName]="iconMapping[type]" class="header--menu__item-iconText">
-      <p>{{ 'routing.' + type | i18n }}</p>
-    </app-text-with-icon>
+  <a class="header--menu__item" *appHasRole="[role]" [routerLink]="['/' + type]" [class.selected]="type === activeMenu">
+    <div>{{ 'routing.' + type | i18n }}</div>
     <mat-icon class="header--menu__item-icon">{{ iconMapping[type] }}</mat-icon>
   </a>
-</ng-template>
+</ng-template>
diff --git a/frontend/src/app/modules/core/layout/header/header.component.scss b/frontend/src/app/modules/core/layout/header/header.component.scss
@@ -18,13 +18,16 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
+@import "../../../../../theme/base.scss";
+
+@tailwind base;
 
 .header {
   &--container {
+    padding: 0 90px 0 90px;
     display: flex;
     flex-direction: column;
     background: linear-gradient(152.33deg, #e4ebf3 4.24%, #adb9c7 72.17%);
-    // background: linear-gradient(111.81deg, #9eaba9 41.97%, #b6a763 72.9%);
   }
 
   &--logo {
@@ -44,7 +47,7 @@
     // Subtract the curve height from header size
     height: calc(85px - 32px);
 
-    & > h3 {
+    &>h3 {
       padding-top: 15px;
     }
   }
@@ -76,36 +79,36 @@
 
     &__item-iconText {
       display: block;
+
       @media (max-width: 1024px) {
         display: none;
       }
     }
 
     &__item-icon {
       display: none;
+
       @media (max-width: 1024px) {
         display: block;
       }
     }
 
     &__item {
-      @apply font-medium;
-
-      color: #888888;
-      line-height: 20px;
+      @extend .label-large;
+      color: #000000;
       position: relative;
 
       &.selected,
       &:hover {
-        @apply text-primary;
-
         &::before {
           content: ' ';
           width: 100%;
           padding-top: 10px;
-          border: none;
           position: absolute;
-          border-bottom: 2px solid #0f71cb;
+          border-bottom-width: 3px;
+          border-bottom-style: solid;
+          border-image:
+            linear-gradient(90deg, #FDB913 0%, #D31184 100%) 1;
         }
       }
     }
@@ -115,4 +118,4 @@
     display: flex;
     align-items: center;
   }
-}
+}
diff --git a/frontend/src/app/modules/core/layout/layout/layout.component.html b/frontend/src/app/modules/core/layout/layout/layout.component.html
@@ -20,7 +20,11 @@
 -->
 
 <main class="layout-container">
-  <div class="layout-content">
+  <div class="layout-content" [ngStyle]="{
+    backgroundImage:'url(./assets/images/background.svg)', 
+    backgroundRepeat: 'no-repeat', 
+    backgroundPosition: 'center right',
+    backgroundSize: '50%'}">
     <app-header></app-header>
     <div class="layout-content__box-modal relative">
       <div class="flex flex-col h-full">
@@ -34,4 +38,4 @@
 
   <app-sidenav></app-sidenav>
   <app-spinner-overlay></app-spinner-overlay>
-</main>
+</main>
diff --git a/frontend/src/app/modules/core/layout/layout/layout.component.scss b/frontend/src/app/modules/core/layout/layout/layout.component.scss
@@ -41,6 +41,7 @@
     @apply pt-6 px-8 pb-12 min-w-0;
     order: 1;
     flex: 1 0;
+    padding: 0 73px 0 73px;
   }
 }
 
@@ -49,4 +50,4 @@
   top: 8%;
   right: 0;
   z-index: 120;
-}
+}
diff --git a/frontend/src/app/modules/page/dashboard/presentation/dashboard.component.html b/frontend/src/app/modules/page/dashboard/presentation/dashboard.component.html
@@ -21,41 +21,35 @@
 
 <div class="dashboard-grid">
   <section class="parts-section">
-    <ng-container
-      *viewContainer="
+    <ng-container *viewContainer="
         this.numberOfMyParts$ | async;
         main: numbersMainTmp;
         error: numbersErrorTmp;
         loading: numbersLoaderTmp;
         customContext: { label: 'pageDashboard.totalOfParts.label', icon: 'directions_car' }
-      "
-    >
+      ">
     </ng-container>
   </section>
 
   <section class="parts-section">
-    <ng-container
-      *viewContainer="
+    <ng-container *viewContainer="
         this.numberOfOtherParts$ | async;
         main: numbersMainTmp;
         error: numbersErrorTmp;
         loading: numbersLoaderTmp;
         customContext: { label: 'pageDashboard.totalOfOtherParts.label', icon: 'directions_car' }
-      "
-    >
+      ">
     </ng-container>
   </section>
 
   <section class="parts-section">
-    <ng-container
-      *viewContainer="
+    <ng-container *viewContainer="
         this.numberOfInvestigations$ | async;
         main: numbersMainTmp;
         error: numbersErrorTmp;
         loading: numbersLoaderTmp;
         customContext: { label: 'pageDashboard.totalInvestigations.label', icon: 'find_in_page' }
-      "
-    >
+      ">
     </ng-container>
   </section>
   <section class="dashboard--investigation">
@@ -64,33 +58,23 @@
         <div class="inline-block w-full">
           <div class="flex justify-between items-center">
             <h3 class="mb-4 flex items-center">
-              <mat-icon>find_in_page</mat-icon>
+              <img class="pr-2" src="/assets/images/icons/qualityInvestigations.svg" />
               {{ 'pageTitle.investigations' | i18n }}
             </h3>
-            <app-button
-              [color]="'primary'"
-              [routerLink]="[investigationLink]"
-              [queryParams]="investigationParams"
-              [relativeTo]="null"
-            >
-              <div class="flex justify-between items-center">
+            <app-button [routerLink]="[investigationLink]" [queryParams]="investigationParams" [relativeTo]="null">
+              <div class="flex justify-between items-center view-button">
                 <mat-icon class="mr-2">remove_red_eye</mat-icon>
                 {{ 'commonInvestigation.viewAll' | i18n }}
               </div>
             </app-button>
           </div>
         </div>
       </mat-card-header>
-
       <mat-card-content>
-        <app-notifications-tab
-          [notificationsView$]="investigations$"
-          [translationContext]="'commonInvestigation'"
-          [labelId]="'dashboard-investigations'"
-          [hasPagination]="false"
+        <app-notifications-tab [notificationsView$]="investigations$" [translationContext]="'commonInvestigation'"
+          [labelId]="'dashboard-investigations'" [hasPagination]="false"
           [optionalColumns]="['targetDate', 'severity', 'createdBy']"
-          (selected)="onNotificationSelected($event)"
-        ></app-notifications-tab>
+          (selected)="onNotificationSelected($event)"></app-notifications-tab>
       </mat-card-content>
     </mat-card>
   </section>
@@ -106,4 +90,4 @@ <h3 class="mb-4 flex items-center">
 
 <ng-template #numbersLoaderTmp let-context="customContext">
   <app-card-icon [label]="context.label | i18n" [icon]="context.icon" [stats]="''"></app-card-icon>
-</ng-template>
+</ng-template>
diff --git a/frontend/src/app/modules/page/dashboard/presentation/dashboard.component.scss b/frontend/src/app/modules/page/dashboard/presentation/dashboard.component.scss
@@ -27,6 +27,10 @@
   @apply col-span-12 lg:col-span-4;
 }
 
+.view-button {
+  @apply text-textLink
+}
+
 .dashboard--investigation {
   @apply col-span-12;
-}
+}
diff --git a/frontend/src/app/modules/shared/components/toasts/toast-message/toast-message.component.scss b/frontend/src/app/modules/shared/components/toasts/toast-message/toast-message.component.scss
@@ -23,7 +23,6 @@
   @apply flex flex-row justify-between bg-white w-96 h-full z-120;
 }
 
-
 .toast-container {
   border-radius: 8px;
 }
@@ -49,7 +48,6 @@
 }
 
 .check-icon-container {
-  display:flex;
+  display: flex;
   align-items: center;
-}
-
+}
diff --git a/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.html b/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.html
@@ -20,18 +20,11 @@
 -->
 
 <ng-container
-  *viewContainer="notificationsView$ | async; main: mainTmp; error: errorTmp; loading: loaderTmp"
-></ng-container>
+  *viewContainer="notificationsView$ | async; main: mainTmp; error: errorTmp; loading: loaderTmp"></ng-container>
 <ng-template #mainTmp let-notifications="view">
-  <app-table
-    [paginationData]="notifications.data"
-    [tableConfig]="tableConfig"
-    [noShadow]="true"
-    [labelId]="labelId"
-    [showHover]="false"
-    (selected)="selectNotification($event)"
-    (configChanged)="onTableConfigChange($event)"
-  ></app-table>
+  <app-table [paginationData]="notifications.data" [tableConfig]="tableConfig" [noShadow]="true" [labelId]="labelId"
+    [showHover]="false" (selected)="selectNotification($event)"
+    (configChanged)="onTableConfigChange($event)"></app-table>
 </ng-template>
 
 <ng-template #errorTmp let-notifications="view">
@@ -53,7 +46,7 @@
 </ng-template>
 
 <ng-template #descriptionTmp let-text="value">
-  <p class="notification--table__description">{{ text }}</p>
+  <p class="notification--table__description notification--table__description-text body-small">{{ text }}</p>
 </ng-template>
 
 <ng-template #targetDateTmp let-text="value">
@@ -64,4 +57,4 @@
   <p class="notification--table__description">
     <app-notification-user [user]="text" mode="normal"></app-notification-user>
   </p>
-</ng-template>
+</ng-template>
diff --git a/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.scss b/.../app/modules/shared/modules/notification/notification-tab/notification-tab.component.scss
@@ -26,6 +26,10 @@
   max-width: 500px;
 }
 
+.notification--table__description-text {
+  @apply text-textLink;
+}
+
 .notification-status {
   @apply border-0 uppercase inline-flex items-center gap-1 px-3 py-1 rounded-full font-semibold text-xs w-fit;
 
@@ -35,34 +39,38 @@
   }
 
   &--RECEIVED {
-    @apply bg-receivedLight text-receivedDark before:bg-receivedDark;
+    @apply bg-receivedLight text-white before:bg-white;
   }
 
   &--CANCELED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-canceledDark text-canceledLight before:bg-canceledLight;
   }
 
   &--CLOSED {
-    @apply bg-closedDark text-closedLight before:bg-closedLight;
+    @apply bg-closedDark text-closedLight before:bg-white;
   }
 
   &--CREATED {
-    @apply bg-createdLight text-createdDark before:bg-createdDark;
+    @apply bg-createdLight text-white before:bg-white;
   }
 
   &--SENT {
-    @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
+    @apply bg-pendingLight text-white before:bg-white;
   }
 
   &--ACCEPTED {
-    @apply bg-declinedLight text-declinedDark before:bg-declinedDark;
+    @apply bg-declinedLight text-white before:bg-white;
+  }
+
+  &--REQUESTED {
+    @apply bg-requestedDark text-pendingDark before:bg-white;
   }
 
   &--ACKNOWLEDGED {
-    @apply bg-pendingLight text-pendingDark before:bg-pendingDark;
+    @apply bg-pendingLight text-pendingDark before:bg-white;
   }
 
   &--DECLINED {
-    @apply bg-confirmedLight text-confirmedDark before:bg-confirmedDark;
+    @apply bg-error text-white before:bg-white;
   }
-}
+}