- changes for the Dashboard pages

Dashboard Page/angular-dashboard-page/src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { DashboardComponent } from "./pages/dashboard/dashboard.component";
 
 const routes: Routes = [
-  { path: "", redirectTo: "landing", pathMatch: "full"},
+  { path: "", redirectTo: "dashboard", pathMatch: "full"},
   { path: "dashboard", component: DashboardComponent }
 ];
 

Dashboard Page/angular-dashboard-page/src/app/components/bar-chart/bar-chart.component.html

@@ -1,9 +1,7 @@
-<div
-  class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
->
+<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
-      <div class="relative w-full px-4 max-w-full flex-grow flex-1">
+      <div class="relative w-full max-w-full flex-grow flex-1">
         <h6 class="uppercase text-gray-500 mb-1 text-xs font-semibold">
           Performance
         </h6>
@@ -13,7 +11,7 @@ <h2 class="text-gray-800 text-xl font-semibold">
       </div>
     </div>
   </div>
-  <div class="px-4 py-5 flex-auto">
+  <div class="p-4 flex-auto">
     <!-- Chart -->
     <div class="relative" style="height:350px">
       <canvas id="bar-chart"></canvas>

Dashboard Page/angular-dashboard-page/src/app/components/bar-chart/bar-chart.component.ts

