From ff314b019f0942498c9f616517034a3ee2cad2f3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:10:23 +0200
Subject: [PATCH 001/171] docs: change dates and versions

---
 LICENSE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LICENSE.md b/LICENSE.md
index 7a028d9c..c778175b 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Creative Tim (https://www.creative-tim.com?ref=na-license)
+Copyright (c) 2021 Creative Tim (https://www.creative-tim.com?ref=na-license)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

From afec8c983ac1ceb0901c57d2ea5a43bdb8ae2089 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:10:26 +0200
Subject: [PATCH 002/171] docs: change dates and versions

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2f75d669..698ef6c9 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Notus Angular <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level." target="_blank">![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)</a>
 
-![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/creativetimofficial/notus-angular/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-angular.svg)</a> <a href="https://github.com/creativetimofficial/notus-angular/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-angular.svg)</a> <a href="https://gitter.im/creative-tim-general/Lobby" target="_blank">![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)</a> <a href="https://discord.gg/E4aHAQy" target="_blank">![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)</a>
+![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) <a href="https://github.com/creativetimofficial/notus-angular/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-angular.svg)</a> <a href="https://github.com/creativetimofficial/notus-angular/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-angular.svg)</a> <a href="https://gitter.im/creative-tim-general/Lobby" target="_blank">![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)</a> <a href="https://discord.gg/E4aHAQy" target="_blank">![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)</a>
 
 ![Notus Angular](https://github.com/creativetimofficial/public-assets/blob/master/notus-angular/notus-angular.jpg?raw=true)
 
@@ -285,7 +285,7 @@ We use GitHub Issues as the official bug tracker for the Notus Angular. Here are
 
 ## Licensing
 
-- Copyright 2020 <a href="https://www.creative-tim.com/?ref=na-readme" target="_blank">Creative Tim</a>
+- Copyright 2021 <a href="https://www.creative-tim.com/?ref=na-readme" target="_blank">Creative Tim</a>
 
 - Licensed under <a href="https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md" target="_blank">MIT</a>
 

From 6ee340d4df574722119e9ca5ef387642be3999e4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:10:28 +0200
Subject: [PATCH 003/171] docs: change dates and versions

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 28a61a55..084d6316 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notus-angular",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Notus Angular - Free Tailwind CSS UI Kit and Admin by Creative Tim.",
   "repository": "https://github.com/creativetimofficial/notus-angular",
   "license": "MIT",

From e48fb12f053710c815aba644fe704cb7fd9d773d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:10:31 +0200
Subject: [PATCH 004/171] docs: change dates and versions

---
 src/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index b534d406..0696ab6f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,11 +1,11 @@
 <!--
 
 =========================================================
-* Notus Angular - v1.0.0 based on Tailwind Starter Kit by Creative Tim
+* Notus Angular - v1.1.0 based on Tailwind Starter Kit by Creative Tim
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/notus-angular
-* Copyright 2020 Creative Tim (https://www.creative-tim.com)
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
 * Licensed under MIT (https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

From 2bfcb10c49016aeba7c8f400fe7d7c45f7be7e1a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:19 +0200
Subject: [PATCH 005/171] docs: add changes

---
 CHANGELOG.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c41eb8d..b670d132 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Change Log
 
+## [1.1.0] date
+### Bug fixing
+- Rename `master` branch to `main`
+### Major style changes
+
+### Deleted components
+
+### Added components
+
+### Deleted dependencies
+
+### Added dependencies
+
+### Updated dependencies
+```
+
+```
+### Warning
+_If needed_
+
 ## [1.0.0] 2020-09-29
 ### Original Release
 - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=na-changelog)

From 8950aec863920852b7246f10d2fd1dea893430f7 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:28 +0200
Subject: [PATCH 006/171] docs: change master to main

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 698ef6c9..0f4ad36e 100644
--- a/README.md
+++ b/README.md
@@ -287,7 +287,7 @@ We use GitHub Issues as the official bug tracker for the Notus Angular. Here are
 
 - Copyright 2021 <a href="https://www.creative-tim.com/?ref=na-readme" target="_blank">Creative Tim</a>
 
-- Licensed under <a href="https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md" target="_blank">MIT</a>
+- Licensed under <a href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md" target="_blank">MIT</a>
 
 ## Useful Links
 

From 3dca639c69e5acfcef42518f3cd3868068cb2c22 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:30 +0200
Subject: [PATCH 007/171] docs: change master to main

---
 .../components/footers/footer-admin/footer-admin.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/footers/footer-admin/footer-admin.component.html b/src/app/components/footers/footer-admin/footer-admin.component.html
index bbf0ca52..9843c8c8 100644
--- a/src/app/components/footers/footer-admin/footer-admin.component.html
+++ b/src/app/components/footers/footer-admin/footer-admin.component.html
@@ -43,7 +43,7 @@
           </li>
           <li>
             <a
-              href="https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md?ref=creativetim"
+              href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
               class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
             >
               MIT License

From 60166445f69fde8d948f4dbaf698c19fe4245787 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:33 +0200
Subject: [PATCH 008/171] docs: change master to main

---
 .../components/footers/footer-small/footer-small.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/footers/footer-small/footer-small.component.html b/src/app/components/footers/footer-small/footer-small.component.html
index da85d2d6..86caaa2e 100644
--- a/src/app/components/footers/footer-small/footer-small.component.html
+++ b/src/app/components/footers/footer-small/footer-small.component.html
@@ -46,7 +46,7 @@
           </li>
           <li>
             <a
-              href="https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md?ref=creativetim"
+              href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
               class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
             >
               MIT License

From 5d63b9dd4c1e72419ad890d8efc151b0824aade4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:35 +0200
Subject: [PATCH 009/171] docs: change master to main

---
 src/app/components/footers/footer/footer.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index fd1b7f2e..5f192379 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -105,7 +105,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               <li>
                 <a
                   class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
-                  href="https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md?ref=creativetim"
+                  href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
                 >
                   MIT License
                 </a>

From b7427f1ff66b0e381130b5bcdee06c1e4c95c898 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:37:37 +0200
Subject: [PATCH 010/171] docs: change master to main

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 0696ab6f..9c03c894 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,7 @@
 
 * Product Page: https://www.creative-tim.com/product/notus-angular
 * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/notus-angular/blob/master/LICENSE.md)
+* Licensed under MIT (https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
 

From ff66effbb338f3c1ebc814682e7a202e6a79b873 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:22:21 +0200
Subject: [PATCH 011/171] refactor: update all dependencies

---
 package.json | 52 ++++++++++++++++++++++++++--------------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 084d6316..b5e0e9e8 100644
--- a/package.json
+++ b/package.json
@@ -15,42 +15,42 @@
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm start"
   },
   "dependencies": {
-    "@angular/animations": "10.1.2",
-    "@angular/common": "10.1.2",
-    "@angular/compiler": "10.1.2",
-    "@angular/core": "10.1.2",
-    "@angular/forms": "10.1.2",
-    "@angular/platform-browser": "10.1.2",
-    "@angular/platform-browser-dynamic": "10.1.2",
-    "@angular/router": "10.1.2",
-    "@fortawesome/fontawesome-free": "5.14.0",
-    "@popperjs/core": "2.5.1",
-    "@tailwindcss/custom-forms": "0.2.1",
-    "chart.js": "2.9.3",
-    "rxjs": "6.6.3",
-    "tailwindcss": "1.8.10",
-    "tslib": "2.0.1",
-    "zone.js": "0.10.3"
+    "@angular/animations": "11.2.5",
+    "@angular/common": "11.2.5",
+    "@angular/compiler": "11.2.5",
+    "@angular/core": "11.2.5",
+    "@angular/forms": "11.2.5",
+    "@angular/platform-browser": "11.2.5",
+    "@angular/platform-browser-dynamic": "11.2.5",
+    "@angular/router": "11.2.5",
+    "@fortawesome/fontawesome-free": "5.15.3",
+    "@popperjs/core": "2.9.1",
+    "@tailwindcss/forms": "0.2.1",
+    "chart.js": "2.9.4",
+    "rxjs": "6.6.6",
+    "tailwindcss": "2.0.3",
+    "tslib": "2.1.0",
+    "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1001.2",
-    "@angular/cli": "10.1.2",
-    "@angular/compiler-cli": "10.1.2",
-    "@angular/language-service": "10.1.2",
-    "@types/jasmine": "3.5.14",
+    "@angular-devkit/build-angular": "0.1102.4",
+    "@angular/cli": "11.2.4",
+    "@angular/compiler-cli": "11.2.5",
+    "@angular/language-service": "11.2.5",
+    "@types/jasmine": "3.6.6",
     "@types/jasminewd2": "2.0.8",
-    "@types/node": "14.11.2",
-    "codelyzer": "6.0.0",
+    "@types/node": "14.14.35",
+    "codelyzer": "6.0.1",
     "jasmine-core": "3.6.0",
     "jasmine-spec-reporter": "6.0.0",
-    "karma": "5.2.2",
+    "karma": "6.2.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-html-reporter": "1.5.4",
     "protractor": "7.0.0",
-    "ts-node": "9.0.0",
+    "ts-node": "9.1.1",
     "tslint": "6.1.3",
-    "typescript": "4.0.3"
+    "typescript": "4.1.5"
   }
 }

From 497dcb0538e7603a759c6029da157c9e1fa26ab9 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:22:26 +0200
Subject: [PATCH 012/171] docs: add changes

---
 CHANGELOG.md | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b670d132..8e57faee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,15 +10,39 @@
 ### Added components
 
 ### Deleted dependencies
-
+- `@tailwindcss/custom-forms`
 ### Added dependencies
-
+- `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`)
 ### Updated dependencies
 ```
-
+@angular/animations                   10.1.2   →     11.2.5
+@angular/common                       10.1.2   →     11.2.5
+@angular/compiler                     10.1.2   →     11.2.5
+@angular/core                         10.1.2   →     11.2.5
+@angular/forms                        10.1.2   →     11.2.5
+@angular/platform-browser             10.1.2   →     11.2.5
+@angular/platform-browser-dynamic     10.1.2   →     11.2.5
+@angular/router                       10.1.2   →     11.2.5
+@fortawesome/fontawesome-free         5.14.0   →     5.15.3
+@popperjs/core                         2.5.1   →      2.9.1
+chart.js                               2.9.3   →      2.9.4
+rxjs                                   6.6.3   →      6.6.6
+tailwindcss                           1.8.10   →      2.0.3
+tslib                                  2.0.1   →      2.1.0
+zone.js                               0.10.3   →     0.11.4
+@angular-devkit/build-angular       0.1001.2   →   0.1102.4
+@angular/cli                          10.1.2   →     11.2.4
+@angular/compiler-cli                 10.1.2   →     11.2.5
+@angular/language-service             10.1.2   →     11.2.5
+@types/jasmine                        3.5.14   →      3.6.6
+@types/node                          14.11.2   →   14.14.35
+codelyzer                              6.0.0   →      6.0.1
+karma                                  5.2.2   →      6.2.0
+ts-node                                9.0.0   →      9.1.1
+typescript                             4.0.3   →      4.1.5
 ```
 ### Warning
-_If needed_
+_On a clean install there may be some warnings from request, chokidar, fsevents - they come from node_modules, and they do not affect the product at all._
 
 ## [1.0.0] 2020-09-29
 ### Original Release

From 8d41d80adb0adc0d8a9cadee0ec62502398d9593 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:22:42 +0200
Subject: [PATCH 013/171] refactor: update tailwind config

---
 tailwind.config.js | 56 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 38ba000a..2b3282f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,7 @@
+const plugin = require("tailwindcss/plugin");
+const colors = require("tailwindcss/colors");
+
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true
-  },
   purge: {
     enabled: true,
     content: [
@@ -18,6 +17,9 @@ module.exports = {
     },
   },
   theme: {
+    colors: {
+      ...colors,
+    },
     extend: {
       minHeight: {
         "screen-75": "75vh",
@@ -73,7 +75,7 @@ module.exports = {
         "48": "12rem",
       },
       backgroundSize: {
-        full: "100$",
+        full: "100%",
       },
     },
   },
@@ -91,5 +93,47 @@ module.exports = {
     "visited",
     "disabled",
   ],
-  plugins: [require("@tailwindcss/custom-forms")],
+  plugins: [require("@tailwindcss/forms"),plugin(function ({ addComponents, theme }) {
+      const screens = theme("screens", {});
+      addComponents([
+        {
+          ".container": { width: "100%" },
+        },
+        {
+          [`@media (min-width: ${screens.sm})`]: {
+            ".container": {
+              "max-width": "640px",
+            },
+          },
+        },
+        {
+          [`@media (min-width: ${screens.md})`]: {
+            ".container": {
+              "max-width": "768px",
+            },
+          },
+        },
+        {
+          [`@media (min-width: ${screens.lg})`]: {
+            ".container": {
+              "max-width": "1024px",
+            },
+          },
+        },
+        {
+          [`@media (min-width: ${screens.xl})`]: {
+            ".container": {
+              "max-width": "1280px",
+            },
+          },
+        },
+        {
+          [`@media (min-width: ${screens["2xl"]})`]: {
+            ".container": {
+              "max-width": "1280px",
+            },
+          },
+        },
+      ]);
+    }),],
 };

From df2882f6f480f22646fdd7761b87f9f8e20b387c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:44 +0200
Subject: [PATCH 014/171] refactor: update v1 classes to v2

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 07f6536b..c00271ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,4 @@ yarn-error.log*
 *.sw?
 
 package-lock.json
+commit.sh

From a6b224884a736ad3d25f679cfab97809ba92bd55 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:46 +0200
Subject: [PATCH 015/171] refactor: update v1 classes to v2

---
 .../card-page-visits.component.html           | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index c9419d67..7fc1523e 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -24,22 +24,22 @@ <h3 class="font-semibold text-base text-gray-800">
       <thead>
         <tr>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Page name
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Unique users
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Bounce rate
           </th>
@@ -48,22 +48,22 @@ <h3 class="font-semibold text-base text-gray-800">
       <tbody>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             /argon/
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             4,569
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             340
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-arrow-up text-green-500 mr-4"></i>
             46,53%
@@ -71,22 +71,22 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             /argon/index.html
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             3,985
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             319
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-arrow-down text-orange-500 mr-4"></i>
             46,53%
@@ -94,22 +94,22 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             /argon/charts.html
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             3,513
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             294
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-arrow-down text-orange-500 mr-4"></i>
             36,49%
@@ -117,22 +117,22 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             /argon/tables.html
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             2,050
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             147
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-arrow-up text-green-500 mr-4"></i>
             50,87%
@@ -140,22 +140,22 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             /argon/profile.html
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             1,795
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             190
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-arrow-down text-red-500 mr-4"></i>
             46,53%

From 0e8a0d78741546512252e7a052e22c84c0d92983 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:48 +0200
Subject: [PATCH 016/171] refactor: update v1 classes to v2

---
 .../card-settings/card-settings.component.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/cards/card-settings/card-settings.component.html b/src/app/components/cards/card-settings/card-settings.component.html
index 39a3deff..3ab31e06 100644
--- a/src/app/components/cards/card-settings/card-settings.component.html
+++ b/src/app/components/cards/card-settings/card-settings.component.html
@@ -28,7 +28,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="lucky.jesse"
             />
           </div>
@@ -43,7 +43,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="jesse@example.com"
             />
           </div>
@@ -58,7 +58,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Lucky"
             />
           </div>
@@ -73,7 +73,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Jesse"
             />
           </div>
@@ -96,7 +96,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
             />
           </div>
@@ -111,7 +111,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="New York"
             />
           </div>
@@ -126,7 +126,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="United States"
             />
           </div>
@@ -141,7 +141,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Postal Code"
             />
           </div>
@@ -164,7 +164,7 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
             </label>
             <textarea
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               rows="4"
             >
                   A beautiful UI Kit and Admin for Angular & Tailwind CSS. It is Free

From 81e59ca01098cd840c71b99fe1bbb551f18bcad1 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:50 +0200
Subject: [PATCH 017/171] refactor: update v1 classes to v2

---
 .../card-social-traffic.component.html        | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index d2a28fc9..2c3bd9ec 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -24,34 +24,34 @@ <h3 class="font-semibold text-base text-gray-800">
       <thead class="thead-light">
         <tr>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Referral
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left min-w-140-px"
+            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
           ></th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             Facebook
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             1,480
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">60%</span>
@@ -70,17 +70,17 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             Facebook
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             5,480
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">70%</span>
@@ -99,17 +99,17 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             Google
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             4,807
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">80%</span>
@@ -128,17 +128,17 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             Instagram
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             3,678
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">75%</span>
@@ -157,17 +157,17 @@ <h3 class="font-semibold text-base text-gray-800">
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
           >
             twitter
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             2,645
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">30%</span>

From 180ecce2562b4dfd4d0a0562e78963be2447a40d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:52 +0200
Subject: [PATCH 018/171] refactor: update v1 classes to v2

---
 src/app/components/cards/card-stats/card-stats.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/cards/card-stats/card-stats.component.html b/src/app/components/cards/card-stats/card-stats.component.html
index 6874b6ad..89e4150e 100644
--- a/src/app/components/cards/card-stats/card-stats.component.html
+++ b/src/app/components/cards/card-stats/card-stats.component.html
@@ -29,7 +29,7 @@ <h5 class="text-gray-500 uppercase font-bold text-xs">
         ></i>
         {{ statPercent }}%
       </span>
-      <span class="whitespace-no-wrap">{{ statDescripiron }}</span>
+      <span class="whitespace-nowrap">{{ statDescripiron }}</span>
     </p>
   </div>
 </div>

From 8ce765c61b696df1e52b544a78ffd4dc16f5006b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:53 +0200
Subject: [PATCH 019/171] refactor: update v1 classes to v2

---
 .../card-table/card-table.component.html      | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index ce07c5b9..79f7dc5f 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -20,7 +20,7 @@
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -30,7 +30,7 @@
             Project
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -40,7 +40,7 @@
             Budget
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -50,7 +50,7 @@
             Status
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -60,7 +60,7 @@
             Users
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -70,7 +70,7 @@
             Completion
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
                 ? 'bg-gray-100 text-gray-600 border-gray-200'
@@ -82,7 +82,7 @@
       <tbody>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
               src="assets/img/bootstrap.jpg"
@@ -97,17 +97,17 @@
             </span>
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             $2,500 USD
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-circle text-orange-500 mr-2"></i> pending
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
@@ -133,7 +133,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">60%</span>
@@ -150,14 +150,14 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
           >
             <app-table-dropdown></app-table-dropdown>
           </td>
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
               src="assets/img/angular.jpg"
@@ -172,18 +172,18 @@
             </span>
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             $1,800 USD
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-circle text-green-500 mr-2"></i>
             completed
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
@@ -209,7 +209,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">100%</span>
@@ -226,14 +226,14 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
           >
             <app-table-dropdown></app-table-dropdown>
           </td>
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
               src="assets/img/sketch.jpg"
@@ -248,17 +248,17 @@
             </span>
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             $3,150 USD
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-circle text-red-500 mr-2"></i> delayed
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
@@ -284,7 +284,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">73%</span>
@@ -301,14 +301,14 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
           >
             <app-table-dropdown></app-table-dropdown>
           </td>
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
               src="assets/img/react.jpg"
@@ -323,17 +323,17 @@
             </span>
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             $4,400 USD
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-circle text-teal-500 mr-2"></i> on schedule
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
@@ -359,7 +359,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">90%</span>
@@ -376,14 +376,14 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
           >
             <app-table-dropdown></app-table-dropdown>
           </td>
         </tr>
         <tr>
           <th
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
               src="assets/img/vue.jpg"
@@ -398,18 +398,18 @@
             </span>
           </th>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             $2,200 USD
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <i class="fas fa-circle text-green-500 mr-2"></i>
             completed
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
@@ -435,7 +435,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex items-center">
               <span class="mr-2">100%</span>
@@ -452,7 +452,7 @@
             </div>
           </td>
           <td
-            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right"
+            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
           >
             <app-table-dropdown></app-table-dropdown>
           </td>

From 41a7b2f5aa0d7b792d86644027f387d7f1127385 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:55 +0200
Subject: [PATCH 020/171] refactor: update v1 classes to v2

---
 .../index-dropdown.component.html             | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
index 0ad7a3d4..2e3096ce 100644
--- a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
+++ b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Maps
   </a>
   <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Register
   </a>
   <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Profile
   </a>

From 422b24792081e650871b74b4d08b719b7c37adb8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:57 +0200
Subject: [PATCH 021/171] refactor: update v1 classes to v2

---
 .../notification-dropdown.component.ts                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
index 89448b98..802a6748 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
@@ -11,17 +11,17 @@ export class NotificationDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
     Seprated link
   </a>
 </div>`;

From 361314953a78d89fdd4597046f236e7942a7b2d5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:46:59 +0200
Subject: [PATCH 022/171] refactor: update v1 classes to v2

---
 .../pages-dropdown.component.html             | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
index 14480f16..67c05d97 100644
--- a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
+++ b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Maps
   </a>
   <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Register
   </a>
   <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-no-wrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-no-wrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
   >
     Profile
   </a>

From 20b00db69ed9e1a27cd712b65e76c0254fc17698 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:01 +0200
Subject: [PATCH 023/171] refactor: update v1 classes to v2

---
 .../dropdowns/table-dropdown/table-dropdown.component.ts  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
index 4fbd5948..230c1f4a 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
@@ -12,17 +12,17 @@ export class TableDropdownComponent implements OnInit {
   ngOnInit() {
     this.popper.style.zIndex = "1";
     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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
     Seprated link
   </a>
 </div>`;

From f66efa6f9afc82a6a97d70e0ddb6059d8a87f4da Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:02 +0200
Subject: [PATCH 024/171] refactor: update v1 classes to v2

---
 .../dropdowns/user-dropdown/user-dropdown.component.ts    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
index 02b73dec..1c1cc749 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
@@ -11,17 +11,17 @@ export class UserDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap 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">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
     Seprated link
   </a>
 </div>`;

From 14e08b7485487f450cace084c3f9046213a7a3b7 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:04 +0200
Subject: [PATCH 025/171] refactor: update v1 classes to v2

---
 .../navbars/admin-navbar/admin-navbar.component.html        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/navbars/admin-navbar/admin-navbar.component.html b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
index 0b3a1b70..cf8d7b4a 100644
--- a/src/app/components/navbars/admin-navbar/admin-navbar.component.html
+++ b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
@@ -1,9 +1,9 @@
 <!-- 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"
+  class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap 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"
+    class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4"
   >
     <!-- Brand -->
     <a
@@ -23,7 +23,7 @@
         <input
           type="text"
           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"
+          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:ring w-full pl-10"
         />
       </div>
     </form>

From a4f792c6b370996633b141b7af2a654a5d25e32d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:06 +0200
Subject: [PATCH 026/171] refactor: update v1 classes to v2

---
 .../components/navbars/auth-navbar/auth-navbar.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/navbars/auth-navbar/auth-navbar.component.html b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
index e2dcb938..0657b4bc 100644
--- a/src/app/components/navbars/auth-navbar/auth-navbar.component.html
+++ b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
@@ -9,7 +9,7 @@
     >
       <a
         [routerLink]="['/']"
-        class="text-white text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase"
+        class="text-white text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
       >
         Notus Angular
       </a>

From 1ce74a511f8cdd06c721675843538c47ad746e7e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:08 +0200
Subject: [PATCH 027/171] refactor: update v1 classes to v2

---
 .../components/navbars/index-navbar/index-navbar.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/navbars/index-navbar/index-navbar.component.html b/src/app/components/navbars/index-navbar/index-navbar.component.html
index a3e1b1cc..4635790a 100644
--- a/src/app/components/navbars/index-navbar/index-navbar.component.html
+++ b/src/app/components/navbars/index-navbar/index-navbar.component.html
@@ -9,7 +9,7 @@
     >
       <a
         [routerLink]="['/']"
-        class="text-gray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase"
+        class="text-gray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
         href="#pablo"
       >
         Notus Angular

From 50307b1e0e7da0cffe251c27ab41e12785f0a560 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:10 +0200
Subject: [PATCH 028/171] refactor: update v1 classes to v2

---
 src/app/components/sidebar/sidebar.component.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index 5a49e228..ac87ccf7 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -1,8 +1,8 @@
 <nav
-  class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-no-wrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
+  class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
 >
   <div
-    class="md:flex-col md:items-stretch md:min-h-full md:flex-no-wrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
+    class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
   >
     <!-- Toggler -->
     <button
@@ -15,7 +15,7 @@
     <!-- Brand -->
     <a
       [routerLink]="['/']"
-      class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-no-wrap text-sm uppercase font-bold p-4 px-0"
+      class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
     >
       <span class="block sm:hidden">
         Tailwind Angular
@@ -46,7 +46,7 @@
           <div class="w-6/12">
             <a
               [routerLink]="['/']"
-              class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-no-wrap text-sm uppercase font-bold p-4 px-0"
+              class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
             >
               Notus Angular
             </a>

From d1993bb740e3a5d1e927ba920230ef67ee01c776 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:12 +0200
Subject: [PATCH 029/171] refactor: update v1 classes to v2

---
 src/app/views/auth/login/login.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/views/auth/login/login.component.html b/src/app/views/auth/login/login.component.html
index a29a5c53..4aeab26f 100644
--- a/src/app/views/auth/login/login.component.html
+++ b/src/app/views/auth/login/login.component.html
@@ -42,7 +42,7 @@ <h6 class="text-gray-600 text-sm font-bold">
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
@@ -56,7 +56,7 @@ <h6 class="text-gray-600 text-sm font-bold">
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>

From 0ab10cb78b1306ed9db2c7559bd64ac1f70d7a6f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:13 +0200
Subject: [PATCH 030/171] refactor: update v1 classes to v2

---
 src/app/views/auth/register/register.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/views/auth/register/register.component.html b/src/app/views/auth/register/register.component.html
index 9e847ccf..dcc74a41 100644
--- a/src/app/views/auth/register/register.component.html
+++ b/src/app/views/auth/register/register.component.html
@@ -42,7 +42,7 @@ <h6 class="text-gray-600 text-sm font-bold">
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Name"
               />
             </div>
@@ -56,7 +56,7 @@ <h6 class="text-gray-600 text-sm font-bold">
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
@@ -70,7 +70,7 @@ <h6 class="text-gray-600 text-sm font-bold">
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>

From ac3eba3a78d8e40ecbdaf3e50cf490baaef61104 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:15 +0200
Subject: [PATCH 031/171] refactor: update v1 classes to v2

---
 src/app/views/landing/landing.component.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index 1359b8bf..46991237 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -529,7 +529,7 @@ <h4 class="text-2xl font-semibold">
                 </label>
                 <input
                   type="text"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Full Name"
                 />
               </div>
@@ -543,7 +543,7 @@ <h4 class="text-2xl font-semibold">
                 </label>
                 <input
                   type="email"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full ease-linear transition-all duration-150"
+                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Email"
                 />
               </div>
@@ -558,7 +558,7 @@ <h4 class="text-2xl font-semibold">
                 <textarea
                   rows="4"
                   cols="80"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
+                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
                   placeholder="Type a message..."
                 ></textarea>
               </div>

From 83bd4c79acd80cb999fdc114e482d5ea4ac4f5fd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:17 +0200
Subject: [PATCH 032/171] refactor: update v1 classes to v2

---
 src/assets/styles/tailwind.css | 1632 ++++++++++++++++++++------------
 1 file changed, 1006 insertions(+), 626 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 64e8daca..639e0c4e 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1,97 +1,104 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */
 
-/* Document
-   ========================================================================== */
+/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
+/*
+Document
+========
+*/
 
 /**
- * Remove the margin in all browsers.
- */
+Use a better box model (opinionated).
+*/
 
-body {
-  margin: 0;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 /**
- * Render the `main` element consistently in IE.
- */
+Use a more readable tab size (opinionated).
+*/
 
-main {
-  display: block;
+:root {
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
-/* Grouping content
-   ========================================================================== */
+/*
+Sections
+========
+*/
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
+Remove the margin in all browsers.
+*/
 
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+body {
+  margin: 0;
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
 
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+body {
+  font-family:
+		system-ui,
+		-apple-system, /* Firefox supports this but not yet `system-ui` */
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif,
+		'Apple Color Emoji',
+		'Segoe UI Emoji';
 }
 
-/* Text-level semantics
-   ========================================================================== */
+/*
+Grouping content
+================
+*/
 
 /**
- * Remove the gray background on active links in IE 10.
- */
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
 
-a {
-  background-color: transparent;
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
 }
 
+/*
+Text-level semantics
+====================
+*/
+
 /**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
 
 abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted; /* 2 */
+          text-decoration: underline dotted;
 }
 
 /**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
+Add the correct font weight in Edge and Safari.
+*/
 
 b,
 strong {
@@ -99,29 +106,35 @@ strong {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
 
 code,
 kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
+samp,
+pre {
+  font-family:
+		ui-monospace,
+		SFMono-Regular,
+		Consolas,
+		'Liberation Mono',
+		Menlo,
+		monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
 /**
- * Add the correct font size in all browsers.
- */
+Add the correct font size in all browsers.
+*/
 
 small {
   font-size: 80%;
 }
 
 /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
 
 sub,
 sup {
@@ -139,24 +152,30 @@ sup {
   top: -0.5em;
 }
 
-/* Embedded content
-   ========================================================================== */
+/*
+Tabular data
+============
+*/
 
 /**
- * Remove the border on images inside links in IE 10.
- */
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
 
-img {
-  border-style: none;
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
 }
 
-/* Forms
-   ========================================================================== */
+/*
+Forms
+=====
+*/
 
 /**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
 
 button,
 input,
@@ -170,19 +189,9 @@ textarea {
 }
 
 /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
 
 button,
 select { /* 1 */
@@ -190,160 +199,81 @@ select { /* 1 */
 }
 
 /**
- * Correct the inability to style clickable types in iOS and Safari.
- */
+Correct the inability to style clickable types in iOS and Safari.
+*/
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
 }
 
 /**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
+Remove the inner border and padding in Firefox.
+*/
 
 /**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
+Restore the focus styles unset by the previous rule.
+*/
 
 /**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
 
 /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
 
 legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
+  padding: 0;
 }
 
 /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
+Add the correct vertical alignment in Chrome and Firefox.
+*/
 
 progress {
   vertical-align: baseline;
 }
 
 /**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
 
 /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
 /**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+Remove the inner padding in Chrome and Safari on macOS.
+*/
 
 /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-/* Interactive
-   ========================================================================== */
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
 
 /*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
+Interactive
+===========
+*/
 
 /*
- * Add the correct display in all browsers.
- */
+Add the correct display in Chrome and Safari.
+*/
 
 summary {
   display: list-item;
 }
 
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}
-
 /**
  * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
  * A thin layer on top of normalize.css that provides a starting point more
@@ -409,10 +339,20 @@ ul {
  */
 
 html {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
   line-height: 1.5; /* 2 */
 }
 
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+
 /**
  * 1. Prevent padding and border from affecting element width.
  *
@@ -445,7 +385,7 @@ html {
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e2e8f0; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -475,12 +415,14 @@ textarea {
 }
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 button,
@@ -541,7 +483,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /**
@@ -577,6 +519,189 @@ video {
   height: auto;
 }
 
+
+      [type='text'],
+      [type='email'],
+      [type='url'],
+      [type='password'],
+      [type='number'],
+      [type='date'],
+      [type='datetime-local'],
+      [type='month'],
+      [type='search'],
+      [type='tel'],
+      [type='time'],
+      [type='week'],
+      [multiple],
+      textarea,
+      select
+     {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #71717a;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #71717a;
+  opacity: 1;
+}
+
+input::placeholder, textarea::placeholder {
+  color: #71717a;
+  opacity: 1;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+}
+
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  -webkit-print-color-adjust: unset;
+          color-adjust: unset;
+}
+
+
+      [type='checkbox'],
+      [type='radio']
+     {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #71717a;
+  border-width: 1px;
+}
+
+[type='checkbox'] {
+  border-radius: 0px;
+}
+
+[type='radio'] {
+  border-radius: 100%;
+}
+
+
+      [type='checkbox']:focus,
+      [type='radio']:focus
+     {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+
+      [type='checkbox']:checked,
+      [type='radio']:checked
+     {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type='radio']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+
+      [type='checkbox']:checked:hover,
+      [type='checkbox']:checked:focus,
+      [type='radio']:checked:hover,
+      [type='radio']:checked:focus
+     {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='checkbox']:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+      [type='checkbox']:indeterminate:hover,
+      [type='checkbox']:indeterminate:focus
+     {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+[type='file'] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+
+[type='file']:focus {
+  outline: 1px auto -webkit-focus-ring-color;
+}
+
 .container {
   width: 100%;
 }
@@ -605,6 +730,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -629,6 +760,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -653,6 +790,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -677,6 +820,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -701,6 +850,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -725,6 +880,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -749,6 +910,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -773,6 +940,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -797,6 +970,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -821,6 +1000,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -845,6 +1030,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -869,86 +1060,97 @@ video {
   }
 }
 
-.form-checkbox:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.container {
+  width: 100%;
 }
 
-@media not print {
-  .form-checkbox::-ms-check {
-    border-width: 1px;
-    color: transparent;
-    background: inherit;
-    border-color: inherit;
-    border-radius: inherit;
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
   }
 }
 
-.form-checkbox {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  -webkit-print-color-adjust: exact;
-          color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  flex-shrink: 0;
-  height: 1em;
-  width: 1em;
-  color: #4299e1;
-  background-color: #fff;
-  border-color: #e2e8f0;
-  border-width: 1px;
-  border-radius: 0.25rem;
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.form-checkbox:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-  border-color: #63b3ed;
+.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 1;
 }
 
-.space-y-reverse > :not(template) ~ :not(template) {
-  --space-y-reverse: 1;
+.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
 }
 
-.space-x-reverse > :not(template) ~ :not(template) {
-  --space-x-reverse: 1;
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
-.divide-y-reverse > :not(template) ~ :not(template) {
-  --divide-y-reverse: 1;
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
 }
 
-.divide-x-reverse > :not(template) ~ :not(template) {
-  --divide-x-reverse: 1;
+.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 1;
 }
 
-.divide-solid > :not(template) ~ :not(template) {
+.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 1;
+}
+
+.divide-solid > :not([hidden]) ~ :not([hidden]) {
   border-style: solid;
 }
 
-.divide-dashed > :not(template) ~ :not(template) {
+.divide-dashed > :not([hidden]) ~ :not([hidden]) {
   border-style: dashed;
 }
 
-.divide-dotted > :not(template) ~ :not(template) {
+.divide-dotted > :not([hidden]) ~ :not([hidden]) {
   border-style: dotted;
 }
 
-.divide-double > :not(template) ~ :not(template) {
+.divide-double > :not([hidden]) ~ :not([hidden]) {
   border-style: double;
 }
 
-.divide-none > :not(template) ~ :not(template) {
+.divide-none > :not([hidden]) ~ :not([hidden]) {
   border-style: none;
 }
 
@@ -1010,224 +1212,194 @@ video {
           background-clip: text;
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-black {
-  --bg-opacity: 1;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
 
 .bg-white {
-  --bg-opacity: 1;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
-  --bg-opacity: 1;
-  background-color: #f7fafc;
-  background-color: rgba(247, 250, 252, var(--bg-opacity));
+.bg-pink-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --bg-opacity: 1;
-  background-color: #edf2f7;
-  background-color: rgba(237, 242, 247, var(--bg-opacity));
+.bg-purple-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(233, 213, 255, var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --bg-opacity: 1;
-  background-color: #e2e8f0;
-  background-color: rgba(226, 232, 240, var(--bg-opacity));
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --bg-opacity: 1;
-  background-color: #4a5568;
-  background-color: rgba(74, 85, 104, var(--bg-opacity));
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
-  --bg-opacity: 1;
-  background-color: #2d3748;
-  background-color: rgba(45, 55, 72, var(--bg-opacity));
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
-  --bg-opacity: 1;
-  background-color: #1a202c;
-  background-color: rgba(26, 32, 44, var(--bg-opacity));
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
 }
 
-.bg-red-200 {
-  --bg-opacity: 1;
-  background-color: #fed7d7;
-  background-color: rgba(254, 215, 215, var(--bg-opacity));
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
 }
 
-.bg-red-300 {
-  --bg-opacity: 1;
-  background-color: #feb2b2;
-  background-color: rgba(254, 178, 178, var(--bg-opacity));
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
 }
 
-.bg-red-400 {
-  --bg-opacity: 1;
-  background-color: #fc8181;
-  background-color: rgba(252, 129, 129, var(--bg-opacity));
+.bg-teal-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --bg-opacity: 1;
-  background-color: #f56565;
-  background-color: rgba(245, 101, 101, var(--bg-opacity));
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
 }
 
-.bg-red-600 {
-  --bg-opacity: 1;
-  background-color: #e53e3e;
-  background-color: rgba(229, 62, 62, var(--bg-opacity));
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
-  --bg-opacity: 1;
-  background-color: #c53030;
-  background-color: rgba(197, 48, 48, var(--bg-opacity));
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(74, 222, 128, var(--tw-bg-opacity));
 }
 
-.bg-red-800 {
-  --bg-opacity: 1;
-  background-color: #9b2c2c;
-  background-color: rgba(155, 44, 44, var(--bg-opacity));
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
 }
 
-.bg-red-900 {
-  --bg-opacity: 1;
-  background-color: #742a2a;
-  background-color: rgba(116, 42, 42, var(--bg-opacity));
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(234, 179, 8, var(--tw-bg-opacity));
 }
 
 .bg-orange-200 {
-  --bg-opacity: 1;
-  background-color: #feebc8;
-  background-color: rgba(254, 235, 200, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
 }
 
 .bg-orange-500 {
-  --bg-opacity: 1;
-  background-color: #ed8936;
-  background-color: rgba(237, 137, 54, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --bg-opacity: 1;
-  background-color: #ecc94b;
-  background-color: rgba(236, 201, 75, var(--bg-opacity));
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
-  --bg-opacity: 1;
-  background-color: #c6f6d5;
-  background-color: rgba(198, 246, 213, var(--bg-opacity));
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
-  --bg-opacity: 1;
-  background-color: #68d391;
-  background-color: rgba(104, 211, 145, var(--bg-opacity));
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
-  --bg-opacity: 1;
-  background-color: #48bb78;
-  background-color: rgba(72, 187, 120, var(--bg-opacity));
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.bg-teal-200 {
-  --bg-opacity: 1;
-  background-color: #b2f5ea;
-  background-color: rgba(178, 245, 234, var(--bg-opacity));
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
 }
 
-.bg-teal-500 {
-  --bg-opacity: 1;
-  background-color: #38b2ac;
-  background-color: rgba(56, 178, 172, var(--bg-opacity));
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.bg-blue-200 {
-  --bg-opacity: 1;
-  background-color: #bee3f8;
-  background-color: rgba(190, 227, 248, var(--bg-opacity));
+.bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
-  --bg-opacity: 1;
-  background-color: #63b3ed;
-  background-color: rgba(99, 179, 237, var(--bg-opacity));
+.bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(127, 29, 29, var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
-  --bg-opacity: 1;
-  background-color: #4299e1;
-  background-color: rgba(66, 153, 225, var(--bg-opacity));
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
-  --bg-opacity: 1;
-  background-color: #3182ce;
-  background-color: rgba(49, 130, 206, var(--bg-opacity));
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.bg-indigo-500 {
-  --bg-opacity: 1;
-  background-color: #667eea;
-  background-color: rgba(102, 126, 234, var(--bg-opacity));
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(212, 212, 216, var(--tw-bg-opacity));
 }
 
-.bg-purple-200 {
-  --bg-opacity: 1;
-  background-color: #e9d8fd;
-  background-color: rgba(233, 216, 253, var(--bg-opacity));
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
-  --bg-opacity: 1;
-  background-color: #9f7aea;
-  background-color: rgba(159, 122, 234, var(--bg-opacity));
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(39, 39, 42, var(--tw-bg-opacity));
 }
 
-.bg-pink-500 {
-  --bg-opacity: 1;
-  background-color: #ed64a6;
-  background-color: rgba(237, 100, 166, var(--bg-opacity));
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(24, 24, 27, var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-100:active {
-  --bg-opacity: 1;
-  background-color: #f7fafc;
-  background-color: rgba(247, 250, 252, var(--bg-opacity));
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-700:active {
-  --bg-opacity: 1;
-  background-color: #4a5568;
-  background-color: rgba(74, 85, 104, var(--bg-opacity));
+.focus\:bg-gray-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
+}
+
+.active\:bg-indigo-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
 }
 
 .active\:bg-red-700:active {
-  --bg-opacity: 1;
-  background-color: #c53030;
-  background-color: rgba(197, 48, 48, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.active\:bg-indigo-600:active {
-  --bg-opacity: 1;
-  background-color: #5a67d8;
-  background-color: rgba(90, 103, 216, var(--bg-opacity));
+.active\:bg-gray-100:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+}
+
+.active\:bg-gray-700:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
 }
 
 .bg-center {
@@ -1263,7 +1435,7 @@ video {
 }
 
 .bg-full {
-  background-size: 100$;
+  background-size: 100%;
 }
 
 .border-collapse {
@@ -1274,56 +1446,69 @@ video {
   border-collapse: separate;
 }
 
-.border-transparent {
-  border-color: transparent;
+.border-red-700 {
+  --tw-border-opacity: 1;
+  border-color: rgba(185, 28, 28, var(--tw-border-opacity));
 }
 
 .border-gray-100 {
-  --border-opacity: 1;
-  border-color: #f7fafc;
-  border-color: rgba(247, 250, 252, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(244, 244, 245, var(--tw-border-opacity));
 }
 
 .border-gray-200 {
-  --border-opacity: 1;
-  border-color: #edf2f7;
-  border-color: rgba(237, 242, 247, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
 }
 
 .border-gray-300 {
-  --border-opacity: 1;
-  border-color: #e2e8f0;
-  border-color: rgba(226, 232, 240, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
 .border-gray-400 {
-  --border-opacity: 1;
-  border-color: #cbd5e0;
-  border-color: rgba(203, 213, 224, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(161, 161, 170, var(--tw-border-opacity));
 }
 
 .border-gray-600 {
-  --border-opacity: 1;
-  border-color: #718096;
-  border-color: rgba(113, 128, 150, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(82, 82, 91, var(--tw-border-opacity));
 }
 
 .border-gray-700 {
-  --border-opacity: 1;
-  border-color: #4a5568;
-  border-color: rgba(74, 85, 104, var(--border-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(63, 63, 70, var(--tw-border-opacity));
 }
 
-.border-red-700 {
-  --border-opacity: 1;
-  border-color: #c53030;
-  border-color: rgba(197, 48, 48, var(--border-opacity));
+.focus\:border-black:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
+}
+
+.focus\:border-indigo-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(165, 180, 252, var(--tw-border-opacity));
+}
+
+.focus\:border-gray-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
+}
+
+.focus\:border-gray-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(113, 113, 122, var(--tw-border-opacity));
 }
 
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1337,11 +1522,42 @@ video {
   border-top-right-radius: 0.25rem;
 }
 
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
+}
+
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1363,7 +1579,7 @@ video {
 }
 
 .border-0 {
-  border-width: 0;
+  border-width: 0px;
 }
 
 .border-2 {
@@ -1375,25 +1591,37 @@ video {
 }
 
 .border-t-0 {
-  border-top-width: 0;
+  border-top-width: 0px;
 }
 
 .border-r-0 {
-  border-right-width: 0;
+  border-right-width: 0px;
 }
 
 .border-l-0 {
-  border-left-width: 0;
+  border-left-width: 0px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
 }
 
 .border-t {
   border-top-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -1506,7 +1734,7 @@ video {
   flex-wrap: wrap-reverse;
 }
 
-.flex-no-wrap {
+.flex-nowrap {
   flex-wrap: nowrap;
 }
 
@@ -1738,12 +1966,6 @@ video {
   float: none;
 }
 
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .clear-left {
   clear: left;
 }
@@ -1777,7 +1999,7 @@ video {
 }
 
 .h-0 {
-  height: 0;
+  height: 0px;
 }
 
 .h-1 {
@@ -1796,6 +2018,10 @@ video {
   height: 2rem;
 }
 
+.h-9 {
+  height: 2.25rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1812,6 +2038,10 @@ video {
   height: 5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1846,38 +2076,47 @@ video {
 
 .text-xs {
   font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .text-sm {
   font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .text-base {
   font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .text-lg {
   font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 
 .text-xl {
   font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .text-2xl {
   font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 .text-3xl {
   font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-4xl {
   font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-5xl {
   font-size: 3rem;
+  line-height: 1;
 }
 
 .leading-none {
@@ -1916,10 +2155,26 @@ video {
   margin: 0.5rem;
 }
 
+.m-3 {
+  margin: 0.75rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
+.m-14 {
+  margin: 3.5rem;
+}
+
+.m-16 {
+  margin: 4rem;
+}
+
 .-m-16 {
   margin: -4rem;
 }
@@ -1954,15 +2209,15 @@ video {
 }
 
 .mt-0 {
-  margin-top: 0;
+  margin-top: 0px;
 }
 
 .mr-0 {
-  margin-right: 0;
+  margin-right: 0px;
 }
 
 .mb-0 {
-  margin-bottom: 0;
+  margin-bottom: 0px;
 }
 
 .mt-1 {
@@ -2122,7 +2377,7 @@ video {
 }
 
 .last\:mr-0:last-child {
-  margin-right: 0;
+  margin-right: 0px;
 }
 
 .hover\:-mt-4:hover {
@@ -2133,6 +2388,18 @@ video {
   max-height: 860px;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -2174,7 +2441,7 @@ video {
 }
 
 .min-w-0 {
-  min-width: 0;
+  min-width: 0px;
 }
 
 .min-w-48 {
@@ -2223,11 +2490,13 @@ video {
 }
 
 .outline-none {
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .focus\:outline-none:focus {
-  outline: 0;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
 .overflow-auto {
@@ -2278,14 +2547,6 @@ video {
   overflow-y: scroll;
 }
 
-.scrolling-touch {
-  -webkit-overflow-scrolling: touch;
-}
-
-.scrolling-auto {
-  -webkit-overflow-scrolling: auto;
-}
-
 .overscroll-auto {
   overscroll-behavior: auto;
 }
@@ -2346,13 +2607,17 @@ video {
   padding: 2rem;
 }
 
+.p-14 {
+  padding: 3.5rem;
+}
+
 .p-16 {
   padding: 4rem;
 }
 
 .px-0 {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .py-1 {
@@ -2405,11 +2670,21 @@ video {
   padding-right: 1.5rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2435,12 +2710,17 @@ video {
   padding-bottom: 10rem;
 }
 
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
 .pt-0 {
-  padding-top: 0;
+  padding-top: 0px;
 }
 
 .pb-0 {
-  padding-bottom: 0;
+  padding-bottom: 0px;
 }
 
 .pt-1 {
@@ -2540,15 +2820,13 @@ video {
 }
 
 .placeholder-gray-400::-moz-placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+  --tw-placeholder-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-placeholder-opacity));
 }
 
 .placeholder-gray-400::placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+  --tw-placeholder-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-placeholder-opacity));
 }
 
 .pointer-events-none {
@@ -2576,24 +2854,23 @@ video {
 }
 
 .sticky {
-  position: -webkit-sticky;
   position: sticky;
 }
 
 .top-0 {
-  top: 0;
+  top: 0px;
 }
 
 .right-0 {
-  right: 0;
+  right: 0px;
 }
 
 .bottom-0 {
-  bottom: 0;
+  bottom: 0px;
 }
 
 .left-0 {
-  left: 0;
+  left: 0px;
 }
 
 .top-auto {
@@ -2608,6 +2885,10 @@ video {
   left: auto;
 }
 
+.top-full {
+  top: 100%;
+}
+
 .-right-100 {
   right: -100%;
 }
@@ -2684,40 +2965,117 @@ video {
   resize: both;
 }
 
+* {
+  --tw-shadow: 0 0 #0000;
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-none {
-  box-shadow: none;
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+* {
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-black:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(199, 210, 254, var(--tw-ring-opacity));
+}
+
+.focus\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(113, 113, 122, var(--tw-ring-opacity));
 }
 
-.focus\:shadow-outline:focus {
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+.focus\:ring-opacity-50:focus {
+  --tw-ring-opacity: 0.5;
 }
 
 .fill-current {
@@ -2749,147 +3107,142 @@ video {
 }
 
 .text-black {
-  --text-opacity: 1;
-  color: #000;
-  color: rgba(0, 0, 0, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
 }
 
 .text-white {
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
-}
-
-.text-gray-200 {
-  --text-opacity: 1;
-  color: #edf2f7;
-  color: rgba(237, 242, 247, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.text-gray-300 {
-  --text-opacity: 1;
-  color: #e2e8f0;
-  color: rgba(226, 232, 240, var(--text-opacity));
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgba(244, 114, 182, var(--tw-text-opacity));
 }
 
-.text-gray-400 {
-  --text-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--text-opacity));
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgba(79, 70, 229, var(--tw-text-opacity));
 }
 
-.text-gray-500 {
-  --text-opacity: 1;
-  color: #a0aec0;
-  color: rgba(160, 174, 192, var(--text-opacity));
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgba(96, 165, 250, var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --text-opacity: 1;
-  color: #718096;
-  color: rgba(113, 128, 150, var(--text-opacity));
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgba(37, 99, 235, var(--tw-text-opacity));
 }
 
-.text-gray-700 {
-  --text-opacity: 1;
-  color: #4a5568;
-  color: rgba(74, 85, 104, var(--text-opacity));
+.text-teal-500 {
+  --tw-text-opacity: 1;
+  color: rgba(20, 184, 166, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --text-opacity: 1;
-  color: #2d3748;
-  color: rgba(45, 55, 72, var(--text-opacity));
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgba(34, 197, 94, var(--tw-text-opacity));
 }
 
-.text-gray-900 {
-  --text-opacity: 1;
-  color: #1a202c;
-  color: rgba(26, 32, 44, var(--text-opacity));
+.text-orange-500 {
+  --tw-text-opacity: 1;
+  color: rgba(249, 115, 22, var(--tw-text-opacity));
 }
 
 .text-red-300 {
-  --text-opacity: 1;
-  color: #feb2b2;
-  color: rgba(254, 178, 178, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(252, 165, 165, var(--tw-text-opacity));
 }
 
 .text-red-500 {
-  --text-opacity: 1;
-  color: #f56565;
-  color: rgba(245, 101, 101, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(239, 68, 68, var(--tw-text-opacity));
 }
 
 .text-red-600 {
-  --text-opacity: 1;
-  color: #e53e3e;
-  color: rgba(229, 62, 62, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
 
-.text-orange-500 {
-  --text-opacity: 1;
-  color: #ed8936;
-  color: rgba(237, 137, 54, var(--text-opacity));
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgba(228, 228, 231, var(--tw-text-opacity));
 }
 
-.text-green-500 {
-  --text-opacity: 1;
-  color: #48bb78;
-  color: rgba(72, 187, 120, var(--text-opacity));
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgba(212, 212, 216, var(--tw-text-opacity));
 }
 
-.text-teal-500 {
-  --text-opacity: 1;
-  color: #38b2ac;
-  color: rgba(56, 178, 172, var(--text-opacity));
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
-.text-blue-400 {
-  --text-opacity: 1;
-  color: #63b3ed;
-  color: rgba(99, 179, 237, var(--text-opacity));
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(113, 113, 122, var(--tw-text-opacity));
 }
 
-.text-blue-600 {
-  --text-opacity: 1;
-  color: #3182ce;
-  color: rgba(49, 130, 206, var(--text-opacity));
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgba(82, 82, 91, var(--tw-text-opacity));
 }
 
-.text-pink-400 {
-  --text-opacity: 1;
-  color: #f687b3;
-  color: rgba(246, 135, 179, var(--text-opacity));
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgba(63, 63, 70, var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgba(39, 39, 42, var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
+}
+
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgba(185, 28, 28, var(--tw-text-opacity));
 }
 
 .hover\:text-gray-400:hover {
-  --text-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 
 .hover\:text-gray-600:hover {
-  --text-opacity: 1;
-  color: #718096;
-  color: rgba(113, 128, 150, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(82, 82, 91, var(--tw-text-opacity));
 }
 
 .hover\:text-gray-800:hover {
-  --text-opacity: 1;
-  color: #2d3748;
-  color: rgba(45, 55, 72, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(39, 39, 42, var(--tw-text-opacity));
 }
 
 .hover\:text-gray-900:hover {
-  --text-opacity: 1;
-  color: #1a202c;
-  color: rgba(26, 32, 44, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
 }
 
-.hover\:text-red-700:hover {
-  --text-opacity: 1;
-  color: #c53030;
-  color: rgba(197, 48, 48, var(--text-opacity));
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-clip {
+  text-overflow: clip;
 }
 
 .italic {
@@ -2939,12 +3292,12 @@ video {
 }
 
 .ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
-  --font-variant-numeric-ordinal: var(--tailwind-empty,/*!*/ /*!*/);
-  --font-variant-numeric-slashed-zero: var(--tailwind-empty,/*!*/ /*!*/);
-  --font-variant-numeric-figure: var(--tailwind-empty,/*!*/ /*!*/);
-  --font-variant-numeric-spacing: var(--tailwind-empty,/*!*/ /*!*/);
-  --font-variant-numeric-fraction: var(--tailwind-empty,/*!*/ /*!*/);
-  font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction);
+  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
+  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
 .normal-nums {
@@ -2952,35 +3305,35 @@ video {
 }
 
 .ordinal {
-  --font-variant-numeric-ordinal: ordinal;
+  --tw-ordinal: ordinal;
 }
 
 .slashed-zero {
-  --font-variant-numeric-slashed-zero: slashed-zero;
+  --tw-slashed-zero: slashed-zero;
 }
 
 .lining-nums {
-  --font-variant-numeric-figure: lining-nums;
+  --tw-numeric-figure: lining-nums;
 }
 
 .oldstyle-nums {
-  --font-variant-numeric-figure: oldstyle-nums;
+  --tw-numeric-figure: oldstyle-nums;
 }
 
 .proportional-nums {
-  --font-variant-numeric-spacing: proportional-nums;
+  --tw-numeric-spacing: proportional-nums;
 }
 
 .tabular-nums {
-  --font-variant-numeric-spacing: tabular-nums;
+  --tw-numeric-spacing: tabular-nums;
 }
 
 .diagonal-fractions {
-  --font-variant-numeric-fraction: diagonal-fractions;
+  --tw-numeric-fraction: diagonal-fractions;
 }
 
 .stacked-fractions {
-  --font-variant-numeric-fraction: stacked-fractions;
+  --tw-numeric-fraction: stacked-fractions;
 }
 
 .tracking-wide {
@@ -3047,7 +3400,7 @@ video {
   white-space: normal;
 }
 
-.whitespace-no-wrap {
+.whitespace-nowrap {
   white-space: nowrap;
 }
 
@@ -3076,12 +3429,6 @@ video {
   word-break: break-all;
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -3142,6 +3489,10 @@ video {
   z-index: 50;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
@@ -3158,15 +3509,34 @@ video {
   grid-auto-flow: column dense;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .transform {
-  --transform-translate-x: 0;
-  --transform-translate-y: 0;
-  --transform-rotate: 0;
-  --transform-skew-x: 0;
-  --transform-skew-y: 0;
-  --transform-scale-x: 1;
-  --transform-scale-y: 1;
-  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform-gpu {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform-none {
@@ -3174,19 +3544,23 @@ video {
 }
 
 .rotate-90 {
-  --transform-rotate: 90deg;
+  --tw-rotate: 90deg;
 }
 
 .rotate-180 {
-  --transform-rotate: 180deg;
+  --tw-rotate: 180deg;
 }
 
 .transition-all {
   transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 .ease-linear {
@@ -3285,7 +3659,7 @@ video {
   }
 
   .sm\:mt-0 {
-    margin-top: 0;
+    margin-top: 0px;
   }
 
   .sm\:ml-1 {
@@ -3297,7 +3671,7 @@ video {
   }
 
   .sm\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .sm\:w-6\/12 {
@@ -3326,7 +3700,7 @@ video {
     flex-direction: column;
   }
 
-  .md\:flex-no-wrap {
+  .md\:flex-nowrap {
     flex-wrap: nowrap;
   }
 
@@ -3347,7 +3721,7 @@ video {
   }
 
   .md\:mt-0 {
-    margin-top: 0;
+    margin-top: 0px;
   }
 
   .md\:mt-4 {
@@ -3370,6 +3744,10 @@ video {
     margin-left: 16rem;
   }
 
+  .md\:max-w-4xl {
+    max-width: 56rem;
+  }
+
   .md\:min-h-full {
     min-height: 100%;
   }
@@ -3401,7 +3779,7 @@ video {
   }
 
   .md\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .md\:pb-2 {
@@ -3425,19 +3803,20 @@ video {
   }
 
   .md\:top-0 {
-    top: 0;
+    top: 0px;
   }
 
   .md\:bottom-0 {
-    bottom: 0;
+    bottom: 0px;
   }
 
   .md\:left-0 {
-    left: 0;
+    left: 0px;
   }
 
   .md\:shadow-none {
-    box-shadow: none;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   .md\:text-left {
@@ -3463,13 +3842,13 @@ video {
   .md\:w-8\/12 {
     width: 66.666667%;
   }
-}
 
-@media (min-width: 1024px) {
-  .lg\:bg-transparent {
-    background-color: transparent;
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
+@media (min-width: 1024px) {
   .lg\:block {
     display: block;
   }
@@ -3511,7 +3890,7 @@ video {
   }
 
   .lg\:mb-0 {
-    margin-bottom: 0;
+    margin-bottom: 0px;
   }
 
   .lg\:mr-1 {
@@ -3553,7 +3932,7 @@ video {
   }
 
   .lg\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .lg\:pt-4 {
@@ -3577,7 +3956,8 @@ video {
   }
 
   .lg\:shadow-none {
-    box-shadow: none;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   .lg\:text-left {
@@ -3589,21 +3969,18 @@ video {
   }
 
   .lg\:text-white {
-    --text-opacity: 1;
-    color: #fff;
-    color: rgba(255, 255, 255, var(--text-opacity));
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
   }
 
   .lg\:text-gray-300 {
-    --text-opacity: 1;
-    color: #e2e8f0;
-    color: rgba(226, 232, 240, var(--text-opacity));
+    --tw-text-opacity: 1;
+    color: rgba(212, 212, 216, var(--tw-text-opacity));
   }
 
   .lg\:hover\:text-gray-300:hover {
-    --text-opacity: 1;
-    color: #e2e8f0;
-    color: rgba(226, 232, 240, var(--text-opacity));
+    --tw-text-opacity: 1;
+    color: rgba(212, 212, 216, var(--tw-text-opacity));
   }
 
   .lg\:w-auto {
@@ -3633,7 +4010,7 @@ video {
 
 @media (min-width: 1280px) {
   .xl\:mb-0 {
-    margin-bottom: 0;
+    margin-bottom: 0px;
   }
 
   .xl\:w-3\/12 {
@@ -3652,3 +4029,6 @@ video {
     width: 66.666667%;
   }
 }
+
+@media (min-width: 1536px) {
+}

From eebcb42b8219ef87cd889ffb04b6207cca1fba85 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 14:47:19 +0200
Subject: [PATCH 033/171] refactor: update v1 classes to v2

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 2b3282f8..dd4db8a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
       "./*.ts",
     ],
     options: {
-      whitelist: [],
+      safelist: [],
     },
   },
   theme: {

From 9f4a00e9ca6a78407bba62e339e5d203f71c7352 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:04:07 +0200
Subject: [PATCH 034/171] docs: add changes

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e57faee..b6f56088 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,8 @@
 ## [1.1.0] date
 ### Bug fixing
 - Rename `master` branch to `main`
+- To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`)
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-coolGray-{number}`
 ### Major style changes
 
 ### Deleted components

From 3db63854d5f6f838fb05344ea77aa71af1d77055 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:30 +0200
Subject: [PATCH 035/171] refactor: change gray to coolGray

---
 .../cards/card-bar-chart/card-bar-chart.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
index 0d16b3cf..e9b7c20b 100644
--- a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
+++ b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
@@ -4,10 +4,10 @@
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-gray-500 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-coolGray-500 mb-1 text-xs font-semibold">
           Performance
         </h6>
-        <h2 class="text-gray-800 text-xl font-semibold">
+        <h2 class="text-coolGray-800 text-xl font-semibold">
           Total orders
         </h2>
       </div>

From b53c47703ebcf9d0cac2120b9171c8614d964b56 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:32 +0200
Subject: [PATCH 036/171] refactor: change gray to coolGray

---
 .../cards/card-line-chart/card-line-chart.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-line-chart/card-line-chart.component.html b/src/app/components/cards/card-line-chart/card-line-chart.component.html
index 23a8d4ed..3365811c 100644
--- a/src/app/components/cards/card-line-chart/card-line-chart.component.html
+++ b/src/app/components/cards/card-line-chart/card-line-chart.component.html
@@ -1,10 +1,10 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-gray-800"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-coolGray-800"
 >
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-gray-200 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-coolGray-200 mb-1 text-xs font-semibold">
           Overview
         </h6>
         <h2 class="text-white text-xl font-semibold">

From 2d1a56d5f05b7268172633f11aca83fcb42542d9 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:33 +0200
Subject: [PATCH 037/171] refactor: change gray to coolGray

---
 .../card-page-visits/card-page-visits.component.html   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index 7fc1523e..22257eb0 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-gray-800">
+        <h3 class="font-semibold text-base text-coolGray-800">
           Page visits
         </h3>
       </div>
@@ -24,22 +24,22 @@ <h3 class="font-semibold text-base text-gray-800">
       <thead>
         <tr>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Page name
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Unique users
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Bounce rate
           </th>

From 158cad0d17a3d3dda6da0b8ccdcbe3d575ca229c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:35 +0200
Subject: [PATCH 038/171] refactor: change gray to coolGray

---
 .../card-profile/card-profile.component.html  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/components/cards/card-profile/card-profile.component.html b/src/app/components/cards/card-profile/card-profile.component.html
index 8112d4eb..696e91f1 100644
--- a/src/app/components/cards/card-profile/card-profile.component.html
+++ b/src/app/components/cards/card-profile/card-profile.component.html
@@ -16,54 +16,54 @@
         <div class="flex justify-center py-4 lg:pt-4 pt-8">
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
             >
               22
             </span>
-            <span class="text-sm text-gray-500">Friends</span>
+            <span class="text-sm text-coolGray-500">Friends</span>
           </div>
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
             >
               10
             </span>
-            <span class="text-sm text-gray-500">Photos</span>
+            <span class="text-sm text-coolGray-500">Photos</span>
           </div>
           <div class="lg:mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
             >
               89
             </span>
-            <span class="text-sm text-gray-500">Comments</span>
+            <span class="text-sm text-coolGray-500">Comments</span>
           </div>
         </div>
       </div>
     </div>
     <div class="text-center mt-12">
-      <h3 class="text-xl font-semibold leading-normal mb-2 text-gray-800 mb-2">
+      <h3 class="text-xl font-semibold leading-normal mb-2 text-coolGray-800 mb-2">
         Jenna Stones
       </h3>
       <div
-        class="text-sm leading-normal mt-0 mb-2 text-gray-500 font-bold uppercase"
+        class="text-sm leading-normal mt-0 mb-2 text-coolGray-500 font-bold uppercase"
       >
-        <i class="fas fa-map-marker-alt mr-2 text-lg text-gray-500"></i>
+        <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-500"></i>
         Los Angeles, California
       </div>
-      <div class="mb-2 text-gray-700 mt-10">
-        <i class="fas fa-briefcase mr-2 text-lg text-gray-500"></i>
+      <div class="mb-2 text-coolGray-700 mt-10">
+        <i class="fas fa-briefcase mr-2 text-lg text-coolGray-500"></i>
         Solution Manager - Creative Tim Officer
       </div>
-      <div class="mb-2 text-gray-700">
-        <i class="fas fa-university mr-2 text-lg text-gray-500"></i>
+      <div class="mb-2 text-coolGray-700">
+        <i class="fas fa-university mr-2 text-lg text-coolGray-500"></i>
         University of Computer Science
       </div>
     </div>
-    <div class="mt-10 py-10 border-t border-gray-300 text-center">
+    <div class="mt-10 py-10 border-t border-coolGray-300 text-center">
       <div class="flex flex-wrap justify-center">
         <div class="w-full lg:w-9/12 px-4">
-          <p class="mb-4 text-lg leading-relaxed text-gray-800">
+          <p class="mb-4 text-lg leading-relaxed text-coolGray-800">
             An artist of considerable range, Jenna the name taken by
             Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and
             records all of his own music, giving it a warm, intimate feel with a

From abb42368c8dee23fb4dabae003995bd3cb9eda06 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:37 +0200
Subject: [PATCH 039/171] refactor: change gray to coolGray

---
 .../card-settings.component.html              | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/app/components/cards/card-settings/card-settings.component.html b/src/app/components/cards/card-settings/card-settings.component.html
index 3ab31e06..8a9699f3 100644
--- a/src/app/components/cards/card-settings/card-settings.component.html
+++ b/src/app/components/cards/card-settings/card-settings.component.html
@@ -1,9 +1,9 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-200 border-0"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
 >
   <div class="rounded-t bg-white mb-0 px-6 py-6">
     <div class="text-center flex justify-between">
-      <h6 class="text-gray-800 text-xl font-bold">My account</h6>
+      <h6 class="text-coolGray-800 text-xl font-bold">My account</h6>
       <button
         class="bg-red-600 text-white active:bg-red-700 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
         type="button"
@@ -14,21 +14,21 @@ <h6 class="text-gray-800 text-xl font-bold">My account</h6>
   </div>
   <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
     <form>
-      <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         User Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Username
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="lucky.jesse"
             />
           </div>
@@ -36,14 +36,14 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Email address
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="jesse@example.com"
             />
           </div>
@@ -51,14 +51,14 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               First Name
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Lucky"
             />
           </div>
@@ -66,37 +66,37 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Last Name
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Jesse"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-gray-400" />
+      <hr class="mt-6 border-b-1 border-coolGray-400" />
 
-      <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         Contact Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Address
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
             />
           </div>
@@ -104,14 +104,14 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               City
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="New York"
             />
           </div>
@@ -119,14 +119,14 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Country
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="United States"
             />
           </div>
@@ -134,37 +134,37 @@ <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Postal Code
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Postal Code"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-gray-400" />
+      <hr class="mt-6 border-b-1 border-coolGray-400" />
 
-      <h6 class="text-gray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         About Me
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-gray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               About me
             </label>
             <textarea
               type="text"
-              class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               rows="4"
             >
                   A beautiful UI Kit and Admin for Angular & Tailwind CSS. It is Free

From 8f3ed9a37dd24a709de1fed3b155a6db98a016cd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:39 +0200
Subject: [PATCH 040/171] refactor: change gray to coolGray

---
 .../card-social-traffic.component.html                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index 2c3bd9ec..f03dcc9a 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-gray-800">
+        <h3 class="font-semibold text-base text-coolGray-800">
           Social traffic
         </h3>
       </div>
@@ -24,17 +24,17 @@ <h3 class="font-semibold text-base text-gray-800">
       <thead class="thead-light">
         <tr>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Referral
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
+            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
           ></th>
         </tr>
       </thead>

From 1f3435a6f595195e220d3c176ea575ffe4c1a24e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:41 +0200
Subject: [PATCH 041/171] refactor: change gray to coolGray

---
 .../components/cards/card-stats/card-stats.component.html   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/cards/card-stats/card-stats.component.html b/src/app/components/cards/card-stats/card-stats.component.html
index 89e4150e..d5de14cc 100644
--- a/src/app/components/cards/card-stats/card-stats.component.html
+++ b/src/app/components/cards/card-stats/card-stats.component.html
@@ -4,10 +4,10 @@
   <div class="flex-auto p-4">
     <div class="flex flex-wrap">
       <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
-        <h5 class="text-gray-500 uppercase font-bold text-xs">
+        <h5 class="text-coolGray-500 uppercase font-bold text-xs">
           {{ statSubtitle }}
         </h5>
-        <span class="font-semibold text-xl text-gray-800">
+        <span class="font-semibold text-xl text-coolGray-800">
           {{ statTitle }}
         </span>
       </div>
@@ -20,7 +20,7 @@ <h5 class="text-gray-500 uppercase font-bold text-xs">
         </div>
       </div>
     </div>
-    <p class="text-sm text-gray-500 mt-4">
+    <p class="text-sm text-coolGray-500 mt-4">
       <span class="mr-2" [ngClass]="statPercentColor">
         <i
           [ngClass]="

From e076b9c1410426884acd790fdd132e214cca3476 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:43 +0200
Subject: [PATCH 042/171] refactor: change gray to coolGray

---
 .../card-table/card-table.component.html      | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index 79f7dc5f..5bdcb400 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -7,7 +7,7 @@
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
         <h3
           class="font-semibold text-lg"
-          [ngClass]="color === 'light' ? 'text-gray-800' : 'text-white'"
+          [ngClass]="color === 'light' ? 'text-coolGray-800' : 'text-white'"
         >
           Card Tables
         </h3>
@@ -23,7 +23,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -33,7 +33,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -43,7 +43,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -53,7 +53,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -63,7 +63,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -73,7 +73,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-gray-100 text-gray-600 border-gray-200'
+                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           ></th>
@@ -91,7 +91,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-gray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
             >
               Argon Design System
             </span>
@@ -113,22 +113,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
             </div>
           </td>
@@ -166,7 +166,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-gray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
             >
               Angular Now UI Kit PRO
             </span>
@@ -189,22 +189,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
             </div>
           </td>
@@ -242,7 +242,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-gray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
             >
               Black Dashboard Sketch
             </span>
@@ -264,22 +264,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
             </div>
           </td>
@@ -317,7 +317,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-gray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -339,22 +339,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
             </div>
           </td>
@@ -392,7 +392,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-gray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -415,22 +415,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-gray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
               />
             </div>
           </td>

From 58736e31ec8f9dff618b54497a704a4d15d206fe Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:44 +0200
Subject: [PATCH 043/171] refactor: change gray to coolGray

---
 .../index-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
index 2e3096ce..00513e6c 100644
--- a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
+++ b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="hover:text-gray-600 text-gray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+  class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Profile
   </a>

From 51342e59d8983637fcf852da256eede2c1ed741e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:46 +0200
Subject: [PATCH 044/171] refactor: change gray to coolGray

---
 .../notification-dropdown/notification-dropdown.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
index 9daa146a..65e30d65 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-gray-600 block py-1 px-3"
+  class="text-coolGray-600 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef

From ebd1f7fd9ca2cc5e04df7d8bd327f3418d726abd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:48 +0200
Subject: [PATCH 045/171] refactor: change gray to coolGray

---
 .../notification-dropdown.component.ts                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
index 802a6748..66252d75 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
@@ -11,17 +11,17 @@ export class NotificationDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-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-nowrap bg-transparent  text-gray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Seprated link
   </a>
 </div>`;

