fix: TT-331 Rebase from master and use of dark mode

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -70,12 +70,6 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
       },
     ];
 
-    this.dtOptions = {
-      scrollY: '325px',
-      paging: false,
-      responsive: true,
-    };
-
     const customerIdToEdit$ = this.store.pipe(select(customerIdtoEdit));
     this.customerIdToEditSubscription = customerIdToEdit$.subscribe((customerId: string) => {
       this.currentCustomerIdToEdit = customerId;

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -1,54 +1,50 @@
-<div class="d-flex bg-grayTW-lightest dark:bg-grayTW-darker dark:text-whiteTW" id="wrapper">
-  <div class="border-right bg-whiteTW dark:bg-grayTW-dark" id="sidebar-wrapper">
-    <div class="sidebar-heading" style="text-align: center">
-      <img src="assets/img/ioet.png" width="90" height="auto" style="padding-top: 2rem; padding-bottom: 2rem;" alt="logo" />
-    </div>
+<div id="wrapper" class="d-flex bg-grayTW-lightest dark:bg-grayTW-darker dark:text-whiteTW">
+  <div id="sidebar-wrapper" class="table-row border-r border-grayTW-lighter shadow-sm bg-whiteTW dark:bg-grayTW-dark dark:border-grayTW">
+    <div class="table-cell">
+      <div class="relative flex items-center border-b border-grayTW-lighter dark:border-grayTW sidebar-heading">
+        <img src="assets/img/ioet-logo-without-letters.png" alt="ioet-logo" width="50" height="auto" style="padding-top: 0.5rem; padding-left: 1rem;"/>
+        <h1 class="pl-2 pt-2" style="font-family:spinnaker,sans-serif">ioet</h1>
+      </div>
+      <app-user></app-user>
     <div class="list-group list-group-flush bg-whiteTW dark:bg-grayTW-darker">
-            <a
-              *ngFor="let item of itemsSidebar"
-              [routerLink]="item.route"
-              routerLinkActive=""
-              class="list-group-item list-group-item-action bg-whiteTW dark:bg-grayTW-dark dark:text-whiteTW"
-              [ngClass]="{active: item.active}"
-            >
-              <i class="{{ item.icon }}"></i> {{ item.text }}
-            </a>
+      <a
+        *ngFor="let item of itemsSidebar"
+        [routerLink]="item.route"
+        routerLinkActive=""
+        class="font-poppins relative pl-4 py-3 bg-whiteTW dark:bg-grayTW-dark dark:text-whiteTW"
+        [ngClass]="{active: item.active}"
+      >
+      <i class="{{ item.icon }}"></i>
+      <h3 class="font-poppins text-base ml-4 pl-3 -mt-6 text-left" >{{ item.text }}</h3>
+      </a>
+      <div class="bg-whiteTW pt-2 pr-24 absolute bottom-0 -mb-10 dark:bg-grayTW-dark">
+        <a class="flex pl-4 mb-4 text-blackTW hover:text-grayTW dark:text-whiteTW" href="#">
+          <i class="fas fa-sign-out-alt"></i>
+          <span class="font-poppins pl-3 font-medium -mt-1 dark:text-whiteTW" (click)="logout()">Sign out</span>
+        </a>
+        <app-dark-mode class="relative left-40 -top-14"></app-dark-mode>
+      </div>
     </div>
+  </div>
   <div class="table-cell relative">
-    <span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-blue-400"  (click)="toggleSideBar()"></span>
-      <span class="group cursor-pointer absolute w-5 top-20 -right-3">
-        <img src="assets/icons/left-chevron.svg" alt="hide-chevron" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:hidden md:block lg:block shadow-sm"/>
-        <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Hide</div>
+    <span class="absolute cursor-pointer inset-y-0 right-0 min-h-screen w-0.5 hover:z-0 hover:bg-primaryTW-light" (click)="toggleSideBar()"></span>
+      <span class="group cursor-pointer absolute w-5 top-28 -right-3">
+        <img src="assets/icons/left-chevron.svg" id="hide-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-whiteTW rounded-full hover:bg-opacity-50 hover:bg-primaryTW-light sm:hidden md:block lg:block"/>
+        <div class="opacity-0 w-12 bg-blackTW text-whiteTW text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Hide</div>
       </span>
       <span class="group cursor-pointer absolute top-20 -right-5">
-        <img src="assets/icons/right-chevron.svg" alt="show-chevron" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-black-light rounded-full hover:bg-opacity-50 hover:bg-info-light sm:block md:hidden lg:hidden"/>
-        <div class="opacity-0 w-12 bg-black text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Show</div>
+        <img src="assets/icons/right-chevron.svg" id="show-sidebar" (click)="toggleSideBar()" width="20" height="20" class="bg-whiteTW rounded-full hover:bg-opacity-50 hover:bg-primaryTW-light sm:block md:hidden lg:hidden"/>
+        <div class="opacity-0 w-12 bg-blackTW text-whiteTW text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full left-1/4 ml-4 -mb-6 px-1 pointer-events-none">Show</div>
       </span>
   </div>
  </div>
   <div id="page-content-wrapper">
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom bg-whiteTW dark:bg-grayTW-dark">
-      <button class="btn bg-primaryTW hover:bg-primaryTW-dark text-whiteTW hover:text-whiteTW" id="menu-toggle">
-        Toggle Menu
-      </button>
-      <div class="dark-mode-toggle">
-        <app-dark-mode></app-dark-mode>
-      </div>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
-            <app-user></app-user>
-        </ul>
-      </div>
-    </nav>
     <div class="container-fluid px-0 full-height">
       <div class="content_app h-100">
         <div class="m-1 p-5 rounded-md bg-whiteTW dark:bg-grayTW-dark"> 
           <router-outlet></router-outlet>
         </div>
       </div>
-  </div>
+    </div>
   </div>
 </div>

src/app/modules/shared/components/sidebar/sidebar.component.scss

@@ -66,7 +66,6 @@ body {
 .active {
   color: $primary;
   font-weight: bold;
-  text-decoration: underline;
   border-color: $primary;
   background-color: transparent;
 }
@@ -80,7 +79,7 @@ body {
 }
 
 .dark-mode-toggle {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-}
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -44,17 +44,17 @@ export class SidebarComponent implements OnInit, OnDestroy {
       map((isAdmin) => {
         if (isAdmin) {
           this.itemsSidebar = [
-            { route: '/time-clock', icon: 'assets/icons/clock.svg', text: 'Time Clock', active: false },
-            { route: '/time-entries', icon: 'assets/icons/time-entries.svg', text: 'Time Entries', active: false },
-            { route: '/reports', icon: 'assets/icons/reports.svg', text: 'Reports', active: false },
-            { route: '/activities-management', icon: 'assets/icons/activities.svg', text: 'Activities', active: false },
-            { route: '/customers-management', icon: 'assets/icons/customers.svg', text: 'Customers', active: false },
-            { route: '/users', icon: 'assets/icons/users.svg', text: 'Users', active: false },
+            { route: '/time-clock', icon: 'far fa-clock', text: 'Time Clock', active: false },
+            { route: '/time-entries', icon: 'far fa-file-alt', text: 'Time Entries', active: false },
+            { route: '/reports', icon: 'fas fa-chart-bar', text: 'Reports', active: false },
+            { route: '/activities-management', icon: 'fas fa-list-ol', text: 'Activities', active: false },
+            { route: '/customers-management', icon: 'fas fa-users', text: 'Customers', active: false },
+            { route: '/users', icon: 'fas fa-user-friends', text: 'Users', active: false },
           ];
         } else {
           this.itemsSidebar = [
-            { route: '/time-clock', icon: 'assets/icons/clock.svg', text: 'Time Clock', active: false },
-            { route: '/time-entries', icon: 'assets/icons/time-entries.svg', text: 'Time Entries', active: false },
+            { route: '/time-clock', icon: 'far fa-clock', text: 'Time Clock', active: false },
+            { route: '/time-entries', icon: 'far fa-file-alt', text: 'Time Entries', active: false },
           ];
         }
       })

src/app/modules/shared/components/user/user.component.html

@@ -1,7 +1,7 @@
 <div class=" py-8 flex items-center pl-3">
   <img src="assets/icons/user.svg" alt="user-icon" width="40" height="40"/>
   <span class="pl-1">
-    <h2 class="font-sans text-base font-semibold">{{userName}}</h2>
-    <p class="font-sans mt-1 text-xs font-medium text-grey dark:text-gray-400">{{userEmail}}</p>
+    <h2 class="font-poppins text-base font-semibold pl-2 dark:text-whiteTW">{{userName}}</h2>
+    <p class="font-poppins mt-1 text-xs font-medium pl-2 text-grayTW dark:text-whiteTW">{{userEmail}}</p>
   </span>
 </div>

src/app/modules/time-clock/components/time-entries-summary/time-entries-summary.component.html

@@ -1,5 +1,5 @@
 <h6 class="text-left"><strong>Summary</strong></h6>
-<hr class="mb-3" />
+<hr class="mb-4" />
 <div class ="container px-0">
   <div class="row pb-4">
     <div class="col-12 col-sm-3">