@@ -27,25 +27,27 @@ export class BarChartComponent implements OnInit, AfterViewInit {
         datasets: [
           {
             label: new Date().getFullYear(),
-            backgroundColor: "#48bb78",
-            borderColor: "#48bb78",
-            data: [10, 78, 56, 34, 100, 45, 13],
-            fill: false
+            backgroundColor: "#ed64a6",
+            borderColor: "#ed64a6",
+            data: [30, 78, 56, 34, 100, 45, 13],
+            fill: false,
+            barThickness: 8
           },
           {
             label: new Date().getFullYear() - 1,
             fill: false,
-            backgroundColor: "#ed8936",
-            borderColor: "#ed8936",
-            data: [7, 68, 86, 74, 10, 4, 87]
+            backgroundColor: "#4c51bf",
+            borderColor: "#4c51bf",
+            data: [27, 68, 86, 74, 10, 4, 87],
+            barThickness: 8
           }
         ]
       },
       options: {
         maintainAspectRatio: false,
         responsive: true,
         title: {
-          display: true,
+          display: false,
           text: "Orders Chart"
         },
         tooltips: {
@@ -56,13 +58,20 @@ export class BarChartComponent implements OnInit, AfterViewInit {
           mode: "nearest",
           intersect: true
         },
+        legend: {
+          labels: {
+            fontColor: "rgba(0,0,0,.4)"
+          },
+          align: "end",
+          position: "bottom"
+        },
         scales: {
           xAxes: [
             {
-              display: true,
+              display: false,
               scaleLabel: {
-                display: true,
-                labelString: "Month"
+              display: true,
+              labelString: "Month"
               },
               gridLines: {
                 borderDash: [2],
@@ -78,14 +87,15 @@ export class BarChartComponent implements OnInit, AfterViewInit {
             {
               display: true,
               scaleLabel: {
-                display: true,
-                labelString: "Value"
+              display: false,
+              labelString: "Value"
               },
               gridLines: {
                 borderDash: [2],
+                drawBorder: false,
                 borderDashOffset: [2],
-                color: "rgba(33, 37, 41, 0.3)",
-                zeroLineColor: "rgba(33, 37, 41, 0.3)",
+                color: "rgba(33, 37, 41, 0.2)",
+                zeroLineColor: "rgba(33, 37, 41, 0.15)",
                 zeroLineBorderDash: [2],
                 zeroLineBorderDashOffset: [2]
               }

Dashboard Page/angular-dashboard-page/src/app/components/line-chart/line-chart.component.html

@@ -1,9 +1,7 @@
-<div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-indigo-900"
->
+<div class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-gray-900">
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
-      <div class="relative w-full px-4 max-w-full flex-grow flex-1">
+      <div class="relative w-full max-w-full flex-grow flex-1">
         <h6 class="uppercase text-gray-200 mb-1 text-xs font-semibold">
           Overview
         </h6>
@@ -13,7 +11,7 @@ <h2 class="text-white text-xl font-semibold">
       </div>
     </div>
   </div>
-  <div class="px-4 py-5 flex-auto">
+  <div class="p-4 flex-auto">
     <!-- Chart -->
     <div class="relative" style="height:350px">
       <canvas id="line-chart"></canvas>

Dashboard Page/angular-dashboard-page/src/app/components/line-chart/line-chart.component.ts

@@ -29,30 +29,32 @@ export class LineChartComponent implements OnInit {
             label: new Date().getFullYear(),
             backgroundColor: "#4c51bf",
             borderColor: "#4c51bf",
-            data: [10, 78, 56, 34, 100, 45, 13],
+            data: [65, 78, 66, 44, 56, 67, 75],
             fill: false
           },
           {
             label: new Date().getFullYear() - 1,
             fill: false,
-            backgroundColor: "#b7791f",
-            borderColor: "#b7791f",
-            data: [7, 68, 86, 74, 10, 4, 87]
+            backgroundColor: "#ed64a6",
+            borderColor: "#ed64a6",
+            data: [40, 68, 86, 74, 56, 60, 87]
           }
         ]
       },
       options: {
         maintainAspectRatio: false,
         responsive: true,
         title: {
-          display: true,
+          display: false,
           text: "Sales Charts",
-          fontColor: "white"
+          fontColor: "white",
         },
         legend: {
           labels: {
             fontColor: "white"
-          }
+          },
+          align: "end",
+          position: "bottom"
         },
         tooltips: {
           mode: "index",
@@ -66,19 +68,20 @@ export class LineChartComponent implements OnInit {
           xAxes: [
             {
               ticks: {
-                fontColor: "white"
+                fontColor: "rgba(255,255,255,.7)"
               },
               display: true,
               scaleLabel: {
-                display: true,
+                display: false,
                 labelString: "Month",
                 fontColor: "white"
               },
               gridLines: {
+                display: false,
                 borderDash: [2],
                 borderDashOffset: [2],
                 color: "rgba(33, 37, 41, 0.3)",
-                zeroLineColor: "rgba(33, 37, 41, 0.1)",
+                zeroLineColor: "rgba(0, 0, 0, 0)",
                 zeroLineBorderDash: [2],
                 zeroLineBorderDashOffset: [2]
               }
@@ -87,19 +90,20 @@ export class LineChartComponent implements OnInit {
           yAxes: [
             {
               ticks: {
-                fontColor: "white"
+                fontColor: "rgba(255,255,255,.7)"
               },
               display: true,
               scaleLabel: {
-                display: true,
+                display: false,
                 labelString: "Value",
                 fontColor: "white"
               },
               gridLines: {
-                borderDash: [2],
-                borderDashOffset: [2],
-                color: "rgba(33, 37, 41, 0.3)",
-                zeroLineColor: "rgba(33, 37, 41, 0.3)",
+                borderDash: [3],
+                borderDashOffset: [3],
+                drawBorder: false,
+                color: "rgba(255, 255, 255, 0.15)",
+                zeroLineColor: "rgba(33, 37, 41, 0)",
                 zeroLineBorderDash: [2],
                 zeroLineBorderDashOffset: [2]
               }

Dashboard Page/angular-dashboard-page/src/app/components/navbar/navbar.component.html

@@ -1,30 +1,36 @@
 <!-- Navbar -->
-<nav class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-no-wrap md:justify-start flex items-center p-4">
-  <div class="w-full mx-autp items-center flex justify-between md:flex-no-wrap flex-wrap md:px-10 px-4">
+<nav
+  class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-no-wrap md:justify-start flex items-center p-4"
+>
+  <div
+    class="w-full mx-autp items-center flex justify-between md:flex-no-wrap flex-wrap md:px-10 px-4"
+  >
     <!-- Brand -->
     <a
-      class="text-white uppercase hidden lg:inline-block font-semibold"
-      href="https://www.creative-tim.com/learning-lab/tailwindcss-starter-project#/dashboard"
+      class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
+      href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/dashboard"
+      >Dashboard</a
     >
-      Dashboard
-    </a>
     <!-- Form -->
-    <form class="mr-3 md:flex hidden flex-row flex-wrap items-center lg:ml-auto">
+    <form
+      class="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3"
+    >
       <div class="relative flex w-full flex-wrap items-stretch">
-        <div class="flex">
-          <span class="font-normal leading-snug flex text-center white-space-no-wrap border border-solid border-gray-200 placeholder-gray-300 text-gray-100 bg-transparent rounded-full text-base items-center rounded-r-none pl-3 py-2 border-r-0">
-            <i class="fas fa-search"></i>
-          </span>
-        </div>
+        <span
+          class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
+          ><i class="fas fa-search"></i
+        ></span>
         <input
           type="text"
-          placeholder="Placeholder"
-          class="px-3 py-2 h-12 border border-solid  border-gray-200 placeholder-gray-200 text-white bg-transparent rounded-full text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal rounded-l-none flex-1 border-l-0"
+          placeholder="Search here..."
+          class="px-3 py-3 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:shadow-outline w-full pl-10"
         />
       </div>
     </form>
     <!-- User -->
-    <ul class="flex-col md:flex-row list-none items-center hidden md:flex">
+    <ul
+      class="flex-col md:flex-row list-none items-center hidden md:flex"
+    >
       <app-user-dropdown></app-user-dropdown>
     </ul>
   </div>

Dashboard Page/angular-dashboard-page/src/app/components/notification-dropdown/notification-dropdown.component.ts

@@ -9,41 +9,22 @@ export class NotificationDropdownComponent implements OnInit {
   dropdownPopoverShow = false;
   @ViewChild('btnDropdownRef',{ static: false }) btnDropdownRef:ElementRef;
   popper = document.createElement("div");
-  constructor() { }
-
   ngOnInit() {
-    this.popper.innerHTML = `<div
-      #popoverDropdownRef
-      class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
-      style="min-width:12rem"
-    >
-      <a
-        href="#pablo"
-        class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
-      >
-        Action
-      </a>
-      <a
-        href="#pablo"
-        class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
-      >
-        Another action
-      </a>
-      <a
-        href="#pablo"
-        class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
-      >
-        Something else here
-      </a>
-      <div class="h-0 my-2 border border-solid border-gray-200" />
-      <a
-        href="#pablo"
-        class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
-      >
-        Seprated link
-      </a>
-    </div>
-`
+    this.popper.innerHTML = `<div class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" style="min-width:12rem" #popoverDropdownRef>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent  text-gray-800">
+    Action
+  </a>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent  text-gray-800">
+    Another action
+  </a>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent  text-gray-800">
+    Something else here
+  </a>
+  <div class="h-0 my-2 border border-solid border-gray-200"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent  text-gray-800">
+    Seprated link
+  </a>
+</div>`;
   }
   toggleDropdown(event){
     event.preventDefault();
@@ -60,10 +41,9 @@ export class NotificationDropdownComponent implements OnInit {
   }
   createPoppper(){
     new Popper(this.btnDropdownRef.nativeElement, this.popper, {
-      placement: "bottom-start"
+      placement: "bottom-end"
     });
     this.btnDropdownRef.nativeElement.parentNode.insertBefore(this.popper, this.btnDropdownRef.nativeElement.nextSibling);
 
   }
-
 }