From dfa5a56b6c8ecf3cc6d2deed67cce030e7b6cb0e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:50 +0200
Subject: [PATCH 046/171] refactor: change gray to coolGray

---
 .../pages-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
index 67c05d97..ff3daf8e 100644
--- a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
+++ b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+  class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-gray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-gray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
   >
     Profile
   </a>

From 9714ff1e938a9d92033eb2b0429aaec56277fa50 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:52 +0200
Subject: [PATCH 047/171] refactor: change gray to coolGray

---
 .../dropdowns/table-dropdown/table-dropdown.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
index 137f1825..3a8b0b47 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-gray-600 block py-1 px-3"
+  class="text-coolGray-600 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef

From e02bfe215fe608121d6dbd73f15e3c3173d7f7d5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:53 +0200
Subject: [PATCH 048/171] refactor: change gray to coolGray

---
 .../table-dropdown/table-dropdown.component.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
index 230c1f4a..257ca341 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
@@ -12,17 +12,17 @@ export class TableDropdownComponent implements OnInit {
   ngOnInit() {
     this.popper.style.zIndex = "1";
     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-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-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-nowrap bg-transparent  text-gray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Seprated link
   </a>
 </div>`;

From 0d0202832442d16ffa8d3a70519c3187c64aaadf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:55 +0200
Subject: [PATCH 049/171] refactor: change gray to coolGray

---
 .../dropdowns/user-dropdown/user-dropdown.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
index 3c13bdc7..235370dd 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
@@ -1,12 +1,12 @@
 <a
-  class="text-gray-600 block"
+  class="text-coolGray-600 block"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
 >
   <div class="items-center flex">
     <span
-      class="w-12 h-12 text-sm text-white bg-gray-300 inline-flex items-center justify-center rounded-full"
+      class="w-12 h-12 text-sm text-white bg-coolGray-300 inline-flex items-center justify-center rounded-full"
     >
       <img
         alt="..."

From 9499fa292d6bf0ad691799fd73646d48e2022507 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:57 +0200
Subject: [PATCH 050/171] refactor: change gray to coolGray

---
 .../dropdowns/user-dropdown/user-dropdown.component.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
index 1c1cc749..ef1f4ed9 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
@@ -11,17 +11,17 @@ export class UserDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-gray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-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-nowrap bg-transparent  text-gray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
     Seprated link
   </a>
 </div>`;

From 69a2e27cf00d40153e35eaef6828f2ff81befdfe Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:05:59 +0200
Subject: [PATCH 051/171] refactor: change gray to coolGray

---
 .../footer-admin/footer-admin.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-admin/footer-admin.component.html b/src/app/components/footers/footer-admin/footer-admin.component.html
index 9843c8c8..26e0e97a 100644
--- a/src/app/components/footers/footer-admin/footer-admin.component.html
+++ b/src/app/components/footers/footer-admin/footer-admin.component.html
@@ -1,15 +1,15 @@
 <footer class="block py-4">
   <div class="container mx-auto px-4">
-    <hr class="mb-4 border-b-1 border-gray-300" />
+    <hr class="mb-4 border-b-1 border-coolGray-300" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
-          class="text-sm text-gray-600 font-semibold py-1 text-center md:text-left"
+          class="text-sm text-coolGray-600 font-semibold py-1 text-center md:text-left"
         >
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-admin"
-            class="text-gray-600 hover:text-gray-800 text-sm font-semibold py-1"
+            class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -20,7 +20,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-admin"
-              class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -28,7 +28,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-admin"
-              class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -36,7 +36,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-admin"
-              class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -44,7 +44,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From 16620b58c7409fd53384d632703f55d76ddcff3e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:01 +0200
Subject: [PATCH 052/171] refactor: change gray to coolGray

---
 .../footer-small/footer-small.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-small/footer-small.component.html b/src/app/components/footers/footer-small/footer-small.component.html
index 86caaa2e..a0217689 100644
--- a/src/app/components/footers/footer-small/footer-small.component.html
+++ b/src/app/components/footers/footer-small/footer-small.component.html
@@ -1,9 +1,9 @@
 <footer
   class="pb-6"
-  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-gray-900' : 'relative'"
+  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-coolGray-900' : 'relative'"
 >
   <div class="container mx-auto px-4">
-    <hr class="mb-6 border-b-1 border-gray-700" />
+    <hr class="mb-6 border-b-1 border-coolGray-700" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
@@ -12,7 +12,7 @@
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-small"
-            class="text-white hover:text-gray-400 text-sm font-semibold py-1"
+            class="text-white hover:text-coolGray-400 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -23,7 +23,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -31,7 +31,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-small"
-              class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -39,7 +39,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -47,7 +47,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From 639de55e4f77bba3e3ee5409a860647f3a92f5ac Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:02 +0200
Subject: [PATCH 053/171] refactor: change gray to coolGray

---
 .../footers/footer/footer.component.html      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index 5f192379..b66c98bf 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="relative bg-gray-300 pt-8 pb-6">
+<footer class="relative bg-coolGray-300 pt-8 pb-6">
   <div
     class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
     style="transform: translateZ(0);"
@@ -13,7 +13,7 @@
       y="0"
     >
       <polygon
-        class="text-gray-300 fill-current"
+        class="text-coolGray-300 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -22,7 +22,7 @@
     <div class="flex flex-wrap text-center lg:text-left">
       <div class="w-full lg:w-6/12 px-4">
         <h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
-        <h5 class="text-lg mt-0 mb-2 text-gray-700">
+        <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
           Find us on any of these platforms, we respond 1-2 business days.
         </h5>
         <div class="mt-6 lg:mb-0 mb-6">
@@ -45,7 +45,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
             <i class="fab fa-dribbble"></i>
           </button>
           <button
-            class="bg-white text-gray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-coolGray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
             <i class="fab fa-github"></i>
@@ -56,14 +56,14 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
         <div class="flex flex-wrap items-top mb-6">
           <div class="w-full lg:w-4/12 px-4 ml-auto">
             <span
-              class="block uppercase text-gray-600 text-sm font-semibold mb-2"
+              class="block uppercase text-coolGray-600 text-sm font-semibold mb-2"
             >
               Useful Links
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/presentation?ref=na-footer"
                 >
                   About Us
@@ -71,7 +71,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://blog.creative-tim.com?ref=na-footer"
                 >
                   Blog
@@ -79,7 +79,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://www.github.com/creativetimofficial?ref=na-footer"
                 >
                   Github
@@ -87,7 +87,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/bootstrap-themes/free?ref=na-footer"
                 >
                   Free Products
@@ -97,14 +97,14 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
           </div>
           <div class="w-full lg:w-4/12 px-4">
             <span
-              class="block uppercase text-gray-600 text-sm font-semibold mb-2"
+              class="block uppercase text-coolGray-600 text-sm font-semibold mb-2"
             >
               Other Resources
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
                 >
                   MIT License
@@ -112,7 +112,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/terms?ref=na-footer"
                 >
                   Terms & Conditions
@@ -120,7 +120,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/privacy?ref=na-footer"
                 >
                   Privacy Policy
@@ -128,7 +128,7 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
               </li>
               <li>
                 <a
-                  class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/contact-us?ref=na-footer"
                 >
                   Contact Us
@@ -139,14 +139,14 @@ <h5 class="text-lg mt-0 mb-2 text-gray-700">
         </div>
       </div>
     </div>
-    <hr class="my-6 border-gray-400" />
+    <hr class="my-6 border-coolGray-400" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4 mx-auto text-center">
-        <div class="text-sm text-gray-600 font-semibold py-1">
+        <div class="text-sm text-coolGray-600 font-semibold py-1">
           Copyright © {{ date }} Notus Angular by
           <a
             href="https://www.creative-tim.com?ref=na-footer"
-            class="text-gray-600 hover:text-gray-900"
+            class="text-coolGray-600 hover:text-coolGray-900"
           >
             Creative Tim
           </a>

From 6404824591ead43c7aab50f05c26d44d1d410c29 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:04 +0200
Subject: [PATCH 054/171] refactor: change gray to coolGray

---
 .../navbars/admin-navbar/admin-navbar.component.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/navbars/admin-navbar/admin-navbar.component.html b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
index cf8d7b4a..840568d9 100644
--- a/src/app/components/navbars/admin-navbar/admin-navbar.component.html
+++ b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
@@ -17,13 +17,13 @@
     >
       <div class="relative flex w-full flex-wrap items-stretch">
         <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"
+          class="z-10 h-full leading-snug font-normal absolute text-center text-coolGray-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="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:ring w-full pl-10"
+          class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
         />
       </div>
     </form>

From 849b3705677b1ecb4d5a5e466594539ce28b54ad Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:06 +0200
Subject: [PATCH 055/171] refactor: change gray to coolGray

---
 .../auth-navbar/auth-navbar.component.html     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navbars/auth-navbar/auth-navbar.component.html b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
index 0657b4bc..f1baad3f 100644
--- a/src/app/components/navbars/auth-navbar/auth-navbar.component.html
+++ b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
@@ -29,11 +29,11 @@
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-auth-navbar"
           >
             <i
-              class="lg:text-gray-300 text-gray-500 far fa-file-alt text-lg leading-lg mr-2"
+              class="lg:text-coolGray-300 text-coolGray-500 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -45,12 +45,12 @@
         </li>
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
             <i
-              class="lg:text-gray-300 text-gray-500 fab fa-facebook text-lg leading-lg"
+              class="lg:text-coolGray-300 text-coolGray-500 fab fa-facebook text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
@@ -58,12 +58,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
             <i
-              class="lg:text-gray-300 text-gray-500 fab fa-twitter text-lg leading-lg"
+              class="lg:text-coolGray-300 text-coolGray-500 fab fa-twitter text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
@@ -71,12 +71,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-gray-300 text-gray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-auth-navbar"
             target="_blank"
           >
             <i
-              class="lg:text-gray-300 text-gray-500 fab fa-github text-lg leading-lg"
+              class="lg:text-coolGray-300 text-coolGray-500 fab fa-github text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
@@ -84,7 +84,7 @@
 
         <li class="flex items-center">
           <button
-            class="bg-white text-gray-800 active:bg-gray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
+            class="bg-white text-coolGray-800 active:bg-coolGray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
             type="button"
           >
             <i class="fas fa-arrow-alt-circle-down"></i> Download

From de46d4e109164aad870ef7551571102cbb655f62 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:08 +0200
Subject: [PATCH 056/171] refactor: change gray to coolGray

---
 .../index-navbar/index-navbar.component.html   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navbars/index-navbar/index-navbar.component.html b/src/app/components/navbars/index-navbar/index-navbar.component.html
index 4635790a..405bef9a 100644
--- a/src/app/components/navbars/index-navbar/index-navbar.component.html
+++ b/src/app/components/navbars/index-navbar/index-navbar.component.html
@@ -9,7 +9,7 @@
     >
       <a
         [routerLink]="['/']"
-        class="text-gray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
+        class="text-coolGray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
         href="#pablo"
       >
         Notus Angular
@@ -30,11 +30,11 @@
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="hover:text-gray-600 text-gray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-index-navbar"
           >
             <i
-              class="text-gray-500 far fa-file-alt text-lg leading-lg mr-2"
+              class="text-coolGray-500 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -46,33 +46,33 @@
         </li>
         <li class="flex items-center">
           <a
-            class="hover:text-gray-600 text-gray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
-            <i class="text-gray-500 fab fa-facebook text-lg leading-lg"></i>
+            <i class="text-coolGray-500 fab fa-facebook text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-gray-600 text-gray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
-            <i class="text-gray-500 fab fa-twitter text-lg leading-lg"></i>
+            <i class="text-coolGray-500 fab fa-twitter text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-gray-600 text-gray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-index-navbar"
             target="_blank"
           >
-            <i class="text-gray-500 fab fa-github text-lg leading-lg"></i>
+            <i class="text-coolGray-500 fab fa-github text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
         </li>

From 7038ac536669dffbaaf1203fef1b518a7807205d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:10 +0200
Subject: [PATCH 057/171] refactor: change gray to coolGray

---
 .../components/sidebar/sidebar.component.html | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index ac87ccf7..4d0d9fb5 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -15,7 +15,7 @@
     <!-- Brand -->
     <a
       [routerLink]="['/']"
-      class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+      class="md:block text-left md:pb-2 text-coolGray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
     >
       <span class="block sm:hidden">
         Tailwind Angular
@@ -40,13 +40,13 @@
     >
       <!-- Collapse header -->
       <div
-        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-gray-300"
+        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-coolGray-300"
       >
         <div class="flex flex-wrap">
           <div class="w-6/12">
             <a
               [routerLink]="['/']"
-              class="md:block text-left md:pb-2 text-gray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+              class="md:block text-left md:pb-2 text-coolGray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
             >
               Notus Angular
             </a>
@@ -68,7 +68,7 @@
           <input
             type="text"
             placeholder="Search"
-            class="px-3 py-2 h-12 border border-solid border-gray-600 placeholder-gray-400 text-gray-700 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
+            class="px-3 py-2 h-12 border border-solid border-coolGray-600 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
           />
         </div>
       </form>
@@ -77,7 +77,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-gray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Admin Layout Pages
       </h6>
@@ -93,13 +93,13 @@
             [ngClass]="
               adminDashboard.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-gray-800 hover:text-gray-600'
+                : 'text-coolGray-800 hover:text-coolGray-600'
             "
           >
             <i
               class="fas fa-tv mr-2 text-sm"
               [ngClass]="
-                adminDashboard.isActive ? 'opacity-75' : 'text-gray-400'
+                adminDashboard.isActive ? 'opacity-75' : 'text-coolGray-400'
               "
             ></i>
             Dashboard
@@ -115,13 +115,13 @@
             [ngClass]="
               adminSettings.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-gray-800 hover:text-gray-600'
+                : 'text-coolGray-800 hover:text-coolGray-600'
             "
           >
             <i
               class="fas fa-tools mr-2 text-sm"
               [ngClass]="
-                adminSettings.isActive ? 'opacity-75' : 'text-gray-400'
+                adminSettings.isActive ? 'opacity-75' : 'text-coolGray-400'
               "
             ></i>
             Settings
@@ -137,12 +137,12 @@
             [ngClass]="
               adminTables.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-gray-800 hover:text-gray-600'
+                : 'text-coolGray-800 hover:text-coolGray-600'
             "
           >
             <i
               class="fas fa-table mr-2 text-sm"
-              [ngClass]="adminTables.isActive ? 'opacity-75' : 'text-gray-400'"
+              [ngClass]="adminTables.isActive ? 'opacity-75' : 'text-coolGray-400'"
             ></i>
             Tables
           </a>
@@ -157,12 +157,12 @@
             [ngClass]="
               adminMaps.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-gray-800 hover:text-gray-600'
+                : 'text-coolGray-800 hover:text-coolGray-600'
             "
           >
             <i
               class="fas fa-map-marked mr-2 text-sm"
-              [ngClass]="adminMaps.isActive ? 'opacity-75' : 'text-gray-400'"
+              [ngClass]="adminMaps.isActive ? 'opacity-75' : 'text-coolGray-400'"
             ></i>
             Maps
           </a>
@@ -173,7 +173,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-gray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Auth Layout Pages
       </h6>
@@ -183,9 +183,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/login']"
-            class="text-gray-800 hover:text-gray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-fingerprint text-gray-400 mr-2 text-sm"></i>
+            <i class="fas fa-fingerprint text-coolGray-400 mr-2 text-sm"></i>
             Login
           </a>
         </li>
@@ -193,9 +193,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/register']"
-            class="text-gray-800 hover:text-gray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-clipboard-list text-gray-400 mr-2 text-sm"></i>
+            <i class="fas fa-clipboard-list text-coolGray-400 mr-2 text-sm"></i>
             Register
           </a>
         </li>
@@ -205,7 +205,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-gray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         No Layout Pages
       </h6>
@@ -215,9 +215,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/landing']"
-            class="text-gray-800 hover:text-gray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-newspaper text-gray-400 mr-2 text-sm"></i>
+            <i class="fas fa-newspaper text-coolGray-400 mr-2 text-sm"></i>
             Landing Page
           </a>
         </li>
@@ -225,9 +225,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/profile']"
-            class="text-gray-800 hover:text-gray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-user-circle text-gray-400 mr-2 text-sm"></i>
+            <i class="fas fa-user-circle text-coolGray-400 mr-2 text-sm"></i>
             Profile Page
           </a>
         </li>
@@ -237,7 +237,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-gray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Documentation
       </h6>
@@ -247,9 +247,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/colors/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-paint-brush mr-2 text-gray-400 text-base"></i>
+            <i class="fas fa-paint-brush mr-2 text-coolGray-400 text-base"></i>
             Styles
           </a>
         </li>
@@ -258,9 +258,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-css3-alt mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-css3-alt mr-2 text-coolGray-400 text-base"></i>
             CSS Components
           </a>
         </li>
@@ -269,9 +269,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-angular mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-angular mr-2 text-coolGray-400 text-base"></i>
             Angular
           </a>
         </li>
@@ -280,9 +280,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-js-square mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-js-square mr-2 text-coolGray-400 text-base"></i>
             Javascript
           </a>
         </li>
@@ -291,9 +291,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-react mr-2 text-coolGray-400 text-base"></i>
             NextJS
           </a>
         </li>
@@ -302,9 +302,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-react mr-2 text-coolGray-400 text-base"></i>
             React
           </a>
         </li>
@@ -313,9 +313,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-link mr-2 text-gray-400 text-base"></i>
+            <i class="fas fa-link mr-2 text-coolGray-400 text-base"></i>
             Svelte
           </a>
         </li>
@@ -324,9 +324,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
             target="_blank"
-            class="text-gray-800 hover:text-gray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-vuejs mr-2 text-gray-400 text-base"></i>
+            <i class="fab fa-vuejs mr-2 text-coolGray-400 text-base"></i>
             VueJS
           </a>
         </li>

From 69ce8c01a376c8b0708185470f28f322501d581c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:12 +0200
Subject: [PATCH 058/171] refactor: change gray to coolGray

---
 src/app/layouts/admin/admin.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/admin/admin.component.html b/src/app/layouts/admin/admin.component.html
index 79053004..acb3c965 100644
--- a/src/app/layouts/admin/admin.component.html
+++ b/src/app/layouts/admin/admin.component.html
@@ -1,6 +1,6 @@
 <div>
   <app-sidebar></app-sidebar>
-  <div class="relative md:ml-64 bg-gray-200">
+  <div class="relative md:ml-64 bg-coolGray-200">
     <app-admin-navbar></app-admin-navbar>
     <app-header-stats></app-header-stats>
     <div class="px-4 md:px-10 mx-auto w-full -m-24">

From b702a9c9294fe681e188e236dbea9d4678dd7bed Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:13 +0200
Subject: [PATCH 059/171] refactor: change gray to coolGray

---
 src/app/layouts/auth/auth.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/auth/auth.component.html b/src/app/layouts/auth/auth.component.html
index 7e2df510..ab494936 100644
--- a/src/app/layouts/auth/auth.component.html
+++ b/src/app/layouts/auth/auth.component.html
@@ -3,7 +3,7 @@
   <main>
     <section class="relative w-full h-full py-40 min-h-screen">
       <div
-        class="absolute top-0 w-full h-full bg-gray-900 bg-no-repeat bg-full"
+        class="absolute top-0 w-full h-full bg-coolGray-900 bg-no-repeat bg-full"
         style="background-image: url('assets/img/register_bg_2.png');"
       ></div>
       <router-outlet></router-outlet>

From c95c30790bdd4f821a18addb1fc63f0794ff5889 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:15 +0200
Subject: [PATCH 060/171] refactor: change gray to coolGray

---
 src/app/views/auth/login/login.component.html | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/login/login.component.html b/src/app/views/auth/login/login.component.html
index 4aeab26f..e1a3c141 100644
--- a/src/app/views/auth/login/login.component.html
+++ b/src/app/views/auth/login/login.component.html
@@ -2,61 +2,61 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-4/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-gray-600 text-sm font-bold">
+            <h6 class="text-coolGray-600 text-sm font-bold">
               Sign in with
             </h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-gray-100 text-gray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-gray-100 text-gray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-gray-400" />
+          <hr class="mt-6 border-b-1 border-coolGray-400" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-gray-500 text-center mb-3 font-bold">
+          <div class="text-coolGray-500 text-center mb-3 font-bold">
             <small>Or sign in with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -65,9 +65,9 @@ <h6 class="text-gray-600 text-sm font-bold">
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox text-gray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                  class="form-checkbox text-coolGray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                 />
-                <span class="ml-2 text-sm font-semibold text-gray-700">
+                <span class="ml-2 text-sm font-semibold text-coolGray-700">
                   Remember me
                 </span>
               </label>
@@ -75,7 +75,7 @@ <h6 class="text-gray-600 text-sm font-bold">
 
             <div class="text-center mt-6">
               <button
-                class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Sign In
@@ -86,12 +86,12 @@ <h6 class="text-gray-600 text-sm font-bold">
       </div>
       <div class="flex flex-wrap mt-6 relative">
         <div class="w-1/2">
-          <a href="javascript:void(0)" class="text-gray-300">
+          <a href="javascript:void(0)" class="text-coolGray-300">
             <small>Forgot password?</small>
           </a>
         </div>
         <div class="w-1/2 text-right">
-          <a [routerLink]="['/auth/register']" class="text-gray-300">
+          <a [routerLink]="['/auth/register']" class="text-coolGray-300">
             <small>Create new account</small>
           </a>
         </div>

From abef3812bfdd8de5e419aeeeb1f4f32cffdb597b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:17 +0200
Subject: [PATCH 061/171] refactor: change gray to coolGray

---
 .../auth/register/register.component.html     | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/register/register.component.html b/src/app/views/auth/register/register.component.html
index dcc74a41..0b071bc8 100644
--- a/src/app/views/auth/register/register.component.html
+++ b/src/app/views/auth/register/register.component.html
@@ -2,75 +2,75 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-6/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-gray-600 text-sm font-bold">
+            <h6 class="text-coolGray-600 text-sm font-bold">
               Sign up with
             </h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-gray-100 text-gray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-gray-100 text-gray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-gray-400" />
+          <hr class="mt-6 border-b-1 border-coolGray-400" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-gray-500 text-center mb-3 font-bold">
+          <div class="text-coolGray-500 text-center mb-3 font-bold">
             <small>Or sign up with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Name
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Name"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -80,9 +80,9 @@ <h6 class="text-gray-600 text-sm font-bold">
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox text-gray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                  class="form-checkbox text-coolGray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                 />
-                <span class="ml-2 text-sm font-semibold text-gray-700">
+                <span class="ml-2 text-sm font-semibold text-coolGray-700">
                   I agree with the
                   <a href="javascript:void(0)" class="text-red-600">
                     Privacy Policy
@@ -93,7 +93,7 @@ <h6 class="text-gray-600 text-sm font-bold">
 
             <div class="text-center mt-6">
               <button
-                class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Create Account

From 841af326f1c32d6fce41b1fc0ed2d21c9d619e58 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:19 +0200
Subject: [PATCH 062/171] refactor: change gray to coolGray

---
 src/app/views/index/index.component.html | 118 +++++++++++------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index a149220f..0b31a617 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -3,15 +3,15 @@
   <div class="container mx-auto items-center flex flex-wrap">
     <div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
       <div class="pt-32 sm:pt-0">
-        <h2 class="font-semibold text-4xl text-gray-700">
+        <h2 class="font-semibold text-4xl text-coolGray-700">
           Notus Angular - A beautiful extension for Tailwind CSS.
         </h2>
-        <p class="mt-4 text-lg leading-relaxed text-gray-600">
+        <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
           Notus Angular is Free and Open Source. It does not change or add any
           CSS to the already one from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-gray-700"
+            class="text-coolGray-700"
             target="_blank"
           >
             Tailwind CSS
@@ -29,7 +29,7 @@ <h2 class="font-semibold text-4xl text-gray-700">
           </a>
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
-            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
             target="_blank"
           >
             Github Star
@@ -46,7 +46,7 @@ <h2 class="font-semibold text-4xl text-gray-700">
   />
 </section>
 
-<section class="mt-48 md:mt-40 pb-40 relative bg-gray-200">
+<section class="mt-48 md:mt-40 pb-40 relative bg-coolGray-200">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0);"
@@ -61,7 +61,7 @@ <h2 class="font-semibold text-4xl text-gray-700">
       y="0"
     >
       <polygon
-        class="text-gray-200 fill-current"
+        class="text-coolGray-200 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -109,14 +109,14 @@ <h4 class="text-xl font-bold text-white">
             <div class="relative flex flex-col mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-sitemap"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   CSS Components
                 </h6>
-                <p class="mb-4 text-gray-600">
+                <p class="mb-4 text-coolGray-600">
                   Notus Angular comes with a huge number of Fully Coded CSS
                   components.
                 </p>
@@ -125,14 +125,14 @@ <h6 class="text-xl mb-1 font-semibold">
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-drafting-compass"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   JavaScript Components
                 </h6>
-                <p class="mb-4 text-gray-600">
+                <p class="mb-4 text-coolGray-600">
                   We also feature many dynamic components for React, NextJS, Vue
                   and Angular.
                 </p>
@@ -143,12 +143,12 @@ <h6 class="text-xl mb-1 font-semibold">
             <div class="relative flex flex-col min-w-0 mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-newspaper"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">Pages</h6>
-                <p class="mb-4 text-gray-600">
+                <p class="mb-4 text-coolGray-600">
                   This extension also comes with 3 sample pages. They are fully
                   coded so you can start working instantly.
                 </p>
@@ -157,14 +157,14 @@ <h6 class="text-xl mb-1 font-semibold">Pages</h6>
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-file-alt"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   Documentation
                 </h6>
-                <p class="mb-4 text-gray-600">
+                <p class="mb-4 text-coolGray-600">
                   Built by developers for developers. You will love how easy is
                   to to work with Notus Angular.
                 </p>
@@ -180,56 +180,56 @@ <h6 class="text-xl mb-1 font-semibold">
     <div class="flex flex-wrap items-center">
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-sitemap text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           CSS Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
           Every element that you need in a product comes built in as a
           component. All components fit perfectly with each other and can have
           different colours.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Buttons
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Inputs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Labels
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Pagination
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Progressbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Typography
           </span>
@@ -237,7 +237,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-gray-800 hover:text-gray-600 ease-linear transition-all duration-150"
+          class="font-bold text-coolGray-800 hover:text-coolGray-600 ease-linear transition-all duration-150"
         >
           View All
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -321,7 +321,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
               target="_blank"
             >
               <div
-                class="bg-gray-800 shadow-lg rounded-lg text-center p-8 mt-8"
+                class="bg-coolGray-800 shadow-lg rounded-lg text-center p-8 mt-8"
               >
                 <img
                   alt="..."
@@ -388,59 +388,59 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
 
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-drafting-compass text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           Javascript Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
           In order to create a great User Experience some components require
           JavaScript. In this way you can manipulate the elements on the page
           and give more options to your users.
         </p>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
           We created a set of Components that are dynamic and come to help you.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Alerts
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Dropdowns
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Modals
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Popovers
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tabs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tooltips
           </span>
@@ -448,7 +448,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-gray-800 hover:text-gray-600 ease-linear transition-all duration-150"
+          class="font-bold text-coolGray-800 hover:text-coolGray-600 ease-linear transition-all duration-150"
         >
           View all
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -462,14 +462,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
       <div class="w-full md:w-5/12 ml-auto px-12 md:px-4">
         <div class="md:pr-12">
           <div
-            class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+            class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
             <i class="fas fa-file-alt text-xl"></i>
           </div>
           <h3 class="text-3xl font-semibold">
             Complex Documentation
           </h3>
-          <p class="mt-4 text-lg leading-relaxed text-gray-600">
+          <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
             This extension comes a lot of fully coded examples that help you get
             started faster. You can adjust the colors and also the programming
             language. You can change the text and images and you're good to go.
@@ -479,13 +479,13 @@ <h3 class="text-3xl font-semibold">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-gray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
                   >
                     <i class="fas fa-fingerprint"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-gray-600">
+                  <h4 class="text-coolGray-600">
                     Built by Developers for Developers
                   </h4>
                 </div>
@@ -495,13 +495,13 @@ <h4 class="text-gray-600">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-gray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
                   >
                     <i class="fab fa-html5"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-gray-600">
+                  <h4 class="text-coolGray-600">
                     Carefully crafted code for Components
                   </h4>
                 </div>
@@ -511,13 +511,13 @@ <h4 class="text-gray-600">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-600 bg-gray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
                   >
                     <i class="far fa-paper-plane"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-gray-600">
+                  <h4 class="text-coolGray-600">
                     Dynamic Javascript Components
                   </h4>
                 </div>
@@ -544,7 +544,7 @@ <h4 class="text-gray-600">
   <div class="justify-center text-center flex flex-wrap mt-24">
     <div class="w-full md:w-6/12 px-12 md:px-4">
       <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
-      <p class="text-lg leading-relaxed mt-4 mb-4 text-gray-600">
+      <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-600">
         Notus Angular is a completly new product built using our past experience
         in web templates. Take the examples we made for you and start playing
         with them.
@@ -553,7 +553,7 @@ <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
   </div>
 </section>
 
-<section class="block relative z-1 bg-gray-700">
+<section class="block relative z-1 bg-coolGray-700">
   <div class="container mx-auto">
     <div class="justify-center flex flex-wrap">
       <div class="w-full lg:w-12/12 px-4 -mt-24">
@@ -614,23 +614,23 @@ <h5 class="text-xl font-semibold pb-4 text-center">
   </div>
 </section>
 
-<section class="py-20 bg-gray-700 overflow-hidden">
+<section class="py-20 bg-coolGray-700 overflow-hidden">
   <div class="container mx-auto pb-64">
     <div class="flex flex-wrap justify-center">
       <div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64">
         <div
-          class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-code-branch text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           Open Source
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-500">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-500">
           Since
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-gray-400"
+            class="text-coolGray-400"
             target="_blank"
           >
             Tailwind CSS
@@ -639,13 +639,13 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           can give this version a try to feel the design and also test the
           quality of the code!
         </p>
-        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-500">
+        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-500">
           Get it free on Github and please help us spread the news with a Star!
         </p>
         <a
           href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
           target="_blank"
-          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
         >
           Github Star
         </a>
@@ -653,14 +653,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
 
       <div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
         <i
-          class="fab fa-github text-gray-800 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
+          class="fab fa-github text-coolGray-800 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
         ></i>
       </div>
     </div>
   </div>
 </section>
 
-<section class="pb-16 bg-gray-300 relative pt-32">
+<section class="pb-16 bg-coolGray-300 relative pt-32">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0);"
@@ -675,7 +675,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
       y="0"
     >
       <polygon
-        class="text-gray-300 fill-current"
+        class="text-coolGray-300 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -694,7 +694,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
         <h3 class="font-semibold text-3xl">
           Do you love this Starter Kit?
         </h3>
-        <p class="text-gray-600 text-lg leading-relaxed mt-4 mb-4">
+        <p class="text-coolGray-600 text-lg leading-relaxed mt-4 mb-4">
           Cause if you do, it can be yours now. Hit the buttons below to
           navigate to get the Free version for your next project. Build a new
           web app or give an old project a new look!
@@ -710,7 +710,7 @@ <h3 class="font-semibold text-3xl">
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
             target="_blank"
-            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-gray-800 active:bg-gray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
             <i class="fab fa-github text-lg mr-1"></i>
             <span>Help With a Star</span>

From 1e5dbf2cb4249617c684c95f8a2dbdf8b4fc8180 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:21 +0200
Subject: [PATCH 063/171] refactor: change gray to coolGray

---
 src/app/views/landing/landing.component.html | 80 ++++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index 46991237..fefb70f0 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -21,7 +21,7 @@
             <h1 class="text-white font-semibold text-5xl">
               Your story starts with us.
             </h1>
-            <p class="mt-4 text-lg text-gray-300">
+            <p class="mt-4 text-lg text-coolGray-300">
               This is a simple example of a Landing Page you can build using
               Notus Angular. It features multiple CSS components based on the
               Tailwind CSS design system.
@@ -44,14 +44,14 @@ <h1 class="text-white font-semibold text-5xl">
         y="0"
       >
         <polygon
-          class="text-gray-300 fill-current"
+          class="text-coolGray-300 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </div>
 
-  <section class="pb-20 bg-gray-300 -mt-24">
+  <section class="pb-20 bg-coolGray-300 -mt-24">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap">
         <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
@@ -65,7 +65,7 @@ <h1 class="text-white font-semibold text-5xl">
                 <i class="fas fa-award"></i>
               </div>
               <h6 class="text-xl font-semibold">Awarded Agency</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-4 text-coolGray-600">
                 Divide details about your product or agency work into parts. A
                 paragraph describing a feature will be enough.
               </p>
@@ -84,7 +84,7 @@ <h6 class="text-xl font-semibold">Awarded Agency</h6>
                 <i class="fas fa-retweet"></i>
               </div>
               <h6 class="text-xl font-semibold">Free Revisions</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-4 text-coolGray-600">
                 Keep you user engaged by providing meaningful information.
                 Remember that by this time, the user is curious.
               </p>
@@ -103,7 +103,7 @@ <h6 class="text-xl font-semibold">Free Revisions</h6>
                 <i class="fas fa-fingerprint"></i>
               </div>
               <h6 class="text-xl font-semibold">Verified Company</h6>
-              <p class="mt-2 mb-4 text-gray-600">
+              <p class="mt-2 mb-4 text-coolGray-600">
                 Write a few lines about each one. A paragraph describing a
                 feature will be enough. Keep you user engaged!
               </p>
@@ -115,23 +115,23 @@ <h6 class="text-xl font-semibold">Verified Company</h6>
       <div class="flex flex-wrap items-center mt-32">
         <div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
           <div
-            class="text-gray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-gray-100"
+            class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-coolGray-100"
           >
             <i class="fas fa-user-friends text-xl"></i>
           </div>
           <h3 class="text-3xl mb-2 font-semibold leading-normal">
             Working with us is a pleasure
           </h3>
-          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700">
+          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
             Don't let your uses guess by attaching tooltips and popoves to any
             element. Just make sure you enable them first via JavaScript.
           </p>
-          <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700">
+          <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-700">
             The kit comes with three pre-built pages to help you get started
             faster. You can change the text and images and you're good to go.
             Just make sure you enable them first via JavaScript.
           </p>
-          <a [routerLink]="['/']" class="font-bold text-gray-800 mt-8">
+          <a [routerLink]="['/']" class="font-bold text-coolGray-800 mt-8">
             Check Notus Angular!
           </a>
         </div>
@@ -210,7 +210,7 @@ <h4 class="text-xl font-bold text-white">
               <i class="fas fa-rocket text-xl"></i>
             </div>
             <h3 class="text-3xl font-semibold">A growing company</h3>
-            <p class="mt-4 text-lg leading-relaxed text-gray-600">
+            <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
               The extension comes with three pre-built pages to help you get
               started faster. You can change the text and images and you're good
               to go.
@@ -226,7 +226,7 @@ <h3 class="text-3xl font-semibold">A growing company</h3>
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-gray-600">
+                    <h4 class="text-coolGray-600">
                       Carefully crafted components
                     </h4>
                   </div>
@@ -242,7 +242,7 @@ <h4 class="text-gray-600">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-gray-600">
+                    <h4 class="text-coolGray-600">
                       Amazing page examples
                     </h4>
                   </div>
@@ -258,7 +258,7 @@ <h4 class="text-gray-600">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-gray-600">Dynamic components</h4>
+                    <h4 class="text-coolGray-600">Dynamic components</h4>
                   </div>
                 </div>
               </li>
@@ -274,7 +274,7 @@ <h4 class="text-gray-600">Dynamic components</h4>
       <div class="flex flex-wrap justify-center text-center mb-24">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold">Here are our heroes</h2>
-          <p class="text-lg leading-relaxed m-4 text-gray-600">
+          <p class="text-lg leading-relaxed m-4 text-coolGray-600">
             According to the National Oceanic and Atmospheric Administration,
             Ted, Scambos, NSIDClead scentist, puts the potentially record
             maximum.
@@ -291,7 +291,7 @@ <h2 class="text-4xl font-semibold">Here are our heroes</h2>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Ryan Tompson</h5>
-              <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
                 Web Developer
               </p>
               <div class="mt-6">
@@ -326,7 +326,7 @@ <h5 class="text-xl font-bold">Ryan Tompson</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Romina Hadid</h5>
-              <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
                 Marketing Specialist
               </p>
               <div class="mt-6">
@@ -355,7 +355,7 @@ <h5 class="text-xl font-bold">Romina Hadid</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Alexa Smith</h5>
-              <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
                 UI/UX Designer
               </p>
               <div class="mt-6">
@@ -372,7 +372,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-coolGray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -390,7 +390,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Jenna Kardi</h5>
-              <p class="mt-1 text-sm text-gray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
                 Founder and CEO
               </p>
               <div class="mt-6">
@@ -413,7 +413,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-gray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-coolGray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -426,7 +426,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
     </div>
   </section>
 
-  <section class="pb-20 relative block bg-gray-900">
+  <section class="pb-20 relative block bg-coolGray-900">
     <div
       class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
       style="transform: translateZ(0);"
@@ -441,7 +441,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
         y="0"
       >
         <polygon
-          class="text-gray-900 fill-current"
+          class="text-coolGray-900 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
@@ -453,7 +453,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
           <h2 class="text-4xl font-semibold text-white">
             Build something
           </h2>
-          <p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
+          <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-500">
             Put the potentially record low maximum sea ice extent tihs year down
             to low ice. According to the National Oceanic and Atmospheric
             Administration, Ted, Scambos.
@@ -463,42 +463,42 @@ <h2 class="text-4xl font-semibold text-white">
       <div class="flex flex-wrap mt-12 justify-center">
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-medal text-xl"></i>
           </div>
           <h6 class="text-xl mt-5 font-semibold text-white">
             Excelent Services
           </h6>
-          <p class="mt-2 mb-4 text-gray-500">
+          <p class="mt-2 mb-4 text-coolGray-500">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-poll text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">
             Grow your market
           </h5>
-          <p class="mt-2 mb-4 text-gray-500">
+          <p class="mt-2 mb-4 text-coolGray-500">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-gray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-lightbulb text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">
             Launch time
           </h5>
-          <p class="mt-2 mb-4 text-gray-500">
+          <p class="mt-2 mb-4 text-coolGray-500">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
@@ -506,51 +506,51 @@ <h5 class="text-xl mt-5 font-semibold text-white">
       </div>
     </div>
   </section>
-  <section class="relative block py-24 lg:pt-0 bg-gray-900">
+  <section class="relative block py-24 lg:pt-0 bg-coolGray-900">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
         <div class="w-full lg:w-6/12 px-4">
           <div
-            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300"
+            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300"
           >
             <div class="flex-auto p-5 lg:p-10">
               <h4 class="text-2xl font-semibold">
                 Want to work with us?
               </h4>
-              <p class="leading-relaxed mt-1 mb-4 text-gray-600">
+              <p class="leading-relaxed mt-1 mb-4 text-coolGray-600">
                 Complete this form and we will get back to you in 24 hours.
               </p>
               <div class="relative w-full mb-3 mt-8">
                 <label
-                  class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                   htmlFor="full-name"
                 >
                   Full Name
                 </label>
                 <input
                   type="text"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Full Name"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                   htmlFor="email"
                 >
                   Email
                 </label>
                 <input
                   type="email"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Email"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-gray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
                   htmlFor="message"
                 >
                   Message
@@ -558,13 +558,13 @@ <h4 class="text-2xl font-semibold">
                 <textarea
                   rows="4"
                   cols="80"
-                  class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
+                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
                   placeholder="Type a message..."
                 ></textarea>
               </div>
               <div class="text-center mt-6">
                 <button
-                  class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
                 >
                   Send Message

From f499db4f07515ac09cca559488f6406e2de81de2 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:22 +0200
Subject: [PATCH 064/171] refactor: change gray to coolGray

---
 src/app/views/profile/profile.component.html | 34 ++++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/views/profile/profile.component.html b/src/app/views/profile/profile.component.html
index c8d9b2b1..d7327668 100644
--- a/src/app/views/profile/profile.component.html
+++ b/src/app/views/profile/profile.component.html
@@ -26,13 +26,13 @@
         y="0"
       >
         <polygon
-          class="text-gray-300 fill-current"
+          class="text-coolGray-300 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </section>
-  <section class="relative py-16 bg-gray-300">
+  <section class="relative py-16 bg-coolGray-300">
     <div class="container mx-auto px-4">
       <div
         class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64"
@@ -64,56 +64,56 @@
               <div class="flex justify-center py-4 lg:pt-4 pt-8">
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
                   >
                     22
                   </span>
-                  <span class="text-sm text-gray-500">Friends</span>
+                  <span class="text-sm text-coolGray-500">Friends</span>
                 </div>
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
                   >
                     10
                   </span>
-                  <span class="text-sm text-gray-500">Photos</span>
+                  <span class="text-sm text-coolGray-500">Photos</span>
                 </div>
                 <div class="lg:mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-gray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
                   >
                     89
                   </span>
-                  <span class="text-sm text-gray-500">Comments</span>
+                  <span class="text-sm text-coolGray-500">Comments</span>
                 </div>
               </div>
             </div>
           </div>
           <div class="text-center mt-12">
             <h3
-              class="text-4xl font-semibold leading-normal mb-2 text-gray-800 mb-2"
+              class="text-4xl font-semibold leading-normal mb-2 text-coolGray-800 mb-2"
             >
               Jenna Stones
             </h3>
             <div
-              class="text-sm leading-normal mt-0 mb-2 text-gray-500 font-bold uppercase"
+              class="text-sm leading-normal mt-0 mb-2 text-coolGray-500 font-bold uppercase"
             >
-              <i class="fas fa-map-marker-alt mr-2 text-lg text-gray-500"></i>
+              <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-500"></i>
               Los Angeles, California
             </div>
-            <div class="mb-2 text-gray-700 mt-10">
-              <i class="fas fa-briefcase mr-2 text-lg text-gray-500"></i>
+            <div class="mb-2 text-coolGray-700 mt-10">
+              <i class="fas fa-briefcase mr-2 text-lg text-coolGray-500"></i>
               Solution Manager - Creative Tim Officer
             </div>
-            <div class="mb-2 text-gray-700">
-              <i class="fas fa-university mr-2 text-lg text-gray-500"></i>
+            <div class="mb-2 text-coolGray-700">
+              <i class="fas fa-university mr-2 text-lg text-coolGray-500"></i>
               University of Computer Science
             </div>
           </div>
-          <div class="mt-10 py-10 border-t border-gray-300 text-center">
+          <div class="mt-10 py-10 border-t border-coolGray-300 text-center">
             <div class="flex flex-wrap justify-center">
               <div class="w-full lg:w-9/12 px-4">
-                <p class="mb-4 text-lg leading-relaxed text-gray-800">
+                <p class="mb-4 text-lg leading-relaxed text-coolGray-800">
                   An artist of considerable range, Jenna the name taken by
                   Melbourne-raised, Brooklyn-based Nick Murphy writes, performs
                   and records all of his own music, giving it a warm, intimate

From 7c63d0ae688375b91b7c2add8cbe4d818945bdeb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:24 +0200
Subject: [PATCH 065/171] refactor: change gray to coolGray

---
 src/assets/styles/tailwind.css | 150 +++++++++++++++++++++------------
 1 file changed, 95 insertions(+), 55 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 639e0c4e..d600196d 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1352,24 +1352,34 @@ select {
   background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
+.bg-coolGray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgba(212, 212, 216, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
+.bg-coolGray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-coolGray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgba(39, 39, 42, var(--tw-bg-opacity));
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
+.bg-coolGray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgba(24, 24, 27, var(--tw-bg-opacity));
+  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+}
+
+.bg-coolGray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+
+.bg-coolGray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
 }
 
 .focus\:bg-white:focus {
@@ -1392,14 +1402,14 @@ select {
   background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-100:active {
+.active\:bg-coolGray-100:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-700:active {
+.active\:bg-coolGray-700:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
+  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
 }
 
 .bg-center {
@@ -1451,11 +1461,6 @@ select {
   border-color: rgba(185, 28, 28, var(--tw-border-opacity));
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgba(244, 244, 245, var(--tw-border-opacity));
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgba(228, 228, 231, var(--tw-border-opacity));
@@ -1466,19 +1471,34 @@ select {
   border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
-.border-gray-400 {
+.border-coolGray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
+}
+
+.border-coolGray-200 {
   --tw-border-opacity: 1;
-  border-color: rgba(161, 161, 170, var(--tw-border-opacity));
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
 }
 
-.border-gray-600 {
+.border-coolGray-300 {
   --tw-border-opacity: 1;
-  border-color: rgba(82, 82, 91, var(--tw-border-opacity));
+  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
 }
 
-.border-gray-700 {
+.border-coolGray-400 {
   --tw-border-opacity: 1;
-  border-color: rgba(63, 63, 70, var(--tw-border-opacity));
+  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+}
+
+.border-coolGray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
+}
+
+.border-coolGray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgba(55, 65, 81, var(--tw-border-opacity));
 }
 
 .focus\:border-black:focus {
@@ -2819,14 +2839,14 @@ select {
   padding-bottom: 16rem;
 }
 
-.placeholder-gray-400::-moz-placeholder {
+.placeholder-coolGray-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(161, 161, 170, var(--tw-placeholder-opacity));
+  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-400::placeholder {
+.placeholder-coolGray-400::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(161, 161, 170, var(--tw-placeholder-opacity));
+  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
 }
 
 .pointer-events-none {
@@ -3166,44 +3186,64 @@ select {
   color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
 
-.text-gray-200 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgba(228, 228, 231, var(--tw-text-opacity));
+  color: rgba(113, 113, 122, var(--tw-text-opacity));
 }
 
-.text-gray-300 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgba(212, 212, 216, var(--tw-text-opacity));
+  color: rgba(82, 82, 91, var(--tw-text-opacity));
 }
 
-.text-gray-400 {
+.text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgba(161, 161, 170, var(--tw-text-opacity));
+  color: rgba(63, 63, 70, var(--tw-text-opacity));
 }
 
-.text-gray-500 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgba(113, 113, 122, var(--tw-text-opacity));
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-coolGray-200 {
   --tw-text-opacity: 1;
-  color: rgba(82, 82, 91, var(--tw-text-opacity));
+  color: rgba(229, 231, 235, var(--tw-text-opacity));
 }
 
-.text-gray-700 {
+.text-coolGray-300 {
   --tw-text-opacity: 1;
-  color: rgba(63, 63, 70, var(--tw-text-opacity));
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
+.text-coolGray-400 {
   --tw-text-opacity: 1;
-  color: rgba(39, 39, 42, var(--tw-text-opacity));
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
 
-.text-gray-900 {
+.text-coolGray-500 {
   --tw-text-opacity: 1;
-  color: rgba(24, 24, 27, var(--tw-text-opacity));
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.text-coolGray-600 {
+  --tw-text-opacity: 1;
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
+}
+
+.text-coolGray-700 {
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
+}
+
+.text-coolGray-800 {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+
+.text-coolGray-900 {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
 }
 
 .hover\:text-red-700:hover {
@@ -3211,24 +3251,24 @@ select {
   color: rgba(185, 28, 28, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-400:hover {
+.hover\:text-coolGray-400:hover {
   --tw-text-opacity: 1;
-  color: rgba(161, 161, 170, var(--tw-text-opacity));
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-600:hover {
+.hover\:text-coolGray-600:hover {
   --tw-text-opacity: 1;
-  color: rgba(82, 82, 91, var(--tw-text-opacity));
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-800:hover {
+.hover\:text-coolGray-800:hover {
   --tw-text-opacity: 1;
-  color: rgba(39, 39, 42, var(--tw-text-opacity));
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-900:hover {
+.hover\:text-coolGray-900:hover {
   --tw-text-opacity: 1;
-  color: rgba(24, 24, 27, var(--tw-text-opacity));
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
 }
 
 .truncate {
@@ -3973,14 +4013,14 @@ select {
     color: rgba(255, 255, 255, var(--tw-text-opacity));
   }
 
-  .lg\:text-gray-300 {
+  .lg\:text-coolGray-300 {
     --tw-text-opacity: 1;
-    color: rgba(212, 212, 216, var(--tw-text-opacity));
+    color: rgba(209, 213, 219, var(--tw-text-opacity));
   }
 
-  .lg\:hover\:text-gray-300:hover {
+  .lg\:hover\:text-coolGray-300:hover {
     --tw-text-opacity: 1;
-    color: rgba(212, 212, 216, var(--tw-text-opacity));
+    color: rgba(209, 213, 219, var(--tw-text-opacity));
   }
 
   .lg\:w-auto {

From c3d26891d72ea4428206fc928a77624f673dd311 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 15:06:26 +0200
Subject: [PATCH 066/171] refactor: change gray to coolGray

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 9c03c894..35a05234 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
     <link rel="apple-touch-icon" sizes="76x76" href="./apple-icon.png" />
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
   </head>
-  <body class="text-gray-800 antialiased">
+  <body class="text-coolGray-800 antialiased">
     <app-root></app-root>
   </body>
 </html>

From b5a24920d0e3e69bbee70755e24e8c0ac0049d44 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:04:40 +0200
Subject: [PATCH 067/171] docs: add changes

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6f56088..767d3acc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@
 - Rename `master` branch to `main`
 - To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`)
   - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-coolGray-{number}`
+  - After that, we've changed `{type}-coolGray-{number}` to `{type}-coolGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`)
+    - You can achieve this, by search in your whole project for `coolGray-100` and replace it with `coolGray-50`
+    - Then, you search in your whole project for `coolGray-200` and replace it with `coolGray-100`
+    - Then, you search in your whole project for `coolGray-300` and replace it with `coolGray-200`
+    - Then, you search in your whole project for `coolGray-400` and replace it with `coolGray-300`
+    - Then, you search in your whole project for `coolGray-500` and replace it with `coolGray-400`
+    - Then, you search in your whole project for `coolGray-600` and replace it with `coolGray-500`
+    - Then, you search in your whole project for `coolGray-700` and replace it with `coolGray-600`
+    - Then, you search in your whole project for `coolGray-800` and replace it with `coolGray-700`
+    - Then, you search in your whole project for `coolGray-900` and replace it with `coolGray-800`
+- `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`
 ### Major style changes
 
 ### Deleted components

From 752849064d35c3aedd40dd52f691efe1e4ca0c06 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:33 +0200
Subject: [PATCH 068/171] refactor: change colors

---
 .../cards/card-bar-chart/card-bar-chart.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
index e9b7c20b..35750266 100644
--- a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
+++ b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
@@ -4,10 +4,10 @@
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-coolGray-500 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-coolGray-400 mb-1 text-xs font-semibold">
           Performance
         </h6>
-        <h2 class="text-coolGray-800 text-xl font-semibold">
+        <h2 class="text-coolGray-700 text-xl font-semibold">
           Total orders
         </h2>
       </div>

From 1f8291c2db83c9c1c0b254d092ecfafd39583875 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:35 +0200
Subject: [PATCH 069/171] refactor: change colors

---
 .../cards/card-line-chart/card-line-chart.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-line-chart/card-line-chart.component.html b/src/app/components/cards/card-line-chart/card-line-chart.component.html
index 3365811c..3818a03a 100644
--- a/src/app/components/cards/card-line-chart/card-line-chart.component.html
+++ b/src/app/components/cards/card-line-chart/card-line-chart.component.html
@@ -1,10 +1,10 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-coolGray-800"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-coolGray-700"
 >
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-coolGray-200 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-coolGray-100 mb-1 text-xs font-semibold">
           Overview
         </h6>
         <h2 class="text-white text-xl font-semibold">

From aa2cd33c9027aae2f4e41380264a9aa50ef0e2e7 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:37 +0200
Subject: [PATCH 070/171] refactor: change colors

---
 .../card-page-visits/card-page-visits.component.html   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index 22257eb0..2bac6f0b 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-coolGray-800">
+        <h3 class="font-semibold text-base text-coolGray-700">
           Page visits
         </h3>
       </div>
@@ -24,22 +24,22 @@ <h3 class="font-semibold text-base text-coolGray-800">
       <thead>
         <tr>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Page name
           </th>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Unique users
           </th>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Bounce rate
           </th>

From d9f57b34df4070816d67fc8e454bc33d1af75f1d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:39 +0200
Subject: [PATCH 071/171] refactor: change colors

---
 .../card-profile/card-profile.component.html  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/components/cards/card-profile/card-profile.component.html b/src/app/components/cards/card-profile/card-profile.component.html
index 696e91f1..d069a064 100644
--- a/src/app/components/cards/card-profile/card-profile.component.html
+++ b/src/app/components/cards/card-profile/card-profile.component.html
@@ -16,54 +16,54 @@
         <div class="flex justify-center py-4 lg:pt-4 pt-8">
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
             >
               22
             </span>
-            <span class="text-sm text-coolGray-500">Friends</span>
+            <span class="text-sm text-coolGray-400">Friends</span>
           </div>
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
             >
               10
             </span>
-            <span class="text-sm text-coolGray-500">Photos</span>
+            <span class="text-sm text-coolGray-400">Photos</span>
           </div>
           <div class="lg:mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
             >
               89
             </span>
-            <span class="text-sm text-coolGray-500">Comments</span>
+            <span class="text-sm text-coolGray-400">Comments</span>
           </div>
         </div>
       </div>
     </div>
     <div class="text-center mt-12">
-      <h3 class="text-xl font-semibold leading-normal mb-2 text-coolGray-800 mb-2">
+      <h3 class="text-xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2">
         Jenna Stones
       </h3>
       <div
-        class="text-sm leading-normal mt-0 mb-2 text-coolGray-500 font-bold uppercase"
+        class="text-sm leading-normal mt-0 mb-2 text-coolGray-400 font-bold uppercase"
       >
-        <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-500"></i>
+        <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"></i>
         Los Angeles, California
       </div>
-      <div class="mb-2 text-coolGray-700 mt-10">
-        <i class="fas fa-briefcase mr-2 text-lg text-coolGray-500"></i>
+      <div class="mb-2 text-coolGray-600 mt-10">
+        <i class="fas fa-briefcase mr-2 text-lg text-coolGray-400"></i>
         Solution Manager - Creative Tim Officer
       </div>
-      <div class="mb-2 text-coolGray-700">
-        <i class="fas fa-university mr-2 text-lg text-coolGray-500"></i>
+      <div class="mb-2 text-coolGray-600">
+        <i class="fas fa-university mr-2 text-lg text-coolGray-400"></i>
         University of Computer Science
       </div>
     </div>
-    <div class="mt-10 py-10 border-t border-coolGray-300 text-center">
+    <div class="mt-10 py-10 border-t border-coolGray-200 text-center">
       <div class="flex flex-wrap justify-center">
         <div class="w-full lg:w-9/12 px-4">
-          <p class="mb-4 text-lg leading-relaxed text-coolGray-800">
+          <p class="mb-4 text-lg leading-relaxed text-coolGray-700">
             An artist of considerable range, Jenna the name taken by
             Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and
             records all of his own music, giving it a warm, intimate feel with a

From 6403e11da3e6a9b6df5e0ae80cd5a510335d6aab Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:40 +0200
Subject: [PATCH 072/171] refactor: change colors

---
 .../card-settings.component.html              | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/app/components/cards/card-settings/card-settings.component.html b/src/app/components/cards/card-settings/card-settings.component.html
index 8a9699f3..9b290e52 100644
--- a/src/app/components/cards/card-settings/card-settings.component.html
+++ b/src/app/components/cards/card-settings/card-settings.component.html
@@ -1,9 +1,9 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-100 border-0"
 >
   <div class="rounded-t bg-white mb-0 px-6 py-6">
     <div class="text-center flex justify-between">
-      <h6 class="text-coolGray-800 text-xl font-bold">My account</h6>
+      <h6 class="text-coolGray-700 text-xl font-bold">My account</h6>
       <button
         class="bg-red-600 text-white active:bg-red-700 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
         type="button"
@@ -14,21 +14,21 @@ <h6 class="text-coolGray-800 text-xl font-bold">My account</h6>
   </div>
   <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
     <form>
-      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         User Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Username
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="lucky.jesse"
             />
           </div>
@@ -36,14 +36,14 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Email address
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="jesse@example.com"
             />
           </div>
@@ -51,14 +51,14 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               First Name
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Lucky"
             />
           </div>
@@ -66,37 +66,37 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Last Name
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Jesse"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-coolGray-400" />
+      <hr class="mt-6 border-b-1 border-coolGray-300" />
 
-      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         Contact Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Address
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
             />
           </div>
@@ -104,14 +104,14 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               City
             </label>
             <input
               type="email"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="New York"
             />
           </div>
@@ -119,14 +119,14 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Country
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="United States"
             />
           </div>
@@ -134,37 +134,37 @@ <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Postal Code
             </label>
             <input
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Postal Code"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-coolGray-400" />
+      <hr class="mt-6 border-b-1 border-coolGray-300" />
 
-      <h6 class="text-coolGray-500 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         About Me
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               About me
             </label>
             <textarea
               type="text"
-              class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               rows="4"
             >
                   A beautiful UI Kit and Admin for Angular & Tailwind CSS. It is Free

From 9b1c2de969064eff8f33c1a26189fbb3405ce1a6 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:42 +0200
Subject: [PATCH 073/171] refactor: change colors

---
 .../card-social-traffic.component.html                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index f03dcc9a..63c535ae 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-coolGray-800">
+        <h3 class="font-semibold text-base text-coolGray-700">
           Social traffic
         </h3>
       </div>
@@ -24,17 +24,17 @@ <h3 class="font-semibold text-base text-coolGray-800">
       <thead class="thead-light">
         <tr>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Referral
           </th>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-coolGray-100 text-coolGray-600 align-middle border border-solid border-coolGray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
+            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
           ></th>
         </tr>
       </thead>

From 30004a58ae8d5a8d70bb4b5315892031d87978ab Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:44 +0200
Subject: [PATCH 074/171] refactor: change colors

---
 .../components/cards/card-stats/card-stats.component.html   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/cards/card-stats/card-stats.component.html b/src/app/components/cards/card-stats/card-stats.component.html
index d5de14cc..5b22dbdb 100644
--- a/src/app/components/cards/card-stats/card-stats.component.html
+++ b/src/app/components/cards/card-stats/card-stats.component.html
@@ -4,10 +4,10 @@
   <div class="flex-auto p-4">
     <div class="flex flex-wrap">
       <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
-        <h5 class="text-coolGray-500 uppercase font-bold text-xs">
+        <h5 class="text-coolGray-400 uppercase font-bold text-xs">
           {{ statSubtitle }}
         </h5>
-        <span class="font-semibold text-xl text-coolGray-800">
+        <span class="font-semibold text-xl text-coolGray-700">
           {{ statTitle }}
         </span>
       </div>
@@ -20,7 +20,7 @@ <h5 class="text-coolGray-500 uppercase font-bold text-xs">
         </div>
       </div>
     </div>
-    <p class="text-sm text-coolGray-500 mt-4">
+    <p class="text-sm text-coolGray-400 mt-4">
       <span class="mr-2" [ngClass]="statPercentColor">
         <i
           [ngClass]="

From 98484d0b0ecd0a4d8cef4cf9fe0b21ea5f93fff2 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:46 +0200
Subject: [PATCH 075/171] refactor: change colors

---
 .../card-table/card-table.component.html      | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index 5bdcb400..b0be55d5 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -7,7 +7,7 @@
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
         <h3
           class="font-semibold text-lg"
-          [ngClass]="color === 'light' ? 'text-coolGray-800' : 'text-white'"
+          [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
         >
           Card Tables
         </h3>
@@ -23,7 +23,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -33,7 +33,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -43,7 +43,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -53,7 +53,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -63,7 +63,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -73,7 +73,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-100 text-coolGray-600 border-coolGray-200'
+                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           ></th>
@@ -91,7 +91,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
             >
               Argon Design System
             </span>
@@ -113,22 +113,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -166,7 +166,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
             >
               Angular Now UI Kit PRO
             </span>
@@ -189,22 +189,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -242,7 +242,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
             >
               Black Dashboard Sketch
             </span>
@@ -264,22 +264,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -317,7 +317,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -339,22 +339,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -392,7 +392,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -415,22 +415,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-100 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
               />
             </div>
           </td>

From 68d69297c2fa13e9fac6d245114b86f093e42abb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:48 +0200
Subject: [PATCH 076/171] refactor: change colors

---
 .../index-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
index 00513e6c..d3355b5f 100644
--- a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
+++ b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+  class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Profile
   </a>

From 2ada598eb5c9c0f1ceb8fcce7f69d7d6822b2d94 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:50 +0200
Subject: [PATCH 077/171] refactor: change colors

---
 .../notification-dropdown/notification-dropdown.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
index 65e30d65..1092344e 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-coolGray-600 block py-1 px-3"
+  class="text-coolGray-500 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef

From 66801bcc3a118c2779156f9d24542f3238894ced Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:51 +0200
Subject: [PATCH 078/171] refactor: change colors

---
 .../notification-dropdown.component.ts                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
index 66252d75..05090073 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
@@ -11,17 +11,17 @@ export class NotificationDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Something else here
   </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Seprated link
   </a>
 </div>`;

From ae882a27f8deddd62560bd34f5927facea2ef3a2 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:53 +0200
Subject: [PATCH 079/171] refactor: change colors

---
 .../pages-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
index ff3daf8e..28d70520 100644
--- a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
+++ b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+  class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-200"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-500"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Lading
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-800"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
     Profile
   </a>

From 6fcde183976543312b2d7b63d14e9d2bad9fd802 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:55 +0200
Subject: [PATCH 080/171] refactor: change colors

---
 .../dropdowns/table-dropdown/table-dropdown.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
index 3a8b0b47..96662ac2 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-coolGray-600 block py-1 px-3"
+  class="text-coolGray-500 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef

From e31d27d2e2c7425b6e2de0ceb72a77e5bc600be0 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:57 +0200
Subject: [PATCH 081/171] refactor: change colors

---
 .../table-dropdown/table-dropdown.component.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
index 257ca341..c17879dc 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
@@ -12,17 +12,17 @@ export class TableDropdownComponent implements OnInit {
   ngOnInit() {
     this.popper.style.zIndex = "1";
     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-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Something else here
   </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Seprated link
   </a>
 </div>`;

From 6cbfdcb48f786268d1edf85eac210f465b5f15d0 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:05:59 +0200
Subject: [PATCH 082/171] refactor: change colors

---
 .../dropdowns/user-dropdown/user-dropdown.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
index 235370dd..aaf512ca 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
@@ -1,12 +1,12 @@
 <a
-  class="text-coolGray-600 block"
+  class="text-coolGray-500 block"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
 >
   <div class="items-center flex">
     <span
-      class="w-12 h-12 text-sm text-white bg-coolGray-300 inline-flex items-center justify-center rounded-full"
+      class="w-12 h-12 text-sm text-white bg-coolGray-200 inline-flex items-center justify-center rounded-full"
     >
       <img
         alt="..."

From 1dc35132f51594afc8b8e9aa1fc5938b4509bf5d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:00 +0200
Subject: [PATCH 083/171] refactor: change colors

---
 .../dropdowns/user-dropdown/user-dropdown.component.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
index ef1f4ed9..8f7aa4e7 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
@@ -11,17 +11,17 @@ export class UserDropdownComponent implements OnInit {
   popper = document.createElement("div");
   ngOnInit() {
     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-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Another action
   </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Something else here
   </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-200"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-800">
+  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
     Seprated link
   </a>
 </div>`;

From e9c9f4a498df782f39f5f77c683789a87666e188 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:02 +0200
Subject: [PATCH 084/171] refactor: change colors

---
 .../footer-admin/footer-admin.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-admin/footer-admin.component.html b/src/app/components/footers/footer-admin/footer-admin.component.html
index 26e0e97a..e628d567 100644
--- a/src/app/components/footers/footer-admin/footer-admin.component.html
+++ b/src/app/components/footers/footer-admin/footer-admin.component.html
@@ -1,15 +1,15 @@
 <footer class="block py-4">
   <div class="container mx-auto px-4">
-    <hr class="mb-4 border-b-1 border-coolGray-300" />
+    <hr class="mb-4 border-b-1 border-coolGray-200" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
-          class="text-sm text-coolGray-600 font-semibold py-1 text-center md:text-left"
+          class="text-sm text-coolGray-500 font-semibold py-1 text-center md:text-left"
         >
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-admin"
-            class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold py-1"
+            class="text-coolGray-500 hover:text-coolGray-700 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -20,7 +20,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-admin"
-              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -28,7 +28,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-admin"
-              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -36,7 +36,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-admin"
-              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -44,7 +44,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-coolGray-700 hover:text-coolGray-900 text-sm font-semibold block py-1 px-3"
+              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From 9ee89df227ee94a8be36d8f51b51843edd0b0dce Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:04 +0200
Subject: [PATCH 085/171] refactor: change colors

---
 .../footer-small/footer-small.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-small/footer-small.component.html b/src/app/components/footers/footer-small/footer-small.component.html
index a0217689..70328ed6 100644
--- a/src/app/components/footers/footer-small/footer-small.component.html
+++ b/src/app/components/footers/footer-small/footer-small.component.html
@@ -1,9 +1,9 @@
 <footer
   class="pb-6"
-  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-coolGray-900' : 'relative'"
+  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-coolGray-800' : 'relative'"
 >
   <div class="container mx-auto px-4">
-    <hr class="mb-6 border-b-1 border-coolGray-700" />
+    <hr class="mb-6 border-b-1 border-coolGray-600" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
@@ -12,7 +12,7 @@
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-small"
-            class="text-white hover:text-coolGray-400 text-sm font-semibold py-1"
+            class="text-white hover:text-coolGray-300 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -23,7 +23,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -31,7 +31,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-small"
-              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -39,7 +39,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -47,7 +47,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-white hover:text-coolGray-400 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From e2e875bdb1386e1c56ddd9f1387668e65f36299e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:06 +0200
Subject: [PATCH 086/171] refactor: change colors

---
 .../footers/footer/footer.component.html      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index b66c98bf..a728ccb0 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="relative bg-coolGray-300 pt-8 pb-6">
+<footer class="relative bg-coolGray-200 pt-8 pb-6">
   <div
     class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
     style="transform: translateZ(0);"
@@ -13,7 +13,7 @@
       y="0"
     >
       <polygon
-        class="text-coolGray-300 fill-current"
+        class="text-coolGray-200 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -22,7 +22,7 @@
     <div class="flex flex-wrap text-center lg:text-left">
       <div class="w-full lg:w-6/12 px-4">
         <h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
-        <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
+        <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
           Find us on any of these platforms, we respond 1-2 business days.
         </h5>
         <div class="mt-6 lg:mb-0 mb-6">
@@ -45,7 +45,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
             <i class="fab fa-dribbble"></i>
           </button>
           <button
-            class="bg-white text-coolGray-900 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-coolGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
             <i class="fab fa-github"></i>
@@ -56,14 +56,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
         <div class="flex flex-wrap items-top mb-6">
           <div class="w-full lg:w-4/12 px-4 ml-auto">
             <span
-              class="block uppercase text-coolGray-600 text-sm font-semibold mb-2"
+              class="block uppercase text-coolGray-500 text-sm font-semibold mb-2"
             >
               Useful Links
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/presentation?ref=na-footer"
                 >
                   About Us
@@ -71,7 +71,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://blog.creative-tim.com?ref=na-footer"
                 >
                   Blog
@@ -79,7 +79,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.github.com/creativetimofficial?ref=na-footer"
                 >
                   Github
@@ -87,7 +87,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/bootstrap-themes/free?ref=na-footer"
                 >
                   Free Products
@@ -97,14 +97,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
           </div>
           <div class="w-full lg:w-4/12 px-4">
             <span
-              class="block uppercase text-coolGray-600 text-sm font-semibold mb-2"
+              class="block uppercase text-coolGray-500 text-sm font-semibold mb-2"
             >
               Other Resources
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
                 >
                   MIT License
@@ -112,7 +112,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/terms?ref=na-footer"
                 >
                   Terms & Conditions
@@ -120,7 +120,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/privacy?ref=na-footer"
                 >
                   Privacy Policy
@@ -128,7 +128,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
               </li>
               <li>
                 <a
-                  class="text-coolGray-700 hover:text-coolGray-900 font-semibold block pb-2 text-sm"
+                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/contact-us?ref=na-footer"
                 >
                   Contact Us
@@ -139,14 +139,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-700">
         </div>
       </div>
     </div>
-    <hr class="my-6 border-coolGray-400" />
+    <hr class="my-6 border-coolGray-300" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4 mx-auto text-center">
-        <div class="text-sm text-coolGray-600 font-semibold py-1">
+        <div class="text-sm text-coolGray-500 font-semibold py-1">
           Copyright © {{ date }} Notus Angular by
           <a
             href="https://www.creative-tim.com?ref=na-footer"
-            class="text-coolGray-600 hover:text-coolGray-900"
+            class="text-coolGray-500 hover:text-coolGray-800"
           >
             Creative Tim
           </a>

From 795ea21f7b11ffe61c4da25168606e23225c1840 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:08 +0200
Subject: [PATCH 087/171] refactor: change colors

---
 .../navbars/admin-navbar/admin-navbar.component.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/navbars/admin-navbar/admin-navbar.component.html b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
index 840568d9..f6714f0c 100644
--- a/src/app/components/navbars/admin-navbar/admin-navbar.component.html
+++ b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
@@ -17,13 +17,13 @@
     >
       <div class="relative flex w-full flex-wrap items-stretch">
         <span
-          class="z-10 h-full leading-snug font-normal absolute text-center text-coolGray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
+          class="z-10 h-full leading-snug font-normal absolute text-center text-coolGray-300 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="Search here..."
-          class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
+          class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
         />
       </div>
     </form>

From 4c5dd7b73455d773f2744609749b6ebbcc03a487 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:10 +0200
Subject: [PATCH 088/171] refactor: change colors

---
 .../auth-navbar/auth-navbar.component.html    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/components/navbars/auth-navbar/auth-navbar.component.html b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
index f1baad3f..e028e4bb 100644
--- a/src/app/components/navbars/auth-navbar/auth-navbar.component.html
+++ b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
@@ -22,18 +22,18 @@
       </button>
     </div>
     <div
-      class="lg:flex flex-grow items-center bg-white lg:bg-transparent lg:shadow-none"
+      class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none"
       [ngClass]="{ hidden: !navbarOpen, 'block rounded shadow-lg': navbarOpen }"
       id="example-navbar-warning"
     >
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-auth-navbar"
           >
             <i
-              class="lg:text-coolGray-300 text-coolGray-500 far fa-file-alt text-lg leading-lg mr-2"
+              class="lg:text-coolGray-200 text-coolGray-400 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -45,12 +45,12 @@
         </li>
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-300 text-coolGray-500 fab fa-facebook text-lg leading-lg"
+              class="lg:text-coolGray-200 text-coolGray-400 fab fa-facebook text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
@@ -58,12 +58,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-300 text-coolGray-500 fab fa-twitter text-lg leading-lg"
+              class="lg:text-coolGray-200 text-coolGray-400 fab fa-twitter text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
@@ -71,12 +71,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-300 text-coolGray-800 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-auth-navbar"
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-300 text-coolGray-500 fab fa-github text-lg leading-lg"
+              class="lg:text-coolGray-200 text-coolGray-400 fab fa-github text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
@@ -84,7 +84,7 @@
 
         <li class="flex items-center">
           <button
-            class="bg-white text-coolGray-800 active:bg-coolGray-100 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
+            class="bg-white text-coolGray-700 active:bg-coolGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
             type="button"
           >
             <i class="fas fa-arrow-alt-circle-down"></i> Download

From 466d5ba1b1be654022ba4d8a63cc1a7e747fe15b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:11 +0200
Subject: [PATCH 089/171] refactor: change colors

---
 .../index-navbar/index-navbar.component.html   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navbars/index-navbar/index-navbar.component.html b/src/app/components/navbars/index-navbar/index-navbar.component.html
index 405bef9a..cba05014 100644
--- a/src/app/components/navbars/index-navbar/index-navbar.component.html
+++ b/src/app/components/navbars/index-navbar/index-navbar.component.html
@@ -9,7 +9,7 @@
     >
       <a
         [routerLink]="['/']"
-        class="text-coolGray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
+        class="text-coolGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
         href="#pablo"
       >
         Notus Angular
@@ -30,11 +30,11 @@
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-index-navbar"
           >
             <i
-              class="text-coolGray-500 far fa-file-alt text-lg leading-lg mr-2"
+              class="text-coolGray-400 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -46,33 +46,33 @@
         </li>
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
-            <i class="text-coolGray-500 fab fa-facebook text-lg leading-lg"></i>
+            <i class="text-coolGray-400 fab fa-facebook text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
-            <i class="text-coolGray-500 fab fa-twitter text-lg leading-lg"></i>
+            <i class="text-coolGray-400 fab fa-twitter text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-600 text-coolGray-800 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-index-navbar"
             target="_blank"
           >
-            <i class="text-coolGray-500 fab fa-github text-lg leading-lg"></i>
+            <i class="text-coolGray-400 fab fa-github text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
         </li>

From c0b712caceab0f0051da5a84de15c71576a7b642 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:13 +0200
Subject: [PATCH 090/171] refactor: change colors

---
 .../components/sidebar/sidebar.component.html | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index 4d0d9fb5..19ab54ce 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -15,7 +15,7 @@
     <!-- Brand -->
     <a
       [routerLink]="['/']"
-      class="md:block text-left md:pb-2 text-coolGray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+      class="md:block text-left md:pb-2 text-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
     >
       <span class="block sm:hidden">
         Tailwind Angular
@@ -40,13 +40,13 @@
     >
       <!-- Collapse header -->
       <div
-        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-coolGray-300"
+        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-coolGray-200"
       >
         <div class="flex flex-wrap">
           <div class="w-6/12">
             <a
               [routerLink]="['/']"
-              class="md:block text-left md:pb-2 text-coolGray-700 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+              class="md:block text-left md:pb-2 text-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
             >
               Notus Angular
             </a>
@@ -68,7 +68,7 @@
           <input
             type="text"
             placeholder="Search"
-            class="px-3 py-2 h-12 border border-solid border-coolGray-600 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
+            class="border-0 px-3 py-2 h-12 border border-solid border-coolGray-500 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
           />
         </div>
       </form>
@@ -77,7 +77,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Admin Layout Pages
       </h6>
@@ -93,13 +93,13 @@
             [ngClass]="
               adminDashboard.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-800 hover:text-coolGray-600'
+                : 'text-coolGray-700 hover:text-coolGray-500'
             "
           >
             <i
               class="fas fa-tv mr-2 text-sm"
               [ngClass]="
-                adminDashboard.isActive ? 'opacity-75' : 'text-coolGray-400'
+                adminDashboard.isActive ? 'opacity-75' : 'text-coolGray-300'
               "
             ></i>
             Dashboard
@@ -115,13 +115,13 @@
             [ngClass]="
               adminSettings.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-800 hover:text-coolGray-600'
+                : 'text-coolGray-700 hover:text-coolGray-500'
             "
           >
             <i
               class="fas fa-tools mr-2 text-sm"
               [ngClass]="
-                adminSettings.isActive ? 'opacity-75' : 'text-coolGray-400'
+                adminSettings.isActive ? 'opacity-75' : 'text-coolGray-300'
               "
             ></i>
             Settings
@@ -137,12 +137,12 @@
             [ngClass]="
               adminTables.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-800 hover:text-coolGray-600'
+                : 'text-coolGray-700 hover:text-coolGray-500'
             "
           >
             <i
               class="fas fa-table mr-2 text-sm"
-              [ngClass]="adminTables.isActive ? 'opacity-75' : 'text-coolGray-400'"
+              [ngClass]="adminTables.isActive ? 'opacity-75' : 'text-coolGray-300'"
             ></i>
             Tables
           </a>
@@ -157,12 +157,12 @@
             [ngClass]="
               adminMaps.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-800 hover:text-coolGray-600'
+                : 'text-coolGray-700 hover:text-coolGray-500'
             "
           >
             <i
               class="fas fa-map-marked mr-2 text-sm"
-              [ngClass]="adminMaps.isActive ? 'opacity-75' : 'text-coolGray-400'"
+              [ngClass]="adminMaps.isActive ? 'opacity-75' : 'text-coolGray-300'"
             ></i>
             Maps
           </a>
@@ -173,7 +173,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Auth Layout Pages
       </h6>
@@ -183,9 +183,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/login']"
-            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-fingerprint text-coolGray-400 mr-2 text-sm"></i>
+            <i class="fas fa-fingerprint text-coolGray-300 mr-2 text-sm"></i>
             Login
           </a>
         </li>
@@ -193,9 +193,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/register']"
-            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-clipboard-list text-coolGray-400 mr-2 text-sm"></i>
+            <i class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"></i>
             Register
           </a>
         </li>
@@ -205,7 +205,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         No Layout Pages
       </h6>
@@ -215,9 +215,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/landing']"
-            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-newspaper text-coolGray-400 mr-2 text-sm"></i>
+            <i class="fas fa-newspaper text-coolGray-300 mr-2 text-sm"></i>
             Landing Page
           </a>
         </li>
@@ -225,9 +225,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/profile']"
-            class="text-coolGray-800 hover:text-coolGray-600 text-xs uppercase py-3 font-bold block"
+            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-user-circle text-coolGray-400 mr-2 text-sm"></i>
+            <i class="fas fa-user-circle text-coolGray-300 mr-2 text-sm"></i>
             Profile Page
           </a>
         </li>
@@ -237,7 +237,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-600 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Documentation
       </h6>
@@ -247,9 +247,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/colors/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-paint-brush mr-2 text-coolGray-400 text-base"></i>
+            <i class="fas fa-paint-brush mr-2 text-coolGray-300 text-base"></i>
             Styles
           </a>
         </li>
@@ -258,9 +258,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-css3-alt mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-css3-alt mr-2 text-coolGray-300 text-base"></i>
             CSS Components
           </a>
         </li>
@@ -269,9 +269,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-angular mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-angular mr-2 text-coolGray-300 text-base"></i>
             Angular
           </a>
         </li>
@@ -280,9 +280,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-js-square mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-js-square mr-2 text-coolGray-300 text-base"></i>
             Javascript
           </a>
         </li>
@@ -291,9 +291,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-react mr-2 text-coolGray-300 text-base"></i>
             NextJS
           </a>
         </li>
@@ -302,9 +302,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-react mr-2 text-coolGray-300 text-base"></i>
             React
           </a>
         </li>
@@ -313,9 +313,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-link mr-2 text-coolGray-400 text-base"></i>
+            <i class="fas fa-link mr-2 text-coolGray-300 text-base"></i>
             Svelte
           </a>
         </li>
@@ -324,9 +324,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
             target="_blank"
-            class="text-coolGray-800 hover:text-coolGray-600 text-sm block mb-4 no-underline font-semibold"
+            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-vuejs mr-2 text-coolGray-400 text-base"></i>
+            <i class="fab fa-vuejs mr-2 text-coolGray-300 text-base"></i>
             VueJS
           </a>
         </li>

From 0d82c175b3b6ef97aeebe9440075c16d522a25b2 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:15 +0200
Subject: [PATCH 091/171] refactor: change colors

---
 src/app/layouts/admin/admin.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/admin/admin.component.html b/src/app/layouts/admin/admin.component.html
index acb3c965..0f6a562a 100644
--- a/src/app/layouts/admin/admin.component.html
+++ b/src/app/layouts/admin/admin.component.html
@@ -1,6 +1,6 @@
 <div>
   <app-sidebar></app-sidebar>
-  <div class="relative md:ml-64 bg-coolGray-200">
+  <div class="relative md:ml-64 bg-coolGray-100">
     <app-admin-navbar></app-admin-navbar>
     <app-header-stats></app-header-stats>
     <div class="px-4 md:px-10 mx-auto w-full -m-24">

From ba21e718c8fd4f5f6d37e842caa5dccbf11b4725 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:17 +0200
Subject: [PATCH 092/171] refactor: change colors

---
 src/app/layouts/auth/auth.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/auth/auth.component.html b/src/app/layouts/auth/auth.component.html
index ab494936..34d757b2 100644
--- a/src/app/layouts/auth/auth.component.html
+++ b/src/app/layouts/auth/auth.component.html
@@ -3,7 +3,7 @@
   <main>
     <section class="relative w-full h-full py-40 min-h-screen">
       <div
-        class="absolute top-0 w-full h-full bg-coolGray-900 bg-no-repeat bg-full"
+        class="absolute top-0 w-full h-full bg-coolGray-800 bg-no-repeat bg-full"
         style="background-image: url('assets/img/register_bg_2.png');"
       ></div>
       <router-outlet></router-outlet>

From cf7d4d64ea1ec19679eceabbd1d99d9c2dfe6631 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:19 +0200
Subject: [PATCH 093/171] refactor: change colors

---
 src/app/views/auth/login/login.component.html | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/login/login.component.html b/src/app/views/auth/login/login.component.html
index e1a3c141..1c41d196 100644
--- a/src/app/views/auth/login/login.component.html
+++ b/src/app/views/auth/login/login.component.html
@@ -2,61 +2,61 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-4/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-600 text-sm font-bold">
+            <h6 class="text-coolGray-500 text-sm font-bold">
               Sign in with
             </h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-coolGray-400" />
+          <hr class="mt-6 border-b-1 border-coolGray-300" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-coolGray-500 text-center mb-3 font-bold">
+          <div class="text-coolGray-400 text-center mb-3 font-bold">
             <small>Or sign in with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -65,9 +65,9 @@ <h6 class="text-coolGray-600 text-sm font-bold">
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox text-coolGray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                  class="form-checkbox border-0 text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
                 />
-                <span class="ml-2 text-sm font-semibold text-coolGray-700">
+                <span class="ml-2 text-sm font-semibold text-coolGray-600">
                   Remember me
                 </span>
               </label>
@@ -75,7 +75,7 @@ <h6 class="text-coolGray-600 text-sm font-bold">
 
             <div class="text-center mt-6">
               <button
-                class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Sign In
@@ -86,12 +86,12 @@ <h6 class="text-coolGray-600 text-sm font-bold">
       </div>
       <div class="flex flex-wrap mt-6 relative">
         <div class="w-1/2">
-          <a href="javascript:void(0)" class="text-coolGray-300">
+          <a href="javascript:void(0)" class="text-coolGray-200">
             <small>Forgot password?</small>
           </a>
         </div>
         <div class="w-1/2 text-right">
-          <a [routerLink]="['/auth/register']" class="text-coolGray-300">
+          <a [routerLink]="['/auth/register']" class="text-coolGray-200">
             <small>Create new account</small>
           </a>
         </div>

From d94d25ae7e68a779f6a0fe8c6a043fd7f83f2ecb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:20 +0200
Subject: [PATCH 094/171] refactor: change colors

---
 .../auth/register/register.component.html     | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/register/register.component.html b/src/app/views/auth/register/register.component.html
index 0b071bc8..05a090cc 100644
--- a/src/app/views/auth/register/register.component.html
+++ b/src/app/views/auth/register/register.component.html
@@ -2,75 +2,75 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-6/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-600 text-sm font-bold">
+            <h6 class="text-coolGray-500 text-sm font-bold">
               Sign up with
             </h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-coolGray-100 text-coolGray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-coolGray-400" />
+          <hr class="mt-6 border-b-1 border-coolGray-300" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-coolGray-500 text-center mb-3 font-bold">
+          <div class="text-coolGray-400 text-center mb-3 font-bold">
             <small>Or sign up with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Name
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Name"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -80,9 +80,9 @@ <h6 class="text-coolGray-600 text-sm font-bold">
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox text-coolGray-800 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                  class="form-checkbox border-0 text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
                 />
-                <span class="ml-2 text-sm font-semibold text-coolGray-700">
+                <span class="ml-2 text-sm font-semibold text-coolGray-600">
                   I agree with the
                   <a href="javascript:void(0)" class="text-red-600">
                     Privacy Policy
@@ -93,7 +93,7 @@ <h6 class="text-coolGray-600 text-sm font-bold">
 
             <div class="text-center mt-6">
               <button
-                class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Create Account

From 332f3e1b960af393689f98bd8f33e069363db3cf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:22 +0200
Subject: [PATCH 095/171] refactor: change colors

---
 src/app/views/index/index.component.html | 118 +++++++++++------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 0b31a617..867452fa 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -3,15 +3,15 @@
   <div class="container mx-auto items-center flex flex-wrap">
     <div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
       <div class="pt-32 sm:pt-0">
-        <h2 class="font-semibold text-4xl text-coolGray-700">
+        <h2 class="font-semibold text-4xl text-coolGray-600">
           Notus Angular - A beautiful extension for Tailwind CSS.
         </h2>
-        <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
+        <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
           Notus Angular is Free and Open Source. It does not change or add any
           CSS to the already one from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-coolGray-700"
+            class="text-coolGray-600"
             target="_blank"
           >
             Tailwind CSS
@@ -29,7 +29,7 @@ <h2 class="font-semibold text-4xl text-coolGray-700">
           </a>
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
-            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
             target="_blank"
           >
             Github Star
@@ -46,7 +46,7 @@ <h2 class="font-semibold text-4xl text-coolGray-700">
   />
 </section>
 
-<section class="mt-48 md:mt-40 pb-40 relative bg-coolGray-200">
+<section class="mt-48 md:mt-40 pb-40 relative bg-coolGray-100">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0);"
@@ -61,7 +61,7 @@ <h2 class="font-semibold text-4xl text-coolGray-700">
       y="0"
     >
       <polygon
-        class="text-coolGray-200 fill-current"
+        class="text-coolGray-100 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -109,14 +109,14 @@ <h4 class="text-xl font-bold text-white">
             <div class="relative flex flex-col mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-sitemap"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   CSS Components
                 </h6>
-                <p class="mb-4 text-coolGray-600">
+                <p class="mb-4 text-coolGray-500">
                   Notus Angular comes with a huge number of Fully Coded CSS
                   components.
                 </p>
@@ -125,14 +125,14 @@ <h6 class="text-xl mb-1 font-semibold">
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-drafting-compass"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   JavaScript Components
                 </h6>
-                <p class="mb-4 text-coolGray-600">
+                <p class="mb-4 text-coolGray-500">
                   We also feature many dynamic components for React, NextJS, Vue
                   and Angular.
                 </p>
@@ -143,12 +143,12 @@ <h6 class="text-xl mb-1 font-semibold">
             <div class="relative flex flex-col min-w-0 mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-newspaper"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">Pages</h6>
-                <p class="mb-4 text-coolGray-600">
+                <p class="mb-4 text-coolGray-500">
                   This extension also comes with 3 sample pages. They are fully
                   coded so you can start working instantly.
                 </p>
@@ -157,14 +157,14 @@ <h6 class="text-xl mb-1 font-semibold">Pages</h6>
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-file-alt"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   Documentation
                 </h6>
-                <p class="mb-4 text-coolGray-600">
+                <p class="mb-4 text-coolGray-500">
                   Built by developers for developers. You will love how easy is
                   to to work with Notus Angular.
                 </p>
@@ -180,56 +180,56 @@ <h6 class="text-xl mb-1 font-semibold">
     <div class="flex flex-wrap items-center">
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-sitemap text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           CSS Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
           Every element that you need in a product comes built in as a
           component. All components fit perfectly with each other and can have
           different colours.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Buttons
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Inputs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Labels
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Pagination
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Progressbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Typography
           </span>
@@ -237,7 +237,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-coolGray-800 hover:text-coolGray-600 ease-linear transition-all duration-150"
+          class="font-bold text-coolGray-700 hover:text-coolGray-500 ease-linear transition-all duration-150"
         >
           View All
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -321,7 +321,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
               target="_blank"
             >
               <div
-                class="bg-coolGray-800 shadow-lg rounded-lg text-center p-8 mt-8"
+                class="bg-coolGray-700 shadow-lg rounded-lg text-center p-8 mt-8"
               >
                 <img
                   alt="..."
@@ -388,59 +388,59 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
 
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-drafting-compass text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           Javascript Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
           In order to create a great User Experience some components require
           JavaScript. In this way you can manipulate the elements on the page
           and give more options to your users.
         </p>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
           We created a set of Components that are dynamic and come to help you.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Alerts
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Dropdowns
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Modals
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Popovers
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tabs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tooltips
           </span>
@@ -448,7 +448,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-coolGray-800 hover:text-coolGray-600 ease-linear transition-all duration-150"
+          class="font-bold text-coolGray-700 hover:text-coolGray-500 ease-linear transition-all duration-150"
         >
           View all
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -462,14 +462,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
       <div class="w-full md:w-5/12 ml-auto px-12 md:px-4">
         <div class="md:pr-12">
           <div
-            class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
             <i class="fas fa-file-alt text-xl"></i>
           </div>
           <h3 class="text-3xl font-semibold">
             Complex Documentation
           </h3>
-          <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
+          <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
             This extension comes a lot of fully coded examples that help you get
             started faster. You can adjust the colors and also the programming
             language. You can change the text and images and you're good to go.
@@ -479,13 +479,13 @@ <h3 class="text-3xl font-semibold">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
                   >
                     <i class="fas fa-fingerprint"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-600">
+                  <h4 class="text-coolGray-500">
                     Built by Developers for Developers
                   </h4>
                 </div>
@@ -495,13 +495,13 @@ <h4 class="text-coolGray-600">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
                   >
                     <i class="fab fa-html5"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-600">
+                  <h4 class="text-coolGray-500">
                     Carefully crafted code for Components
                   </h4>
                 </div>
@@ -511,13 +511,13 @@ <h4 class="text-coolGray-600">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-600 bg-coolGray-100 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
                   >
                     <i class="far fa-paper-plane"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-600">
+                  <h4 class="text-coolGray-500">
                     Dynamic Javascript Components
                   </h4>
                 </div>
@@ -544,7 +544,7 @@ <h4 class="text-coolGray-600">
   <div class="justify-center text-center flex flex-wrap mt-24">
     <div class="w-full md:w-6/12 px-12 md:px-4">
       <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
-      <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-600">
+      <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-500">
         Notus Angular is a completly new product built using our past experience
         in web templates. Take the examples we made for you and start playing
         with them.
@@ -553,7 +553,7 @@ <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
   </div>
 </section>
 
-<section class="block relative z-1 bg-coolGray-700">
+<section class="block relative z-1 bg-coolGray-600">
   <div class="container mx-auto">
     <div class="justify-center flex flex-wrap">
       <div class="w-full lg:w-12/12 px-4 -mt-24">
@@ -614,23 +614,23 @@ <h5 class="text-xl font-semibold pb-4 text-center">
   </div>
 </section>
 
-<section class="py-20 bg-coolGray-700 overflow-hidden">
+<section class="py-20 bg-coolGray-600 overflow-hidden">
   <div class="container mx-auto pb-64">
     <div class="flex flex-wrap justify-center">
       <div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64">
         <div
-          class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-code-branch text-xl"></i>
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           Open Source
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-500">
+        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-400">
           Since
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-coolGray-400"
+            class="text-coolGray-300"
             target="_blank"
           >
             Tailwind CSS
@@ -639,13 +639,13 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           can give this version a try to feel the design and also test the
           quality of the code!
         </p>
-        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-500">
+        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-400">
           Get it free on Github and please help us spread the news with a Star!
         </p>
         <a
           href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
           target="_blank"
-          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
         >
           Github Star
         </a>
@@ -653,14 +653,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
 
       <div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
         <i
-          class="fab fa-github text-coolGray-800 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
+          class="fab fa-github text-coolGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
         ></i>
       </div>
     </div>
   </div>
 </section>
 
-<section class="pb-16 bg-coolGray-300 relative pt-32">
+<section class="pb-16 bg-coolGray-200 relative pt-32">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0);"
@@ -675,7 +675,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
       y="0"
     >
       <polygon
-        class="text-coolGray-300 fill-current"
+        class="text-coolGray-200 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -694,7 +694,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
         <h3 class="font-semibold text-3xl">
           Do you love this Starter Kit?
         </h3>
-        <p class="text-coolGray-600 text-lg leading-relaxed mt-4 mb-4">
+        <p class="text-coolGray-500 text-lg leading-relaxed mt-4 mb-4">
           Cause if you do, it can be yours now. Hit the buttons below to
           navigate to get the Free version for your next project. Build a new
           web app or give an old project a new look!
@@ -710,7 +710,7 @@ <h3 class="font-semibold text-3xl">
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
             target="_blank"
-            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-800 active:bg-coolGray-700 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
             <i class="fab fa-github text-lg mr-1"></i>
             <span>Help With a Star</span>

From c858e8a36314d99fe3aae3f1f922e8de5d880327 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:24 +0200
Subject: [PATCH 096/171] refactor: change colors

---
 src/app/views/landing/landing.component.html | 80 ++++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index fefb70f0..ebd8c194 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -21,7 +21,7 @@
             <h1 class="text-white font-semibold text-5xl">
               Your story starts with us.
             </h1>
-            <p class="mt-4 text-lg text-coolGray-300">
+            <p class="mt-4 text-lg text-coolGray-200">
               This is a simple example of a Landing Page you can build using
               Notus Angular. It features multiple CSS components based on the
               Tailwind CSS design system.
@@ -44,14 +44,14 @@ <h1 class="text-white font-semibold text-5xl">
         y="0"
       >
         <polygon
-          class="text-coolGray-300 fill-current"
+          class="text-coolGray-200 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </div>
 
-  <section class="pb-20 bg-coolGray-300 -mt-24">
+  <section class="pb-20 bg-coolGray-200 -mt-24">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap">
         <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
@@ -65,7 +65,7 @@ <h1 class="text-white font-semibold text-5xl">
                 <i class="fas fa-award"></i>
               </div>
               <h6 class="text-xl font-semibold">Awarded Agency</h6>
-              <p class="mt-2 mb-4 text-coolGray-600">
+              <p class="mt-2 mb-4 text-coolGray-500">
                 Divide details about your product or agency work into parts. A
                 paragraph describing a feature will be enough.
               </p>
@@ -84,7 +84,7 @@ <h6 class="text-xl font-semibold">Awarded Agency</h6>
                 <i class="fas fa-retweet"></i>
               </div>
               <h6 class="text-xl font-semibold">Free Revisions</h6>
-              <p class="mt-2 mb-4 text-coolGray-600">
+              <p class="mt-2 mb-4 text-coolGray-500">
                 Keep you user engaged by providing meaningful information.
                 Remember that by this time, the user is curious.
               </p>
@@ -103,7 +103,7 @@ <h6 class="text-xl font-semibold">Free Revisions</h6>
                 <i class="fas fa-fingerprint"></i>
               </div>
               <h6 class="text-xl font-semibold">Verified Company</h6>
-              <p class="mt-2 mb-4 text-coolGray-600">
+              <p class="mt-2 mb-4 text-coolGray-500">
                 Write a few lines about each one. A paragraph describing a
                 feature will be enough. Keep you user engaged!
               </p>
@@ -115,23 +115,23 @@ <h6 class="text-xl font-semibold">Verified Company</h6>
       <div class="flex flex-wrap items-center mt-32">
         <div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
           <div
-            class="text-coolGray-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-coolGray-100"
+            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-coolGray-50"
           >
             <i class="fas fa-user-friends text-xl"></i>
           </div>
           <h3 class="text-3xl mb-2 font-semibold leading-normal">
             Working with us is a pleasure
           </h3>
-          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-700">
+          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
             Don't let your uses guess by attaching tooltips and popoves to any
             element. Just make sure you enable them first via JavaScript.
           </p>
-          <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-700">
+          <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600">
             The kit comes with three pre-built pages to help you get started
             faster. You can change the text and images and you're good to go.
             Just make sure you enable them first via JavaScript.
           </p>
-          <a [routerLink]="['/']" class="font-bold text-coolGray-800 mt-8">
+          <a [routerLink]="['/']" class="font-bold text-coolGray-700 mt-8">
             Check Notus Angular!
           </a>
         </div>
@@ -210,7 +210,7 @@ <h4 class="text-xl font-bold text-white">
               <i class="fas fa-rocket text-xl"></i>
             </div>
             <h3 class="text-3xl font-semibold">A growing company</h3>
-            <p class="mt-4 text-lg leading-relaxed text-coolGray-600">
+            <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
               The extension comes with three pre-built pages to help you get
               started faster. You can change the text and images and you're good
               to go.
@@ -226,7 +226,7 @@ <h3 class="text-3xl font-semibold">A growing company</h3>
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-600">
+                    <h4 class="text-coolGray-500">
                       Carefully crafted components
                     </h4>
                   </div>
@@ -242,7 +242,7 @@ <h4 class="text-coolGray-600">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-600">
+                    <h4 class="text-coolGray-500">
                       Amazing page examples
                     </h4>
                   </div>
@@ -258,7 +258,7 @@ <h4 class="text-coolGray-600">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-600">Dynamic components</h4>
+                    <h4 class="text-coolGray-500">Dynamic components</h4>
                   </div>
                 </div>
               </li>
@@ -274,7 +274,7 @@ <h4 class="text-coolGray-600">Dynamic components</h4>
       <div class="flex flex-wrap justify-center text-center mb-24">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold">Here are our heroes</h2>
-          <p class="text-lg leading-relaxed m-4 text-coolGray-600">
+          <p class="text-lg leading-relaxed m-4 text-coolGray-500">
             According to the National Oceanic and Atmospheric Administration,
             Ted, Scambos, NSIDClead scentist, puts the potentially record
             maximum.
@@ -291,7 +291,7 @@ <h2 class="text-4xl font-semibold">Here are our heroes</h2>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Ryan Tompson</h5>
-              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
                 Web Developer
               </p>
               <div class="mt-6">
@@ -326,7 +326,7 @@ <h5 class="text-xl font-bold">Ryan Tompson</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Romina Hadid</h5>
-              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
                 Marketing Specialist
               </p>
               <div class="mt-6">
@@ -355,7 +355,7 @@ <h5 class="text-xl font-bold">Romina Hadid</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Alexa Smith</h5>
-              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
                 UI/UX Designer
               </p>
               <div class="mt-6">
@@ -372,7 +372,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-coolGray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -390,7 +390,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Jenna Kardi</h5>
-              <p class="mt-1 text-sm text-coolGray-500 uppercase font-semibold">
+              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
                 Founder and CEO
               </p>
               <div class="mt-6">
@@ -413,7 +413,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-coolGray-800 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -426,7 +426,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
     </div>
   </section>
 
-  <section class="pb-20 relative block bg-coolGray-900">
+  <section class="pb-20 relative block bg-coolGray-800">
     <div
       class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
       style="transform: translateZ(0);"
@@ -441,7 +441,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
         y="0"
       >
         <polygon
-          class="text-coolGray-900 fill-current"
+          class="text-coolGray-800 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
@@ -453,7 +453,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
           <h2 class="text-4xl font-semibold text-white">
             Build something
           </h2>
-          <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-500">
+          <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-400">
             Put the potentially record low maximum sea ice extent tihs year down
             to low ice. According to the National Oceanic and Atmospheric
             Administration, Ted, Scambos.
@@ -463,42 +463,42 @@ <h2 class="text-4xl font-semibold text-white">
       <div class="flex flex-wrap mt-12 justify-center">
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-medal text-xl"></i>
           </div>
           <h6 class="text-xl mt-5 font-semibold text-white">
             Excelent Services
           </h6>
-          <p class="mt-2 mb-4 text-coolGray-500">
+          <p class="mt-2 mb-4 text-coolGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-poll text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">
             Grow your market
           </h5>
-          <p class="mt-2 mb-4 text-coolGray-500">
+          <p class="mt-2 mb-4 text-coolGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-900 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-lightbulb text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">
             Launch time
           </h5>
-          <p class="mt-2 mb-4 text-coolGray-500">
+          <p class="mt-2 mb-4 text-coolGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
@@ -506,51 +506,51 @@ <h5 class="text-xl mt-5 font-semibold text-white">
       </div>
     </div>
   </section>
-  <section class="relative block py-24 lg:pt-0 bg-coolGray-900">
+  <section class="relative block py-24 lg:pt-0 bg-coolGray-800">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
         <div class="w-full lg:w-6/12 px-4">
           <div
-            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-300"
+            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200"
           >
             <div class="flex-auto p-5 lg:p-10">
               <h4 class="text-2xl font-semibold">
                 Want to work with us?
               </h4>
-              <p class="leading-relaxed mt-1 mb-4 text-coolGray-600">
+              <p class="leading-relaxed mt-1 mb-4 text-coolGray-500">
                 Complete this form and we will get back to you in 24 hours.
               </p>
               <div class="relative w-full mb-3 mt-8">
                 <label
-                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                   htmlFor="full-name"
                 >
                   Full Name
                 </label>
                 <input
                   type="text"
-                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Full Name"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                   htmlFor="email"
                 >
                   Email
                 </label>
                 <input
                   type="email"
-                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Email"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-coolGray-700 text-xs font-bold mb-2"
+                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                   htmlFor="message"
                 >
                   Message
@@ -558,13 +558,13 @@ <h4 class="text-2xl font-semibold">
                 <textarea
                   rows="4"
                   cols="80"
-                  class="px-3 py-3 placeholder-coolGray-400 text-coolGray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
+                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
                   placeholder="Type a message..."
                 ></textarea>
               </div>
               <div class="text-center mt-6">
                 <button
-                  class="bg-coolGray-900 text-white active:bg-coolGray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
                 >
                   Send Message

From d90b2d7e1d3cfeaa4ed44ec560f977100ab4ab18 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:26 +0200
Subject: [PATCH 097/171] refactor: change colors

---
 src/app/views/profile/profile.component.html | 34 ++++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/views/profile/profile.component.html b/src/app/views/profile/profile.component.html
index d7327668..8c8788cc 100644
--- a/src/app/views/profile/profile.component.html
+++ b/src/app/views/profile/profile.component.html
@@ -26,13 +26,13 @@
         y="0"
       >
         <polygon
-          class="text-coolGray-300 fill-current"
+          class="text-coolGray-200 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </section>
-  <section class="relative py-16 bg-coolGray-300">
+  <section class="relative py-16 bg-coolGray-200">
     <div class="container mx-auto px-4">
       <div
         class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64"
@@ -64,56 +64,56 @@
               <div class="flex justify-center py-4 lg:pt-4 pt-8">
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                   >
                     22
                   </span>
-                  <span class="text-sm text-coolGray-500">Friends</span>
+                  <span class="text-sm text-coolGray-400">Friends</span>
                 </div>
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                   >
                     10
                   </span>
-                  <span class="text-sm text-coolGray-500">Photos</span>
+                  <span class="text-sm text-coolGray-400">Photos</span>
                 </div>
                 <div class="lg:mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-700"
+                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                   >
                     89
                   </span>
-                  <span class="text-sm text-coolGray-500">Comments</span>
+                  <span class="text-sm text-coolGray-400">Comments</span>
                 </div>
               </div>
             </div>
           </div>
           <div class="text-center mt-12">
             <h3
-              class="text-4xl font-semibold leading-normal mb-2 text-coolGray-800 mb-2"
+              class="text-4xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2"
             >
               Jenna Stones
             </h3>
             <div
-              class="text-sm leading-normal mt-0 mb-2 text-coolGray-500 font-bold uppercase"
+              class="text-sm leading-normal mt-0 mb-2 text-coolGray-400 font-bold uppercase"
             >
-              <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-500"></i>
+              <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"></i>
               Los Angeles, California
             </div>
-            <div class="mb-2 text-coolGray-700 mt-10">
-              <i class="fas fa-briefcase mr-2 text-lg text-coolGray-500"></i>
+            <div class="mb-2 text-coolGray-600 mt-10">
+              <i class="fas fa-briefcase mr-2 text-lg text-coolGray-400"></i>
               Solution Manager - Creative Tim Officer
             </div>
-            <div class="mb-2 text-coolGray-700">
-              <i class="fas fa-university mr-2 text-lg text-coolGray-500"></i>
+            <div class="mb-2 text-coolGray-600">
+              <i class="fas fa-university mr-2 text-lg text-coolGray-400"></i>
               University of Computer Science
             </div>
           </div>
-          <div class="mt-10 py-10 border-t border-coolGray-300 text-center">
+          <div class="mt-10 py-10 border-t border-coolGray-200 text-center">
             <div class="flex flex-wrap justify-center">
               <div class="w-full lg:w-9/12 px-4">
-                <p class="mb-4 text-lg leading-relaxed text-coolGray-800">
+                <p class="mb-4 text-lg leading-relaxed text-coolGray-700">
                   An artist of considerable range, Jenna the name taken by
                   Melbourne-raised, Brooklyn-based Nick Murphy writes, performs
                   and records all of his own music, giving it a warm, intimate

From d18c1f1bf41a3c0a0dace164dc11a27488cdfe04 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:28 +0200
Subject: [PATCH 098/171] refactor: change colors

---
 src/assets/styles/tailwind.css | 82 ++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index d600196d..a9b53fa3 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1352,6 +1352,11 @@ select {
   background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
+.bg-coolGray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
 .bg-coolGray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -1362,9 +1367,9 @@ select {
   background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-300 {
+.bg-coolGray-600 {
   --tw-bg-opacity: 1;
-  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
 }
 
 .bg-coolGray-700 {
@@ -1377,11 +1382,6 @@ select {
   background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
-}
-
 .focus\:bg-white:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -1402,14 +1402,14 @@ select {
   background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.active\:bg-coolGray-100:active {
+.active\:bg-coolGray-50:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
 }
 
-.active\:bg-coolGray-700:active {
+.active\:bg-coolGray-600:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
 }
 
 .bg-center {
@@ -1471,6 +1471,11 @@ select {
   border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
+.border-coolGray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgba(249, 250, 251, var(--tw-border-opacity));
+}
+
 .border-coolGray-100 {
   --tw-border-opacity: 1;
   border-color: rgba(243, 244, 246, var(--tw-border-opacity));
@@ -1486,9 +1491,9 @@ select {
   border-color: rgba(209, 213, 219, var(--tw-border-opacity));
 }
 
-.border-coolGray-400 {
+.border-coolGray-500 {
   --tw-border-opacity: 1;
-  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
 }
 
 .border-coolGray-600 {
@@ -1496,11 +1501,6 @@ select {
   border-color: rgba(75, 85, 99, var(--tw-border-opacity));
 }
 
-.border-coolGray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgba(55, 65, 81, var(--tw-border-opacity));
-}
-
 .focus\:border-black:focus {
   --tw-border-opacity: 1;
   border-color: rgba(0, 0, 0, var(--tw-border-opacity));
@@ -2839,14 +2839,14 @@ select {
   padding-bottom: 16rem;
 }
 
-.placeholder-coolGray-400::-moz-placeholder {
+.placeholder-coolGray-300::-moz-placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
-.placeholder-coolGray-400::placeholder {
+.placeholder-coolGray-300::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-placeholder-opacity));
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
 .pointer-events-none {
@@ -3206,6 +3206,11 @@ select {
   color: rgba(24, 24, 27, var(--tw-text-opacity));
 }
 
+.text-coolGray-100 {
+  --tw-text-opacity: 1;
+  color: rgba(243, 244, 246, var(--tw-text-opacity));
+}
+
 .text-coolGray-200 {
   --tw-text-opacity: 1;
   color: rgba(229, 231, 235, var(--tw-text-opacity));
@@ -3241,34 +3246,29 @@ select {
   color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.text-coolGray-900 {
-  --tw-text-opacity: 1;
-  color: rgba(17, 24, 39, var(--tw-text-opacity));
-}
-
 .hover\:text-red-700:hover {
   --tw-text-opacity: 1;
   color: rgba(185, 28, 28, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-400:hover {
+.hover\:text-coolGray-300:hover {
   --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-600:hover {
+.hover\:text-coolGray-500:hover {
   --tw-text-opacity: 1;
-  color: rgba(75, 85, 99, var(--tw-text-opacity));
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-800:hover {
+.hover\:text-coolGray-700:hover {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-900:hover {
+.hover\:text-coolGray-800:hover {
   --tw-text-opacity: 1;
-  color: rgba(17, 24, 39, var(--tw-text-opacity));
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
 .truncate {
@@ -3889,6 +3889,10 @@ select {
 }
 
 @media (min-width: 1024px) {
+  .lg\:bg-opacity-0 {
+    --tw-bg-opacity: 0;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -4013,14 +4017,14 @@ select {
     color: rgba(255, 255, 255, var(--tw-text-opacity));
   }
 
-  .lg\:text-coolGray-300 {
+  .lg\:text-coolGray-200 {
     --tw-text-opacity: 1;
-    color: rgba(209, 213, 219, var(--tw-text-opacity));
+    color: rgba(229, 231, 235, var(--tw-text-opacity));
   }
 
-  .lg\:hover\:text-coolGray-300:hover {
+  .lg\:hover\:text-coolGray-200:hover {
     --tw-text-opacity: 1;
-    color: rgba(209, 213, 219, var(--tw-text-opacity));
+    color: rgba(229, 231, 235, var(--tw-text-opacity));
   }
 
   .lg\:w-auto {

From b19518af2336e1f96d18297cdcbeef838773057b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:06:29 +0200
Subject: [PATCH 099/171] refactor: change colors

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 35a05234..80d4c300 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
     <link rel="apple-touch-icon" sizes="76x76" href="./apple-icon.png" />
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
   </head>
-  <body class="text-coolGray-800 antialiased">
+  <body class="text-coolGray-700 antialiased">
     <app-root></app-root>
   </body>
 </html>

From 954163fcc1a4dd5632642454352221f00bbc0e96 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:09:06 +0200
Subject: [PATCH 100/171] fix: solve typo

---
 .../dropdowns/index-dropdown/index-dropdown.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
index d3355b5f..991aa2aa 100644
--- a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
+++ b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
@@ -68,7 +68,7 @@
     [routerLink]="['/landing']"
     class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
-    Lading
+    Landing
   </a>
   <a
     [routerLink]="['/profile']"

From 562add05bf7ad6495fbb30632bf41bfb1739f533 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 16:09:08 +0200
Subject: [PATCH 101/171] fix: solve typo

---
 .../dropdowns/pages-dropdown/pages-dropdown.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
index 28d70520..d18f5e0f 100644
--- a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
+++ b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
@@ -68,7 +68,7 @@
     [routerLink]="['/landing']"
     class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
   >
-    Lading
+    Landing
   </a>
   <a
     [routerLink]="['/profile']"

From f4f2226a89115e407623dc902cd46672d154ca7e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 10:29:18 +0200
Subject: [PATCH 102/171] docs: add link

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 767d3acc..286aa925 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## [1.1.0] date
 ### Bug fixing
 - Rename `master` branch to `main`
-- To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`)
+- To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2
   - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-coolGray-{number}`
   - After that, we've changed `{type}-coolGray-{number}` to `{type}-coolGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`)
     - You can achieve this, by search in your whole project for `coolGray-100` and replace it with `coolGray-50`

From 8d44a68cbad1d5976b0d3bc5ca6b2effab236bb6 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 11:02:07 +0200
Subject: [PATCH 103/171] feature: update tailwind to 2.0.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b5e0e9e8..30a0a18b 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@tailwindcss/forms": "0.2.1",
     "chart.js": "2.9.4",
     "rxjs": "6.6.6",
-    "tailwindcss": "2.0.3",
+    "tailwindcss": "2.0.4",
     "tslib": "2.1.0",
     "zone.js": "0.11.4"
   },

From 7a1d3686f1dc57b29b100960b498dd17d6752c62 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 11:02:48 +0200
Subject: [PATCH 104/171] feature: update tailwind to 2.0.4

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 286aa925..96e3fc3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,7 +40,7 @@
 @popperjs/core                         2.5.1   →      2.9.1
 chart.js                               2.9.3   →      2.9.4
 rxjs                                   6.6.3   →      6.6.6
-tailwindcss                           1.8.10   →      2.0.3
+tailwindcss                           1.8.10   →      2.0.4
 tslib                                  2.0.1   →      2.1.0
 zone.js                               0.10.3   →     0.11.4
 @angular-devkit/build-angular       0.1001.2   →   0.1102.4

From 55fc4b68f03684302d4d3b2fc41a8fcf98f2a82e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 13:18:16 +0200
Subject: [PATCH 105/171] fix: solve typo

---
 src/app/views/index/index.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 867452fa..68b2f485 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -14,9 +14,9 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
             class="text-coolGray-600"
             target="_blank"
           >
-            Tailwind CSS
+            Tailwind CSS.
           </a>
-          . It features multiple HTML elements and it comes with dynamic
+          It features multiple HTML elements and it comes with dynamic
           components for ReactJS, Vue and Angular.
         </p>
         <div class="mt-12">

From 86576c9515b6df897ebd6c6bb1861d455d151524 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:49:28 +0200
Subject: [PATCH 106/171] fix: solve typo

---
 src/app/views/index/index.component.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 68b2f485..48badece 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -7,8 +7,7 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
           Notus Angular - A beautiful extension for Tailwind CSS.
         </h2>
         <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
-          Notus Angular is Free and Open Source. It does not change or add any
-          CSS to the already one from
+          Notus Angular is Free and Open Source. It does not change any of the CSS from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
             class="text-coolGray-600"

From c9b1e7cc42599c6cec4e08d72c0566968b628ffd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:31 +0200
Subject: [PATCH 107/171] style: run prettier

---
 e2e/src/app.po.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
index 74b83442..d62dabbb 100644
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@@ -6,8 +6,8 @@ export class AppPage {
   }
 
   getTitleText() {
-    return element(by.css("app-root .content span")).getText() as Promise<
-      string
-    >;
+    return element(
+      by.css("app-root .content span")
+    ).getText() as Promise<string>;
   }
 }

From 9f0904c99ab77dbba5feddca23f8a15c064dfbdb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:34 +0200
Subject: [PATCH 108/171] style: run prettier

---
 .../cards/card-bar-chart/card-bar-chart.component.html      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
index 35750266..83940f01 100644
--- a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
+++ b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
@@ -7,15 +7,13 @@
         <h6 class="uppercase text-coolGray-400 mb-1 text-xs font-semibold">
           Performance
         </h6>
-        <h2 class="text-coolGray-700 text-xl font-semibold">
-          Total orders
-        </h2>
+        <h2 class="text-coolGray-700 text-xl font-semibold">Total orders</h2>
       </div>
     </div>
   </div>
   <div class="p-4 flex-auto">
     <!-- Chart -->
-    <div class="relative" style="height: 350px;">
+    <div class="relative" style="height: 350px">
       <canvas id="bar-chart"></canvas>
     </div>
   </div>

From 666a1ef5b58ae9097712884061644b7fac98da31 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:36 +0200
Subject: [PATCH 109/171] style: run prettier

---
 .../cards/card-line-chart/card-line-chart.component.html    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-line-chart/card-line-chart.component.html b/src/app/components/cards/card-line-chart/card-line-chart.component.html
index 3818a03a..9dd4437a 100644
--- a/src/app/components/cards/card-line-chart/card-line-chart.component.html
+++ b/src/app/components/cards/card-line-chart/card-line-chart.component.html
@@ -7,15 +7,13 @@
         <h6 class="uppercase text-coolGray-100 mb-1 text-xs font-semibold">
           Overview
         </h6>
-        <h2 class="text-white text-xl font-semibold">
-          Sales value
-        </h2>
+        <h2 class="text-white text-xl font-semibold">Sales value</h2>
       </div>
     </div>
   </div>
   <div class="p-4 flex-auto">
     <!-- Chart -->
-    <div class="relative" style="height: 350px;">
+    <div class="relative" style="height: 350px">
       <canvas id="line-chart"></canvas>
     </div>
   </div>

From 5201e83f26829c1500d78e1f403e5fe053c7186e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:38 +0200
Subject: [PATCH 110/171] style: run prettier

---
 .../cards/card-page-visits/card-page-visits.component.html    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index 2bac6f0b..65347da4 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -4,9 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-coolGray-700">
-          Page visits
-        </h3>
+        <h3 class="font-semibold text-base text-coolGray-700">Page visits</h3>
       </div>
       <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
         <button

From fc69ea7aed79161b5544cb158b499d11d65e10fa Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:40 +0200
Subject: [PATCH 111/171] style: run prettier

---
 .../components/cards/card-profile/card-profile.component.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/cards/card-profile/card-profile.component.html b/src/app/components/cards/card-profile/card-profile.component.html
index d069a064..b468a6af 100644
--- a/src/app/components/cards/card-profile/card-profile.component.html
+++ b/src/app/components/cards/card-profile/card-profile.component.html
@@ -42,7 +42,9 @@
       </div>
     </div>
     <div class="text-center mt-12">
-      <h3 class="text-xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2">
+      <h3
+        class="text-xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2"
+      >
         Jenna Stones
       </h3>
       <div

From a5a2cbf0e1473af227b4c6e3f0da8134e2dd2ea9 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:00:43 +0200
Subject: [PATCH 112/171] style: run prettier

---
 .../card-social-traffic.component.html                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index 63c535ae..63d17dd3 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -60,7 +60,7 @@ <h3 class="font-semibold text-base text-coolGray-700">
                   class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
                 >
                   <div
-                    style="width: 60%;"
+                    style="width: 60%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
                   ></div>
                 </div>
@@ -89,7 +89,7 @@ <h3 class="font-semibold text-base text-coolGray-700">
                   class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
                 >
                   <div
-                    style="width: 70%;"
+                    style="width: 70%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
                   ></div>
                 </div>
@@ -118,7 +118,7 @@ <h3 class="font-semibold text-base text-coolGray-700">
                   class="overflow-hidden h-2 text-xs flex rounded bg-purple-200"
                 >
                   <div
-                    style="width: 80%;"
+                    style="width: 80%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
                   ></div>
                 </div>
@@ -147,7 +147,7 @@ <h3 class="font-semibold text-base text-coolGray-700">
                   class="overflow-hidden h-2 text-xs flex rounded bg-blue-200"
                 >
                   <div
-                    style="width: 75%;"
+                    style="width: 75%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
                   ></div>
                 </div>
@@ -176,7 +176,7 @@ <h3 class="font-semibold text-base text-coolGray-700">
                   class="overflow-hidden h-2 text-xs flex rounded bg-orange-200"
                 >
                   <div
-                    style="width: 30%;"
+                    style="width: 30%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"
                   ></div>
                 </div>

From e9ec1278795fe12a1dee8f9e7291f102282b5b20 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:12 +0200
Subject: [PATCH 113/171] style: run prettier

---
 .../cards/card-table/card-table.component.html         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index b0be55d5..1f77e4ac 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -142,7 +142,7 @@
                   class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
                 >
                   <div
-                    style="width: 60%;"
+                    style="width: 60%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
                   ></div>
                 </div>
@@ -218,7 +218,7 @@
                   class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
                 >
                   <div
-                    style="width: 100%;"
+                    style="width: 100%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
                   ></div>
                 </div>
@@ -293,7 +293,7 @@
                   class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
                 >
                   <div
-                    style="width: 73%;"
+                    style="width: 73%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
                   ></div>
                 </div>
@@ -368,7 +368,7 @@
                   class="overflow-hidden h-2 text-xs flex rounded bg-teal-200"
                 >
                   <div
-                    style="width: 90%;"
+                    style="width: 90%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"
                   ></div>
                 </div>
@@ -444,7 +444,7 @@
                   class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
                 >
                   <div
-                    style="width: 100%;"
+                    style="width: 100%"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
                   ></div>
                 </div>

From 32b28e4ea60086bc71da16212913a4b1f0b8d25d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:14 +0200
Subject: [PATCH 114/171] style: run prettier

---
 src/app/components/footers/footer/footer.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index a728ccb0..dfe5479e 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -1,7 +1,7 @@
 <footer class="relative bg-coolGray-200 pt-8 pb-6">
   <div
     class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
-    style="transform: translateZ(0);"
+    style="transform: translateZ(0)"
   >
     <svg
       class="absolute bottom-0 overflow-hidden"

From b4c75976849ff16b85cfed720dfd656a204aae9c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:15 +0200
Subject: [PATCH 115/171] style: run prettier

---
 .../components/sidebar/sidebar.component.html    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index 19ab54ce..c832ed8c 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -17,12 +17,8 @@
       [routerLink]="['/']"
       class="md:block text-left md:pb-2 text-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
     >
-      <span class="block sm:hidden">
-        Tailwind Angular
-      </span>
-      <span class="hidden sm:block">
-        Notus Angular
-      </span>
+      <span class="block sm:hidden"> Tailwind Angular </span>
+      <span class="hidden sm:block"> Notus Angular </span>
     </a>
     <!-- User -->
     <ul class="md:hidden items-center flex flex-wrap list-none">
@@ -142,7 +138,9 @@
           >
             <i
               class="fas fa-table mr-2 text-sm"
-              [ngClass]="adminTables.isActive ? 'opacity-75' : 'text-coolGray-300'"
+              [ngClass]="
+                adminTables.isActive ? 'opacity-75' : 'text-coolGray-300'
+              "
             ></i>
             Tables
           </a>
@@ -162,7 +160,9 @@
           >
             <i
               class="fas fa-map-marked mr-2 text-sm"
-              [ngClass]="adminMaps.isActive ? 'opacity-75' : 'text-coolGray-300'"
+              [ngClass]="
+                adminMaps.isActive ? 'opacity-75' : 'text-coolGray-300'
+              "
             ></i>
             Maps
           </a>

From 8b9f8f424fc4f60132bafdbb7946906940708b70 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:16 +0200
Subject: [PATCH 116/171] style: run prettier

---
 src/app/layouts/auth/auth.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/auth/auth.component.html b/src/app/layouts/auth/auth.component.html
index 34d757b2..ac419b6d 100644
--- a/src/app/layouts/auth/auth.component.html
+++ b/src/app/layouts/auth/auth.component.html
@@ -4,7 +4,7 @@
     <section class="relative w-full h-full py-40 min-h-screen">
       <div
         class="absolute top-0 w-full h-full bg-coolGray-800 bg-no-repeat bg-full"
-        style="background-image: url('assets/img/register_bg_2.png');"
+        style="background-image: url('assets/img/register_bg_2.png')"
       ></div>
       <router-outlet></router-outlet>
       <app-footer-small [absolute]="true"></app-footer-small>

From c6117a32110faf7bf5ee6626fd5c4ad27601cf7f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:18 +0200
Subject: [PATCH 117/171] style: run prettier

---
 src/app/views/auth/login/login.component.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/views/auth/login/login.component.html b/src/app/views/auth/login/login.component.html
index 1c41d196..b13ce984 100644
--- a/src/app/views/auth/login/login.component.html
+++ b/src/app/views/auth/login/login.component.html
@@ -6,9 +6,7 @@
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-500 text-sm font-bold">
-              Sign in with
-            </h6>
+            <h6 class="text-coolGray-500 text-sm font-bold">Sign in with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button

From 25b056b93aff3c5837ef0b8d2ebdcfecd95489fb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:19 +0200
Subject: [PATCH 118/171] style: run prettier

---
 src/app/views/auth/register/register.component.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/views/auth/register/register.component.html b/src/app/views/auth/register/register.component.html
index 05a090cc..df6d3f3a 100644
--- a/src/app/views/auth/register/register.component.html
+++ b/src/app/views/auth/register/register.component.html
@@ -6,9 +6,7 @@
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-500 text-sm font-bold">
-              Sign up with
-            </h6>
+            <h6 class="text-coolGray-500 text-sm font-bold">Sign up with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button

From 3e4516b46cb37a21154d5b3b17e530b4aa8381d3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:21 +0200
Subject: [PATCH 119/171] style: run prettier

---
 src/app/views/index/index.component.html | 83 ++++++++++--------------
 1 file changed, 33 insertions(+), 50 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 48badece..7da893be 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -7,7 +7,8 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
           Notus Angular - A beautiful extension for Tailwind CSS.
         </h2>
         <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
-          Notus Angular is Free and Open Source. It does not change any of the CSS from
+          Notus Angular is Free and Open Source. It does not change any of the
+          CSS from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
             class="text-coolGray-600"
@@ -48,7 +49,7 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
 <section class="mt-48 md:mt-40 pb-40 relative bg-coolGray-100">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
-    style="transform: translateZ(0);"
+    style="transform: translateZ(0)"
   >
     <svg
       class="absolute bottom-0 overflow-hidden"
@@ -112,9 +113,7 @@ <h4 class="text-xl font-bold text-white">
                 >
                   <i class="fas fa-sitemap"></i>
                 </div>
-                <h6 class="text-xl mb-1 font-semibold">
-                  CSS Components
-                </h6>
+                <h6 class="text-xl mb-1 font-semibold">CSS Components</h6>
                 <p class="mb-4 text-coolGray-500">
                   Notus Angular comes with a huge number of Fully Coded CSS
                   components.
@@ -160,9 +159,7 @@ <h6 class="text-xl mb-1 font-semibold">Pages</h6>
                 >
                   <i class="fas fa-file-alt"></i>
                 </div>
-                <h6 class="text-xl mb-1 font-semibold">
-                  Documentation
-                </h6>
+                <h6 class="text-xl mb-1 font-semibold">Documentation</h6>
                 <p class="mb-4 text-coolGray-500">
                   Built by developers for developers. You will love how easy is
                   to to work with Notus Angular.
@@ -186,7 +183,9 @@ <h6 class="text-xl mb-1 font-semibold">
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           CSS Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+        >
           Every element that you need in a product comes built in as a
           component. All components fit perfectly with each other and can have
           different colours.
@@ -293,9 +292,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/svelte.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Svelte
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Svelte</p>
               </div>
             </a>
             <a
@@ -310,9 +307,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  ReactJS
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">ReactJS</p>
               </div>
             </a>
             <a
@@ -327,9 +322,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nextjs.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  NextJS
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">NextJS</p>
               </div>
             </a>
           </div>
@@ -344,9 +337,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/js.png"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  JavaScript
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">JavaScript</p>
               </div>
             </a>
             <a
@@ -359,9 +350,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Angular
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Angular</p>
               </div>
             </a>
             <a
@@ -376,9 +365,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Vue.js
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Vue.js</p>
               </div>
             </a>
           </div>
@@ -394,12 +381,16 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           Javascript Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+        >
           In order to create a great User Experience some components require
           JavaScript. In this way you can manipulate the elements on the page
           and give more options to your users.
         </p>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+        >
           We created a set of Components that are dynamic and come to help you.
         </p>
         <div class="block pb-6">
@@ -465,9 +456,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
           >
             <i class="fas fa-file-alt text-xl"></i>
           </div>
-          <h3 class="text-3xl font-semibold">
-            Complex Documentation
-          </h3>
+          <h3 class="text-3xl font-semibold">Complex Documentation</h3>
           <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
             This extension comes a lot of fully coded examples that help you get
             started faster. You can adjust the colors and also the programming
@@ -558,9 +547,7 @@ <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
       <div class="w-full lg:w-12/12 px-4 -mt-24">
         <div class="flex flex-wrap">
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Login Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Login Page</h5>
             <a [routerLink]="['/auth/login']">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -575,9 +562,7 @@ <h5 class="text-xl font-semibold pb-4 text-center">
           </div>
 
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Profile Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Profile Page</h5>
             <a [routerLink]="['/profile']">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -592,9 +577,7 @@ <h5 class="text-xl font-semibold pb-4 text-center">
           </div>
 
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Landing Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Landing Page</h5>
             <a [routerLink]="['/landing']">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -625,7 +608,9 @@ <h5 class="text-xl font-semibold pb-4 text-center">
         <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           Open Source
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-400">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-400"
+        >
           Since
           <a
             href="https://tailwindcss.com/?ref=creativetim"
@@ -638,7 +623,9 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           can give this version a try to feel the design and also test the
           quality of the code!
         </p>
-        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-400">
+        <p
+          class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-400"
+        >
           Get it free on Github and please help us spread the news with a Star!
         </p>
         <a
@@ -662,7 +649,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
 <section class="pb-16 bg-coolGray-200 relative pt-32">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
-    style="transform: translateZ(0);"
+    style="transform: translateZ(0)"
   >
     <svg
       class="absolute bottom-0 overflow-hidden"
@@ -686,13 +673,9 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
     >
       <div class="w-full text-center lg:w-8/12">
         <p class="text-4xl text-center">
-          <span role="img" aria-label="love">
-            😍
-          </span>
+          <span role="img" aria-label="love"> 😍 </span>
         </p>
-        <h3 class="font-semibold text-3xl">
-          Do you love this Starter Kit?
-        </h3>
+        <h3 class="font-semibold text-3xl">Do you love this Starter Kit?</h3>
         <p class="text-coolGray-500 text-lg leading-relaxed mt-4 mb-4">
           Cause if you do, it can be yours now. Hit the buttons below to
           navigate to get the Free version for your next project. Build a new

From cc188149c790eeb5cc2b6e95dfda5cf91a814a28 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:22 +0200
Subject: [PATCH 120/171] style: run prettier

---
 src/app/views/landing/landing.component.html | 34 ++++++++------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index ebd8c194..6a5a35b4 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -32,7 +32,7 @@ <h1 class="text-white font-semibold text-5xl">
     </div>
     <div
       class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-70-px"
-      style="transform: translateZ(0);"
+      style="transform: translateZ(0)"
     >
       <svg
         class="absolute bottom-0 overflow-hidden"
@@ -122,11 +122,15 @@ <h6 class="text-xl font-semibold">Verified Company</h6>
           <h3 class="text-3xl mb-2 font-semibold leading-normal">
             Working with us is a pleasure
           </h3>
-          <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600">
+          <p
+            class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+          >
             Don't let your uses guess by attaching tooltips and popoves to any
             element. Just make sure you enable them first via JavaScript.
           </p>
-          <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600">
+          <p
+            class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600"
+          >
             The kit comes with three pre-built pages to help you get started
             faster. You can change the text and images and you're good to go.
             Just make sure you enable them first via JavaScript.
@@ -157,9 +161,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
                   class="text-red-600 fill-current"
                 ></polygon>
               </svg>
-              <h4 class="text-xl font-bold text-white">
-                Top Notch Services
-              </h4>
+              <h4 class="text-xl font-bold text-white">Top Notch Services</h4>
               <p class="text-md font-light mt-2 text-white">
                 The Arctic Ocean freezes every winter and much of the sea-ice
                 then thaws every summer, and that process will continue whatever
@@ -175,7 +177,7 @@ <h4 class="text-xl font-bold text-white">
   <section class="relative py-20">
     <div
       class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
-      style="transform: translateZ(0);"
+      style="transform: translateZ(0)"
     >
       <svg
         class="absolute bottom-0 overflow-hidden"
@@ -242,9 +244,7 @@ <h4 class="text-coolGray-500">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-500">
-                      Amazing page examples
-                    </h4>
+                    <h4 class="text-coolGray-500">Amazing page examples</h4>
                   </div>
                 </div>
               </li>
@@ -429,7 +429,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
   <section class="pb-20 relative block bg-coolGray-800">
     <div
       class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
-      style="transform: translateZ(0);"
+      style="transform: translateZ(0)"
     >
       <svg
         class="absolute bottom-0 overflow-hidden"
@@ -450,9 +450,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
     <div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
       <div class="flex flex-wrap text-center justify-center">
         <div class="w-full lg:w-6/12 px-4">
-          <h2 class="text-4xl font-semibold text-white">
-            Build something
-          </h2>
+          <h2 class="text-4xl font-semibold text-white">Build something</h2>
           <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-400">
             Put the potentially record low maximum sea ice extent tihs year down
             to low ice. According to the National Oceanic and Atmospheric
@@ -495,9 +493,7 @@ <h5 class="text-xl mt-5 font-semibold text-white">
           >
             <i class="fas fa-lightbulb text-xl"></i>
           </div>
-          <h5 class="text-xl mt-5 font-semibold text-white">
-            Launch time
-          </h5>
+          <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
           <p class="mt-2 mb-4 text-coolGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
@@ -514,9 +510,7 @@ <h5 class="text-xl mt-5 font-semibold text-white">
             class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200"
           >
             <div class="flex-auto p-5 lg:p-10">
-              <h4 class="text-2xl font-semibold">
-                Want to work with us?
-              </h4>
+              <h4 class="text-2xl font-semibold">Want to work with us?</h4>
               <p class="leading-relaxed mt-1 mb-4 text-coolGray-500">
                 Complete this form and we will get back to you in 24 hours.
               </p>

From af2bbd6b821aed7cf0c9b5ed773cdc03989c5b20 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:23 +0200
Subject: [PATCH 121/171] style: run prettier

---
 src/app/views/profile/profile.component.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/views/profile/profile.component.html b/src/app/views/profile/profile.component.html
index 8c8788cc..41af49fb 100644
--- a/src/app/views/profile/profile.component.html
+++ b/src/app/views/profile/profile.component.html
@@ -14,7 +14,7 @@
     </div>
     <div
       class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-70-px"
-      style="transform: translateZ(0);"
+      style="transform: translateZ(0)"
     >
       <svg
         class="absolute bottom-0 overflow-hidden"
@@ -98,7 +98,9 @@
             <div
               class="text-sm leading-normal mt-0 mb-2 text-coolGray-400 font-bold uppercase"
             >
-              <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"></i>
+              <i
+                class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"
+              ></i>
               Los Angeles, California
             </div>
             <div class="mb-2 text-coolGray-600 mt-10">

From c8ee7dbd75979a4d5fe5c6de35fac742b6a4c8fe Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:01:25 +0200
Subject: [PATCH 122/171] style: run prettier

---
 tailwind.config.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index dd4db8a9..92a8bd07 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,14 +25,14 @@ module.exports = {
         "screen-75": "75vh",
       },
       fontSize: {
-        "55": "55rem",
+        55: "55rem",
       },
       opacity: {
-        "80": ".8",
+        80: ".8",
       },
       zIndex: {
-        "2": 2,
-        "3": 3,
+        2: 2,
+        3: 3,
       },
       inset: {
         "-100": "-100%",
@@ -72,7 +72,7 @@ module.exports = {
       },
       minWidth: {
         "140-px": "140px",
-        "48": "12rem",
+        48: "12rem",
       },
       backgroundSize: {
         full: "100%",
@@ -93,7 +93,9 @@ module.exports = {
     "visited",
     "disabled",
   ],
-  plugins: [require("@tailwindcss/forms"),plugin(function ({ addComponents, theme }) {
+  plugins: [
+    require("@tailwindcss/forms"),
+    plugin(function ({ addComponents, theme }) {
       const screens = theme("screens", {});
       addComponents([
         {
@@ -135,5 +137,6 @@ module.exports = {
           },
         },
       ]);
-    }),],
+    }),
+  ],
 };

From 11eebefeed1cae559899bf2d9e67d3567a210bcb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:09:49 +0200
Subject: [PATCH 123/171] refactor: compile tailwind

---
 src/assets/styles/tailwind.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index a9b53fa3..14d0fea7 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 

From ed5e6b8dc29b7e6ef72317a9071bdb5be560f715 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:03 +0200
Subject: [PATCH 124/171] fix: solve #4

---
 .../notification-dropdown.component.html      | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
index 1092344e..8cca0001 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
@@ -6,3 +6,35 @@
 >
   <i class="fas fa-bell"></i>
 </a>
+<div class="min-w-48 z-50" #popoverDropdownRef>
+  <div
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
+    [ngClass]="dropdownPopoverShow ? 'block' : 'hidden'"
+  >
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Another action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Something else here
+    </a>
+    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Seprated link
+    </a>
+  </div>
+</div>

From c3a2a5b66ab21f4882ca27ee307fadb85b65dab6 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:04 +0200
Subject: [PATCH 125/171] fix: solve #4

---
 .../notification-dropdown.component.ts        | 47 +++++--------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
index 05090073..5218c502 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.ts
@@ -1,51 +1,30 @@
-import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
-import Popper from "popper.js";
+import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
+import { createPopper } from "@popperjs/core";
 
 @Component({
   selector: "app-notification-dropdown",
   templateUrl: "./notification-dropdown.component.html",
 })
-export class NotificationDropdownComponent implements OnInit {
+export class NotificationDropdownComponent implements AfterViewInit {
   dropdownPopoverShow = false;
   @ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
-  popper = document.createElement("div");
-  ngOnInit() {
-    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-nowrap bg-transparent  text-coolGray-700">
-    Action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Another action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Something else here
-  </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Seprated link
-  </a>
-</div>`;
+  @ViewChild("popoverDropdownRef", { static: false })
+  popoverDropdownRef: ElementRef;
+  ngAfterViewInit() {
+    createPopper(
+      this.btnDropdownRef.nativeElement,
+      this.popoverDropdownRef.nativeElement,
+      {
+        placement: "bottom-start",
+      }
+    );
   }
   toggleDropdown(event) {
     event.preventDefault();
     if (this.dropdownPopoverShow) {
       this.dropdownPopoverShow = false;
-      this.destroyPopper();
     } else {
       this.dropdownPopoverShow = true;
-      this.createPoppper();
     }
   }
-  destroyPopper() {
-    this.popper.parentNode.removeChild(this.popper);
-  }
-  createPoppper() {
-    new Popper(this.btnDropdownRef.nativeElement, this.popper, {
-      placement: "bottom-end",
-    });
-    this.btnDropdownRef.nativeElement.parentNode.insertBefore(
-      this.popper,
-      this.btnDropdownRef.nativeElement.nextSibling
-    );
-  }
 }

From b262841fffef1724a29dd9b82648ab86e8f18eac Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:07 +0200
Subject: [PATCH 126/171] fix: solve #4

---
 .../table-dropdown.component.html             | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
index 96662ac2..e6fbcbb1 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
@@ -6,3 +6,35 @@
 >
   <i class="fas fa-ellipsis-v"></i>
 </a>
+<div class="min-w-48 z-50" #popoverDropdownRef>
+  <div
+    class="bg-white text-base float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
+    [ngClass]="dropdownPopoverShow ? 'block' : 'hidden'"
+  >
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Another action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Something else here
+    </a>
+    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Seprated link
+    </a>
+  </div>
+</div>

From 69c4022609702911c4c85310eb574496af268753 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:16 +0200
Subject: [PATCH 127/171] fix: solve #4

---
 .../table-dropdown.component.ts               | 48 +++++--------------
 1 file changed, 13 insertions(+), 35 deletions(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
index c17879dc..1e83d481 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.ts
@@ -1,52 +1,30 @@
-import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
-import Popper from "popper.js";
+import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
+import { createPopper } from "@popperjs/core";
 
 @Component({
   selector: "app-table-dropdown",
   templateUrl: "./table-dropdown.component.html",
 })
-export class TableDropdownComponent implements OnInit {
+export class TableDropdownComponent implements AfterViewInit {
   dropdownPopoverShow = false;
   @ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
-  popper = document.createElement("div");
-  ngOnInit() {
-    this.popper.style.zIndex = "1";
-    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-nowrap bg-transparent  text-coolGray-700">
-    Action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Another action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Something else here
-  </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Seprated link
-  </a>
-</div>`;
+  @ViewChild("popoverDropdownRef", { static: false })
+  popoverDropdownRef: ElementRef;
+  ngAfterViewInit() {
+    createPopper(
+      this.btnDropdownRef.nativeElement,
+      this.popoverDropdownRef.nativeElement,
+      {
+        placement: "bottom-start",
+      }
+    );
   }
   toggleDropdown(event) {
     event.preventDefault();
     if (this.dropdownPopoverShow) {
       this.dropdownPopoverShow = false;
-      this.destroyPopper();
     } else {
       this.dropdownPopoverShow = true;
-      this.createPoppper();
     }
   }
-  destroyPopper() {
-    this.popper.parentNode.removeChild(this.popper);
-  }
-  createPoppper() {
-    new Popper(this.btnDropdownRef.nativeElement, this.popper, {
-      placement: "bottom-end",
-    });
-    this.btnDropdownRef.nativeElement.parentNode.insertBefore(
-      this.popper,
-      this.btnDropdownRef.nativeElement.nextSibling
-    );
-  }
 }

From 6355d87865672050ad0cbe2140c12fe5ede63e3e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:19 +0200
Subject: [PATCH 128/171] fix: solve #4

---
 .../user-dropdown.component.html              | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
index aaf512ca..5bff96aa 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
@@ -16,3 +16,35 @@
     </span>
   </div>
 </a>
+<div class="min-w-48 z-50" #popoverDropdownRef>
+  <div
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1 min-w-48"
+    [ngClass]="dropdownPopoverShow ? 'block' : 'hidden'"
+  >
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Another action
+    </a>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Something else here
+    </a>
+    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <a
+      href="#pablo"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    >
+      Seprated link
+    </a>
+  </div>
+</div>

From 6a54970d3b5617ad982f7ec60d7d9ca518df3ccf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:27:21 +0200
Subject: [PATCH 129/171] fix: solve #4

---
 .../user-dropdown/user-dropdown.component.ts  | 47 +++++--------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
index 8f7aa4e7..c155442e 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.ts
@@ -1,51 +1,30 @@
-import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
-import Popper from "popper.js";
+import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
+import { createPopper } from "@popperjs/core";
 
 @Component({
   selector: "app-user-dropdown",
   templateUrl: "./user-dropdown.component.html",
 })
-export class UserDropdownComponent implements OnInit {
+export class UserDropdownComponent implements AfterViewInit {
   dropdownPopoverShow = false;
   @ViewChild("btnDropdownRef", { static: false }) btnDropdownRef: ElementRef;
-  popper = document.createElement("div");
-  ngOnInit() {
-    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-nowrap bg-transparent  text-coolGray-700">
-    Action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Another action
-  </a>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Something else here
-  </a>
-  <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
-  <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent  text-coolGray-700">
-    Seprated link
-  </a>
-</div>`;
+  @ViewChild("popoverDropdownRef", { static: false })
+  popoverDropdownRef: ElementRef;
+  ngAfterViewInit() {
+    createPopper(
+      this.btnDropdownRef.nativeElement,
+      this.popoverDropdownRef.nativeElement,
+      {
+        placement: "bottom-start",
+      }
+    );
   }
   toggleDropdown(event) {
     event.preventDefault();
     if (this.dropdownPopoverShow) {
       this.dropdownPopoverShow = false;
-      this.destroyPopper();
     } else {
       this.dropdownPopoverShow = true;
-      this.createPoppper();
     }
   }
-  destroyPopper() {
-    this.popper.parentNode.removeChild(this.popper);
-  }
-  createPoppper() {
-    new Popper(this.btnDropdownRef.nativeElement, this.popper, {
-      placement: "bottom-end",
-    });
-    this.btnDropdownRef.nativeElement.parentNode.insertBefore(
-      this.popper,
-      this.btnDropdownRef.nativeElement.nextSibling
-    );
-  }
 }

From 60041a5006553ffc3873b9ae7ab76fb9618e0a35 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 16:37:30 +0200
Subject: [PATCH 130/171] docs: add changes

Closes #4
---
 CHANGELOG.md | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96e3fc3e..553418bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,12 +16,24 @@
     - Then, you search in your whole project for `coolGray-800` and replace it with `coolGray-700`
     - Then, you search in your whole project for `coolGray-900` and replace it with `coolGray-800`
 - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`
+- https://github.com/creativetimofficial/notus-angular/issues/4
+- https://github.com/creativetimofficial/notus-js/issues/4
+- https://github.com/creativetimofficial/notus-js/pull/5
+- https://github.com/creativetimofficial/notus-js/pull/6
+- https://github.com/creativetimofficial/notus-nextjs/issues/6
+- https://github.com/creativetimofficial/notus-nextjs/issues/7
+- https://github.com/creativetimofficial/notus-nextjs/issues/8
+- https://github.com/creativetimofficial/notus-react/issues/3
+- https://github.com/creativetimofficial/notus-svelte/issues/3
+- https://github.com/creativetimofficial/notus-svelte/issues/6
+- https://github.com/creativetimofficial/vue-notus/pull/4/
 ### Major style changes
-
+- The upgrade of Tailwind CSS from version 1 to version 2, will cause multiple style changes, check them out on the official Tailwind CSS websites:
+  - https://blog.tailwindcss.com/tailwindcss-v2
+  - https://tailwindcss.com/
+  - https://tailwindcss.com/docs/upgrading-to-v2
 ### Deleted components
-
 ### Added components
-
 ### Deleted dependencies
 - `@tailwindcss/custom-forms`
 ### Added dependencies

From 65e733f6eb10e6ab4a158d0ed5994cde98f8e3e9 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:42:46 +0200
Subject: [PATCH 131/171] fix: solve broken color

---
 src/app/views/landing/landing.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index 6a5a35b4..9d88d9a2 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -115,7 +115,7 @@ <h6 class="text-xl font-semibold">Verified Company</h6>
       <div class="flex flex-wrap items-center mt-32">
         <div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
           <div
-            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-coolGray-50"
+            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
             <i class="fas fa-user-friends text-xl"></i>
           </div>

From a15e5427c3ebb4cc63ac424d741daa3159289c61 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:29 +0200
Subject: [PATCH 132/171] fix: solve broken colors

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 553418bc..b337b34b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,8 @@
     - Then, you search in your whole project for `coolGray-700` and replace it with `coolGray-600`
     - Then, you search in your whole project for `coolGray-800` and replace it with `coolGray-700`
     - Then, you search in your whole project for `coolGray-900` and replace it with `coolGray-800`
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}`
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}`
 - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`
 - https://github.com/creativetimofficial/notus-angular/issues/4
 - https://github.com/creativetimofficial/notus-js/issues/4

From 639175c2b4fac358d6a2b300494629d1739b10bf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:31 +0200
Subject: [PATCH 133/171] fix: solve broken colors

---
 .../cards/card-page-visits/card-page-visits.component.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index 65347da4..365d0400 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -63,7 +63,7 @@ <h3 class="font-semibold text-base text-coolGray-700">Page visits</h3>
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-up text-green-500 mr-4"></i>
+            <i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
             46,53%
           </td>
         </tr>
@@ -132,7 +132,7 @@ <h3 class="font-semibold text-base text-coolGray-700">Page visits</h3>
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-up text-green-500 mr-4"></i>
+            <i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
             50,87%
           </td>
         </tr>

From 7773711881dd73cdf82fe5d213390a053164a114 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:33 +0200
Subject: [PATCH 134/171] fix: solve broken colors

---
 .../card-social-traffic.component.html                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index 63d17dd3..6b9ae385 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -86,11 +86,11 @@ <h3 class="font-semibold text-base text-coolGray-700">
               <span class="mr-2">70%</span>
               <div class="relative w-full">
                 <div
-                  class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
+                  class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
                 >
                   <div
                     style="width: 70%"
-                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
+                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
                   ></div>
                 </div>
               </div>
@@ -144,11 +144,11 @@ <h3 class="font-semibold text-base text-coolGray-700">
               <span class="mr-2">75%</span>
               <div class="relative w-full">
                 <div
-                  class="overflow-hidden h-2 text-xs flex rounded bg-blue-200"
+                  class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200"
                 >
                   <div
                     style="width: 75%"
-                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
+                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
                   ></div>
                 </div>
               </div>

From f0fd9d7cab850a38fdf90b75c80f9f69aa91d78d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:34 +0200
Subject: [PATCH 135/171] fix: solve broken colors

---
 src/app/components/cards/card-stats/card-stats.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-stats/card-stats.component.ts b/src/app/components/cards/card-stats/card-stats.component.ts
index 0e9aed7f..ef9fbe95 100644
--- a/src/app/components/cards/card-stats/card-stats.component.ts
+++ b/src/app/components/cards/card-stats/card-stats.component.ts
@@ -51,9 +51,9 @@ export class CardStatsComponent implements OnInit {
   }
   set statPercentColor(statPercentColor: string) {
     this._statPercentColor =
-      statPercentColor === undefined ? "text-green-500" : statPercentColor;
+      statPercentColor === undefined ? "text-emerald-500" : statPercentColor;
   }
-  private _statPercentColor = "text-green-500";
+  private _statPercentColor = "text-emerald-500";
 
   @Input()
   get statDescripiron(): string {

From 74ae9d17d19d65e7744fc0458353670bfb7c87cf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:36 +0200
Subject: [PATCH 136/171] fix: solve broken colors

---
 .../cards/card-table/card-table.component.html       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index 1f77e4ac..12beee98 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -179,7 +179,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-green-500 mr-2"></i>
+            <i class="fas fa-circle text-emerald-500 mr-2"></i>
             completed
           </td>
           <td
@@ -215,11 +215,11 @@
               <span class="mr-2">100%</span>
               <div class="relative w-full">
                 <div
-                  class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
+                  class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
                 >
                   <div
                     style="width: 100%"
-                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
+                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
                   ></div>
                 </div>
               </div>
@@ -405,7 +405,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-green-500 mr-2"></i>
+            <i class="fas fa-circle text-emerald-500 mr-2"></i>
             completed
           </td>
           <td
@@ -441,11 +441,11 @@
               <span class="mr-2">100%</span>
               <div class="relative w-full">
                 <div
-                  class="overflow-hidden h-2 text-xs flex rounded bg-green-200"
+                  class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
                 >
                   <div
                     style="width: 100%"
-                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
+                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
                   ></div>
                 </div>
               </div>

From 931ee02a1ed0cea289653f63ec2bd4e775e749cc Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:38 +0200
Subject: [PATCH 137/171] fix: solve broken colors

---
 src/app/components/footers/footer/footer.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index dfe5479e..4380470e 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -27,13 +27,13 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
         </h5>
         <div class="mt-6 lg:mb-0 mb-6">
           <button
-            class="bg-white text-blue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
             <i class="fab fa-twitter"></i>
           </button>
           <button
-            class="bg-white text-blue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
             <i class="fab fa-facebook-square"></i>

From dab396edd37d64e3644a8987d6140015516fa942 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:40 +0200
Subject: [PATCH 138/171] fix: solve broken colors

---
 .../headers/header-stats/header-stats.component.html        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/headers/header-stats/header-stats.component.html b/src/app/components/headers/header-stats/header-stats.component.html
index 9959a21e..2fd4db6e 100644
--- a/src/app/components/headers/header-stats/header-stats.component.html
+++ b/src/app/components/headers/header-stats/header-stats.component.html
@@ -10,7 +10,7 @@
             statTitle="350,897"
             statArrow="up"
             statPercent="3.48"
-            statPercentColor="text-green-500"
+            statPercentColor="text-emerald-500"
             statDescripiron="Since last month"
             statIconName="far fa-chart-bar"
             statIconColor="bg-red-500"
@@ -46,10 +46,10 @@
             statTitle="49,65%"
             statArrow="up"
             statPercent="12"
-            statPercentColor="text-green-500"
+            statPercentColor="text-emerald-500"
             statDescripiron="Since last month"
             statIconName="fas fa-percent"
-            statIconColor="bg-green-500"
+            statIconColor="bg-emerald-500"
           ></app-card-stats>
         </div>
       </div>

From 227a906f998fc87eebad42e52e0b3b0be8159442 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:42 +0200
Subject: [PATCH 139/171] fix: solve broken colors

---
 src/app/views/index/index.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 7da893be..4552edb1 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -300,7 +300,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
               target="_blank"
             >
               <div
-                class="bg-blue-500 shadow-lg rounded-lg text-center p-8 mt-8"
+                class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8"
               >
                 <img
                   alt="..."
@@ -358,7 +358,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
               target="_blank"
             >
               <div
-                class="bg-green-500 shadow-lg rounded-lg text-center p-8 mt-8"
+                class="bg-emerald-500 shadow-lg rounded-lg text-center p-8 mt-8"
               >
                 <img
                   alt="..."

From 0bbfa71a2deaea117b437e46758663f7ce453e04 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:43 +0200
Subject: [PATCH 140/171] fix: solve broken colors

---
 src/app/views/landing/landing.component.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index 9d88d9a2..02b163f3 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -79,7 +79,7 @@ <h6 class="text-xl font-semibold">Awarded Agency</h6>
           >
             <div class="px-4 py-5 flex-auto">
               <div
-                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"
+                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-lightBlue-400"
               >
                 <i class="fas fa-retweet"></i>
               </div>
@@ -98,7 +98,7 @@ <h6 class="text-xl font-semibold">Free Revisions</h6>
           >
             <div class="px-4 py-5 flex-auto">
               <div
-                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
+                class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-emerald-400"
               >
                 <i class="fas fa-fingerprint"></i>
               </div>
@@ -296,13 +296,13 @@ <h5 class="text-xl font-bold">Ryan Tompson</h5>
               </p>
               <div class="mt-6">
                 <button
-                  class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-facebook-f"></i>
@@ -337,7 +337,7 @@ <h5 class="text-xl font-bold">Romina Hadid</h5>
                   <i class="fab fa-google"></i>
                 </button>
                 <button
-                  class="bg-blue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-facebook-f"></i>
@@ -366,7 +366,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
                   <i class="fab fa-google"></i>
                 </button>
                 <button
-                  class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-twitter"></i>
@@ -407,7 +407,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
                   <i class="fab fa-google"></i>
                 </button>
                 <button
-                  class="bg-blue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-twitter"></i>

From cc98fc0cc23fca666e81bdcaef78d354874be034 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:45 +0200
Subject: [PATCH 141/171] fix: solve broken colors

---
 src/assets/styles/tailwind.css | 40 +++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 14d0fea7..3a790509 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1242,24 +1242,24 @@ select {
   background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.bg-blue-200 {
+.bg-lightBlue-200 {
   --tw-bg-opacity: 1;
-  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
+  background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
+.bg-lightBlue-400 {
   --tw-bg-opacity: 1;
-  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
+  background-color: rgba(56, 189, 248, var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
+.bg-lightBlue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+  background-color: rgba(14, 165, 233, var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
+.bg-lightBlue-600 {
   --tw-bg-opacity: 1;
-  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
+  background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
 }
 
 .bg-teal-200 {
@@ -1272,19 +1272,19 @@ select {
   background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
+.bg-emerald-200 {
   --tw-bg-opacity: 1;
-  background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
+  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
+.bg-emerald-400 {
   --tw-bg-opacity: 1;
-  background-color: rgba(74, 222, 128, var(--tw-bg-opacity));
+  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
+.bg-emerald-500 {
   --tw-bg-opacity: 1;
-  background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
+  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
 }
 
 .bg-yellow-500 {
@@ -3146,14 +3146,14 @@ select {
   color: rgba(79, 70, 229, var(--tw-text-opacity));
 }
 
-.text-blue-400 {
+.text-lightBlue-400 {
   --tw-text-opacity: 1;
-  color: rgba(96, 165, 250, var(--tw-text-opacity));
+  color: rgba(56, 189, 248, var(--tw-text-opacity));
 }
 
-.text-blue-600 {
+.text-lightBlue-600 {
   --tw-text-opacity: 1;
-  color: rgba(37, 99, 235, var(--tw-text-opacity));
+  color: rgba(2, 132, 199, var(--tw-text-opacity));
 }
 
 .text-teal-500 {
@@ -3161,9 +3161,9 @@ select {
   color: rgba(20, 184, 166, var(--tw-text-opacity));
 }
 
-.text-green-500 {
+.text-emerald-500 {
   --tw-text-opacity: 1;
-  color: rgba(34, 197, 94, var(--tw-text-opacity));
+  color: rgba(16, 185, 129, var(--tw-text-opacity));
 }
 
 .text-orange-500 {

From 3b91a5d0fb20b510f897425c86bfe30155821e46 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:04:56 +0200
Subject: [PATCH 142/171] refactor: change coolGray with blueGray

---
 CHANGELOG.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b337b34b..9e7290d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,20 +1,20 @@
 # Change Log
 
-## [1.1.0] date
+## [1.1.0] 2021-03-19
 ### Bug fixing
 - Rename `master` branch to `main`
 - To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2
-  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-coolGray-{number}`
-  - After that, we've changed `{type}-coolGray-{number}` to `{type}-coolGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`)
-    - You can achieve this, by search in your whole project for `coolGray-100` and replace it with `coolGray-50`
-    - Then, you search in your whole project for `coolGray-200` and replace it with `coolGray-100`
-    - Then, you search in your whole project for `coolGray-300` and replace it with `coolGray-200`
-    - Then, you search in your whole project for `coolGray-400` and replace it with `coolGray-300`
-    - Then, you search in your whole project for `coolGray-500` and replace it with `coolGray-400`
-    - Then, you search in your whole project for `coolGray-600` and replace it with `coolGray-500`
-    - Then, you search in your whole project for `coolGray-700` and replace it with `coolGray-600`
-    - Then, you search in your whole project for `coolGray-800` and replace it with `coolGray-700`
-    - Then, you search in your whole project for `coolGray-900` and replace it with `coolGray-800`
+  - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-blueGray-{number}`
+  - After that, we've changed `{type}-blueGray-{number}` to `{type}-blueGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`)
+    - You can achieve this, by search in your whole project for `blueGray-100` and replace it with `blueGray-50`
+    - Then, you search in your whole project for `blueGray-200` and replace it with `blueGray-100`
+    - Then, you search in your whole project for `blueGray-300` and replace it with `blueGray-200`
+    - Then, you search in your whole project for `blueGray-400` and replace it with `blueGray-300`
+    - Then, you search in your whole project for `blueGray-500` and replace it with `blueGray-400`
+    - Then, you search in your whole project for `blueGray-600` and replace it with `blueGray-500`
+    - Then, you search in your whole project for `blueGray-700` and replace it with `blueGray-600`
+    - Then, you search in your whole project for `blueGray-800` and replace it with `blueGray-700`
+    - Then, you search in your whole project for `blueGray-900` and replace it with `blueGray-800`
   - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}`
   - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}`
 - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`

From 6f870029f4d10b9df0085721de057aa5321efec3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:04:58 +0200
Subject: [PATCH 143/171] refactor: change coolGray with blueGray

---
 .../cards/card-bar-chart/card-bar-chart.component.html        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
index 83940f01..57e4d59a 100644
--- a/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
+++ b/src/app/components/cards/card-bar-chart/card-bar-chart.component.html
@@ -4,10 +4,10 @@
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-coolGray-400 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
           Performance
         </h6>
-        <h2 class="text-coolGray-700 text-xl font-semibold">Total orders</h2>
+        <h2 class="text-blueGray-700 text-xl font-semibold">Total orders</h2>
       </div>
     </div>
   </div>

From 02a91f4c849d2449b250b1f24c5282952c16847b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:04:59 +0200
Subject: [PATCH 144/171] refactor: change coolGray with blueGray

---
 .../cards/card-line-chart/card-line-chart.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/cards/card-line-chart/card-line-chart.component.html b/src/app/components/cards/card-line-chart/card-line-chart.component.html
index 9dd4437a..3a9b8492 100644
--- a/src/app/components/cards/card-line-chart/card-line-chart.component.html
+++ b/src/app/components/cards/card-line-chart/card-line-chart.component.html
@@ -1,10 +1,10 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-coolGray-700"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
 >
   <div class="rounded-t mb-0 px-4 py-3 bg-transparent">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full max-w-full flex-grow flex-1">
-        <h6 class="uppercase text-coolGray-100 mb-1 text-xs font-semibold">
+        <h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
           Overview
         </h6>
         <h2 class="text-white text-xl font-semibold">Sales value</h2>

From c26348e64d023cbb6e996ebcd7e86b49bee0a10a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:00 +0200
Subject: [PATCH 145/171] refactor: change coolGray with blueGray

---
 .../card-page-visits/card-page-visits.component.html   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/cards/card-page-visits/card-page-visits.component.html b/src/app/components/cards/card-page-visits/card-page-visits.component.html
index 365d0400..2fe48c95 100644
--- a/src/app/components/cards/card-page-visits/card-page-visits.component.html
+++ b/src/app/components/cards/card-page-visits/card-page-visits.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-coolGray-700">Page visits</h3>
+        <h3 class="font-semibold text-base text-blueGray-700">Page visits</h3>
       </div>
       <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
         <button
@@ -22,22 +22,22 @@ <h3 class="font-semibold text-base text-coolGray-700">Page visits</h3>
       <thead>
         <tr>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Page name
           </th>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Unique users
           </th>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Bounce rate
           </th>

From f3b6aabbc63299925e2a437e26b44250bcad134a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:01 +0200
Subject: [PATCH 146/171] refactor: change coolGray with blueGray

---
 .../card-profile/card-profile.component.html  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/components/cards/card-profile/card-profile.component.html b/src/app/components/cards/card-profile/card-profile.component.html
index b468a6af..3d5ce93f 100644
--- a/src/app/components/cards/card-profile/card-profile.component.html
+++ b/src/app/components/cards/card-profile/card-profile.component.html
@@ -16,56 +16,56 @@
         <div class="flex justify-center py-4 lg:pt-4 pt-8">
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+              class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
             >
               22
             </span>
-            <span class="text-sm text-coolGray-400">Friends</span>
+            <span class="text-sm text-blueGray-400">Friends</span>
           </div>
           <div class="mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+              class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
             >
               10
             </span>
-            <span class="text-sm text-coolGray-400">Photos</span>
+            <span class="text-sm text-blueGray-400">Photos</span>
           </div>
           <div class="lg:mr-4 p-3 text-center">
             <span
-              class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+              class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
             >
               89
             </span>
-            <span class="text-sm text-coolGray-400">Comments</span>
+            <span class="text-sm text-blueGray-400">Comments</span>
           </div>
         </div>
       </div>
     </div>
     <div class="text-center mt-12">
       <h3
-        class="text-xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2"
+        class="text-xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2"
       >
         Jenna Stones
       </h3>
       <div
-        class="text-sm leading-normal mt-0 mb-2 text-coolGray-400 font-bold uppercase"
+        class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
       >
-        <i class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"></i>
+        <i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
         Los Angeles, California
       </div>
-      <div class="mb-2 text-coolGray-600 mt-10">
-        <i class="fas fa-briefcase mr-2 text-lg text-coolGray-400"></i>
+      <div class="mb-2 text-blueGray-600 mt-10">
+        <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
         Solution Manager - Creative Tim Officer
       </div>
-      <div class="mb-2 text-coolGray-600">
-        <i class="fas fa-university mr-2 text-lg text-coolGray-400"></i>
+      <div class="mb-2 text-blueGray-600">
+        <i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
         University of Computer Science
       </div>
     </div>
-    <div class="mt-10 py-10 border-t border-coolGray-200 text-center">
+    <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
       <div class="flex flex-wrap justify-center">
         <div class="w-full lg:w-9/12 px-4">
-          <p class="mb-4 text-lg leading-relaxed text-coolGray-700">
+          <p class="mb-4 text-lg leading-relaxed text-blueGray-700">
             An artist of considerable range, Jenna the name taken by
             Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and
             records all of his own music, giving it a warm, intimate feel with a

From f9f6cd9bb1596d2cabed376c0f011e28487c4d0f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:03 +0200
Subject: [PATCH 147/171] refactor: change coolGray with blueGray

---
 .../card-settings.component.html              | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/app/components/cards/card-settings/card-settings.component.html b/src/app/components/cards/card-settings/card-settings.component.html
index 9b290e52..0e55fc13 100644
--- a/src/app/components/cards/card-settings/card-settings.component.html
+++ b/src/app/components/cards/card-settings/card-settings.component.html
@@ -1,9 +1,9 @@
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-100 border-0"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
 >
   <div class="rounded-t bg-white mb-0 px-6 py-6">
     <div class="text-center flex justify-between">
-      <h6 class="text-coolGray-700 text-xl font-bold">My account</h6>
+      <h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
       <button
         class="bg-red-600 text-white active:bg-red-700 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
         type="button"
@@ -14,21 +14,21 @@ <h6 class="text-coolGray-700 text-xl font-bold">My account</h6>
   </div>
   <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
     <form>
-      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         User Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Username
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="lucky.jesse"
             />
           </div>
@@ -36,14 +36,14 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Email address
             </label>
             <input
               type="email"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="jesse@example.com"
             />
           </div>
@@ -51,14 +51,14 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               First Name
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Lucky"
             />
           </div>
@@ -66,37 +66,37 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-6/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Last Name
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Jesse"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-coolGray-300" />
+      <hr class="mt-6 border-b-1 border-blueGray-300" />
 
-      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         Contact Information
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Address
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
             />
           </div>
@@ -104,14 +104,14 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               City
             </label>
             <input
               type="email"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="New York"
             />
           </div>
@@ -119,14 +119,14 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Country
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="United States"
             />
           </div>
@@ -134,37 +134,37 @@ <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         <div class="w-full lg:w-4/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               Postal Code
             </label>
             <input
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               value="Postal Code"
             />
           </div>
         </div>
       </div>
 
-      <hr class="mt-6 border-b-1 border-coolGray-300" />
+      <hr class="mt-6 border-b-1 border-blueGray-300" />
 
-      <h6 class="text-coolGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
         About Me
       </h6>
       <div class="flex flex-wrap">
         <div class="w-full lg:w-12/12 px-4">
           <div class="relative w-full mb-3">
             <label
-              class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               htmlFor="grid-password"
             >
               About me
             </label>
             <textarea
               type="text"
-              class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+              class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
               rows="4"
             >
                   A beautiful UI Kit and Admin for Angular & Tailwind CSS. It is Free

From 73e7a9fcd947d47ee56555fce256fd832eb38b8c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:04 +0200
Subject: [PATCH 148/171] refactor: change coolGray with blueGray

---
 .../card-social-traffic.component.html                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
index 6b9ae385..6d4ceda6 100644
--- a/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
+++ b/src/app/components/cards/card-social-traffic/card-social-traffic.component.html
@@ -4,7 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-coolGray-700">
+        <h3 class="font-semibold text-base text-blueGray-700">
           Social traffic
         </h3>
       </div>
@@ -24,17 +24,17 @@ <h3 class="font-semibold text-base text-coolGray-700">
       <thead class="thead-light">
         <tr>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Referral
           </th>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
           >
             Visitors
           </th>
           <th
-            class="px-6 bg-coolGray-50 text-coolGray-500 align-middle border border-solid border-coolGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
+            class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
           ></th>
         </tr>
       </thead>

From 6de2c0ece41b0687e4dd4e02cc3caaecd6f701ee Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:05 +0200
Subject: [PATCH 149/171] refactor: change coolGray with blueGray

---
 .../components/cards/card-stats/card-stats.component.html   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/cards/card-stats/card-stats.component.html b/src/app/components/cards/card-stats/card-stats.component.html
index 5b22dbdb..04255560 100644
--- a/src/app/components/cards/card-stats/card-stats.component.html
+++ b/src/app/components/cards/card-stats/card-stats.component.html
@@ -4,10 +4,10 @@
   <div class="flex-auto p-4">
     <div class="flex flex-wrap">
       <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
-        <h5 class="text-coolGray-400 uppercase font-bold text-xs">
+        <h5 class="text-blueGray-400 uppercase font-bold text-xs">
           {{ statSubtitle }}
         </h5>
-        <span class="font-semibold text-xl text-coolGray-700">
+        <span class="font-semibold text-xl text-blueGray-700">
           {{ statTitle }}
         </span>
       </div>
@@ -20,7 +20,7 @@ <h5 class="text-coolGray-400 uppercase font-bold text-xs">
         </div>
       </div>
     </div>
-    <p class="text-sm text-coolGray-400 mt-4">
+    <p class="text-sm text-blueGray-400 mt-4">
       <span class="mr-2" [ngClass]="statPercentColor">
         <i
           [ngClass]="

From 5b98e59aed170dc0c082d0efca45aba7ca5fb8c4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:07 +0200
Subject: [PATCH 150/171] refactor: change coolGray with blueGray

---
 .../card-table/card-table.component.html      | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/app/components/cards/card-table/card-table.component.html b/src/app/components/cards/card-table/card-table.component.html
index 12beee98..1c7ce805 100644
--- a/src/app/components/cards/card-table/card-table.component.html
+++ b/src/app/components/cards/card-table/card-table.component.html
@@ -7,7 +7,7 @@
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
         <h3
           class="font-semibold text-lg"
-          [ngClass]="color === 'light' ? 'text-coolGray-700' : 'text-white'"
+          [ngClass]="color === 'light' ? 'text-blueGray-700' : 'text-white'"
         >
           Card Tables
         </h3>
@@ -23,7 +23,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -33,7 +33,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -43,7 +43,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -53,7 +53,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -63,7 +63,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           >
@@ -73,7 +73,7 @@
             class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
             [ngClass]="
               color === 'light'
-                ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                 : 'bg-red-800 text-red-300 border-red-700'
             "
           ></th>
@@ -91,7 +91,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-blueGray-600' : 'text-white'"
             >
               Argon Design System
             </span>
@@ -113,22 +113,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -166,7 +166,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-blueGray-600' : 'text-white'"
             >
               Angular Now UI Kit PRO
             </span>
@@ -189,22 +189,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -242,7 +242,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-blueGray-600' : 'text-white'"
             >
               Black Dashboard Sketch
             </span>
@@ -264,22 +264,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -317,7 +317,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-blueGray-600' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -339,22 +339,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
             </div>
           </td>
@@ -392,7 +392,7 @@
             />
             <span
               class="ml-3 font-bold"
-              [ngClass]="color === 'light' ? 'text-coolGray-600' : 'text-white'"
+              [ngClass]="color === 'light' ? 'text-blueGray-600' : 'text-white'"
             >
               React Material Dashboard
             </span>
@@ -415,22 +415,22 @@
               <img
                 src="assets/img/team-1-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
                 src="assets/img/team-2-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-3-800x800.jpg"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
                 src="assets/img/team-4-470x470.png"
                 alt="..."
-                class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
+                class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
             </div>
           </td>

From 99845a0402fefa5fa4f8a5938b243df49832d121 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:08 +0200
Subject: [PATCH 151/171] refactor: change coolGray with blueGray

---
 .../index-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
index 991aa2aa..df679b16 100644
--- a/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
+++ b/src/app/components/dropdowns/index-dropdown/index-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+  class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Landing
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Profile
   </a>

From 3ad5dfd86fcb97d3c6b3806edbe509c2e57d8455 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:09 +0200
Subject: [PATCH 152/171] refactor: change coolGray with blueGray

---
 .../notification-dropdown.component.html             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
index 8cca0001..489315b6 100644
--- a/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
+++ b/src/app/components/dropdowns/notification-dropdown/notification-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-coolGray-500 block py-1 px-3"
+  class="text-blueGray-500 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -13,26 +13,26 @@
   >
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
     </a>
-    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <div class="h-0 my-2 border border-solid border-blueGray-100"></div>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Seprated link
     </a>

From 0cd6de52868230d3d67b4b903ba0045b9a842a9d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:10 +0200
Subject: [PATCH 153/171] refactor: change coolGray with blueGray

---
 .../pages-dropdown.component.html             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
index d18f5e0f..ff497461 100644
--- a/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
+++ b/src/app/components/dropdowns/pages-dropdown/pages-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+  class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -12,67 +12,67 @@
   #popoverDropdownRef
 >
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     Admin Layout
   </span>
   <a
     [routerLink]="['/admin/dashboard']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Dashboard
   </a>
   <a
     [routerLink]="['/admin/settings']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Settings
   </a>
   <a
     [routerLink]="['/admin/tables']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Tables
   </a>
   <a
     [routerLink]="['/admin/maps']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Maps
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     Auth Layout
   </span>
   <a
     [routerLink]="['/auth/login']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Login
   </a>
   <a
     [routerLink]="['/auth/register']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Register
   </a>
-  <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100"></div>
+  <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100"></div>
   <span
-    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-coolGray-400"
+    class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
   >
     No Layout
   </span>
   <a
     [routerLink]="['/landing']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Landing
   </a>
   <a
     [routerLink]="['/profile']"
-    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+    class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
   >
     Profile
   </a>

From 30bc2a2687e1896e0649b3c13bc85e8203fa9f35 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:12 +0200
Subject: [PATCH 154/171] refactor: change coolGray with blueGray

---
 .../table-dropdown/table-dropdown.component.html     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
index e6fbcbb1..8e8d2469 100644
--- a/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
+++ b/src/app/components/dropdowns/table-dropdown/table-dropdown.component.html
@@ -1,5 +1,5 @@
 <a
-  class="text-coolGray-500 block py-1 px-3"
+  class="text-blueGray-500 block py-1 px-3"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
@@ -13,26 +13,26 @@
   >
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
     </a>
-    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <div class="h-0 my-2 border border-solid border-blueGray-100"></div>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Seprated link
     </a>

From 1bc9c0ac2eb49629822d56ff8aed779d8e6f9136 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:13 +0200
Subject: [PATCH 155/171] refactor: change coolGray with blueGray

---
 .../user-dropdown/user-dropdown.component.html     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
index 5bff96aa..056ba9c6 100644
--- a/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
+++ b/src/app/components/dropdowns/user-dropdown/user-dropdown.component.html
@@ -1,12 +1,12 @@
 <a
-  class="text-coolGray-500 block"
+  class="text-blueGray-500 block"
   href="#pablo"
   (click)="toggleDropdown($event)"
   #btnDropdownRef
 >
   <div class="items-center flex">
     <span
-      class="w-12 h-12 text-sm text-white bg-coolGray-200 inline-flex items-center justify-center rounded-full"
+      class="w-12 h-12 text-sm text-white bg-blueGray-200 inline-flex items-center justify-center rounded-full"
     >
       <img
         alt="..."
@@ -23,26 +23,26 @@
   >
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
     </a>
-    <div class="h-0 my-2 border border-solid border-coolGray-100"></div>
+    <div class="h-0 my-2 border border-solid border-blueGray-100"></div>
     <a
       href="#pablo"
-      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
+      class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Seprated link
     </a>

From d13f6b39ebb0bc70e493fd493db906067527f5cc Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:14 +0200
Subject: [PATCH 156/171] refactor: change coolGray with blueGray

---
 .../footer-admin/footer-admin.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-admin/footer-admin.component.html b/src/app/components/footers/footer-admin/footer-admin.component.html
index e628d567..4b873136 100644
--- a/src/app/components/footers/footer-admin/footer-admin.component.html
+++ b/src/app/components/footers/footer-admin/footer-admin.component.html
@@ -1,15 +1,15 @@
 <footer class="block py-4">
   <div class="container mx-auto px-4">
-    <hr class="mb-4 border-b-1 border-coolGray-200" />
+    <hr class="mb-4 border-b-1 border-blueGray-200" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
-          class="text-sm text-coolGray-500 font-semibold py-1 text-center md:text-left"
+          class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left"
         >
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-admin"
-            class="text-coolGray-500 hover:text-coolGray-700 text-sm font-semibold py-1"
+            class="text-blueGray-500 hover:text-blueGray-700 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -20,7 +20,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-admin"
-              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
+              class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -28,7 +28,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-admin"
-              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
+              class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -36,7 +36,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-admin"
-              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
+              class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -44,7 +44,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-coolGray-600 hover:text-coolGray-800 text-sm font-semibold block py-1 px-3"
+              class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From d3a969b582849f3f118d81dbf34af9ad3d210378 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:16 +0200
Subject: [PATCH 157/171] refactor: change coolGray with blueGray

---
 .../footer-small/footer-small.component.html       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/footers/footer-small/footer-small.component.html b/src/app/components/footers/footer-small/footer-small.component.html
index 70328ed6..dc616803 100644
--- a/src/app/components/footers/footer-small/footer-small.component.html
+++ b/src/app/components/footers/footer-small/footer-small.component.html
@@ -1,9 +1,9 @@
 <footer
   class="pb-6"
-  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-coolGray-800' : 'relative'"
+  [ngClass]="absolute ? 'absolute w-full bottom-0 bg-blueGray-800' : 'relative'"
 >
   <div class="container mx-auto px-4">
-    <hr class="mb-6 border-b-1 border-coolGray-600" />
+    <hr class="mb-6 border-b-1 border-blueGray-600" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4">
         <div
@@ -12,7 +12,7 @@
           Copyright © {{ date }}
           <a
             href="https://www.creative-tim.com?ref=na-footer-small"
-            class="text-white hover:text-coolGray-300 text-sm font-semibold py-1"
+            class="text-white hover:text-blueGray-300 text-sm font-semibold py-1"
           >
             Creative Tim
           </a>
@@ -23,7 +23,7 @@
           <li>
             <a
               href="https://www.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
             >
               Creative Tim
             </a>
@@ -31,7 +31,7 @@
           <li>
             <a
               href="https://www.creative-tim.com/presentation?ref=na-footer-small"
-              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
             >
               About Us
             </a>
@@ -39,7 +39,7 @@
           <li>
             <a
               href="http://blog.creative-tim.com?ref=na-footer-small"
-              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
             >
               Blog
             </a>
@@ -47,7 +47,7 @@
           <li>
             <a
               href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
-              class="text-white hover:text-coolGray-300 text-sm font-semibold block py-1 px-3"
+              class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
             >
               MIT License
             </a>

From 1656439bd56556393ef961992b0644627a9c3922 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:17 +0200
Subject: [PATCH 158/171] refactor: change coolGray with blueGray

---
 .../footers/footer/footer.component.html      | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/components/footers/footer/footer.component.html b/src/app/components/footers/footer/footer.component.html
index 4380470e..d8b6221a 100644
--- a/src/app/components/footers/footer/footer.component.html
+++ b/src/app/components/footers/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="relative bg-coolGray-200 pt-8 pb-6">
+<footer class="relative bg-blueGray-200 pt-8 pb-6">
   <div
     class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
     style="transform: translateZ(0)"
@@ -13,7 +13,7 @@
       y="0"
     >
       <polygon
-        class="text-coolGray-200 fill-current"
+        class="text-blueGray-200 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -22,7 +22,7 @@
     <div class="flex flex-wrap text-center lg:text-left">
       <div class="w-full lg:w-6/12 px-4">
         <h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
-        <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
+        <h5 class="text-lg mt-0 mb-2 text-blueGray-600">
           Find us on any of these platforms, we respond 1-2 business days.
         </h5>
         <div class="mt-6 lg:mb-0 mb-6">
@@ -45,7 +45,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
             <i class="fab fa-dribbble"></i>
           </button>
           <button
-            class="bg-white text-coolGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
             <i class="fab fa-github"></i>
@@ -56,14 +56,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
         <div class="flex flex-wrap items-top mb-6">
           <div class="w-full lg:w-4/12 px-4 ml-auto">
             <span
-              class="block uppercase text-coolGray-500 text-sm font-semibold mb-2"
+              class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
             >
               Useful Links
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/presentation?ref=na-footer"
                 >
                   About Us
@@ -71,7 +71,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://blog.creative-tim.com?ref=na-footer"
                 >
                   Blog
@@ -79,7 +79,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.github.com/creativetimofficial?ref=na-footer"
                 >
                   Github
@@ -87,7 +87,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://www.creative-tim.com/bootstrap-themes/free?ref=na-footer"
                 >
                   Free Products
@@ -97,14 +97,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
           </div>
           <div class="w-full lg:w-4/12 px-4">
             <span
-              class="block uppercase text-coolGray-500 text-sm font-semibold mb-2"
+              class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
             >
               Other Resources
             </span>
             <ul class="list-unstyled">
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://github.com/creativetimofficial/notus-angular/blob/main/LICENSE.md?ref=creativetim"
                 >
                   MIT License
@@ -112,7 +112,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/terms?ref=na-footer"
                 >
                   Terms & Conditions
@@ -120,7 +120,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/privacy?ref=na-footer"
                 >
                   Privacy Policy
@@ -128,7 +128,7 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
               </li>
               <li>
                 <a
-                  class="text-coolGray-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
+                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
                   href="https://creative-tim.com/contact-us?ref=na-footer"
                 >
                   Contact Us
@@ -139,14 +139,14 @@ <h5 class="text-lg mt-0 mb-2 text-coolGray-600">
         </div>
       </div>
     </div>
-    <hr class="my-6 border-coolGray-300" />
+    <hr class="my-6 border-blueGray-300" />
     <div class="flex flex-wrap items-center md:justify-between justify-center">
       <div class="w-full md:w-4/12 px-4 mx-auto text-center">
-        <div class="text-sm text-coolGray-500 font-semibold py-1">
+        <div class="text-sm text-blueGray-500 font-semibold py-1">
           Copyright © {{ date }} Notus Angular by
           <a
             href="https://www.creative-tim.com?ref=na-footer"
-            class="text-coolGray-500 hover:text-coolGray-800"
+            class="text-blueGray-500 hover:text-blueGray-800"
           >
             Creative Tim
           </a>

From 3807b085c3eaef3e9f85ceef2ed4fd0e68882b11 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:18 +0200
Subject: [PATCH 159/171] refactor: change coolGray with blueGray

---
 .../navbars/admin-navbar/admin-navbar.component.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/navbars/admin-navbar/admin-navbar.component.html b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
index f6714f0c..71ac6aff 100644
--- a/src/app/components/navbars/admin-navbar/admin-navbar.component.html
+++ b/src/app/components/navbars/admin-navbar/admin-navbar.component.html
@@ -17,13 +17,13 @@
     >
       <div class="relative flex w-full flex-wrap items-stretch">
         <span
-          class="z-10 h-full leading-snug font-normal absolute text-center text-coolGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
+          class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 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="Search here..."
-          class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
+          class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
         />
       </div>
     </form>

From 911451944e81b7c410384e7fe2fc5616ac12ec5c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:19 +0200
Subject: [PATCH 160/171] refactor: change coolGray with blueGray

---
 .../auth-navbar/auth-navbar.component.html     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navbars/auth-navbar/auth-navbar.component.html b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
index e028e4bb..11775778 100644
--- a/src/app/components/navbars/auth-navbar/auth-navbar.component.html
+++ b/src/app/components/navbars/auth-navbar/auth-navbar.component.html
@@ -29,11 +29,11 @@
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-auth-navbar"
           >
             <i
-              class="lg:text-coolGray-200 text-coolGray-400 far fa-file-alt text-lg leading-lg mr-2"
+              class="lg:text-blueGray-200 text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -45,12 +45,12 @@
         </li>
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-200 text-coolGray-400 fab fa-facebook text-lg leading-lg"
+              class="lg:text-blueGray-200 text-blueGray-400 fab fa-facebook text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
@@ -58,12 +58,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-200 text-coolGray-400 fab fa-twitter text-lg leading-lg"
+              class="lg:text-blueGray-200 text-blueGray-400 fab fa-twitter text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
@@ -71,12 +71,12 @@
 
         <li class="flex items-center">
           <a
-            class="lg:text-white lg:hover:text-coolGray-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
+            class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-auth-navbar"
             target="_blank"
           >
             <i
-              class="lg:text-coolGray-200 text-coolGray-400 fab fa-github text-lg leading-lg"
+              class="lg:text-blueGray-200 text-blueGray-400 fab fa-github text-lg leading-lg"
             ></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
@@ -84,7 +84,7 @@
 
         <li class="flex items-center">
           <button
-            class="bg-white text-coolGray-700 active:bg-coolGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
+            class="bg-white text-blueGray-700 active:bg-blueGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
             type="button"
           >
             <i class="fas fa-arrow-alt-circle-down"></i> Download

From 67e3dd6e8a05f0bbbc11d065e02045fa290f66d8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:21 +0200
Subject: [PATCH 161/171] refactor: change coolGray with blueGray

---
 .../index-navbar/index-navbar.component.html   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navbars/index-navbar/index-navbar.component.html b/src/app/components/navbars/index-navbar/index-navbar.component.html
index cba05014..3d9e8a2d 100644
--- a/src/app/components/navbars/index-navbar/index-navbar.component.html
+++ b/src/app/components/navbars/index-navbar/index-navbar.component.html
@@ -9,7 +9,7 @@
     >
       <a
         [routerLink]="['/']"
-        class="text-coolGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
+        class="text-blueGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
         href="#pablo"
       >
         Notus Angular
@@ -30,11 +30,11 @@
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus?ref=na-index-navbar"
           >
             <i
-              class="text-coolGray-400 far fa-file-alt text-lg leading-lg mr-2"
+              class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"
             ></i>
             Docs
           </a>
@@ -46,33 +46,33 @@
         </li>
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F"
             target="_blank"
           >
-            <i class="text-coolGray-400 fab fa-facebook text-lg leading-lg"></i>
+            <i class="text-blueGray-400 fab fa-facebook text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Share</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-angular%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Angular%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Angular%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
           >
-            <i class="text-coolGray-400 fab fa-twitter text-lg leading-lg"></i>
+            <i class="text-blueGray-400 fab fa-twitter text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Tweet</span>
           </a>
         </li>
 
         <li class="flex items-center">
           <a
-            class="hover:text-coolGray-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
+            class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-angular?ref=na-index-navbar"
             target="_blank"
           >
-            <i class="text-coolGray-400 fab fa-github text-lg leading-lg"></i>
+            <i class="text-blueGray-400 fab fa-github text-lg leading-lg"></i>
             <span class="lg:hidden inline-block ml-2">Star</span>
           </a>
         </li>

From 35474dc5c3573b96eb7ae793f60108075d59a537 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:22 +0200
Subject: [PATCH 162/171] refactor: change coolGray with blueGray

---
 .../components/sidebar/sidebar.component.html | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index c832ed8c..2bdbe4c4 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -15,7 +15,7 @@
     <!-- Brand -->
     <a
       [routerLink]="['/']"
-      class="md:block text-left md:pb-2 text-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+      class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
     >
       <span class="block sm:hidden"> Tailwind Angular </span>
       <span class="hidden sm:block"> Notus Angular </span>
@@ -36,13 +36,13 @@
     >
       <!-- Collapse header -->
       <div
-        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-coolGray-200"
+        class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-blueGray-200"
       >
         <div class="flex flex-wrap">
           <div class="w-6/12">
             <a
               [routerLink]="['/']"
-              class="md:block text-left md:pb-2 text-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
+              class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
             >
               Notus Angular
             </a>
@@ -64,7 +64,7 @@
           <input
             type="text"
             placeholder="Search"
-            class="border-0 px-3 py-2 h-12 border border-solid border-coolGray-500 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
+            class="border-0 px-3 py-2 h-12 border border-solid border-blueGray-500 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
           />
         </div>
       </form>
@@ -73,7 +73,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Admin Layout Pages
       </h6>
@@ -89,13 +89,13 @@
             [ngClass]="
               adminDashboard.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-700 hover:text-coolGray-500'
+                : 'text-blueGray-700 hover:text-blueGray-500'
             "
           >
             <i
               class="fas fa-tv mr-2 text-sm"
               [ngClass]="
-                adminDashboard.isActive ? 'opacity-75' : 'text-coolGray-300'
+                adminDashboard.isActive ? 'opacity-75' : 'text-blueGray-300'
               "
             ></i>
             Dashboard
@@ -111,13 +111,13 @@
             [ngClass]="
               adminSettings.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-700 hover:text-coolGray-500'
+                : 'text-blueGray-700 hover:text-blueGray-500'
             "
           >
             <i
               class="fas fa-tools mr-2 text-sm"
               [ngClass]="
-                adminSettings.isActive ? 'opacity-75' : 'text-coolGray-300'
+                adminSettings.isActive ? 'opacity-75' : 'text-blueGray-300'
               "
             ></i>
             Settings
@@ -133,13 +133,13 @@
             [ngClass]="
               adminTables.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-700 hover:text-coolGray-500'
+                : 'text-blueGray-700 hover:text-blueGray-500'
             "
           >
             <i
               class="fas fa-table mr-2 text-sm"
               [ngClass]="
-                adminTables.isActive ? 'opacity-75' : 'text-coolGray-300'
+                adminTables.isActive ? 'opacity-75' : 'text-blueGray-300'
               "
             ></i>
             Tables
@@ -155,13 +155,13 @@
             [ngClass]="
               adminMaps.isActive
                 ? 'text-red-600 hover:text-red-700'
-                : 'text-coolGray-700 hover:text-coolGray-500'
+                : 'text-blueGray-700 hover:text-blueGray-500'
             "
           >
             <i
               class="fas fa-map-marked mr-2 text-sm"
               [ngClass]="
-                adminMaps.isActive ? 'opacity-75' : 'text-coolGray-300'
+                adminMaps.isActive ? 'opacity-75' : 'text-blueGray-300'
               "
             ></i>
             Maps
@@ -173,7 +173,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Auth Layout Pages
       </h6>
@@ -183,9 +183,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/login']"
-            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
+            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-fingerprint text-coolGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-fingerprint text-blueGray-300 mr-2 text-sm"></i>
             Login
           </a>
         </li>
@@ -193,9 +193,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/auth/register']"
-            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
+            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"></i>
             Register
           </a>
         </li>
@@ -205,7 +205,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         No Layout Pages
       </h6>
@@ -215,9 +215,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/landing']"
-            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
+            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-newspaper text-coolGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
             Landing Page
           </a>
         </li>
@@ -225,9 +225,9 @@
         <li class="items-center">
           <a
             [routerLink]="['/profile']"
-            class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
+            class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
           >
-            <i class="fas fa-user-circle text-coolGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
             Profile Page
           </a>
         </li>
@@ -237,7 +237,7 @@
       <hr class="my-4 md:min-w-full" />
       <!-- Heading -->
       <h6
-        class="md:min-w-full text-coolGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
+        class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
       >
         Documentation
       </h6>
@@ -247,9 +247,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/colors/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-paint-brush mr-2 text-coolGray-300 text-base"></i>
+            <i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
             Styles
           </a>
         </li>
@@ -258,9 +258,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-css3-alt mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
             CSS Components
           </a>
         </li>
@@ -269,9 +269,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-angular mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
             Angular
           </a>
         </li>
@@ -280,9 +280,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-js-square mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
             Javascript
           </a>
         </li>
@@ -291,9 +291,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
             NextJS
           </a>
         </li>
@@ -302,9 +302,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
             React
           </a>
         </li>
@@ -313,9 +313,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-link mr-2 text-coolGray-300 text-base"></i>
+            <i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
             Svelte
           </a>
         </li>
@@ -324,9 +324,9 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
             target="_blank"
-            class="text-coolGray-700 hover:text-coolGray-500 text-sm block mb-4 no-underline font-semibold"
+            class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-vuejs mr-2 text-coolGray-300 text-base"></i>
+            <i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
             VueJS
           </a>
         </li>

From 49262f9ac5059b092b3d0538ddae9fa46b3e89b4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:23 +0200
Subject: [PATCH 163/171] refactor: change coolGray with blueGray

---
 src/app/layouts/admin/admin.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/admin/admin.component.html b/src/app/layouts/admin/admin.component.html
index 0f6a562a..9aeff2df 100644
--- a/src/app/layouts/admin/admin.component.html
+++ b/src/app/layouts/admin/admin.component.html
@@ -1,6 +1,6 @@
 <div>
   <app-sidebar></app-sidebar>
-  <div class="relative md:ml-64 bg-coolGray-100">
+  <div class="relative md:ml-64 bg-blueGray-100">
     <app-admin-navbar></app-admin-navbar>
     <app-header-stats></app-header-stats>
     <div class="px-4 md:px-10 mx-auto w-full -m-24">

From ad12eed515ea10ac257921ad4337aff1bda771dd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:25 +0200
Subject: [PATCH 164/171] refactor: change coolGray with blueGray

---
 src/app/layouts/auth/auth.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layouts/auth/auth.component.html b/src/app/layouts/auth/auth.component.html
index ac419b6d..6c73710a 100644
--- a/src/app/layouts/auth/auth.component.html
+++ b/src/app/layouts/auth/auth.component.html
@@ -3,7 +3,7 @@
   <main>
     <section class="relative w-full h-full py-40 min-h-screen">
       <div
-        class="absolute top-0 w-full h-full bg-coolGray-800 bg-no-repeat bg-full"
+        class="absolute top-0 w-full h-full bg-blueGray-800 bg-no-repeat bg-full"
         style="background-image: url('assets/img/register_bg_2.png')"
       ></div>
       <router-outlet></router-outlet>

From 5e2184b435397bbf85b611f2259d6cf94b62ffe6 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:26 +0200
Subject: [PATCH 165/171] refactor: change coolGray with blueGray

---
 src/app/views/auth/login/login.component.html | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/login/login.component.html b/src/app/views/auth/login/login.component.html
index b13ce984..78fb8125 100644
--- a/src/app/views/auth/login/login.component.html
+++ b/src/app/views/auth/login/login.component.html
@@ -2,59 +2,59 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-4/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-500 text-sm font-bold">Sign in with</h6>
+            <h6 class="text-blueGray-500 text-sm font-bold">Sign in with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-coolGray-300" />
+          <hr class="mt-6 border-b-1 border-blueGray-300" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-coolGray-400 text-center mb-3 font-bold">
+          <div class="text-blueGray-400 text-center mb-3 font-bold">
             <small>Or sign in with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -63,9 +63,9 @@ <h6 class="text-coolGray-500 text-sm font-bold">Sign in with</h6>
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox border-0 text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
+                  class="form-checkbox border-0 text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
                 />
-                <span class="ml-2 text-sm font-semibold text-coolGray-600">
+                <span class="ml-2 text-sm font-semibold text-blueGray-600">
                   Remember me
                 </span>
               </label>
@@ -73,7 +73,7 @@ <h6 class="text-coolGray-500 text-sm font-bold">Sign in with</h6>
 
             <div class="text-center mt-6">
               <button
-                class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Sign In
@@ -84,12 +84,12 @@ <h6 class="text-coolGray-500 text-sm font-bold">Sign in with</h6>
       </div>
       <div class="flex flex-wrap mt-6 relative">
         <div class="w-1/2">
-          <a href="javascript:void(0)" class="text-coolGray-200">
+          <a href="javascript:void(0)" class="text-blueGray-200">
             <small>Forgot password?</small>
           </a>
         </div>
         <div class="w-1/2 text-right">
-          <a [routerLink]="['/auth/register']" class="text-coolGray-200">
+          <a [routerLink]="['/auth/register']" class="text-blueGray-200">
             <small>Create new account</small>
           </a>
         </div>

From 4560e37c55592e080054feebe1a2fcdb2679db9f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:27 +0200
Subject: [PATCH 166/171] refactor: change coolGray with blueGray

---
 .../auth/register/register.component.html     | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/views/auth/register/register.component.html b/src/app/views/auth/register/register.component.html
index df6d3f3a..e5ae8078 100644
--- a/src/app/views/auth/register/register.component.html
+++ b/src/app/views/auth/register/register.component.html
@@ -2,73 +2,73 @@
   <div class="flex content-center items-center justify-center h-full">
     <div class="w-full lg:w-6/12 px-4">
       <div
-        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0"
+        class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0"
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-coolGray-500 text-sm font-bold">Sign up with</h6>
+            <h6 class="text-blueGray-500 text-sm font-bold">Sign up with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/github.svg" />
               Github
             </button>
             <button
-              class="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
               <img alt="..." class="w-5 mr-1" src="assets/img/google.svg" />
               Google
             </button>
           </div>
-          <hr class="mt-6 border-b-1 border-coolGray-300" />
+          <hr class="mt-6 border-b-1 border-blueGray-300" />
         </div>
         <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-          <div class="text-coolGray-400 text-center mb-3 font-bold">
+          <div class="text-blueGray-400 text-center mb-3 font-bold">
             <small>Or sign up with credentials</small>
           </div>
           <form>
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Name
               </label>
               <input
                 type="email"
-                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Name"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Email
               </label>
               <input
                 type="email"
-                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Email"
               />
             </div>
 
             <div class="relative w-full mb-3">
               <label
-                class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                 htmlFor="grid-password"
               >
                 Password
               </label>
               <input
                 type="password"
-                class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                 placeholder="Password"
               />
             </div>
@@ -78,9 +78,9 @@ <h6 class="text-coolGray-500 text-sm font-bold">Sign up with</h6>
                 <input
                   id="customCheckLogin"
                   type="checkbox"
-                  class="form-checkbox border-0 text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
+                  class="form-checkbox border-0 text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150 rounded"
                 />
-                <span class="ml-2 text-sm font-semibold text-coolGray-600">
+                <span class="ml-2 text-sm font-semibold text-blueGray-600">
                   I agree with the
                   <a href="javascript:void(0)" class="text-red-600">
                     Privacy Policy
@@ -91,7 +91,7 @@ <h6 class="text-coolGray-500 text-sm font-bold">Sign up with</h6>
 
             <div class="text-center mt-6">
               <button
-                class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                 type="button"
               >
                 Create Account

From 3951d55aeddc19e9f83c37b3a446c06cc1122993 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:29 +0200
Subject: [PATCH 167/171] refactor: change coolGray with blueGray

---
 src/app/views/index/index.component.html | 118 +++++++++++------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/app/views/index/index.component.html b/src/app/views/index/index.component.html
index 4552edb1..377a06f7 100644
--- a/src/app/views/index/index.component.html
+++ b/src/app/views/index/index.component.html
@@ -3,15 +3,15 @@
   <div class="container mx-auto items-center flex flex-wrap">
     <div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
       <div class="pt-32 sm:pt-0">
-        <h2 class="font-semibold text-4xl text-coolGray-600">
+        <h2 class="font-semibold text-4xl text-blueGray-600">
           Notus Angular - A beautiful extension for Tailwind CSS.
         </h2>
-        <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
+        <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
           Notus Angular is Free and Open Source. It does not change any of the
           CSS from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-coolGray-600"
+            class="text-blueGray-600"
             target="_blank"
           >
             Tailwind CSS.
@@ -29,7 +29,7 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
           </a>
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
-            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
             target="_blank"
           >
             Github Star
@@ -46,7 +46,7 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
   />
 </section>
 
-<section class="mt-48 md:mt-40 pb-40 relative bg-coolGray-100">
+<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0)"
@@ -61,7 +61,7 @@ <h2 class="font-semibold text-4xl text-coolGray-600">
       y="0"
     >
       <polygon
-        class="text-coolGray-100 fill-current"
+        class="text-blueGray-100 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -109,12 +109,12 @@ <h4 class="text-xl font-bold text-white">
             <div class="relative flex flex-col mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-sitemap"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">CSS Components</h6>
-                <p class="mb-4 text-coolGray-500">
+                <p class="mb-4 text-blueGray-500">
                   Notus Angular comes with a huge number of Fully Coded CSS
                   components.
                 </p>
@@ -123,14 +123,14 @@ <h6 class="text-xl mb-1 font-semibold">CSS Components</h6>
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-drafting-compass"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   JavaScript Components
                 </h6>
-                <p class="mb-4 text-coolGray-500">
+                <p class="mb-4 text-blueGray-500">
                   We also feature many dynamic components for React, NextJS, Vue
                   and Angular.
                 </p>
@@ -141,12 +141,12 @@ <h6 class="text-xl mb-1 font-semibold">
             <div class="relative flex flex-col min-w-0 mt-4">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-newspaper"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">Pages</h6>
-                <p class="mb-4 text-coolGray-500">
+                <p class="mb-4 text-blueGray-500">
                   This extension also comes with 3 sample pages. They are fully
                   coded so you can start working instantly.
                 </p>
@@ -155,12 +155,12 @@ <h6 class="text-xl mb-1 font-semibold">Pages</h6>
             <div class="relative flex flex-col min-w-0">
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
+                  class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
                   <i class="fas fa-file-alt"></i>
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">Documentation</h6>
-                <p class="mb-4 text-coolGray-500">
+                <p class="mb-4 text-blueGray-500">
                   Built by developers for developers. You will love how easy is
                   to to work with Notus Angular.
                 </p>
@@ -176,7 +176,7 @@ <h6 class="text-xl mb-1 font-semibold">Documentation</h6>
     <div class="flex flex-wrap items-center">
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-sitemap text-xl"></i>
         </div>
@@ -184,7 +184,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
           CSS Components
         </h3>
         <p
-          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
         >
           Every element that you need in a product comes built in as a
           component. All components fit perfectly with each other and can have
@@ -192,42 +192,42 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Buttons
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Inputs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Labels
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Pagination
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Progressbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Typography
           </span>
@@ -235,7 +235,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-coolGray-700 hover:text-coolGray-500 ease-linear transition-all duration-150"
+          class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
         >
           View All
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -315,7 +315,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
               target="_blank"
             >
               <div
-                class="bg-coolGray-700 shadow-lg rounded-lg text-center p-8 mt-8"
+                class="bg-blueGray-700 shadow-lg rounded-lg text-center p-8 mt-8"
               >
                 <img
                   alt="..."
@@ -374,7 +374,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
 
       <div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
         <div
-          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-drafting-compass text-xl"></i>
         </div>
@@ -382,55 +382,55 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
           Javascript Components
         </h3>
         <p
-          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
         >
           In order to create a great User Experience some components require
           JavaScript. In this way you can manipulate the elements on the page
           and give more options to your users.
         </p>
         <p
-          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
         >
           We created a set of Components that are dynamic and come to help you.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Alerts
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Dropdowns
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Modals
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Popovers
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tabs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tooltips
           </span>
@@ -438,7 +438,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=na-index-page"
           target="_blank"
-          class="font-bold text-coolGray-700 hover:text-coolGray-500 ease-linear transition-all duration-150"
+          class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
         >
           View all
           <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
@@ -452,12 +452,12 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
       <div class="w-full md:w-5/12 ml-auto px-12 md:px-4">
         <div class="md:pr-12">
           <div
-            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+            class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
             <i class="fas fa-file-alt text-xl"></i>
           </div>
           <h3 class="text-3xl font-semibold">Complex Documentation</h3>
-          <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
+          <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
             This extension comes a lot of fully coded examples that help you get
             started faster. You can adjust the colors and also the programming
             language. You can change the text and images and you're good to go.
@@ -467,13 +467,13 @@ <h3 class="text-3xl font-semibold">Complex Documentation</h3>
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
                     <i class="fas fa-fingerprint"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-500">
+                  <h4 class="text-blueGray-500">
                     Built by Developers for Developers
                   </h4>
                 </div>
@@ -483,13 +483,13 @@ <h4 class="text-coolGray-500">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
                     <i class="fab fa-html5"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-500">
+                  <h4 class="text-blueGray-500">
                     Carefully crafted code for Components
                   </h4>
                 </div>
@@ -499,13 +499,13 @@ <h4 class="text-coolGray-500">
               <div class="flex items-center">
                 <div>
                   <span
-                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-coolGray-500 bg-coolGray-50 mr-3"
+                    class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
                     <i class="far fa-paper-plane"></i>
                   </span>
                 </div>
                 <div>
-                  <h4 class="text-coolGray-500">
+                  <h4 class="text-blueGray-500">
                     Dynamic Javascript Components
                   </h4>
                 </div>
@@ -532,7 +532,7 @@ <h4 class="text-coolGray-500">
   <div class="justify-center text-center flex flex-wrap mt-24">
     <div class="w-full md:w-6/12 px-12 md:px-4">
       <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
-      <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-500">
+      <p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-500">
         Notus Angular is a completly new product built using our past experience
         in web templates. Take the examples we made for you and start playing
         with them.
@@ -541,7 +541,7 @@ <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
   </div>
 </section>
 
-<section class="block relative z-1 bg-coolGray-600">
+<section class="block relative z-1 bg-blueGray-600">
   <div class="container mx-auto">
     <div class="justify-center flex flex-wrap">
       <div class="w-full lg:w-12/12 px-4 -mt-24">
@@ -596,12 +596,12 @@ <h5 class="text-xl font-semibold pb-4 text-center">Landing Page</h5>
   </div>
 </section>
 
-<section class="py-20 bg-coolGray-600 overflow-hidden">
+<section class="py-20 bg-blueGray-600 overflow-hidden">
   <div class="container mx-auto pb-64">
     <div class="flex flex-wrap justify-center">
       <div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64">
         <div
-          class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+          class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
           <i class="fas fa-code-branch text-xl"></i>
         </div>
@@ -609,12 +609,12 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           Open Source
         </h3>
         <p
-          class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-400"
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400"
         >
           Since
           <a
             href="https://tailwindcss.com/?ref=creativetim"
-            class="text-coolGray-300"
+            class="text-blueGray-300"
             target="_blank"
           >
             Tailwind CSS
@@ -624,14 +624,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           quality of the code!
         </p>
         <p
-          class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-400"
+          class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400"
         >
           Get it free on Github and please help us spread the news with a Star!
         </p>
         <a
           href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
           target="_blank"
-          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+          class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
         >
           Github Star
         </a>
@@ -639,14 +639,14 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
 
       <div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
         <i
-          class="fab fa-github text-coolGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
+          class="fab fa-github text-blueGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
         ></i>
       </div>
     </div>
   </div>
 </section>
 
-<section class="pb-16 bg-coolGray-200 relative pt-32">
+<section class="pb-16 bg-blueGray-200 relative pt-32">
   <div
     class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
     style="transform: translateZ(0)"
@@ -661,7 +661,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
       y="0"
     >
       <polygon
-        class="text-coolGray-200 fill-current"
+        class="text-blueGray-200 fill-current"
         points="2560 0 2560 100 0 100"
       ></polygon>
     </svg>
@@ -676,7 +676,7 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           <span role="img" aria-label="love"> 😍 </span>
         </p>
         <h3 class="font-semibold text-3xl">Do you love this Starter Kit?</h3>
-        <p class="text-coolGray-500 text-lg leading-relaxed mt-4 mb-4">
+        <p class="text-blueGray-500 text-lg leading-relaxed mt-4 mb-4">
           Cause if you do, it can be yours now. Hit the buttons below to
           navigate to get the Free version for your next project. Build a new
           web app or give an old project a new look!
@@ -692,7 +692,7 @@ <h3 class="font-semibold text-3xl">Do you love this Starter Kit?</h3>
           <a
             href="https://github.com/creativetimofficial/notus-angular?ref=creativetim"
             target="_blank"
-            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-coolGray-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+            class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
             <i class="fab fa-github text-lg mr-1"></i>
             <span>Help With a Star</span>

From 08739a6875e13c1505fc5adbd864f2528be41a92 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:30 +0200
Subject: [PATCH 168/171] refactor: change coolGray with blueGray

---
 src/app/views/landing/landing.component.html | 80 ++++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/app/views/landing/landing.component.html b/src/app/views/landing/landing.component.html
index 02b163f3..6302d321 100644
--- a/src/app/views/landing/landing.component.html
+++ b/src/app/views/landing/landing.component.html
@@ -21,7 +21,7 @@
             <h1 class="text-white font-semibold text-5xl">
               Your story starts with us.
             </h1>
-            <p class="mt-4 text-lg text-coolGray-200">
+            <p class="mt-4 text-lg text-blueGray-200">
               This is a simple example of a Landing Page you can build using
               Notus Angular. It features multiple CSS components based on the
               Tailwind CSS design system.
@@ -44,14 +44,14 @@ <h1 class="text-white font-semibold text-5xl">
         y="0"
       >
         <polygon
-          class="text-coolGray-200 fill-current"
+          class="text-blueGray-200 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </div>
 
-  <section class="pb-20 bg-coolGray-200 -mt-24">
+  <section class="pb-20 bg-blueGray-200 -mt-24">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap">
         <div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
@@ -65,7 +65,7 @@ <h1 class="text-white font-semibold text-5xl">
                 <i class="fas fa-award"></i>
               </div>
               <h6 class="text-xl font-semibold">Awarded Agency</h6>
-              <p class="mt-2 mb-4 text-coolGray-500">
+              <p class="mt-2 mb-4 text-blueGray-500">
                 Divide details about your product or agency work into parts. A
                 paragraph describing a feature will be enough.
               </p>
@@ -84,7 +84,7 @@ <h6 class="text-xl font-semibold">Awarded Agency</h6>
                 <i class="fas fa-retweet"></i>
               </div>
               <h6 class="text-xl font-semibold">Free Revisions</h6>
-              <p class="mt-2 mb-4 text-coolGray-500">
+              <p class="mt-2 mb-4 text-blueGray-500">
                 Keep you user engaged by providing meaningful information.
                 Remember that by this time, the user is curious.
               </p>
@@ -103,7 +103,7 @@ <h6 class="text-xl font-semibold">Free Revisions</h6>
                 <i class="fas fa-fingerprint"></i>
               </div>
               <h6 class="text-xl font-semibold">Verified Company</h6>
-              <p class="mt-2 mb-4 text-coolGray-500">
+              <p class="mt-2 mb-4 text-blueGray-500">
                 Write a few lines about each one. A paragraph describing a
                 feature will be enough. Keep you user engaged!
               </p>
@@ -115,7 +115,7 @@ <h6 class="text-xl font-semibold">Verified Company</h6>
       <div class="flex flex-wrap items-center mt-32">
         <div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
           <div
-            class="text-coolGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
+            class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
             <i class="fas fa-user-friends text-xl"></i>
           </div>
@@ -123,19 +123,19 @@ <h3 class="text-3xl mb-2 font-semibold leading-normal">
             Working with us is a pleasure
           </h3>
           <p
-            class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-600"
+            class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
           >
             Don't let your uses guess by attaching tooltips and popoves to any
             element. Just make sure you enable them first via JavaScript.
           </p>
           <p
-            class="text-lg font-light leading-relaxed mt-0 mb-4 text-coolGray-600"
+            class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-600"
           >
             The kit comes with three pre-built pages to help you get started
             faster. You can change the text and images and you're good to go.
             Just make sure you enable them first via JavaScript.
           </p>
-          <a [routerLink]="['/']" class="font-bold text-coolGray-700 mt-8">
+          <a [routerLink]="['/']" class="font-bold text-blueGray-700 mt-8">
             Check Notus Angular!
           </a>
         </div>
@@ -212,7 +212,7 @@ <h4 class="text-xl font-bold text-white">Top Notch Services</h4>
               <i class="fas fa-rocket text-xl"></i>
             </div>
             <h3 class="text-3xl font-semibold">A growing company</h3>
-            <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
+            <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
               The extension comes with three pre-built pages to help you get
               started faster. You can change the text and images and you're good
               to go.
@@ -228,7 +228,7 @@ <h3 class="text-3xl font-semibold">A growing company</h3>
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-500">
+                    <h4 class="text-blueGray-500">
                       Carefully crafted components
                     </h4>
                   </div>
@@ -244,7 +244,7 @@ <h4 class="text-coolGray-500">
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-500">Amazing page examples</h4>
+                    <h4 class="text-blueGray-500">Amazing page examples</h4>
                   </div>
                 </div>
               </li>
@@ -258,7 +258,7 @@ <h4 class="text-coolGray-500">Amazing page examples</h4>
                     </span>
                   </div>
                   <div>
-                    <h4 class="text-coolGray-500">Dynamic components</h4>
+                    <h4 class="text-blueGray-500">Dynamic components</h4>
                   </div>
                 </div>
               </li>
@@ -274,7 +274,7 @@ <h4 class="text-coolGray-500">Dynamic components</h4>
       <div class="flex flex-wrap justify-center text-center mb-24">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold">Here are our heroes</h2>
-          <p class="text-lg leading-relaxed m-4 text-coolGray-500">
+          <p class="text-lg leading-relaxed m-4 text-blueGray-500">
             According to the National Oceanic and Atmospheric Administration,
             Ted, Scambos, NSIDClead scentist, puts the potentially record
             maximum.
@@ -291,7 +291,7 @@ <h2 class="text-4xl font-semibold">Here are our heroes</h2>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Ryan Tompson</h5>
-              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
+              <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
                 Web Developer
               </p>
               <div class="mt-6">
@@ -326,7 +326,7 @@ <h5 class="text-xl font-bold">Ryan Tompson</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Romina Hadid</h5>
-              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
+              <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
                 Marketing Specialist
               </p>
               <div class="mt-6">
@@ -355,7 +355,7 @@ <h5 class="text-xl font-bold">Romina Hadid</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Alexa Smith</h5>
-              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
+              <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
                 UI/UX Designer
               </p>
               <div class="mt-6">
@@ -372,7 +372,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -390,7 +390,7 @@ <h5 class="text-xl font-bold">Alexa Smith</h5>
             />
             <div class="pt-6 text-center">
               <h5 class="text-xl font-bold">Jenna Kardi</h5>
-              <p class="mt-1 text-sm text-coolGray-400 uppercase font-semibold">
+              <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
                 Founder and CEO
               </p>
               <div class="mt-6">
@@ -413,7 +413,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
                   <i class="fab fa-twitter"></i>
                 </button>
                 <button
-                  class="bg-coolGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                  class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                   type="button"
                 >
                   <i class="fab fa-instagram"></i>
@@ -426,7 +426,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
     </div>
   </section>
 
-  <section class="pb-20 relative block bg-coolGray-800">
+  <section class="pb-20 relative block bg-blueGray-800">
     <div
       class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
       style="transform: translateZ(0)"
@@ -441,7 +441,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
         y="0"
       >
         <polygon
-          class="text-coolGray-800 fill-current"
+          class="text-blueGray-800 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
@@ -451,7 +451,7 @@ <h5 class="text-xl font-bold">Jenna Kardi</h5>
       <div class="flex flex-wrap text-center justify-center">
         <div class="w-full lg:w-6/12 px-4">
           <h2 class="text-4xl font-semibold text-white">Build something</h2>
-          <p class="text-lg leading-relaxed mt-4 mb-4 text-coolGray-400">
+          <p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-400">
             Put the potentially record low maximum sea ice extent tihs year down
             to low ice. According to the National Oceanic and Atmospheric
             Administration, Ted, Scambos.
@@ -461,40 +461,40 @@ <h2 class="text-4xl font-semibold text-white">Build something</h2>
       <div class="flex flex-wrap mt-12 justify-center">
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-medal text-xl"></i>
           </div>
           <h6 class="text-xl mt-5 font-semibold text-white">
             Excelent Services
           </h6>
-          <p class="mt-2 mb-4 text-coolGray-400">
+          <p class="mt-2 mb-4 text-blueGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-poll text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">
             Grow your market
           </h5>
-          <p class="mt-2 mb-4 text-coolGray-400">
+          <p class="mt-2 mb-4 text-blueGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
         </div>
         <div class="w-full lg:w-3/12 px-4 text-center">
           <div
-            class="text-coolGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
+            class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
           >
             <i class="fas fa-lightbulb text-xl"></i>
           </div>
           <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
-          <p class="mt-2 mb-4 text-coolGray-400">
+          <p class="mt-2 mb-4 text-blueGray-400">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
@@ -502,49 +502,49 @@ <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
       </div>
     </div>
   </section>
-  <section class="relative block py-24 lg:pt-0 bg-coolGray-800">
+  <section class="relative block py-24 lg:pt-0 bg-blueGray-800">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
         <div class="w-full lg:w-6/12 px-4">
           <div
-            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200"
+            class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200"
           >
             <div class="flex-auto p-5 lg:p-10">
               <h4 class="text-2xl font-semibold">Want to work with us?</h4>
-              <p class="leading-relaxed mt-1 mb-4 text-coolGray-500">
+              <p class="leading-relaxed mt-1 mb-4 text-blueGray-500">
                 Complete this form and we will get back to you in 24 hours.
               </p>
               <div class="relative w-full mb-3 mt-8">
                 <label
-                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                  class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                   htmlFor="full-name"
                 >
                   Full Name
                 </label>
                 <input
                   type="text"
-                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Full Name"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                  class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                   htmlFor="email"
                 >
                   Email
                 </label>
                 <input
                   type="email"
-                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                  class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                   placeholder="Email"
                 />
               </div>
 
               <div class="relative w-full mb-3">
                 <label
-                  class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                  class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                   htmlFor="message"
                 >
                   Message
@@ -552,13 +552,13 @@ <h4 class="text-2xl font-semibold">Want to work with us?</h4>
                 <textarea
                   rows="4"
                   cols="80"
-                  class="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
+                  class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
                   placeholder="Type a message..."
                 ></textarea>
               </div>
               <div class="text-center mt-6">
                 <button
-                  class="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                   type="button"
                 >
                   Send Message

From a9cfcbeac11f09574e3de2f820e8d2647d883bcd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:31 +0200
Subject: [PATCH 169/171] refactor: change coolGray with blueGray

---
 src/app/views/profile/profile.component.html | 34 ++++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/views/profile/profile.component.html b/src/app/views/profile/profile.component.html
index 41af49fb..057f7b6a 100644
--- a/src/app/views/profile/profile.component.html
+++ b/src/app/views/profile/profile.component.html
@@ -26,13 +26,13 @@
         y="0"
       >
         <polygon
-          class="text-coolGray-200 fill-current"
+          class="text-blueGray-200 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
     </div>
   </section>
-  <section class="relative py-16 bg-coolGray-200">
+  <section class="relative py-16 bg-blueGray-200">
     <div class="container mx-auto px-4">
       <div
         class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64"
@@ -64,58 +64,58 @@
               <div class="flex justify-center py-4 lg:pt-4 pt-8">
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+                    class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
                   >
                     22
                   </span>
-                  <span class="text-sm text-coolGray-400">Friends</span>
+                  <span class="text-sm text-blueGray-400">Friends</span>
                 </div>
                 <div class="mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+                    class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
                   >
                     10
                   </span>
-                  <span class="text-sm text-coolGray-400">Photos</span>
+                  <span class="text-sm text-blueGray-400">Photos</span>
                 </div>
                 <div class="lg:mr-4 p-3 text-center">
                   <span
-                    class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
+                    class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
                   >
                     89
                   </span>
-                  <span class="text-sm text-coolGray-400">Comments</span>
+                  <span class="text-sm text-blueGray-400">Comments</span>
                 </div>
               </div>
             </div>
           </div>
           <div class="text-center mt-12">
             <h3
-              class="text-4xl font-semibold leading-normal mb-2 text-coolGray-700 mb-2"
+              class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2"
             >
               Jenna Stones
             </h3>
             <div
-              class="text-sm leading-normal mt-0 mb-2 text-coolGray-400 font-bold uppercase"
+              class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
             >
               <i
-                class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"
+                class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"
               ></i>
               Los Angeles, California
             </div>
-            <div class="mb-2 text-coolGray-600 mt-10">
-              <i class="fas fa-briefcase mr-2 text-lg text-coolGray-400"></i>
+            <div class="mb-2 text-blueGray-600 mt-10">
+              <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
               Solution Manager - Creative Tim Officer
             </div>
-            <div class="mb-2 text-coolGray-600">
-              <i class="fas fa-university mr-2 text-lg text-coolGray-400"></i>
+            <div class="mb-2 text-blueGray-600">
+              <i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
               University of Computer Science
             </div>
           </div>
-          <div class="mt-10 py-10 border-t border-coolGray-200 text-center">
+          <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
             <div class="flex flex-wrap justify-center">
               <div class="w-full lg:w-9/12 px-4">
-                <p class="mb-4 text-lg leading-relaxed text-coolGray-700">
+                <p class="mb-4 text-lg leading-relaxed text-blueGray-700">
                   An artist of considerable range, Jenna the name taken by
                   Melbourne-raised, Brooklyn-based Nick Murphy writes, performs
                   and records all of his own music, giving it a warm, intimate

From afd58dd00fb4ade3e9681e5b6030b5266eb56947 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:32 +0200
Subject: [PATCH 170/171] refactor: change coolGray with blueGray

---
 src/assets/styles/tailwind.css | 120 ++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 3a790509..e245e17e 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1352,34 +1352,34 @@ select {
   background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-50 {
+.bg-blueGray-50 {
   --tw-bg-opacity: 1;
-  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-100 {
+.bg-blueGray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+  background-color: rgba(241, 245, 249, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-200 {
+.bg-blueGray-200 {
   --tw-bg-opacity: 1;
-  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-600 {
+.bg-blueGray-600 {
   --tw-bg-opacity: 1;
-  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
+  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-700 {
+.bg-blueGray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  background-color: rgba(51, 65, 85, var(--tw-bg-opacity));
 }
 
-.bg-coolGray-800 {
+.bg-blueGray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+  background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
 }
 
 .focus\:bg-white:focus {
@@ -1402,14 +1402,14 @@ select {
   background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.active\:bg-coolGray-50:active {
+.active\:bg-blueGray-50:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
 }
 
-.active\:bg-coolGray-600:active {
+.active\:bg-blueGray-600:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
+  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
 }
 
 .bg-center {
@@ -1471,34 +1471,34 @@ select {
   border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
-.border-coolGray-50 {
+.border-blueGray-50 {
   --tw-border-opacity: 1;
-  border-color: rgba(249, 250, 251, var(--tw-border-opacity));
+  border-color: rgba(248, 250, 252, var(--tw-border-opacity));
 }
 
-.border-coolGray-100 {
+.border-blueGray-100 {
   --tw-border-opacity: 1;
-  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
+  border-color: rgba(241, 245, 249, var(--tw-border-opacity));
 }
 
-.border-coolGray-200 {
+.border-blueGray-200 {
   --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+  border-color: rgba(226, 232, 240, var(--tw-border-opacity));
 }
 
-.border-coolGray-300 {
+.border-blueGray-300 {
   --tw-border-opacity: 1;
-  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+  border-color: rgba(203, 213, 225, var(--tw-border-opacity));
 }
 
-.border-coolGray-500 {
+.border-blueGray-500 {
   --tw-border-opacity: 1;
-  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
+  border-color: rgba(100, 116, 139, var(--tw-border-opacity));
 }
 
-.border-coolGray-600 {
+.border-blueGray-600 {
   --tw-border-opacity: 1;
-  border-color: rgba(75, 85, 99, var(--tw-border-opacity));
+  border-color: rgba(71, 85, 105, var(--tw-border-opacity));
 }
 
 .focus\:border-black:focus {
@@ -2839,14 +2839,14 @@ select {
   padding-bottom: 16rem;
 }
 
-.placeholder-coolGray-300::-moz-placeholder {
+.placeholder-blueGray-300::-moz-placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
+  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
 }
 
-.placeholder-coolGray-300::placeholder {
+.placeholder-blueGray-300::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
+  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
 }
 
 .pointer-events-none {
@@ -3206,44 +3206,44 @@ select {
   color: rgba(24, 24, 27, var(--tw-text-opacity));
 }
 
-.text-coolGray-100 {
+.text-blueGray-100 {
   --tw-text-opacity: 1;
-  color: rgba(243, 244, 246, var(--tw-text-opacity));
+  color: rgba(241, 245, 249, var(--tw-text-opacity));
 }
 
-.text-coolGray-200 {
+.text-blueGray-200 {
   --tw-text-opacity: 1;
-  color: rgba(229, 231, 235, var(--tw-text-opacity));
+  color: rgba(226, 232, 240, var(--tw-text-opacity));
 }
 
-.text-coolGray-300 {
+.text-blueGray-300 {
   --tw-text-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-text-opacity));
+  color: rgba(203, 213, 225, var(--tw-text-opacity));
 }
 
-.text-coolGray-400 {
+.text-blueGray-400 {
   --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
+  color: rgba(148, 163, 184, var(--tw-text-opacity));
 }
 
-.text-coolGray-500 {
+.text-blueGray-500 {
   --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  color: rgba(100, 116, 139, var(--tw-text-opacity));
 }
 
-.text-coolGray-600 {
+.text-blueGray-600 {
   --tw-text-opacity: 1;
-  color: rgba(75, 85, 99, var(--tw-text-opacity));
+  color: rgba(71, 85, 105, var(--tw-text-opacity));
 }
 
-.text-coolGray-700 {
+.text-blueGray-700 {
   --tw-text-opacity: 1;
-  color: rgba(55, 65, 81, var(--tw-text-opacity));
+  color: rgba(51, 65, 85, var(--tw-text-opacity));
 }
 
-.text-coolGray-800 {
+.text-blueGray-800 {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(30, 41, 59, var(--tw-text-opacity));
 }
 
 .hover\:text-red-700:hover {
@@ -3251,24 +3251,24 @@ select {
   color: rgba(185, 28, 28, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-300:hover {
+.hover\:text-blueGray-300:hover {
   --tw-text-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-text-opacity));
+  color: rgba(203, 213, 225, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-500:hover {
+.hover\:text-blueGray-500:hover {
   --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  color: rgba(100, 116, 139, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-700:hover {
+.hover\:text-blueGray-700:hover {
   --tw-text-opacity: 1;
-  color: rgba(55, 65, 81, var(--tw-text-opacity));
+  color: rgba(51, 65, 85, var(--tw-text-opacity));
 }
 
-.hover\:text-coolGray-800:hover {
+.hover\:text-blueGray-800:hover {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(30, 41, 59, var(--tw-text-opacity));
 }
 
 .truncate {
@@ -4017,14 +4017,14 @@ select {
     color: rgba(255, 255, 255, var(--tw-text-opacity));
   }
 
-  .lg\:text-coolGray-200 {
+  .lg\:text-blueGray-200 {
     --tw-text-opacity: 1;
-    color: rgba(229, 231, 235, var(--tw-text-opacity));
+    color: rgba(226, 232, 240, var(--tw-text-opacity));
   }
 
-  .lg\:hover\:text-coolGray-200:hover {
+  .lg\:hover\:text-blueGray-200:hover {
     --tw-text-opacity: 1;
-    color: rgba(229, 231, 235, var(--tw-text-opacity));
+    color: rgba(226, 232, 240, var(--tw-text-opacity));
   }
 
   .lg\:w-auto {

From fa65abbae94e2a401aa6b08696cabffbfdbf31e3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 12:05:34 +0200
Subject: [PATCH 171/171] refactor: change coolGray with blueGray

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 80d4c300..f1a3af45 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
     <link rel="apple-touch-icon" sizes="76x76" href="./apple-icon.png" />
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
   </head>
-  <body class="text-coolGray-700 antialiased">
+  <body class="text-blueGray-700 antialiased">
     <app-root></app-root>
   </body>
 </html>