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

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

diff --git a/LICENSE.md b/LICENSE.md
index f025b07..df9ca2d 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Creative Tim (https://www.creative-tim.com?ref=vn-license)
+Copyright (c) 2021 Creative Tim (https://www.creative-tim.com?ref=vn-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 dc8ced4f9ce53370d1dfb20aec6bb4efa0fea31a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:08:51 +0200
Subject: [PATCH 002/107] docs: change dates and versions

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

diff --git a/README.md b/README.md
index cfd54eb..0bfd4c4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Vue Notus <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fvue-notus%2F%23%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20VueJS%20UI%20Kit%20and%20Admin.%20Let%20Vue%20Notus%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level.%20" 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/vue-notus/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-notus.svg)</a> <a href="https://github.com/creativetimofficial/vue-notus/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-notus.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/vue-notus/issues?q=is%3Aopen+is%3Aissue" target="_blank">![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-notus.svg)</a> <a href="https://github.com/creativetimofficial/vue-notus/issues?q=is%3Aissue+is%3Aclosed" target="_blank">![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-notus.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>
 
 ![Vue Notus](https://github.com/creativetimofficial/public-assets/blob/master/vue-notus/vue-notus.jpg?raw=true)
 
@@ -200,7 +200,7 @@ We use GitHub Issues as the official bug tracker for the Vue Notus. Here are som
 
 ## Licensing
 
-- Copyright 2020 <a href="https://www.creative-tim.com/?ref=vn-readme" target="_blank">Creative Tim</a>
+- Copyright 2021 <a href="https://www.creative-tim.com/?ref=vn-readme" target="_blank">Creative Tim</a>
 
 - Licensed under <a href="https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md" target="_blank">MIT</a>
 

From d97deadd7b47a182d45470b776053c03e2c2ebd4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:08:53 +0200
Subject: [PATCH 003/107] docs: change dates and versions

---
 gulpfile.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index e530c16..d0f793c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,11 +9,11 @@ gulp.task("licenses", async function () {
       gap.prependText(`/*!
 
 =========================================================
-* Vue Notus - v1.0.0 based on Tailwind Starter Kit by Creative Tim
+* Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
-* 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/vue-notus/blob/master/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
@@ -35,11 +35,11 @@ gulp.task("licenses", async function () {
       gap.prependText(`<!--
 
 =========================================================
-* Vue Notus - v1.0.0 based on Tailwind Starter Kit by Creative Tim
+* Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
-* 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/vue-notus/blob/master/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
@@ -61,11 +61,11 @@ gulp.task("licenses", async function () {
       gap.prependText(`/*!
 
 =========================================================
-* Vue Notus - v1.0.0 based on Tailwind Starter Kit by Creative Tim
+* Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
-* 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/vue-notus/blob/master/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

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

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

diff --git a/package.json b/package.json
index 6c4ef75..b3a3928 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-notus",
   "homepage": "https://demos.creative-tim.com/vue-notus/",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vue Notus - A free Tailwind CSS and VueJS UI Kit and Admin by Creative Tim.",
   "repository": "https://github.com/creativetimofficial/vue-notus",
   "license": "MIT",

From dc144994f1e3e7746a8abafd6d996e434c8c1002 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:08:58 +0200
Subject: [PATCH 005/107] docs: change dates and versions

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

diff --git a/public/index.html b/public/index.html
index 14b3cd5..2d25311 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
 <!--
 =========================================================
-* Vue Notus - v1.0.0 based on Tailwind Starter Kit by Creative Tim
+* Vue Notus - v1.1.0 based on Tailwind Starter Kit by Creative Tim
 =========================================================
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
-* 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/vue-notus/blob/master/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

From bb44dd6d39b58957cdcd9e4f9f67c844d0cf4881 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:39:53 +0200
Subject: [PATCH 006/107] docs: add changes

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72d6f10..037f0f6 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=vn-changelog)

From f37d8e9a8cb7ed1a7aae56f98272ae794a5ad180 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:39:57 +0200
Subject: [PATCH 007/107] docs: change master to main

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

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

From 02e8704ba0f7e6cbb258194cbecd170f7236c5c8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:39:59 +0200
Subject: [PATCH 008/107] docs: change master to main

---
 gulpfile.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index d0f793c..395d4f0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,7 +14,7 @@ gulp.task("licenses", async function () {
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
 * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md)
+* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
 
@@ -40,7 +40,7 @@ gulp.task("licenses", async function () {
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
 * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md)
+* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
 
@@ -66,7 +66,7 @@ gulp.task("licenses", async function () {
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
 * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md)
+* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
 

From 7456a84b045caeeb24c8ed8baa18fe22f5e98bfa Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:40:02 +0200
Subject: [PATCH 009/107] docs: change master to main

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

diff --git a/public/index.html b/public/index.html
index 2d25311..255b064 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
 
 * Product Page: https://www.creative-tim.com/product/vue-notus
 * Copyright 2021 Creative Tim (https://www.creative-tim.com)
-* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md)
+* Licensed under MIT (https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md)
 
 * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
 

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

---
 src/components/Footers/Footer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footers/Footer.vue b/src/components/Footers/Footer.vue
index 39a75ac..fc35f6e 100644
--- a/src/components/Footers/Footer.vue
+++ b/src/components/Footers/Footer.vue
@@ -106,7 +106,7 @@
                 <li>
                   <a
                     class="text-gray-700 hover:text-gray-900 font-semibold block pb-2 text-sm"
-                    href="https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md?ref=vn-footer"
+                    href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer"
                   >
                     MIT License
                   </a>

From f837d32a2c68bdc7b03ca7e068f415f59aa782d4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:40:06 +0200
Subject: [PATCH 011/107] docs: change master to main

---
 src/components/Footers/FooterAdmin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footers/FooterAdmin.vue b/src/components/Footers/FooterAdmin.vue
index cc28ece..ce9fc2b 100644
--- a/src/components/Footers/FooterAdmin.vue
+++ b/src/components/Footers/FooterAdmin.vue
@@ -46,7 +46,7 @@
             </li>
             <li>
               <a
-                href="https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md?ref=vn-footer-admin"
+                href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer-admin"
                 class="text-gray-700 hover:text-gray-900 text-sm font-semibold block py-1 px-3"
               >
                 MIT License

From 8f8eb62414ce0165c1962b90bdb540ca273e1068 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Wed, 17 Mar 2021 13:40:08 +0200
Subject: [PATCH 012/107] docs: change master to main

---
 src/components/Footers/FooterSmall.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Footers/FooterSmall.vue b/src/components/Footers/FooterSmall.vue
index 2729cdf..5623516 100644
--- a/src/components/Footers/FooterSmall.vue
+++ b/src/components/Footers/FooterSmall.vue
@@ -49,7 +49,7 @@
             </li>
             <li>
               <a
-                href="https://github.com/creativetimofficial/vue-notus/blob/master/LICENSE.md?ref=vn-footer-small"
+                href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer-small"
                 class="text-white hover:text-gray-400 text-sm font-semibold block py-1 px-3"
               >
                 MIT License

From b51b91f29e68b1c5712cbdf45cf9e71dcf726aa8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:04 +0200
Subject: [PATCH 013/107] refactor: update everything

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

diff --git a/.gitignore b/.gitignore
index a0dddc6..42738dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+commit.sh

From a6dde16050eb8f91c7b90cd0a5d6d13d9f0e9e3e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:05 +0200
Subject: [PATCH 014/107] refactor: update everything

---
 CHANGELOG.md | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 037f0f6..f873ce3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@
 ## [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`): 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`
+- `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0`
 ### Major style changes
 
 ### Deleted components
@@ -10,15 +23,28 @@
 ### Added components
 
 ### Deleted dependencies
-
+- `@tailwindcss/custom-forms`
 ### Added dependencies
-
+- `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`)
+- `autoprefixer`
+- `postcss`
 ### Updated dependencies
 ```
-
+@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
+core-js                          3.6.5   →    3.9.1
+tailwindcss                     1.8.10   →    2.0.4
+vue                             2.6.12   →    3.0.7
+vue-router                       3.4.3   →    3.5.1
+@vue/cli-plugin-babel            4.5.6   →   4.5.12
+@vue/cli-plugin-eslint           4.5.6   →   4.5.12
+@vue/cli-service                 4.5.6   →   4.5.12
+eslint                           6.8.0   →   7.22.0
+eslint-plugin-vue                6.2.2   →    7.7.0
 ```
 ### 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 30a161a485860d8ca635a42b03e1826b7c8472cc Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:07 +0200
Subject: [PATCH 015/107] refactor: update everything

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

diff --git a/package.json b/package.json
index b3a3928..982f6fe 100644
--- a/package.json
+++ b/package.json
@@ -13,24 +13,26 @@
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm run serve"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.14.0",
-    "@popperjs/core": "2.5.1",
-    "@tailwindcss/custom-forms": "0.2.1",
-    "chart.js": "2.9.3",
-    "core-js": "3.6.5",
+    "@fortawesome/fontawesome-free": "5.15.3",
+    "@popperjs/core": "2.9.1",
+    "@tailwindcss/forms": "0.2.1",
+    "chart.js": "2.9.4",
+    "core-js": "3.9.1",
     "gulp": "4.0.2",
     "gulp-append-prepend": "1.0.8",
-    "tailwindcss": "1.8.10",
-    "vue": "2.6.12",
-    "vue-router": "3.4.3"
+    "tailwindcss": "2.0.4",
+    "vue": "3.0.7",
+    "vue-router": "3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.5.6",
-    "@vue/cli-plugin-eslint": "4.5.6",
-    "@vue/cli-service": "4.5.6",
+    "@vue/cli-plugin-babel": "4.5.12",
+    "@vue/cli-plugin-eslint": "4.5.12",
+    "@vue/cli-service": "4.5.12",
+    "autoprefixer": "10.2.5",
     "babel-eslint": "10.1.0",
     "eslint": "6.8.0",
-    "eslint-plugin-vue": "6.2.2",
+    "eslint-plugin-vue": "7.7.0",
+    "postcss": "8.2.8",
     "vue-template-compiler": "2.6.12"
   },
   "eslintConfig": {

From 034fb185401f6658882c3276f08ab18a997d1c01 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:09 +0200
Subject: [PATCH 016/107] refactor: update everything

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

diff --git a/public/index.html b/public/index.html
index 255b064..2a284d9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,7 +32,7 @@
       Tailwind Starter Kit by Creative Tim | Free and Open Source UI Kit
     </title>
   </head>
-  <body class="text-gray-800 antialiased">
+  <body class="text-coolGray-700 antialiased">
     <noscript>
       <strong
         >We're sorry but vue-notus doesn't work properly without JavaScript

From 59109511d3b85a9f70026def91a6626e7968c089 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:10 +0200
Subject: [PATCH 017/107] refactor: update everything

---
 src/assets/styles/tailwind.css | 1770 ++++++++++++++++++++------------
 1 file changed, 1094 insertions(+), 676 deletions(-)

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index cb5b3ef..c7cf3fc 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1,98 +1,105 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/*! tailwindcss v2.0.4 | 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 {
+  -webkit-box-sizing: border-box;
+          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 {
-  -webkit-box-sizing: content-box;
-          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 {
@@ -100,29 +107,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 {
@@ -140,24 +153,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,
@@ -171,19 +190,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 */
@@ -191,162 +200,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 {
-  -webkit-box-sizing: border-box;
-          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"] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
 
 /**
- * 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;
-}
+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
@@ -412,10 +340,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.
  *
@@ -449,7 +387,7 @@ html {
           box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: #e2e8f0; /* 2 */
+  border-color: #e4e4e7; /* 2 */
 }
 
 /*
@@ -479,24 +417,29 @@ textarea {
 }
 
 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 input::-ms-input-placeholder, textarea::-ms-input-placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  opacity: 1;
+  color: #a1a1aa;
 }
 
 button,
@@ -557,7 +500,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;
 }
 
 /**
@@ -593,6 +536,208 @@ 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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  border-color: #2563eb;
+}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: #71717a;
+  opacity: 1;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #71717a;
+  opacity: 1;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #71717a;
+  opacity: 1;
+}
+
+input::-ms-input-placeholder, textarea::-ms-input-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;
+      -ms-user-select: none;
+          user-select: none;
+  -ms-flex-negative: 0;
+      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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          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%;
 }
@@ -621,6 +766,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -645,6 +796,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -669,6 +826,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -693,6 +856,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -717,6 +886,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -741,6 +916,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -765,6 +946,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -789,6 +976,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -813,6 +1006,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -837,6 +1036,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -861,6 +1066,12 @@ video {
   }
 }
 
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 @media (min-width: 640px) {
   .container {
     max-width: 640px;
@@ -885,89 +1096,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 (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@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 not print {
-  .form-checkbox::-ms-check {
-    border-width: 1px;
-    color: transparent;
-    background: inherit;
-    border-color: inherit;
-    border-radius: inherit;
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1280px;
   }
 }
 
-.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;
-      -ms-user-select: none;
-          user-select: none;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  height: 1em;
-  width: 1em;
-  color: #4299e1;
-  background-color: #fff;
-  border-color: #e2e8f0;
-  border-width: 1px;
-  border-radius: 0.25rem;
+.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;
-  -webkit-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-          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;
 }
 
@@ -1029,230 +1248,199 @@ 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-400 {
-  --bg-opacity: 1;
-  background-color: #fc8181;
-  background-color: rgba(252, 129, 129, var(--bg-opacity));
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
-  --bg-opacity: 1;
-  background-color: #f56565;
-  background-color: rgba(245, 101, 101, var(--bg-opacity));
+.bg-teal-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
 }
 
-.bg-red-600 {
-  --bg-opacity: 1;
-  background-color: #e53e3e;
-  background-color: rgba(229, 62, 62, var(--bg-opacity));
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
-  --bg-opacity: 1;
-  background-color: #c53030;
-  background-color: rgba(197, 48, 48, var(--bg-opacity));
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
 
-.bg-orange-200 {
-  --bg-opacity: 1;
-  background-color: #feebc8;
-  background-color: rgba(254, 235, 200, var(--bg-opacity));
+.bg-green-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(134, 239, 172, var(--tw-bg-opacity));
 }
 
-.bg-orange-500 {
-  --bg-opacity: 1;
-  background-color: #ed8936;
-  background-color: rgba(237, 137, 54, var(--bg-opacity));
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(74, 222, 128, var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --bg-opacity: 1;
-  background-color: #ecc94b;
-  background-color: rgba(236, 201, 75, var(--bg-opacity));
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(34, 197, 94, var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
-  --bg-opacity: 1;
-  background-color: #c6f6d5;
-  background-color: rgba(198, 246, 213, var(--bg-opacity));
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
 }
 
-.bg-green-300 {
-  --bg-opacity: 1;
-  background-color: #9ae6b4;
-  background-color: rgba(154, 230, 180, var(--bg-opacity));
+.bg-green-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(22, 101, 52, var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
-  --bg-opacity: 1;
-  background-color: #68d391;
-  background-color: rgba(104, 211, 145, var(--bg-opacity));
+.bg-green-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(20, 83, 45, var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
-  --bg-opacity: 1;
-  background-color: #48bb78;
-  background-color: rgba(72, 187, 120, var(--bg-opacity));
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(234, 179, 8, var(--tw-bg-opacity));
 }
 
-.bg-green-600 {
-  --bg-opacity: 1;
-  background-color: #38a169;
-  background-color: rgba(56, 161, 105, var(--bg-opacity));
+.bg-orange-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
 }
 
-.bg-green-800 {
-  --bg-opacity: 1;
-  background-color: #276749;
-  background-color: rgba(39, 103, 73, var(--bg-opacity));
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
 }
 
-.bg-green-900 {
-  --bg-opacity: 1;
-  background-color: #22543d;
-  background-color: rgba(34, 84, 61, var(--bg-opacity));
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
 }
 
-.bg-teal-200 {
-  --bg-opacity: 1;
-  background-color: #b2f5ea;
-  background-color: rgba(178, 245, 234, var(--bg-opacity));
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
 }
 
-.bg-teal-500 {
-  --bg-opacity: 1;
-  background-color: #38b2ac;
-  background-color: rgba(56, 178, 172, var(--bg-opacity));
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.bg-blue-200 {
-  --bg-opacity: 1;
-  background-color: #bee3f8;
-  background-color: rgba(190, 227, 248, var(--bg-opacity));
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
-  --bg-opacity: 1;
-  background-color: #63b3ed;
-  background-color: rgba(99, 179, 237, var(--bg-opacity));
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(185, 28, 28, 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-coolGray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
-.bg-purple-200 {
-  --bg-opacity: 1;
-  background-color: #e9d8fd;
-  background-color: rgba(233, 216, 253, var(--bg-opacity));
+.bg-coolGray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
 }
 
-.bg-purple-500 {
-  --bg-opacity: 1;
-  background-color: #9f7aea;
-  background-color: rgba(159, 122, 234, var(--bg-opacity));
+.bg-coolGray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
 }
 
-.bg-pink-500 {
-  --bg-opacity: 1;
-  background-color: #ed64a6;
-  background-color: rgba(237, 100, 166, var(--bg-opacity));
+.bg-coolGray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-100:active {
-  --bg-opacity: 1;
-  background-color: #f7fafc;
-  background-color: rgba(247, 250, 252, var(--bg-opacity));
+.bg-coolGray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, 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-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.active\:bg-green-600:active {
-  --bg-opacity: 1;
-  background-color: #38a169;
-  background-color: rgba(56, 161, 105, 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 {
-  --bg-opacity: 1;
-  background-color: #5a67d8;
-  background-color: rgba(90, 103, 216, var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
+}
+
+.active\:bg-green-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
+}
+
+.active\:bg-coolGray-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
 }
 
 .bg-none {
@@ -1292,7 +1480,7 @@ video {
 }
 
 .bg-full {
-  background-size: 100$;
+  background-size: 100%;
 }
 
 .border-collapse {
@@ -1303,56 +1491,74 @@ video {
   border-collapse: separate;
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
-.border-gray-100 {
-  --border-opacity: 1;
-  border-color: #f7fafc;
-  border-color: rgba(247, 250, 252, var(--border-opacity));
+.border-green-700 {
+  --tw-border-opacity: 1;
+  border-color: rgba(21, 128, 61, 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));
+.border-coolGray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --border-opacity: 1;
-  border-color: #718096;
-  border-color: rgba(113, 128, 150, var(--border-opacity));
+.border-coolGray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
 }
 
-.border-gray-700 {
-  --border-opacity: 1;
-  border-color: #4a5568;
-  border-color: rgba(74, 85, 104, var(--border-opacity));
+.border-coolGray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
 }
 
-.border-green-700 {
-  --border-opacity: 1;
-  border-color: #2f855a;
-  border-color: rgba(47, 133, 90, var(--border-opacity));
+.border-coolGray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
+}
+
+.border-coolGray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(75, 85, 99, var(--tw-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;
 }
@@ -1366,11 +1572,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;
 }
@@ -1392,7 +1629,7 @@ video {
 }
 
 .border-0 {
-  border-width: 0;
+  border-width: 0px;
 }
 
 .border-2 {
@@ -1404,25 +1641,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 {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -1555,7 +1804,7 @@ video {
       flex-wrap: wrap-reverse;
 }
 
-.flex-no-wrap {
+.flex-nowrap {
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
 }
@@ -1829,12 +2078,6 @@ video {
   float: none;
 }
 
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
 .clear-left {
   clear: left;
 }
@@ -1868,7 +2111,7 @@ video {
 }
 
 .h-0 {
-  height: 0;
+  height: 0px;
 }
 
 .h-2 {
@@ -1899,6 +2142,10 @@ video {
   height: 5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1937,38 +2184,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 {
@@ -2007,10 +2263,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;
 }
@@ -2045,15 +2317,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 {
@@ -2213,7 +2485,7 @@ video {
 }
 
 .last\:mr-0:last-child {
-  margin-right: 0;
+  margin-right: 0px;
 }
 
 .hover\:-mt-4:hover {
@@ -2224,6 +2496,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%;
 }
@@ -2265,7 +2549,7 @@ video {
 }
 
 .min-w-0 {
-  min-width: 0;
+  min-width: 0px;
 }
 
 .min-w-48 {
@@ -2314,11 +2598,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 {
@@ -2369,14 +2655,6 @@ video {
   overflow-y: scroll;
 }
 
-.scrolling-touch {
-  -webkit-overflow-scrolling: touch;
-}
-
-.scrolling-auto {
-  -webkit-overflow-scrolling: auto;
-}
-
 .overscroll-auto {
   -ms-scroll-chaining: chained;
       overscroll-behavior: auto;
@@ -2441,8 +2719,8 @@ video {
 }
 
 .px-0 {
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .py-1 {
@@ -2495,11 +2773,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;
@@ -2525,12 +2813,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 {
@@ -2629,34 +2922,29 @@ video {
   padding-bottom: 16rem;
 }
 
-.placeholder-gray-400::-webkit-input-placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+.placeholder-coolGray-300::-webkit-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-400::-moz-placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+.placeholder-coolGray-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-400:-ms-input-placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+.placeholder-coolGray-300:-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-400::-ms-input-placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+.placeholder-coolGray-300::-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-400::placeholder {
-  --placeholder-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--placeholder-opacity));
+.placeholder-coolGray-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-placeholder-opacity));
 }
 
 .pointer-events-none {
@@ -2684,24 +2972,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 {
@@ -2792,49 +3079,130 @@ video {
   resize: both;
 }
 
+* {
+  --tw-shadow: 0 0 #0000;
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow {
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-md {
-  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-lg {
-  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-xl {
-  -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-2xl {
-  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-none {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  --tw-shadow: 0 0 #0000;
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-md:hover {
-  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:shadow-lg:hover {
-  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          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);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+          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 {
-  -webkit-box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-          box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+.focus\:ring-opacity-50:focus {
+  --tw-ring-opacity: 0.5;
 }
 
 .fill-current {
@@ -2866,147 +3234,162 @@ 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));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.text-pink-400 {
+  --tw-text-opacity: 1;
+  color: rgba(244, 114, 182, var(--tw-text-opacity));
+}
+
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgba(79, 70, 229, var(--tw-text-opacity));
 }
 
-.text-gray-200 {
-  --text-opacity: 1;
-  color: #edf2f7;
-  color: rgba(237, 242, 247, var(--text-opacity));
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgba(96, 165, 250, var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgba(37, 99, 235, var(--tw-text-opacity));
+}
+
+.text-teal-500 {
+  --tw-text-opacity: 1;
+  color: rgba(20, 184, 166, var(--tw-text-opacity));
+}
+
+.text-green-300 {
+  --tw-text-opacity: 1;
+  color: rgba(134, 239, 172, var(--tw-text-opacity));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgba(34, 197, 94, var(--tw-text-opacity));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
 
-.text-gray-300 {
-  --text-opacity: 1;
-  color: #e2e8f0;
-  color: rgba(226, 232, 240, var(--text-opacity));
+.text-orange-500 {
+  --tw-text-opacity: 1;
+  color: rgba(249, 115, 22, var(--tw-text-opacity));
 }
 
-.text-gray-400 {
-  --text-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--text-opacity));
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgba(239, 68, 68, var(--tw-text-opacity));
 }
 
 .text-gray-500 {
-  --text-opacity: 1;
-  color: #a0aec0;
-  color: rgba(160, 174, 192, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(113, 113, 122, var(--tw-text-opacity));
 }
 
 .text-gray-600 {
-  --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));
 }
 
 .text-gray-700 {
-  --text-opacity: 1;
-  color: #4a5568;
-  color: rgba(74, 85, 104, var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(63, 63, 70, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --text-opacity: 1;
-  color: #2d3748;
-  color: rgba(45, 55, 72, var(--text-opacity));
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgba(24, 24, 27, var(--tw-text-opacity));
 }
 
-.text-gray-900 {
-  --text-opacity: 1;
-  color: #1a202c;
-  color: rgba(26, 32, 44, var(--text-opacity));
+.text-coolGray-100 {
+  --tw-text-opacity: 1;
+  color: rgba(243, 244, 246, var(--tw-text-opacity));
 }
 
-.text-red-500 {
-  --text-opacity: 1;
-  color: #f56565;
-  color: rgba(245, 101, 101, var(--text-opacity));
+.text-coolGray-200 {
+  --tw-text-opacity: 1;
+  color: rgba(229, 231, 235, var(--tw-text-opacity));
 }
 
-.text-orange-500 {
-  --text-opacity: 1;
-  color: #ed8936;
-  color: rgba(237, 137, 54, var(--text-opacity));
+.text-coolGray-300 {
+  --tw-text-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
 }
 
-.text-green-300 {
-  --text-opacity: 1;
-  color: #9ae6b4;
-  color: rgba(154, 230, 180, var(--text-opacity));
+.text-coolGray-400 {
+  --tw-text-opacity: 1;
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
 
-.text-green-500 {
-  --text-opacity: 1;
-  color: #48bb78;
-  color: rgba(72, 187, 120, var(--text-opacity));
+.text-coolGray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --text-opacity: 1;
-  color: #38a169;
-  color: rgba(56, 161, 105, var(--text-opacity));
+.text-coolGray-600 {
+  --tw-text-opacity: 1;
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
-.text-teal-500 {
-  --text-opacity: 1;
-  color: #38b2ac;
-  color: rgba(56, 178, 172, var(--text-opacity));
+.text-coolGray-700 {
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
-.text-blue-400 {
-  --text-opacity: 1;
-  color: #63b3ed;
-  color: rgba(99, 179, 237, var(--text-opacity));
+.text-coolGray-800 {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.text-blue-600 {
-  --text-opacity: 1;
-  color: #3182ce;
-  color: rgba(49, 130, 206, var(--text-opacity));
+.hover\:text-green-600:hover {
+  --tw-text-opacity: 1;
+  color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
 
-.text-pink-400 {
-  --text-opacity: 1;
-  color: #f687b3;
-  color: rgba(246, 135, 179, var(--text-opacity));
+.hover\:text-coolGray-300:hover {
+  --tw-text-opacity: 1;
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
+}
+
+.hover\:text-coolGray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-400:hover {
-  --text-opacity: 1;
-  color: #cbd5e0;
-  color: rgba(203, 213, 224, var(--text-opacity));
+.hover\:text-coolGray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-600:hover {
-  --text-opacity: 1;
-  color: #718096;
-  color: rgba(113, 128, 150, var(--text-opacity));
+.hover\:text-coolGray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.hover\:text-gray-800:hover {
-  --text-opacity: 1;
-  color: #2d3748;
-  color: rgba(45, 55, 72, var(--text-opacity));
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.hover\:text-gray-900:hover {
-  --text-opacity: 1;
-  color: #1a202c;
-  color: rgba(26, 32, 44, var(--text-opacity));
+.overflow-ellipsis {
+  text-overflow: ellipsis;
 }
 
-.hover\:text-green-600:hover {
-  --text-opacity: 1;
-  color: #38a169;
-  color: rgba(56, 161, 105, var(--text-opacity));
+.overflow-clip {
+  text-overflow: clip;
 }
 
 .italic {
@@ -3056,12 +3439,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 {
@@ -3069,35 +3452,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 {
@@ -3121,7 +3504,6 @@ video {
 .select-all {
   -webkit-user-select: all;
      -moz-user-select: all;
-      -ms-user-select: all;
           user-select: all;
 }
 
@@ -3168,7 +3550,7 @@ video {
   white-space: normal;
 }
 
-.whitespace-no-wrap {
+.whitespace-nowrap {
   white-space: nowrap;
 }
 
@@ -3197,12 +3579,6 @@ video {
   word-break: break-all;
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -3263,6 +3639,10 @@ video {
   z-index: 50;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .grid-flow-row {
   grid-auto-flow: row;
 }
@@ -3279,16 +3659,36 @@ 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;
-  -webkit-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));
-          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;
+  -webkit-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: 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;
+  -webkit-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: 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 {
@@ -3297,16 +3697,20 @@ video {
 }
 
 .rotate-90 {
-  --transform-rotate: 90deg;
+  --tw-rotate: 90deg;
 }
 
 .rotate-180 {
-  --transform-rotate: 180deg;
+  --tw-rotate: 180deg;
 }
 
 .transition-all {
   -webkit-transition-property: all;
   transition-property: all;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
 }
 
 .transition {
@@ -3314,6 +3718,10 @@ video {
   transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform;
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-box-shadow, -webkit-transform;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
 }
 
 .ease-linear {
@@ -3421,7 +3829,7 @@ video {
   }
 
   .sm\:mt-0 {
-    margin-top: 0;
+    margin-top: 0px;
   }
 
   .sm\:ml-1 {
@@ -3433,7 +3841,7 @@ video {
   }
 
   .sm\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .sm\:w-6\/12 {
@@ -3470,7 +3878,7 @@ video {
             flex-direction: column;
   }
 
-  .md\:flex-no-wrap {
+  .md\:flex-nowrap {
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
   }
@@ -3500,7 +3908,7 @@ video {
   }
 
   .md\:mt-0 {
-    margin-top: 0;
+    margin-top: 0px;
   }
 
   .md\:mt-4 {
@@ -3523,6 +3931,10 @@ video {
     margin-left: 16rem;
   }
 
+  .md\:max-w-4xl {
+    max-width: 56rem;
+  }
+
   .md\:min-h-full {
     min-height: 100%;
   }
@@ -3554,7 +3966,7 @@ video {
   }
 
   .md\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .md\:pb-2 {
@@ -3578,20 +3990,21 @@ 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 {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    --tw-shadow: 0 0 #0000;
+    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   .md\:text-left {
@@ -3617,11 +4030,15 @@ video {
   .md\:w-8\/12 {
     width: 66.666667%;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1024px) {
-  .lg\:bg-transparent {
-    background-color: transparent;
+  .lg\:bg-opacity-0 {
+    --tw-bg-opacity: 0;
   }
 
   .lg\:block {
@@ -3679,7 +4096,7 @@ video {
   }
 
   .lg\:mb-0 {
-    margin-bottom: 0;
+    margin-bottom: 0px;
   }
 
   .lg\:mr-1 {
@@ -3721,7 +4138,7 @@ video {
   }
 
   .lg\:pt-0 {
-    padding-top: 0;
+    padding-top: 0px;
   }
 
   .lg\:pt-4 {
@@ -3745,8 +4162,9 @@ video {
   }
 
   .lg\:shadow-none {
-    -webkit-box-shadow: none;
-            box-shadow: none;
+    --tw-shadow: 0 0 #0000;
+    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 
   .lg\:text-left {
@@ -3758,21 +4176,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));
+  .lg\:text-coolGray-200 {
+    --tw-text-opacity: 1;
+    color: rgba(229, 231, 235, var(--tw-text-opacity));
   }
 
-  .lg\:hover\:text-gray-300:hover {
-    --text-opacity: 1;
-    color: #e2e8f0;
-    color: rgba(226, 232, 240, var(--text-opacity));
+  .lg\:hover\:text-coolGray-200:hover {
+    --tw-text-opacity: 1;
+    color: rgba(229, 231, 235, var(--tw-text-opacity));
   }
 
   .lg\:w-auto {
@@ -3802,7 +4217,7 @@ video {
 
 @media (min-width: 1280px) {
   .xl\:mb-0 {
-    margin-bottom: 0;
+    margin-bottom: 0px;
   }
 
   .xl\:w-3\/12 {
@@ -3821,3 +4236,6 @@ video {
     width: 66.666667%;
   }
 }
+
+@media (min-width: 1536px) {
+}

From 250eed89447d03d95b82f23bbbe272cca52d8a49 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:12 +0200
Subject: [PATCH 018/107] refactor: update everything

---
 src/components/Cards/CardBarChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardBarChart.vue b/src/components/Cards/CardBarChart.vue
index 0256889..c3e028a 100644
--- a/src/components/Cards/CardBarChart.vue
+++ b/src/components/Cards/CardBarChart.vue
@@ -5,10 +5,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-400 mb-1 text-xs font-semibold">
             Performance
           </h6>
-          <h2 class="text-gray-800 text-xl font-semibold">
+          <h2 class="text-coolGray-700 text-xl font-semibold">
             Total orders
           </h2>
         </div>

From 44a62d38dd70a211920262aaef395cebfe55fd9b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:14 +0200
Subject: [PATCH 019/107] refactor: update everything

---
 src/components/Cards/CardLineChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardLineChart.vue b/src/components/Cards/CardLineChart.vue
index acc4825..2374057 100644
--- a/src/components/Cards/CardLineChart.vue
+++ b/src/components/Cards/CardLineChart.vue
@@ -1,11 +1,11 @@
 <template>
   <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-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-gray-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 223ee2e47068851eddf41f564d609152bc143d9b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:15 +0200
Subject: [PATCH 020/107] refactor: update everything

---
 src/components/Cards/CardPageVisits.vue | 50 ++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Cards/CardPageVisits.vue b/src/components/Cards/CardPageVisits.vue
index 855b9bd..3e88a88 100644
--- a/src/components/Cards/CardPageVisits.vue
+++ b/src/components/Cards/CardPageVisits.vue
@@ -5,7 +5,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-700">
             Page visits
           </h3>
         </div>
@@ -27,22 +27,22 @@
         <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-coolGray-new 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-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-coolGray-new 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-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-coolGray-new 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-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-coolGray-new 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>
@@ -51,22 +51,22 @@
         <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%
@@ -74,22 +74,22 @@
           </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%
@@ -97,22 +97,22 @@
           </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%
@@ -120,22 +120,22 @@
           </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%
@@ -143,22 +143,22 @@
           </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 428bb362e630a36a9d33a8a5f46fa1ea994c4219 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:17 +0200
Subject: [PATCH 021/107] refactor: update everything

---
 src/components/Cards/CardProfile.vue | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Cards/CardProfile.vue b/src/components/Cards/CardProfile.vue
index 5cf57f0..14e706a 100644
--- a/src/components/Cards/CardProfile.vue
+++ b/src/components/Cards/CardProfile.vue
@@ -17,56 +17,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-600"
               >
                 22
               </span>
-              <span class="text-sm text-gray-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-gray-700"
+                class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
               >
                 10
               </span>
-              <span class="text-sm text-gray-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-gray-700"
+                class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
               >
                 89
               </span>
-              <span class="text-sm text-gray-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-gray-800 mb-2"
+          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-gray-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-gray-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-gray-700 mt-10">
-          <i class="fas fa-briefcase mr-2 text-lg text-gray-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-gray-700">
-          <i class="fas fa-university mr-2 text-lg text-gray-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-gray-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-gray-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

From 3e39f875822c1f95c7b5d5f730523b62c2cbd851 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:18 +0200
Subject: [PATCH 022/107] refactor: update everything

---
 src/components/Cards/CardSettings.vue | 50 +++++++++++++--------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Cards/CardSettings.vue b/src/components/Cards/CardSettings.vue
index ac10bc9..0231511 100644
--- a/src/components/Cards/CardSettings.vue
+++ b/src/components/Cards/CardSettings.vue
@@ -1,10 +1,10 @@
 <template>
   <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-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-gray-800 text-xl font-bold">My account</h6>
+        <h6 class="text-coolGray-700 text-xl font-bold">My account</h6>
         <button
           class="bg-green-500 text-white active:bg-green-600 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"
@@ -15,21 +15,21 @@
     </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-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-gray-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-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="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>
@@ -37,14 +37,14 @@
           <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-600 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:shadow-outline 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>
@@ -52,14 +52,14 @@
           <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-600 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:shadow-outline 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>
@@ -67,37 +67,37 @@
           <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-600 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:shadow-outline 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-gray-400" />
+        <hr class="mt-6 border-b-1 border-coolGray-300" />
 
-        <h6 class="text-gray-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-gray-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-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="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>
@@ -105,14 +105,14 @@
           <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-600 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:shadow-outline 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>
@@ -120,14 +120,14 @@
           <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-600 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:shadow-outline 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>
@@ -135,37 +135,37 @@
           <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-600 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:shadow-outline 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-gray-400" />
+        <hr class="mt-6 border-b-1 border-coolGray-300" />
 
-        <h6 class="text-gray-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-gray-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-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="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 VueJS & Tailwind CSS. It is Free

From 48c9781f67dd4c3bea0a71da0ce66ddc14d8addb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:20 +0200
Subject: [PATCH 023/107] refactor: update everything

---
 src/components/Cards/CardSocialTraffic.vue | 38 +++++++++++-----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Cards/CardSocialTraffic.vue b/src/components/Cards/CardSocialTraffic.vue
index 73a84bc..468163e 100644
--- a/src/components/Cards/CardSocialTraffic.vue
+++ b/src/components/Cards/CardSocialTraffic.vue
@@ -5,7 +5,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-700">
             Social traffic
           </h3>
         </div>
@@ -27,34 +27,34 @@
         <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-coolGray-new 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-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-coolGray-new 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-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-coolGray-new 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>
         <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>
@@ -73,17 +73,17 @@
           </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>
@@ -102,17 +102,17 @@
           </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>
@@ -131,17 +131,17 @@
           </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>
@@ -160,17 +160,17 @@
           </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 79f0ab87729e7bfd6cfd96b7fa715561cd94f45f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:21 +0200
Subject: [PATCH 024/107] refactor: update everything

---
 src/components/Cards/CardStats.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Cards/CardStats.vue b/src/components/Cards/CardStats.vue
index 60ba336..8d34fa4 100644
--- a/src/components/Cards/CardStats.vue
+++ b/src/components/Cards/CardStats.vue
@@ -5,10 +5,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-400 uppercase font-bold text-xs">
             {{ statSubtitle }}
           </h5>
-          <span class="font-semibold text-xl text-gray-800">
+          <span class="font-semibold text-xl text-coolGray-700">
             {{ statTitle }}
           </span>
         </div>
@@ -21,7 +21,7 @@
           </div>
         </div>
       </div>
-      <p class="text-sm text-gray-500 mt-4">
+      <p class="text-sm text-coolGray-400 mt-4">
         <span class="mr-2" :class="[statPercentColor]">
           <i
             :class="[
@@ -30,7 +30,7 @@
           ></i>
           {{ statPercent }}%
         </span>
-        <span class="whitespace-no-wrap">{{ statDescripiron }}</span>
+        <span class="whitespace-nowrap">{{ statDescripiron }}</span>
       </p>
     </div>
   </div>

From da9cda170ac493341206df4b1851f64814222640 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:23 +0200
Subject: [PATCH 025/107] refactor: update everything

---
 src/components/Cards/CardTable.vue | 136 ++++++++++++++---------------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/components/Cards/CardTable.vue b/src/components/Cards/CardTable.vue
index 8f41a95..e4843d8 100644
--- a/src/components/Cards/CardTable.vue
+++ b/src/components/Cards/CardTable.vue
@@ -8,7 +8,7 @@
         <div class="relative w-full px-4 max-w-full flex-grow flex-1">
           <h3
             class="font-semibold text-lg"
-            :class="[color === 'light' ? 'text-gray-800' : 'text-white']"
+            :class="[color === 'light' ? 'text-coolGray-700' : 'text-white']"
           >
             Card Tables
           </h3>
@@ -21,60 +21,60 @@
         <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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
               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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
               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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
               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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
               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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
               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"
               :class="[
                 color === 'light'
-                  ? 'bg-gray-100 text-gray-600 border-gray-200'
+                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             ></th>
@@ -83,7 +83,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="bootstrap"
@@ -92,49 +92,49 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-gray-700' : 'text-white']"
+                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
               >
                 Argon Design System
               </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
                   :src="team1"
                   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-new shadow"
                 />
                 <img
                   :src="team2"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   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-new shadow -ml-4"
                 />
               </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>
@@ -151,14 +151,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"
             >
               <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="angular"
@@ -167,50 +167,50 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-gray-700' : 'text-white']"
+                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
               >
                 Angular Now UI Kit PRO
               </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
                   :src="team1"
                   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-new shadow"
                 />
                 <img
                   :src="team2"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   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-new shadow -ml-4"
                 />
               </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>
@@ -227,14 +227,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"
             >
               <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="sketch"
@@ -243,49 +243,49 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-gray-700' : 'text-white']"
+                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
               >
                 Black Dashboard Sketch
               </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
                   :src="team1"
                   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-new shadow"
                 />
                 <img
                   :src="team2"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   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-new shadow -ml-4"
                 />
               </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>
@@ -302,14 +302,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"
             >
               <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="react"
@@ -318,49 +318,49 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-gray-700' : 'text-white']"
+                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
               >
                 React Material Dashboard
               </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
                   :src="team1"
                   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-new shadow"
                 />
                 <img
                   :src="team2"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   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-new shadow -ml-4"
                 />
               </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>
@@ -377,14 +377,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"
             >
               <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="vue"
@@ -393,50 +393,50 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-gray-700' : 'text-white']"
+                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
               >
                 React Material Dashboard
               </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
                   :src="team1"
                   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-new shadow"
                 />
                 <img
                   :src="team2"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   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-new shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   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-new shadow -ml-4"
                 />
               </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>
@@ -453,7 +453,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"
             >
               <table-dropdown />
             </td>

From 4ed530bab2ac83ffdd51bfb267f7455f1de0df8f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:25 +0200
Subject: [PATCH 026/107] refactor: update everything

---
 src/components/Dropdowns/IndexDropdown.vue | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Dropdowns/IndexDropdown.vue b/src/components/Dropdowns/IndexDropdown.vue
index 41353a3..80bcfd4 100644
--- a/src/components/Dropdowns/IndexDropdown.vue
+++ b/src/components/Dropdowns/IndexDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <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-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -17,67 +17,67 @@
       }"
     >
       <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-coolGray-400"
       >
         Admin Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Dashboard
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Settings
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Tables
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Maps
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-gray-200" />
+      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
       <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-coolGray-400"
       >
         Auth Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Login
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Register
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-gray-200" />
+      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
       <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-coolGray-400"
       >
         No Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Lading
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Profile
       </router-link>

From 960c1883fbe3cd5b0a0bcf32a6e4226de64d8079 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:26 +0200
Subject: [PATCH 027/107] refactor: update everything

---
 src/components/Dropdowns/NotificationDropdown.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Dropdowns/NotificationDropdown.vue b/src/components/Dropdowns/NotificationDropdown.vue
index f4cbd91..09093bb 100644
--- a/src/components/Dropdowns/NotificationDropdown.vue
+++ b/src/components/Dropdowns/NotificationDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a
-      class="text-gray-600 block py-1 px-3"
+      class="text-coolGray-500 block py-1 px-3"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
     >
@@ -17,26 +17,26 @@
     >
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Another action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Something else here
       </a>
-      <div class="h-0 my-2 border border-solid border-gray-200" />
+      <div class="h-0 my-2 border border-solid border-coolGray-100" />
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Seprated link
       </a>

From ef719ca7a51e5d290ac764fe19035e93f1c2c87f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:28 +0200
Subject: [PATCH 028/107] refactor: update everything

---
 src/components/Dropdowns/PagesDropdown.vue | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Dropdowns/PagesDropdown.vue b/src/components/Dropdowns/PagesDropdown.vue
index 5200202..19f1cd2 100644
--- a/src/components/Dropdowns/PagesDropdown.vue
+++ b/src/components/Dropdowns/PagesDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <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-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -17,67 +17,67 @@
       }"
     >
       <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-coolGray-400"
       >
         Admin Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Dashboard
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Settings
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Tables
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Maps
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-gray-200" />
+      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
       <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-coolGray-400"
       >
         Auth Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Login
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Register
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-gray-200" />
+      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
       <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-coolGray-400"
       >
         No Layout
       </span>
       <router-link
         to="/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-coolGray-700"
       >
         Lading
       </router-link>
       <router-link
         to="/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-coolGray-700"
       >
         Profile
       </router-link>

From f1bc98dbc5501d1577d76276e52b7f24b63e2ec8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:29 +0200
Subject: [PATCH 029/107] refactor: update everything

---
 src/components/Dropdowns/TableDropdown.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Dropdowns/TableDropdown.vue b/src/components/Dropdowns/TableDropdown.vue
index 5963826..5cc0057 100644
--- a/src/components/Dropdowns/TableDropdown.vue
+++ b/src/components/Dropdowns/TableDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a
-      class="text-gray-600 py-1 px-3"
+      class="text-coolGray-500 py-1 px-3"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -18,19 +18,19 @@
     >
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Another action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Something else here
       </a>

From 22520a79a70bddec83934cb8fe4460f2651fb378 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:31 +0200
Subject: [PATCH 030/107] refactor: update everything

---
 src/components/Dropdowns/UserDropdown.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Dropdowns/UserDropdown.vue b/src/components/Dropdowns/UserDropdown.vue
index ffa20fe..19705a3 100644
--- a/src/components/Dropdowns/UserDropdown.vue
+++ b/src/components/Dropdowns/UserDropdown.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <a
-      class="text-gray-600 block"
+      class="text-coolGray-500 block"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
     >
       <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-200 inline-flex items-center justify-center rounded-full"
         >
           <img
             alt="..."
@@ -28,26 +28,26 @@
     >
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Another action
       </a>
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Something else here
       </a>
-      <div class="h-0 my-2 border border-solid border-gray-200" />
+      <div class="h-0 my-2 border border-solid border-coolGray-100" />
       <a
         href="javascript:void(0);"
-        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-coolGray-700"
       >
         Seprated link
       </a>

From ee745dfe8ec848d914f5c43b74e28db5563ee418 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:32 +0200
Subject: [PATCH 031/107] refactor: update everything

---
 src/components/Footers/Footer.vue | 34 +++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/Footers/Footer.vue b/src/components/Footers/Footer.vue
index fc35f6e..7d9e05e 100644
--- a/src/components/Footers/Footer.vue
+++ b/src/components/Footers/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="relative bg-gray-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);"
@@ -14,7 +14,7 @@
         y="0"
       >
         <polygon
-          class="text-gray-300 fill-current"
+          class="text-coolGray-200 fill-current"
           points="2560 0 2560 100 0 100"
         ></polygon>
       </svg>
@@ -23,7 +23,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-600">
             Find us on any of these platforms, we respond 1-2 business days.
           </h5>
           <div class="mt-6 lg:mb-0 mb-6">
@@ -46,7 +46,7 @@
               <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-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>
@@ -57,14 +57,14 @@
           <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-500 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-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                     href="https://www.creative-tim.com/presentation?ref=vn-footer"
                   >
                     About Us
@@ -72,7 +72,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Blog
@@ -80,7 +80,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Github
@@ -88,7 +88,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Free Products
@@ -98,14 +98,14 @@
             </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-500 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-600 hover:text-coolGray-800 font-semibold block pb-2 text-sm"
                     href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer"
                   >
                     MIT License
@@ -113,7 +113,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Terms & Conditions
@@ -121,7 +121,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Privacy Policy
@@ -129,7 +129,7 @@
                 </li>
                 <li>
                   <a
-                    class="text-gray-700 hover:text-gray-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=vn-footer"
                   >
                     Contact Us
@@ -140,16 +140,16 @@
           </div>
         </div>
       </div>
-      <hr class="my-6 border-gray-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-gray-600 font-semibold py-1">
+          <div class="text-sm text-coolGray-500 font-semibold py-1">
             Copyright © {{ date }} Vue Notus by
             <a
               href="https://www.creative-tim.com?ref=vn-footer"
-              class="text-gray-600 hover:text-gray-900"
+              class="text-coolGray-500 hover:text-coolGray-800"
             >
               Creative Tim
             </a>

From d11b0f277a5fa544a4067765c51b44a9ba6eefdd Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:34 +0200
Subject: [PATCH 032/107] refactor: update everything

---
 src/components/Footers/FooterAdmin.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Footers/FooterAdmin.vue b/src/components/Footers/FooterAdmin.vue
index ce9fc2b..7d8ab3a 100644
--- a/src/components/Footers/FooterAdmin.vue
+++ b/src/components/Footers/FooterAdmin.vue
@@ -1,18 +1,18 @@
 <template>
   <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-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-gray-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=vn-footer-admin"
-              class="text-gray-600 hover:text-gray-800 text-sm font-semibold py-1"
+              class="text-coolGray-500 hover:text-coolGray-700 text-sm font-semibold py-1"
             >
               Creative Tim
             </a>
@@ -23,7 +23,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com?ref=vn-footer-admin"
-                class="text-gray-700 hover:text-gray-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>
@@ -31,7 +31,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com/presentation?ref=vn-footer-admin"
-                class="text-gray-700 hover:text-gray-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>
@@ -39,7 +39,7 @@
             <li>
               <a
                 href="http://blog.creative-tim.com?ref=vn-footer-admin"
-                class="text-gray-700 hover:text-gray-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>
@@ -47,7 +47,7 @@
             <li>
               <a
                 href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer-admin"
-                class="text-gray-700 hover:text-gray-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 c0dce901d91f5b1ccf96741312184fdfe46b4b5f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:36 +0200
Subject: [PATCH 033/107] refactor: update everything

---
 src/components/Footers/FooterSmall.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Footers/FooterSmall.vue b/src/components/Footers/FooterSmall.vue
index 5623516..7c54cb5 100644
--- a/src/components/Footers/FooterSmall.vue
+++ b/src/components/Footers/FooterSmall.vue
@@ -1,21 +1,21 @@
 <template>
   <footer
     class="pb-6"
-    :class="[absolute ? 'absolute w-full bottom-0 bg-gray-900' : 'relative']"
+    :class="[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-gray-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
-            class="text-sm text-gray-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=vn-footer-small"
-              class="text-white hover:text-gray-400 text-sm font-semibold py-1"
+              class="text-white hover:text-coolGray-300 text-sm font-semibold py-1"
             >
               Creative Tim
             </a>
@@ -26,7 +26,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com?ref=vn-footer-small"
-                class="text-white hover:text-gray-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>
@@ -34,7 +34,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com/presentation?ref=vn-footer-small"
-                class="text-white hover:text-gray-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>
@@ -42,7 +42,7 @@
             <li>
               <a
                 href="http://blog.creative-tim.com?ref=vn-footer-small"
-                class="text-white hover:text-gray-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>
@@ -50,7 +50,7 @@
             <li>
               <a
                 href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-footer-small"
-                class="text-white hover:text-gray-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 679d87845ec71eb824a0a9e67dd765412d8b236b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:37 +0200
Subject: [PATCH 034/107] refactor: update everything

---
 src/components/Navbars/AdminNavbar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbars/AdminNavbar.vue b/src/components/Navbars/AdminNavbar.vue
index 589753b..069d8bb 100644
--- a/src/components/Navbars/AdminNavbar.vue
+++ b/src/components/Navbars/AdminNavbar.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- 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
@@ -19,14 +19,14 @@
       >
         <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-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-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="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 01cad55174cd5b90a41d009a0161babe59cec387 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:39 +0200
Subject: [PATCH 035/107] refactor: update everything

---
 src/components/Navbars/AuthNavbar.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Navbars/AuthNavbar.vue b/src/components/Navbars/AuthNavbar.vue
index 5c5f7e1..57d4755 100644
--- a/src/components/Navbars/AuthNavbar.vue
+++ b/src/components/Navbars/AuthNavbar.vue
@@ -9,7 +9,7 @@
         class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
       >
         <router-link
-          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"
           to="/"
         >
           Vue Notus
@@ -23,18 +23,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"
         :class="[navbarOpen ? 'block rounded shadow-lg' : 'hidden']"
         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-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-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/vue/overview/notus?ref=vn-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-200 text-coolGray-400 far fa-file-alt text-lg leading-lg mr-2"
               />
               Docs
             </a>
@@ -46,12 +46,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-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%2Fvue-notus%2F%23%2F"
               target="_blank"
             >
               <i
-                class="lg:text-gray-300 text-gray-500 fab fa-facebook text-lg leading-lg"
+                class="lg:text-coolGray-200 text-coolGray-400 fab fa-facebook text-lg leading-lg"
               />
               <span class="lg:hidden inline-block ml-2">Share</span>
             </a>
@@ -59,12 +59,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-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%2Fvue-notus%2F%23%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20VueJS%20UI%20Kit%20and%20Admin.%20Let%20Vue%20Notus%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level.%20"
               target="_blank"
             >
               <i
-                class="lg:text-gray-300 text-gray-500 fab fa-twitter text-lg leading-lg"
+                class="lg:text-coolGray-200 text-coolGray-400 fab fa-twitter text-lg leading-lg"
               />
               <span class="lg:hidden inline-block ml-2">Tweet</span>
             </a>
@@ -72,12 +72,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-200 text-coolGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
               href="https://github.com/creativetimofficial/vue-notus?ref=vn-auth-navbar"
               target="_blank"
             >
               <i
-                class="lg:text-gray-300 text-gray-500 fab fa-github text-lg leading-lg"
+                class="lg:text-coolGray-200 text-coolGray-400 fab fa-github text-lg leading-lg"
               />
               <span class="lg:hidden inline-block ml-2">Star</span>
             </a>
@@ -85,7 +85,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-700 active:bg-coolGray-new 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 041c66d0887e1d79c453271a95d74266c1c11c4f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:40 +0200
Subject: [PATCH 036/107] refactor: update everything

---
 src/components/Navbars/IndexNavbar.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbars/IndexNavbar.vue b/src/components/Navbars/IndexNavbar.vue
index 14e28dd..c044bb9 100644
--- a/src/components/Navbars/IndexNavbar.vue
+++ b/src/components/Navbars/IndexNavbar.vue
@@ -10,7 +10,7 @@
       >
         <router-link to="/">
           <a
-            class="text-gray-800 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase"
+            class="text-coolGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
             href="#pablo"
           >
             Vue Notus
@@ -32,11 +32,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-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/vue/overview/notus?ref=vn-index-navbar"
             >
               <i
-                class="text-gray-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"
               />
               Docs
             </a>
@@ -48,33 +48,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-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%2Fvue-notus%2F%23%2F"
               target="_blank"
             >
-              <i class="text-gray-500 fab fa-facebook text-lg leading-lg" />
+              <i class="text-coolGray-400 fab fa-facebook text-lg leading-lg" />
               <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-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%2Fvue-notus%2F%23%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20VueJS%20UI%20Kit%20and%20Admin.%20Let%20Vue%20Notus%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level.%20"
               target="_blank"
             >
-              <i class="text-gray-500 fab fa-twitter text-lg leading-lg" />
+              <i class="text-coolGray-400 fab fa-twitter text-lg leading-lg" />
               <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-500 text-coolGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
               href="https://github.com/creativetimofficial/vue-notus?ref=vn-index-navbar"
               target="_blank"
             >
-              <i class="text-gray-500 fab fa-github text-lg leading-lg" />
+              <i class="text-coolGray-400 fab fa-github text-lg leading-lg" />
               <span class="lg:hidden inline-block ml-2">Star</span>
             </a>
           </li>

From 8f56b4ef17d5525a3c4c82a421786cf61db002cc Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:42 +0200
Subject: [PATCH 037/107] refactor: update everything

---
 src/components/Sidebar/Sidebar.vue | 84 +++++++++++++++---------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index 600ea3e..006fbdf 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -1,9 +1,9 @@
 <template>
   <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 @@
       </button>
       <!-- Brand -->
       <router-link
-        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-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
         to="/"
       >
         Vue Notus
@@ -36,12 +36,12 @@
       >
         <!-- 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-200"
         >
           <div class="flex flex-wrap">
             <div class="w-6/12">
               <router-link
-                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-coolGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
                 to="/"
               >
                 Vue Notus
@@ -64,7 +64,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="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>
@@ -73,7 +73,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-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
         >
           Admin Layout Pages
         </h6>
@@ -92,12 +92,12 @@
                 :class="[
                   isActive
                     ? 'text-green-500 hover:text-green-600'
-                    : 'text-gray-800 hover:text-gray-600',
+                    : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
                 <i
                   class="fas fa-tv mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-gray-400']"
+                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
                 ></i>
                 Dashboard
               </a>
@@ -116,12 +116,12 @@
                 :class="[
                   isActive
                     ? 'text-green-500 hover:text-green-600'
-                    : 'text-gray-800 hover:text-gray-600',
+                    : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
                 <i
                   class="fas fa-tools mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-gray-400']"
+                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
                 ></i>
                 Settings
               </a>
@@ -140,12 +140,12 @@
                 :class="[
                   isActive
                     ? 'text-green-500 hover:text-green-600'
-                    : 'text-gray-800 hover:text-gray-600',
+                    : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
                 <i
                   class="fas fa-table mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-gray-400']"
+                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
                 ></i>
                 Tables
               </a>
@@ -164,12 +164,12 @@
                 :class="[
                   isActive
                     ? 'text-green-500 hover:text-green-600'
-                    : 'text-gray-800 hover:text-gray-600',
+                    : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
                 <i
                   class="fas fa-map-marked mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-gray-400']"
+                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
                 ></i>
                 Maps
               </a>
@@ -181,7 +181,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-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
         >
           Auth Layout Pages
         </h6>
@@ -190,20 +190,20 @@
         <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
           <li class="items-center">
             <router-link
-              class="text-gray-800 hover:text-gray-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"
               to="/auth/login"
             >
-              <i class="fas fa-fingerprint text-gray-400 mr-2 text-sm"></i>
+              <i class="fas fa-fingerprint text-coolGray-300 mr-2 text-sm"></i>
               Login
             </router-link>
           </li>
 
           <li class="items-center">
             <router-link
-              class="text-gray-800 hover:text-gray-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"
               to="/auth/register"
             >
-              <i class="fas fa-clipboard-list text-gray-400 mr-2 text-sm"></i>
+              <i class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"></i>
               Register
             </router-link>
           </li>
@@ -213,7 +213,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-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
         >
           No Layout Pages
         </h6>
@@ -222,20 +222,20 @@
         <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
           <li class="items-center">
             <router-link
-              class="text-gray-800 hover:text-gray-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"
               to="/landing"
             >
-              <i class="fas fa-newspaper text-gray-400 mr-2 text-sm"></i>
+              <i class="fas fa-newspaper text-coolGray-300 mr-2 text-sm"></i>
               Landing Page
             </router-link>
           </li>
 
           <li class="items-center">
             <router-link
-              class="text-gray-800 hover:text-gray-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"
               to="/profile"
             >
-              <i class="fas fa-user-circle text-gray-400 mr-2 text-sm"></i>
+              <i class="fas fa-user-circle text-coolGray-300 mr-2 text-sm"></i>
               Profile Page
             </router-link>
           </li>
@@ -245,7 +245,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-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
         >
           Documentation
         </h6>
@@ -255,9 +255,9 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/colors/notus"
               target="_blank"
-              class="text-gray-800 hover:text-gray-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-gray-400 text-base"></i>
+              <i class="fas fa-paint-brush mr-2 text-coolGray-300 text-base"></i>
               Styles
             </a>
           </li>
@@ -266,9 +266,9 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus"
               target="_blank"
-              class="text-gray-800 hover:text-gray-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-gray-400 text-base"></i>
+              <i class="fab fa-css3-alt mr-2 text-coolGray-300 text-base"></i>
               CSS Components
             </a>
           </li>
@@ -277,9 +277,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               Angular
             </a>
           </li>
@@ -288,9 +288,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               Javascript
             </a>
           </li>
@@ -299,9 +299,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               NextJS
             </a>
           </li>
@@ -310,9 +310,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               React
             </a>
           </li>
@@ -321,9 +321,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               Svelte
             </a>
           </li>
@@ -332,9 +332,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-700 hover:text-coolGray-500 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-300 text-base"></i>
               VueJS
             </a>
           </li>

From e3a339503ed89a92d8b567baca1d2221b1ab471a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:43 +0200
Subject: [PATCH 038/107] refactor: update everything

---
 src/layouts/Admin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Admin.vue b/src/layouts/Admin.vue
index 97f9ab3..30d5cdb 100644
--- a/src/layouts/Admin.vue
+++ b/src/layouts/Admin.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <sidebar />
-    <div class="relative md:ml-64 bg-gray-200">
+    <div class="relative md:ml-64 bg-coolGray-100">
       <admin-navbar />
       <header-stats />
       <div class="px-4 md:px-10 mx-auto w-full -m-24">

From 67a4a50496feb6d82abf251e650990300e7ef5f7 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:45 +0200
Subject: [PATCH 039/107] refactor: update everything

---
 src/layouts/Auth.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Auth.vue b/src/layouts/Auth.vue
index 5204744..2d23399 100644
--- a/src/layouts/Auth.vue
+++ b/src/layouts/Auth.vue
@@ -4,7 +4,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-800 bg-no-repeat bg-full"
           :style="`background-image: url('${registerBg2}');`"
         ></div>
         <router-view />

From 8925d7a41aa4dd23d03cf885728f4f101d7019e4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:47 +0200
Subject: [PATCH 040/107] refactor: update everything

---
 src/views/Index.vue | 118 ++++++++++++++++++++++----------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 6ec088f..64dd50e 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -7,15 +7,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-600">
               Vue Notus - 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-500">
               Vue Notus 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-600"
                 target="_blank"
               >
                 Tailwind CSS
@@ -33,7 +33,7 @@
               </a>
               <a
                 href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
-                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-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                 target="_blank"
               >
                 Github Star
@@ -50,7 +50,7 @@
       />
     </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-100">
       <div
         class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
         style="transform: translateZ(0);"
@@ -65,7 +65,7 @@
           y="0"
         >
           <polygon
-            class="text-gray-200 fill-current"
+            class="text-coolGray-100 fill-current"
             points="2560 0 2560 100 0 100"
           ></polygon>
         </svg>
@@ -113,14 +113,14 @@
                 <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-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-gray-600">
+                    <p class="mb-4 text-coolGray-500">
                       Vue Notus comes with a huge number of Fully Coded CSS
                       components.
                     </p>
@@ -129,14 +129,14 @@
                 <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-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-gray-600">
+                    <p class="mb-4 text-coolGray-500">
                       We also feature many dynamic components for React, NextJS,
                       Vue and Angular.
                     </p>
@@ -147,12 +147,12 @@
                 <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-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-gray-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>
@@ -161,14 +161,14 @@
                 <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-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-gray-600">
+                    <p class="mb-4 text-coolGray-500">
                       Built by developers for developers. You will love how easy
                       is to to work with Vue Notus.
                     </p>
@@ -184,7 +184,7 @@
         <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-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>
@@ -192,7 +192,7 @@
               CSS Components
             </h3>
             <p
-              class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
+              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
@@ -200,42 +200,42 @@
             </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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-500 bg-white uppercase last:mr-0 mr-2 mt-2"
               >
                 Typography
               </span>
@@ -243,7 +243,7 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-index"
               target="_blank"
-              class="font-bold text-gray-800 hover:text-gray-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>
@@ -329,7 +329,7 @@
                   target="_blank"
                 >
                   <div
-                    class="bg-gray-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="..."
@@ -400,7 +400,7 @@
 
           <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-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>
@@ -408,56 +408,56 @@
               Javascript Components
             </h3>
             <p
-              class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
+              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-gray-700"
+              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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-500 bg-white uppercase last:mr-0 mr-2 mt-2"
               >
                 Tooltips
               </span>
@@ -465,7 +465,7 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-index"
               target="_blank"
-              class="font-bold text-gray-800 hover:text-gray-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>
@@ -479,14 +479,14 @@
           <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-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-gray-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
@@ -497,13 +497,13 @@
                   <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-500 bg-coolGray-new mr-3"
                       >
                         <i class="fas fa-fingerprint"></i>
                       </span>
                     </div>
                     <div>
-                      <h4 class="text-gray-600">
+                      <h4 class="text-coolGray-500">
                         Built by Developers for Developers
                       </h4>
                     </div>
@@ -513,13 +513,13 @@
                   <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-500 bg-coolGray-new mr-3"
                       >
                         <i class="fab fa-html5"></i>
                       </span>
                     </div>
                     <div>
-                      <h4 class="text-gray-600">
+                      <h4 class="text-coolGray-500">
                         Carefully crafted code for Components
                       </h4>
                     </div>
@@ -529,13 +529,13 @@
                   <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-500 bg-coolGray-new mr-3"
                       >
                         <i class="far fa-paper-plane"></i>
                       </span>
                     </div>
                     <div>
-                      <h4 class="text-gray-600">
+                      <h4 class="text-coolGray-500">
                         Dynamic Javascript Components
                       </h4>
                     </div>
@@ -562,7 +562,7 @@
       <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-500">
             Vue Notus 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.
@@ -571,7 +571,7 @@
       </div>
     </section>
 
-    <section class="block relative z-1 bg-gray-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">
@@ -632,12 +632,12 @@
       </div>
     </section>
 
-    <section class="py-20 bg-gray-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-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-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>
@@ -645,12 +645,12 @@
               Open Source
             </h3>
             <p
-              class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-500"
+              class="text-lg font-light leading-relaxed mt-4 mb-4 text-coolGray-400"
             >
               Since
               <a
                 href="https://tailwindcss.com/?ref=creativetim"
-                class="text-gray-400"
+                class="text-coolGray-300"
                 target="_blank"
               >
                 Tailwind CSS
@@ -660,7 +660,7 @@
               the quality of the code!
             </p>
             <p
-              class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-500"
+              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!
@@ -668,7 +668,7 @@
             <a
               href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
               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-700 active:bg-coolGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
             >
               Github Star
             </a>
@@ -676,14 +676,14 @@
 
           <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-700 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-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);"
@@ -698,7 +698,7 @@
           y="0"
         >
           <polygon
-            class="text-gray-300 fill-current"
+            class="text-coolGray-200 fill-current"
             points="2560 0 2560 100 0 100"
           ></polygon>
         </svg>
@@ -717,7 +717,7 @@
             <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-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!
@@ -733,7 +733,7 @@
               <a
                 href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
                 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-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 3eff5cbc3b0e5ebccf82898c822fbac40094f230 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:48 +0200
Subject: [PATCH 041/107] refactor: update everything

---
 src/views/Landing.vue | 80 +++++++++++++++++++++----------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index da775e1..78032fa 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -23,7 +23,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-200">
                   This is a simple example of a Landing Page you can build using
                   Vue Notus. It features multiple CSS components based on the
                   Tailwind CSS design system.
@@ -46,14 +46,14 @@
             y="0"
           >
             <polygon
-              class="text-gray-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-gray-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">
@@ -67,7 +67,7 @@
                     <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-500">
                     Divide details about your product or agency work into parts.
                     A paragraph describing a feature will be enough.
                   </p>
@@ -86,7 +86,7 @@
                     <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-500">
                     Keep you user engaged by providing meaningful information.
                     Remember that by this time, the user is curious.
                   </p>
@@ -105,7 +105,7 @@
                     <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-500">
                     Write a few lines about each one. A paragraph describing a
                     feature will be enough. Keep you user engaged!
                   </p>
@@ -117,7 +117,7 @@
           <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-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-coolGray-new"
               >
                 <i class="fas fa-user-friends text-xl"></i>
               </div>
@@ -125,20 +125,20 @@
                 Working with us is a pleasure
               </h3>
               <p
-                class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
+                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-gray-700"
+                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>
-              <router-link to="/" class="font-bold text-gray-800 mt-8">
+              <router-link to="/" class="font-bold text-coolGray-700 mt-8">
                 Check Vue Notus!
               </router-link>
             </div>
@@ -217,7 +217,7 @@
                   <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-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.
@@ -233,7 +233,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-gray-600">
+                        <h4 class="text-coolGray-500">
                           Carefully crafted components
                         </h4>
                       </div>
@@ -249,7 +249,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-gray-600">
+                        <h4 class="text-coolGray-500">
                           Amazing page examples
                         </h4>
                       </div>
@@ -265,7 +265,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-gray-600">Dynamic components</h4>
+                        <h4 class="text-coolGray-500">Dynamic components</h4>
                       </div>
                     </div>
                   </li>
@@ -281,7 +281,7 @@
           <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-500">
                 According to the National Oceanic and Atmospheric
                 Administration, Ted, Scambos, NSIDClead scentist, puts the
                 potentially record maximum.
@@ -298,7 +298,7 @@
                 />
                 <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-400 uppercase font-semibold">
                     Web Developer
                   </p>
                   <div class="mt-6">
@@ -333,7 +333,7 @@
                 />
                 <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-400 uppercase font-semibold">
                     Marketing Specialist
                   </p>
                   <div class="mt-6">
@@ -362,7 +362,7 @@
                 />
                 <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-400 uppercase font-semibold">
                     UI/UX Designer
                   </p>
                   <div class="mt-6">
@@ -379,7 +379,7 @@
                       <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-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>
@@ -397,7 +397,7 @@
                 />
                 <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-400 uppercase font-semibold">
                     Founder and CEO
                   </p>
                   <div class="mt-6">
@@ -420,7 +420,7 @@
                       <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-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>
@@ -433,7 +433,7 @@
         </div>
       </section>
 
-      <section class="pb-20 relative block bg-gray-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);"
@@ -448,7 +448,7 @@
             y="0"
           >
             <polygon
-              class="text-gray-900 fill-current"
+              class="text-coolGray-800 fill-current"
               points="2560 0 2560 100 0 100"
             ></polygon>
           </svg>
@@ -460,7 +460,7 @@
               <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-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.
@@ -470,42 +470,42 @@
           <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-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-gray-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-gray-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-gray-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-gray-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-gray-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>
@@ -513,51 +513,51 @@
           </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-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-gray-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-gray-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-gray-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-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="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-gray-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-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="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-gray-700 text-xs font-bold mb-2"
+                      class="block uppercase text-coolGray-600 text-xs font-bold mb-2"
                       htmlFor="message"
                     >
                       Message
@@ -565,13 +565,13 @@
                     <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="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..."
                     />
                   </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-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 65bbe57ed75b1c5d8fffdb20b8d394a8601fb585 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:50 +0200
Subject: [PATCH 042/107] refactor: update everything

---
 src/views/Profile.vue | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index bf3bb4b..32b9a27 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -28,13 +28,13 @@
             y="0"
           >
             <polygon
-              class="text-gray-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-gray-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"
@@ -68,58 +68,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-gray-700"
+                        class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                       >
                         22
                       </span>
-                      <span class="text-sm text-gray-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-gray-700"
+                        class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                       >
                         10
                       </span>
-                      <span class="text-sm text-gray-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-gray-700"
+                        class="text-xl font-bold block uppercase tracking-wide text-coolGray-600"
                       >
                         89
                       </span>
-                      <span class="text-sm text-gray-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-gray-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-gray-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-gray-500"
+                    class="fas fa-map-marker-alt mr-2 text-lg text-coolGray-400"
                   ></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-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-gray-700">
-                  <i class="fas fa-university mr-2 text-lg text-gray-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-gray-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-gray-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

From 88cab9acfdb369449c8b0a61691097786a631fbf Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:51 +0200
Subject: [PATCH 043/107] refactor: update everything

---
 src/views/auth/Login.vue | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index 2fd51f1..118552c 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -3,61 +3,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-200 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-500 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-new 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="github" />
                 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-new 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="google" />
                 Google
               </button>
             </div>
-            <hr class="mt-6 border-b-1 border-gray-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-gray-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-gray-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-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="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-gray-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-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="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>
@@ -66,9 +66,9 @@
                   <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 border-0 rounded text-coolGray-700 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-600">
                     Remember me
                   </span>
                 </label>
@@ -76,7 +76,7 @@
 
               <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-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
@@ -87,12 +87,12 @@
         </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-200">
               <small>Forgot password?</small>
             </a>
           </div>
           <div class="w-1/2 text-right">
-            <router-link to="/auth/register" class="text-gray-300">
+            <router-link to="/auth/register" class="text-coolGray-200">
               <small>Create new account</small>
             </router-link>
           </div>

From 46001b8c4fae718d354182229797a9cc02964629 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:53 +0200
Subject: [PATCH 044/107] refactor: update everything

---
 src/views/auth/Register.vue | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index 642fc1e..ce44558 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -3,75 +3,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-200 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-500 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-new 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="github" />
                 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-new 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="google" />
                 Google
               </button>
             </div>
-            <hr class="mt-6 border-b-1 border-gray-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-gray-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-gray-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-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="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-gray-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-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="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-gray-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-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="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>
@@ -81,9 +81,9 @@
                   <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 border-0 rounded text-coolGray-700 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-600">
                     I agree with the
                     <a href="javascript:void(0)" class="text-green-500">
                       Privacy Policy
@@ -94,7 +94,7 @@
 
               <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-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 2bf05d42257b01a36f045981a8fdbd3e0f3f43f1 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 14:43:54 +0200
Subject: [PATCH 045/107] refactor: update everything

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

diff --git a/tailwind.config.js b/tailwind.config.js
index 3bf7220..dd58736 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: [
@@ -14,10 +13,13 @@ module.exports = {
       "./*.vue",
     ],
     options: {
-      whitelist: [],
+      safelist: [],
     },
   },
   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 d111bcac76d6bd4056de1e74dd5f6f20f865991a Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:37:26 +0200
Subject: [PATCH 046/107] docs: add changes

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f873ce3..ad74d0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,27 +24,32 @@
 
 ### Deleted dependencies
 - `@tailwindcss/custom-forms`
+- `babel-eslint` (updated to `@babel/eslint-parser` and `@babel/core`)
 ### Added dependencies
 - `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`)
 - `autoprefixer`
 - `postcss`
+- `@babel/core` (instead of `babel-eslint`)
+- `@babel/eslint-parser` (instead of `babel-eslint`)
+- `@vue/compiler-sfc`
 ### Updated dependencies
 ```
-@fortawesome/fontawesome-free   5.14.0   →   5.15.3
+@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
 core-js                          3.6.5   →    3.9.1
 tailwindcss                     1.8.10   →    2.0.4
 vue                             2.6.12   →    3.0.7
-vue-router                       3.4.3   →    3.5.1
-@vue/cli-plugin-babel            4.5.6   →   4.5.12
-@vue/cli-plugin-eslint           4.5.6   →   4.5.12
-@vue/cli-service                 4.5.6   →   4.5.12
-eslint                           6.8.0   →   7.22.0
+vue-router                       3.4.3   →    4.0.5
+@vue/cli-plugin-babel            4.5.6   →    5.0.0-alpha.7
+@vue/cli-plugin-eslint           4.5.6   →    5.0.0-alpha.7
+@vue/cli-service                 4.5.6   →    5.0.0-alpha.7
+eslint                           6.8.0   →    7.22.0
 eslint-plugin-vue                6.2.2   →    7.7.0
 ```
 ### Warning
 _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._
+_The following warning will show when doing a clean install `npm WARN cache-loader@4.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.`, however it does not affect in any way the product._
 
 ## [1.0.0] 2020-09-29
 ### Original Release

From adb4328e7bdbe7053789473cdb36c562e29be821 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:37:36 +0200
Subject: [PATCH 047/107] feature: add vue@3

---
 package.json | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 982f6fe..d70abe2 100644
--- a/package.json
+++ b/package.json
@@ -16,21 +16,23 @@
     "@fortawesome/fontawesome-free": "5.15.3",
     "@popperjs/core": "2.9.1",
     "@tailwindcss/forms": "0.2.1",
+    "@vue/compiler-sfc": "3.0.7",
     "chart.js": "2.9.4",
     "core-js": "3.9.1",
     "gulp": "4.0.2",
     "gulp-append-prepend": "1.0.8",
     "tailwindcss": "2.0.4",
     "vue": "3.0.7",
-    "vue-router": "3.5.1"
+    "vue-router": "4.0.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.5.12",
-    "@vue/cli-plugin-eslint": "4.5.12",
-    "@vue/cli-service": "4.5.12",
+    "@babel/core": "7.13.10",
+    "@babel/eslint-parser": "7.13.10",
+    "@vue/cli-plugin-babel": "5.0.0-alpha.7",
+    "@vue/cli-plugin-eslint": "5.0.0-alpha.7",
+    "@vue/cli-service": "5.0.0-alpha.7",
     "autoprefixer": "10.2.5",
-    "babel-eslint": "10.1.0",
-    "eslint": "6.8.0",
+    "eslint": "7.22.0",
     "eslint-plugin-vue": "7.7.0",
     "postcss": "8.2.8",
     "vue-template-compiler": "2.6.12"
@@ -46,7 +48,7 @@
     ],
     "rules": {},
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     }
   },
   "postcss": {

From 0b14edac35291a2ceab5b0040d1c4eefc73409b3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:37:38 +0200
Subject: [PATCH 048/107] feature: add vue@3

---
 src/components/Sidebar/Sidebar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index 006fbdf..7f2fde5 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -83,7 +83,7 @@
           <li class="items-center">
             <router-link
               to="/admin/dashboard"
-              v-slot="{ href, route, navigate, isActive }"
+              v-slot="{ href, navigate, isActive }"
             >
               <a
                 :href="href"
@@ -107,7 +107,7 @@
           <li class="items-center">
             <router-link
               to="/admin/settings"
-              v-slot="{ href, route, navigate, isActive }"
+              v-slot="{ href, navigate, isActive }"
             >
               <a
                 :href="href"
@@ -131,7 +131,7 @@
           <li class="items-center">
             <router-link
               to="/admin/tables"
-              v-slot="{ href, route, navigate, isActive }"
+              v-slot="{ href, navigate, isActive }"
             >
               <a
                 :href="href"
@@ -155,7 +155,7 @@
           <li class="items-center">
             <router-link
               to="/admin/maps"
-              v-slot="{ href, route, navigate, isActive }"
+              v-slot="{ href, navigate, isActive }"
             >
               <a
                 :href="href"

From 9dc265c27339bced9d5df1af4d5c49c017f2754f Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:37:40 +0200
Subject: [PATCH 049/107] feature: add vue@3

---
 src/main.js | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/main.js b/src/main.js
index ca6f00d..1990384 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import { createApp } from 'vue'
+import { createWebHistory, createRouter } from "vue-router";
 
 // styles
 
@@ -86,20 +86,12 @@ const routes = [
     path: "/",
     component: Index,
   },
-  { path: "*", redirect: "/" },
+  { path: "/:pathMatch(.*)*", redirect: "/" },
 ];
 
-// app config
-
-Vue.config.productionTip = false;
-
-Vue.use(VueRouter);
-
-const router = new VueRouter({
+const router = createRouter({
+  history: createWebHistory(),
   routes,
 });
 
-new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount("#app");
+createApp(App).use(router).mount('#app')

From 69dfb87dea92c587ebb923e6cea45d0d7234f45e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:38:15 +0200
Subject: [PATCH 050/107] fix: solve typo

---
 src/components/Dropdowns/IndexDropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdowns/IndexDropdown.vue b/src/components/Dropdowns/IndexDropdown.vue
index 80bcfd4..e273758 100644
--- a/src/components/Dropdowns/IndexDropdown.vue
+++ b/src/components/Dropdowns/IndexDropdown.vue
@@ -73,7 +73,7 @@
         to="/landing"
         class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
       >
-        Lading
+        Landing
       </router-link>
       <router-link
         to="/profile"

From ebcbd6c24a956c8bf246f54cdecf7e8865c137cc Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:38:17 +0200
Subject: [PATCH 051/107] fix: solve typo

---
 src/components/Dropdowns/PagesDropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdowns/PagesDropdown.vue b/src/components/Dropdowns/PagesDropdown.vue
index 19f1cd2..335afdf 100644
--- a/src/components/Dropdowns/PagesDropdown.vue
+++ b/src/components/Dropdowns/PagesDropdown.vue
@@ -73,7 +73,7 @@
         to="/landing"
         class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-coolGray-700"
       >
-        Lading
+        Landing
       </router-link>
       <router-link
         to="/profile"

From 5a1b3c1806ed452cb6a5f9f27ee83b3360e153b5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:45:52 +0200
Subject: [PATCH 052/107] fix: solve typo

---
 src/views/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 64dd50e..03b8b73 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -18,9 +18,9 @@
                 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 941081f208915f904a79fd911bf1451210d036a3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:48:08 +0200
Subject: [PATCH 053/107] fix: solve typo

---
 src/views/Index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 03b8b73..990fe84 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -11,8 +11,7 @@
               Vue Notus - A beautiful extension for Tailwind CSS.
             </h2>
             <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
-              Vue Notus is Free and Open Source. It does not change or add any
-              CSS to the already one from
+              Vue Notus 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 73736f3a5ba486e6fa10abf85d5fa734f835efaa Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:14 +0200
Subject: [PATCH 054/107] style: run prettier

---
 src/components/Cards/CardTable.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Cards/CardTable.vue b/src/components/Cards/CardTable.vue
index e4843d8..d427e18 100644
--- a/src/components/Cards/CardTable.vue
+++ b/src/components/Cards/CardTable.vue
@@ -92,7 +92,9 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
+                :class="[
+                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                ]"
               >
                 Argon Design System
               </span>
@@ -167,7 +169,9 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
+                :class="[
+                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                ]"
               >
                 Angular Now UI Kit PRO
               </span>
@@ -243,7 +247,9 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
+                :class="[
+                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                ]"
               >
                 Black Dashboard Sketch
               </span>
@@ -318,7 +324,9 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
+                :class="[
+                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                ]"
               >
                 React Material Dashboard
               </span>
@@ -393,7 +401,9 @@
               />
               <span
                 class="ml-3 font-bold"
-                :class="[color === 'light' ? 'text-coolGray-600' : 'text-white']"
+                :class="[
+                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                ]"
               >
                 React Material Dashboard
               </span>

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

---
 src/components/Footers/FooterSmall.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Footers/FooterSmall.vue b/src/components/Footers/FooterSmall.vue
index 7c54cb5..d22cef7 100644
--- a/src/components/Footers/FooterSmall.vue
+++ b/src/components/Footers/FooterSmall.vue
@@ -1,7 +1,9 @@
 <template>
   <footer
     class="pb-6"
-    :class="[absolute ? 'absolute w-full bottom-0 bg-coolGray-800' : 'relative']"
+    :class="[
+      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-600" />

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

---
 src/components/Sidebar/Sidebar.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index 7f2fde5..c2a8286 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -153,10 +153,7 @@
           </li>
 
           <li class="items-center">
-            <router-link
-              to="/admin/maps"
-              v-slot="{ href, navigate, isActive }"
-            >
+            <router-link to="/admin/maps" v-slot="{ href, navigate, isActive }">
               <a
                 :href="href"
                 @click="navigate"
@@ -203,7 +200,9 @@
               class="text-coolGray-700 hover:text-coolGray-500 text-xs uppercase py-3 font-bold block"
               to="/auth/register"
             >
-              <i class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"></i>
+              <i
+                class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"
+              ></i>
               Register
             </router-link>
           </li>
@@ -257,7 +256,9 @@
               target="_blank"
               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-300 text-base"></i>
+              <i
+                class="fas fa-paint-brush mr-2 text-coolGray-300 text-base"
+              ></i>
               Styles
             </a>
           </li>

From 6fc87b5838c8d9169fdc0d09b082831d8663025e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:18 +0200
Subject: [PATCH 057/107] style: run prettier

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

diff --git a/src/main.js b/src/main.js
index 1990384..ec65c3f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
 
 // styles
@@ -94,4 +94,4 @@ const router = createRouter({
   routes,
 });
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).mount("#app");

From 0fdbc469740b4d05fb3c7174cb5fdde19ba80967 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:20 +0200
Subject: [PATCH 058/107] style: run prettier

---
 src/views/Index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 990fe84..602c788 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -11,7 +11,8 @@
               Vue Notus - A beautiful extension for Tailwind CSS.
             </h2>
             <p class="mt-4 text-lg leading-relaxed text-coolGray-500">
-              Vue Notus is Free and Open Source. It does not change any of the CSS from
+              Vue Notus 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 64c8a8ea679b904d6c89a99e91fc8b9e6b0d7119 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:21 +0200
Subject: [PATCH 059/107] style: run prettier

---
 src/views/Landing.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 78032fa..6686df9 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -298,7 +298,9 @@
                 />
                 <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-coolGray-400 uppercase font-semibold"
+                  >
                     Web Developer
                   </p>
                   <div class="mt-6">
@@ -333,7 +335,9 @@
                 />
                 <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-coolGray-400 uppercase font-semibold"
+                  >
                     Marketing Specialist
                   </p>
                   <div class="mt-6">
@@ -362,7 +366,9 @@
                 />
                 <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-coolGray-400 uppercase font-semibold"
+                  >
                     UI/UX Designer
                   </p>
                   <div class="mt-6">
@@ -397,7 +403,9 @@
                 />
                 <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-coolGray-400 uppercase font-semibold"
+                  >
                     Founder and CEO
                   </p>
                   <div class="mt-6">

From 51692f3fae739d85a06befb6455f23ed2f6b7d0d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:23 +0200
Subject: [PATCH 060/107] style: run prettier

---
 src/views/Profile.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 32b9a27..58ed09e 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -108,11 +108,15 @@
                   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>
+                  <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-600">
-                  <i class="fas fa-university mr-2 text-lg text-coolGray-400"></i>
+                  <i
+                    class="fas fa-university mr-2 text-lg text-coolGray-400"
+                  ></i>
                   University of Computer Science
                 </div>
               </div>

From e2b116db1d0fc349f37b800f859cbe7b416d9410 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 15:51:24 +0200
Subject: [PATCH 061/107] style: run prettier

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

diff --git a/tailwind.config.js b/tailwind.config.js
index dd58736..580579a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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 1c37b72b363aa45ab9ace64f71c7c70f79204d0b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:26:19 +0200
Subject: [PATCH 062/107] docs: add changes

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad74d0f..7610454 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`
 - `babel-eslint` (updated to `@babel/eslint-parser` and `@babel/core`)

From 4607b211b59fe596866b03cd0bc45517ae479805 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:22 +0200
Subject: [PATCH 063/107] fix: solve broken colors

---
 src/components/Cards/CardPageVisits.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Cards/CardPageVisits.vue b/src/components/Cards/CardPageVisits.vue
index 3e88a88..f1d9593 100644
--- a/src/components/Cards/CardPageVisits.vue
+++ b/src/components/Cards/CardPageVisits.vue
@@ -27,22 +27,22 @@
         <thead>
           <tr>
             <th
-              class="px-6 bg-coolGray-new 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-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-new 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-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-new 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-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-new 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-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 025a17ae293704bc3c849135e506f9a79975da2b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:37 +0200
Subject: [PATCH 064/107] fix: solve broken colors

---
 src/components/Cards/CardSocialTraffic.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Cards/CardSocialTraffic.vue b/src/components/Cards/CardSocialTraffic.vue
index 468163e..89eca6b 100644
--- a/src/components/Cards/CardSocialTraffic.vue
+++ b/src/components/Cards/CardSocialTraffic.vue
@@ -27,17 +27,17 @@
         <thead class="thead-light">
           <tr>
             <th
-              class="px-6 bg-coolGray-new 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-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-new 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-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-new 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-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 7d552ceed0d9a6ea5dfbf8cee4a04c52b2fa44ca Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:39 +0200
Subject: [PATCH 065/107] fix: solve broken colors

---
 src/components/Cards/CardTable.vue | 52 +++++++++++++++---------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/Cards/CardTable.vue b/src/components/Cards/CardTable.vue
index d427e18..0fa2715 100644
--- a/src/components/Cards/CardTable.vue
+++ b/src/components/Cards/CardTable.vue
@@ -24,7 +24,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
@@ -34,7 +34,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
@@ -44,7 +44,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
@@ -54,7 +54,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
@@ -64,7 +64,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             >
@@ -74,7 +74,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-new text-coolGray-500 border-coolGray-100'
+                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
                   : 'bg-green-800 text-green-300 border-green-700',
               ]"
             ></th>
@@ -116,22 +116,22 @@
                 <img
                   :src="team1"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
                 />
                 <img
                   :src="team2"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
               </div>
             </td>
@@ -194,22 +194,22 @@
                 <img
                   :src="team1"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
                 />
                 <img
                   :src="team2"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
               </div>
             </td>
@@ -271,22 +271,22 @@
                 <img
                   :src="team1"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
                 />
                 <img
                   :src="team2"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
               </div>
             </td>
@@ -348,22 +348,22 @@
                 <img
                   :src="team1"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
                 />
                 <img
                   :src="team2"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
               </div>
             </td>
@@ -426,22 +426,22 @@
                 <img
                   :src="team1"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow"
                 />
                 <img
                   :src="team2"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team3"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
                 <img
                   :src="team4"
                   alt="..."
-                  class="w-10 h-10 rounded-full border-2 border-coolGray-new shadow -ml-4"
+                  class="w-10 h-10 rounded-full border-2 border-coolGray-50 shadow -ml-4"
                 />
               </div>
             </td>

From ff23a77cf81c6ac1c6187e8d065948675a031d49 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:41 +0200
Subject: [PATCH 066/107] fix: solve broken colors

---
 src/components/Navbars/AuthNavbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navbars/AuthNavbar.vue b/src/components/Navbars/AuthNavbar.vue
index 57d4755..951f21c 100644
--- a/src/components/Navbars/AuthNavbar.vue
+++ b/src/components/Navbars/AuthNavbar.vue
@@ -85,7 +85,7 @@
 
           <li class="flex items-center">
             <button
-              class="bg-white text-coolGray-700 active:bg-coolGray-new 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 c1692bcaabe70928a41cadea1abc2016f1a18a24 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:43 +0200
Subject: [PATCH 067/107] fix: solve broken colors

---
 src/views/Index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index 602c788..52142c4 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -497,7 +497,7 @@
                   <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-new 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>
@@ -513,7 +513,7 @@
                   <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-new 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>
@@ -529,7 +529,7 @@
                   <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-new 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>

From 551d42f063c9af9b7ad0adb1ab3707b5802d6f33 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:45 +0200
Subject: [PATCH 068/107] fix: solve broken colors

---
 src/views/Landing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 6686df9..3c948f7 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -117,7 +117,7 @@
           <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-new"
+                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 df56184a2aa54f5e2257e05a5ea7e5f268f83d04 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:48 +0200
Subject: [PATCH 069/107] fix: solve broken colors

---
 src/views/auth/Login.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index 118552c..bff5599 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -13,14 +13,14 @@
             </div>
             <div class="btn-wrapper text-center">
               <button
-                class="bg-white active:bg-coolGray-new 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-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="github" />
                 Github
               </button>
               <button
-                class="bg-white active:bg-coolGray-new 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-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="google" />

From f1c26fc52a31e26f8c7150df2d167c879080cd23 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:49:50 +0200
Subject: [PATCH 070/107] fix: solve broken colors

---
 src/views/auth/Register.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index ce44558..ea2aaef 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -13,14 +13,14 @@
             </div>
             <div class="btn-wrapper text-center">
               <button
-                class="bg-white active:bg-coolGray-new 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-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="github" />
                 Github
               </button>
               <button
-                class="bg-white active:bg-coolGray-new 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-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="google" />

From b3bd8e240c7b3fe5ca0635220c416086ae1f9f30 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 17:57:07 +0200
Subject: [PATCH 071/107] refactor: build tailwind

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

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index c7cf3fc..03459d1 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1393,6 +1393,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));
@@ -1438,6 +1443,11 @@ select {
   background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
 }
 
+.active\:bg-coolGray-50:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+
 .active\:bg-coolGray-600:active {
   --tw-bg-opacity: 1;
   background-color: rgba(75, 85, 99, var(--tw-bg-opacity));
@@ -1506,6 +1516,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));

From 45fd43cc0c0115dc60c60c9efb44f62287f49872 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:27:11 +0200
Subject: [PATCH 072/107] fix: solve broken colors

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7610454..7722245 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 e3e59a181cab234f4c9128648e7c090cf1835d54 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:27:13 +0200
Subject: [PATCH 073/107] fix: solve broken colors

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

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 03459d1..fed5f0e 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1278,24 +1278,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 {
@@ -1308,39 +1308,39 @@ 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-300 {
+.bg-emerald-300 {
   --tw-bg-opacity: 1;
-  background-color: rgba(134, 239, 172, var(--tw-bg-opacity));
+  background-color: rgba(110, 231, 183, 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-green-600 {
+.bg-emerald-600 {
   --tw-bg-opacity: 1;
-  background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
+  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
 }
 
-.bg-green-800 {
+.bg-emerald-800 {
   --tw-bg-opacity: 1;
-  background-color: rgba(22, 101, 52, var(--tw-bg-opacity));
+  background-color: rgba(6, 95, 70, var(--tw-bg-opacity));
 }
 
-.bg-green-900 {
+.bg-emerald-900 {
   --tw-bg-opacity: 1;
-  background-color: rgba(20, 83, 45, var(--tw-bg-opacity));
+  background-color: rgba(6, 78, 59, var(--tw-bg-opacity));
 }
 
 .bg-yellow-500 {
@@ -1438,9 +1438,9 @@ select {
   background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
 }
 
-.active\:bg-green-600:active {
+.active\:bg-emerald-600:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(22, 163, 74, var(--tw-bg-opacity));
+  background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
 }
 
 .active\:bg-coolGray-50:active {
@@ -1501,9 +1501,9 @@ select {
   border-collapse: separate;
 }
 
-.border-green-700 {
+.border-emerald-700 {
   --tw-border-opacity: 1;
-  border-color: rgba(21, 128, 61, var(--tw-border-opacity));
+  border-color: rgba(4, 120, 87, var(--tw-border-opacity));
 }
 
 .border-gray-200 {
@@ -3268,14 +3268,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 {
@@ -3283,19 +3283,19 @@ select {
   color: rgba(20, 184, 166, var(--tw-text-opacity));
 }
 
-.text-green-300 {
+.text-emerald-300 {
   --tw-text-opacity: 1;
-  color: rgba(134, 239, 172, var(--tw-text-opacity));
+  color: rgba(110, 231, 183, 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-green-600 {
+.text-emerald-600 {
   --tw-text-opacity: 1;
-  color: rgba(22, 163, 74, var(--tw-text-opacity));
+  color: rgba(5, 150, 105, var(--tw-text-opacity));
 }
 
 .text-orange-500 {
@@ -3368,9 +3368,9 @@ select {
   color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.hover\:text-green-600:hover {
+.hover\:text-emerald-600:hover {
   --tw-text-opacity: 1;
-  color: rgba(22, 163, 74, var(--tw-text-opacity));
+  color: rgba(5, 150, 105, var(--tw-text-opacity));
 }
 
 .hover\:text-coolGray-300:hover {

From f1703937a269afc99646a1898206bd2b8d2ea52c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:27:15 +0200
Subject: [PATCH 074/107] fix: solve broken colors

---
 src/components/Cards/CardPageVisits.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardPageVisits.vue b/src/components/Cards/CardPageVisits.vue
index f1d9593..1c46369 100644
--- a/src/components/Cards/CardPageVisits.vue
+++ b/src/components/Cards/CardPageVisits.vue
@@ -68,7 +68,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-arrow-up text-green-500 mr-4"></i>
+              <i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
               46,53%
             </td>
           </tr>
@@ -137,7 +137,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-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 fabdf898b3c659f7f65469a87ec8f87fec6aeb28 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:28:30 +0200
Subject: [PATCH 075/107] fix: solve broken colors

---
 src/components/Cards/CardProfile.vue       |  2 +-
 src/components/Cards/CardSettings.vue      |  2 +-
 src/components/Cards/CardSocialTraffic.vue | 10 ++++-----
 src/components/Cards/CardStats.vue         |  2 +-
 src/components/Cards/CardTable.vue         | 26 +++++++++++-----------
 src/components/Footers/Footer.vue          |  4 ++--
 src/components/Headers/HeaderStats.vue     |  8 +++----
 src/components/Navbars/IndexNavbar.vue     |  2 +-
 src/components/Sidebar/Sidebar.vue         |  8 +++----
 src/views/Index.vue                        | 12 +++++-----
 src/views/Landing.vue                      | 26 +++++++++++-----------
 src/views/Profile.vue                      |  4 ++--
 src/views/auth/Register.vue                |  2 +-
 13 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/components/Cards/CardProfile.vue b/src/components/Cards/CardProfile.vue
index 14e706a..648d4d4 100644
--- a/src/components/Cards/CardProfile.vue
+++ b/src/components/Cards/CardProfile.vue
@@ -72,7 +72,7 @@
               records all of his own music, giving it a warm, intimate feel with
               a solid groove structure. An artist of considerable range.
             </p>
-            <a href="javascript:void(0);" class="font-normal text-green-500">
+            <a href="javascript:void(0);" class="font-normal text-emerald-500">
               Show more
             </a>
           </div>
diff --git a/src/components/Cards/CardSettings.vue b/src/components/Cards/CardSettings.vue
index 0231511..f018924 100644
--- a/src/components/Cards/CardSettings.vue
+++ b/src/components/Cards/CardSettings.vue
@@ -6,7 +6,7 @@
       <div class="text-center flex justify-between">
         <h6 class="text-coolGray-700 text-xl font-bold">My account</h6>
         <button
-          class="bg-green-500 text-white active:bg-green-600 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"
+          class="bg-emerald-500 text-white active:bg-emerald-600 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"
         >
           Settings
diff --git a/src/components/Cards/CardSocialTraffic.vue b/src/components/Cards/CardSocialTraffic.vue
index 89eca6b..34b4158 100644
--- a/src/components/Cards/CardSocialTraffic.vue
+++ b/src/components/Cards/CardSocialTraffic.vue
@@ -89,11 +89,11 @@
                 <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>
@@ -147,11 +147,11 @@
                 <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>
@@ -180,7 +180,7 @@
                   >
                     <div
                       style="width: 30%;"
-                      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>
diff --git a/src/components/Cards/CardStats.vue b/src/components/Cards/CardStats.vue
index 8d34fa4..84b323e 100644
--- a/src/components/Cards/CardStats.vue
+++ b/src/components/Cards/CardStats.vue
@@ -62,7 +62,7 @@ export default {
     // from tailwindcss
     statPercentColor: {
       type: String,
-      default: "text-green-500",
+      default: "text-emerald-500",
     },
     statDescripiron: {
       type: String,
diff --git a/src/components/Cards/CardTable.vue b/src/components/Cards/CardTable.vue
index 0fa2715..d1418dc 100644
--- a/src/components/Cards/CardTable.vue
+++ b/src/components/Cards/CardTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded"
-    :class="[color === 'light' ? 'bg-white' : 'bg-green-900 text-white']"
+    :class="[color === 'light' ? 'bg-white' : 'bg-emerald-900 text-white']"
   >
     <div class="rounded-t mb-0 px-4 py-3 border-0">
       <div class="flex flex-wrap items-center">
@@ -25,7 +25,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
               Project
@@ -35,7 +35,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
               Budget
@@ -45,7 +45,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
               Status
@@ -55,7 +55,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
               Users
@@ -65,7 +65,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
               Completion
@@ -75,7 +75,7 @@
               :class="[
                 color === 'light'
                   ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
-                  : 'bg-green-800 text-green-300 border-green-700',
+                  : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             ></th>
           </tr>
@@ -184,7 +184,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
@@ -220,11 +220,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>
@@ -416,7 +416,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
@@ -452,11 +452,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>
diff --git a/src/components/Footers/Footer.vue b/src/components/Footers/Footer.vue
index 7d9e05e..715702d 100644
--- a/src/components/Footers/Footer.vue
+++ b/src/components/Footers/Footer.vue
@@ -28,13 +28,13 @@
           </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>
diff --git a/src/components/Headers/HeaderStats.vue b/src/components/Headers/HeaderStats.vue
index ce821ba..69fd800 100644
--- a/src/components/Headers/HeaderStats.vue
+++ b/src/components/Headers/HeaderStats.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Header -->
-  <div class="relative bg-green-600 md:pt-32 pb-32 pt-12">
+  <div class="relative bg-emerald-600 md:pt-32 pb-32 pt-12">
     <div class="px-4 md:px-10 mx-auto w-full">
       <div>
         <!-- Card stats -->
@@ -11,7 +11,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"
@@ -47,10 +47,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"
             />
           </div>
         </div>
diff --git a/src/components/Navbars/IndexNavbar.vue b/src/components/Navbars/IndexNavbar.vue
index c044bb9..5049c79 100644
--- a/src/components/Navbars/IndexNavbar.vue
+++ b/src/components/Navbars/IndexNavbar.vue
@@ -81,7 +81,7 @@
 
           <li class="flex items-center">
             <button
-              class="bg-green-500 text-white active:bg-green-600 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
+              class="bg-emerald-500 text-white active:bg-emerald-600 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg 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
diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index c2a8286..c78754f 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -91,7 +91,7 @@
                 class="text-xs uppercase py-3 font-bold block"
                 :class="[
                   isActive
-                    ? 'text-green-500 hover:text-green-600'
+                    ? 'text-emerald-500 hover:text-emerald-600'
                     : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
@@ -115,7 +115,7 @@
                 class="text-xs uppercase py-3 font-bold block"
                 :class="[
                   isActive
-                    ? 'text-green-500 hover:text-green-600'
+                    ? 'text-emerald-500 hover:text-emerald-600'
                     : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
@@ -139,7 +139,7 @@
                 class="text-xs uppercase py-3 font-bold block"
                 :class="[
                   isActive
-                    ? 'text-green-500 hover:text-green-600'
+                    ? 'text-emerald-500 hover:text-emerald-600'
                     : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
@@ -160,7 +160,7 @@
                 class="text-xs uppercase py-3 font-bold block"
                 :class="[
                   isActive
-                    ? 'text-green-500 hover:text-green-600'
+                    ? 'text-emerald-500 hover:text-emerald-600'
                     : 'text-coolGray-700 hover:text-coolGray-500',
                 ]"
               >
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 52142c4..fcd6490 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -27,7 +27,7 @@
               <a
                 href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus?ref=vn-index"
                 target="_blank"
-                class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-green-500 active:bg-green-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+                class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-emerald-500 active:bg-emerald-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
               >
                 Get started
               </a>
@@ -76,7 +76,7 @@
             class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32"
           >
             <div
-              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-green-600"
+              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-600"
             >
               <img
                 alt="..."
@@ -92,7 +92,7 @@
                 >
                   <polygon
                     points="-30,95 583,95 583,65"
-                    class="text-green-600 fill-current"
+                    class="text-emerald-600 fill-current"
                   ></polygon>
                 </svg>
                 <h4 class="text-xl font-bold text-white">
@@ -312,7 +312,7 @@
                   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="..."
@@ -382,7 +382,7 @@
                   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="..."
@@ -726,7 +726,7 @@
               <a
                 href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus?ref=vn-index"
                 target="_blank"
-                class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-green-500 active:bg-green-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
+                class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-emerald-500 active:bg-emerald-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
               >
                 Get started
               </a>
diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 3c948f7..4d18a6a 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -81,7 +81,7 @@
               >
                 <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>
@@ -100,7 +100,7 @@
               >
                 <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>
@@ -145,7 +145,7 @@
 
             <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
               <div
-                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-green-600"
+                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-600"
               >
                 <img
                   alt="..."
@@ -161,7 +161,7 @@
                   >
                     <polygon
                       points="-30,95 583,95 583,65"
-                      class="text-green-600 fill-current"
+                      class="text-emerald-600 fill-current"
                     ></polygon>
                   </svg>
                   <h4 class="text-xl font-bold text-white">
@@ -212,7 +212,7 @@
             <div class="w-full md:w-5/12 ml-auto mr-auto px-4">
               <div class="md:pr-12">
                 <div
-                  class="text-green-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-green-300"
+                  class="text-emerald-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-emerald-300"
                 >
                   <i class="fas fa-rocket text-xl"></i>
                 </div>
@@ -227,7 +227,7 @@
                     <div class="flex items-center">
                       <div>
                         <span
-                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200 mr-3"
+                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200 mr-3"
                         >
                           <i class="fas fa-fingerprint"></i>
                         </span>
@@ -243,7 +243,7 @@
                     <div class="flex items-center">
                       <div>
                         <span
-                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200 mr-3"
+                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200 mr-3"
                         >
                           <i class="fab fa-html5"></i>
                         </span>
@@ -259,7 +259,7 @@
                     <div class="flex items-center">
                       <div>
                         <span
-                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200 mr-3"
+                          class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200 mr-3"
                         >
                           <i class="far fa-paper-plane"></i>
                         </span>
@@ -305,13 +305,13 @@
                   </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>
@@ -348,7 +348,7 @@
                       <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>
@@ -379,7 +379,7 @@
                       <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>
@@ -422,7 +422,7 @@
                       <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>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 58ed09e..74b5e44 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -57,7 +57,7 @@
                 >
                   <div class="py-6 px-3 mt-32 sm:mt-0">
                     <button
-                      class="bg-green-500 active:bg-green-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
+                      class="bg-emerald-500 active:bg-emerald-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
                       type="button"
                     >
                       Connect
@@ -132,7 +132,7 @@
                     </p>
                     <a
                       href="javascript:void(0)"
-                      class="font-normal text-green-500"
+                      class="font-normal text-emerald-500"
                     >
                       Show more
                     </a>
diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index ea2aaef..1c691c6 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -85,7 +85,7 @@
                   />
                   <span class="ml-2 text-sm font-semibold text-coolGray-600">
                     I agree with the
-                    <a href="javascript:void(0)" class="text-green-500">
+                    <a href="javascript:void(0)" class="text-emerald-500">
                       Privacy Policy
                     </a>
                   </span>

From 9731823570c6f66caeed4d0c92aacf971eb07410 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:33:36 +0200
Subject: [PATCH 076/107] fix: solve broken color

---
 src/views/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index fcd6490..d7360b9 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -76,7 +76,7 @@
             class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32"
           >
             <div
-              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-600"
+              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-500"
             >
               <img
                 alt="..."
@@ -92,7 +92,7 @@
                 >
                   <polygon
                     points="-30,95 583,95 583,65"
-                    class="text-emerald-600 fill-current"
+                    class="text-emerald-500 fill-current"
                   ></polygon>
                 </svg>
                 <h4 class="text-xl font-bold text-white">

From 81819bb6a2cf2d30d1028d91607cec4f0bbd0d35 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Thu, 18 Mar 2021 18:34:32 +0200
Subject: [PATCH 077/107] fix: solve broken color

---
 src/views/Landing.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 4d18a6a..4a08005 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -145,7 +145,7 @@
 
             <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
               <div
-                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-600"
+                class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-emerald-500"
               >
                 <img
                   alt="..."
@@ -161,7 +161,7 @@
                   >
                     <polygon
                       points="-30,95 583,95 583,65"
-                      class="text-emerald-600 fill-current"
+                      class="text-emerald-500 fill-current"
                     ></polygon>
                   </svg>
                   <h4 class="text-xl font-bold text-white">

From 9bdee545968de726e472a8bfa1e31ac887de20e4 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:22 +0200
Subject: [PATCH 078/107] refactor: change coolGray with blueGray

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7722245..44e455e 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 25242d0c667ff6229e97d1d98cdba1ca18f3e9a5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:24 +0200
Subject: [PATCH 079/107] refactor: change coolGray with blueGray

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

diff --git a/public/index.html b/public/index.html
index 2a284d9..7cf6836 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,10 +29,10 @@
     />
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
     <title>
-      Tailwind Starter Kit by Creative Tim | Free and Open Source UI Kit
+      Vue Notus by Creative Tim | Free and Open Source UI Kit
     </title>
   </head>
-  <body class="text-coolGray-700 antialiased">
+  <body class="text-blueGray-700 antialiased">
     <noscript>
       <strong
         >We're sorry but vue-notus doesn't work properly without JavaScript

From 312fe1330b27bc7662fb797dba8fd8e67e9dafaa Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:25 +0200
Subject: [PATCH 080/107] refactor: change coolGray with blueGray

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

diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index fed5f0e..13b7e02 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1393,34 +1393,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 {
@@ -1443,14 +1443,14 @@ select {
   background-color: rgba(5, 150, 105, 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-none {
@@ -1516,34 +1516,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 {
@@ -2937,29 +2937,29 @@ select {
   padding-bottom: 16rem;
 }
 
-.placeholder-coolGray-300::-webkit-input-placeholder {
+.placeholder-blueGray-300::-webkit-input-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::-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:-ms-input-placeholder {
+.placeholder-blueGray-300:-ms-input-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::-ms-input-placeholder {
+.placeholder-blueGray-300::-ms-input-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 {
@@ -3328,44 +3328,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-emerald-600:hover {
@@ -3373,24 +3373,24 @@ select {
   color: rgba(5, 150, 105, 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 {
@@ -4195,14 +4195,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 a68ee578a50a753754e8d9164c099ebabf98ac0b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:26 +0200
Subject: [PATCH 081/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardBarChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardBarChart.vue b/src/components/Cards/CardBarChart.vue
index c3e028a..540c890 100644
--- a/src/components/Cards/CardBarChart.vue
+++ b/src/components/Cards/CardBarChart.vue
@@ -5,10 +5,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">
+          <h2 class="text-blueGray-700 text-xl font-semibold">
             Total orders
           </h2>
         </div>

From 22582b3d77c61f0779c65e7cc724e6d4355f154b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:28 +0200
Subject: [PATCH 082/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardLineChart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Cards/CardLineChart.vue b/src/components/Cards/CardLineChart.vue
index 2374057..6faf6a2 100644
--- a/src/components/Cards/CardLineChart.vue
+++ b/src/components/Cards/CardLineChart.vue
@@ -1,11 +1,11 @@
 <template>
   <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">

From 3b3bfe3cb9b4e0fc27426e2749c6d3eca09b0ca8 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:29 +0200
Subject: [PATCH 083/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardPageVisits.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Cards/CardPageVisits.vue b/src/components/Cards/CardPageVisits.vue
index 1c46369..d84ebdc 100644
--- a/src/components/Cards/CardPageVisits.vue
+++ b/src/components/Cards/CardPageVisits.vue
@@ -5,7 +5,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">
             Page visits
           </h3>
         </div>
@@ -27,22 +27,22 @@
         <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 67598f4181d223eb7d2b330118a21db1379af896 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:30 +0200
Subject: [PATCH 084/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardProfile.vue | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Cards/CardProfile.vue b/src/components/Cards/CardProfile.vue
index 648d4d4..732a08e 100644
--- a/src/components/Cards/CardProfile.vue
+++ b/src/components/Cards/CardProfile.vue
@@ -17,56 +17,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

From 23c66902f5cfd10a6c773762f377c45f00e9e27c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:32 +0200
Subject: [PATCH 085/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardSettings.vue | 50 +++++++++++++--------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/Cards/CardSettings.vue b/src/components/Cards/CardSettings.vue
index f018924..41d8605 100644
--- a/src/components/Cards/CardSettings.vue
+++ b/src/components/Cards/CardSettings.vue
@@ -1,10 +1,10 @@
 <template>
   <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-emerald-500 text-white active:bg-emerald-600 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"
@@ -15,21 +15,21 @@
     </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>
@@ -37,14 +37,14 @@
           <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>
@@ -52,14 +52,14 @@
           <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>
@@ -67,37 +67,37 @@
           <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>
@@ -105,14 +105,14 @@
           <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>
@@ -120,14 +120,14 @@
           <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>
@@ -135,37 +135,37 @@
           <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 VueJS & Tailwind CSS. It is Free

From 4a65b0d8c734e541f43f7de600e9c93d82e71b0d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:33 +0200
Subject: [PATCH 086/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardSocialTraffic.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Cards/CardSocialTraffic.vue b/src/components/Cards/CardSocialTraffic.vue
index 34b4158..be00d2e 100644
--- a/src/components/Cards/CardSocialTraffic.vue
+++ b/src/components/Cards/CardSocialTraffic.vue
@@ -5,7 +5,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>
@@ -27,17 +27,17 @@
         <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 8d4a737be1a245e6c2f67917b5f930d7efd2c035 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:34 +0200
Subject: [PATCH 087/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardStats.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Cards/CardStats.vue b/src/components/Cards/CardStats.vue
index 84b323e..07669c6 100644
--- a/src/components/Cards/CardStats.vue
+++ b/src/components/Cards/CardStats.vue
@@ -5,10 +5,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>
@@ -21,7 +21,7 @@
           </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" :class="[statPercentColor]">
           <i
             :class="[

From 66c1aa2adf6d6ba83883ea5ab4b0c194ed8cdbfb Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:36 +0200
Subject: [PATCH 088/107] refactor: change coolGray with blueGray

---
 src/components/Cards/CardTable.vue | 64 +++++++++++++++---------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/Cards/CardTable.vue b/src/components/Cards/CardTable.vue
index d1418dc..c3c147c 100644
--- a/src/components/Cards/CardTable.vue
+++ b/src/components/Cards/CardTable.vue
@@ -8,7 +8,7 @@
         <div class="relative w-full px-4 max-w-full flex-grow flex-1">
           <h3
             class="font-semibold text-lg"
-            :class="[color === 'light' ? 'text-coolGray-700' : 'text-white']"
+            :class="[color === 'light' ? 'text-blueGray-700' : 'text-white']"
           >
             Card Tables
           </h3>
@@ -24,7 +24,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
@@ -34,7 +34,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
@@ -44,7 +44,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
@@ -54,7 +54,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
@@ -64,7 +64,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             >
@@ -74,7 +74,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"
               :class="[
                 color === 'light'
-                  ? 'bg-coolGray-50 text-coolGray-500 border-coolGray-100'
+                  ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
                   : 'bg-emerald-800 text-emerald-300 border-emerald-700',
               ]"
             ></th>
@@ -93,7 +93,7 @@
               <span
                 class="ml-3 font-bold"
                 :class="[
-                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                  color === 'light' ? 'text-blueGray-600' : 'text-white',
                 ]"
               >
                 Argon Design System
@@ -116,22 +116,22 @@
                 <img
                   :src="team1"
                   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="team2"
                   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="team3"
                   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="team4"
                   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>
@@ -170,7 +170,7 @@
               <span
                 class="ml-3 font-bold"
                 :class="[
-                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                  color === 'light' ? 'text-blueGray-600' : 'text-white',
                 ]"
               >
                 Angular Now UI Kit PRO
@@ -194,22 +194,22 @@
                 <img
                   :src="team1"
                   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="team2"
                   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="team3"
                   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="team4"
                   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>
@@ -248,7 +248,7 @@
               <span
                 class="ml-3 font-bold"
                 :class="[
-                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                  color === 'light' ? 'text-blueGray-600' : 'text-white',
                 ]"
               >
                 Black Dashboard Sketch
@@ -271,22 +271,22 @@
                 <img
                   :src="team1"
                   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="team2"
                   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="team3"
                   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="team4"
                   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>
@@ -325,7 +325,7 @@
               <span
                 class="ml-3 font-bold"
                 :class="[
-                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                  color === 'light' ? 'text-blueGray-600' : 'text-white',
                 ]"
               >
                 React Material Dashboard
@@ -348,22 +348,22 @@
                 <img
                   :src="team1"
                   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="team2"
                   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="team3"
                   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="team4"
                   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>
@@ -402,7 +402,7 @@
               <span
                 class="ml-3 font-bold"
                 :class="[
-                  color === 'light' ? 'text-coolGray-600' : 'text-white',
+                  color === 'light' ? 'text-blueGray-600' : 'text-white',
                 ]"
               >
                 React Material Dashboard
@@ -426,22 +426,22 @@
                 <img
                   :src="team1"
                   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="team2"
                   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="team3"
                   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="team4"
                   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 25e87b948d5e607d80f494341c38b12af482c32c Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:37 +0200
Subject: [PATCH 089/107] refactor: change coolGray with blueGray

---
 src/components/Dropdowns/IndexDropdown.vue | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Dropdowns/IndexDropdown.vue b/src/components/Dropdowns/IndexDropdown.vue
index e273758..b74cc0a 100644
--- a/src/components/Dropdowns/IndexDropdown.vue
+++ b/src/components/Dropdowns/IndexDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <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"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -17,67 +17,67 @@
       }"
     >
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
+      <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
+      <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>

From f32cff7c5dbe6abe48956210b96a9159b836cc0d Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:38 +0200
Subject: [PATCH 090/107] refactor: change coolGray with blueGray

---
 src/components/Dropdowns/NotificationDropdown.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Dropdowns/NotificationDropdown.vue b/src/components/Dropdowns/NotificationDropdown.vue
index 09093bb..b42a76a 100644
--- a/src/components/Dropdowns/NotificationDropdown.vue
+++ b/src/components/Dropdowns/NotificationDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a
-      class="text-coolGray-500 block py-1 px-3"
+      class="text-blueGray-500 block py-1 px-3"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
     >
@@ -17,26 +17,26 @@
     >
       <a
         href="javascript:void(0);"
-        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="javascript:void(0);"
-        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="javascript:void(0);"
-        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 class="h-0 my-2 border border-solid border-blueGray-100" />
       <a
         href="javascript:void(0);"
-        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 da2b1958339bc06394406bffb79d5f5fb780f4a3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:40 +0200
Subject: [PATCH 091/107] refactor: change coolGray with blueGray

---
 src/components/Dropdowns/PagesDropdown.vue | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Dropdowns/PagesDropdown.vue b/src/components/Dropdowns/PagesDropdown.vue
index 335afdf..a3ce7e1 100644
--- a/src/components/Dropdowns/PagesDropdown.vue
+++ b/src/components/Dropdowns/PagesDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <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"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -17,67 +17,67 @@
       }"
     >
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
+      <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>
-      <div class="h-0 mx-4 my-2 border border-solid border-coolGray-100" />
+      <div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
       <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>
       <router-link
         to="/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
       </router-link>
       <router-link
         to="/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
       </router-link>

From ccfc47282546c1159b3bd6911a662bc26de83c10 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:41 +0200
Subject: [PATCH 092/107] refactor: change coolGray with blueGray

---
 src/components/Dropdowns/TableDropdown.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Dropdowns/TableDropdown.vue b/src/components/Dropdowns/TableDropdown.vue
index 5cc0057..f8e2ce9 100644
--- a/src/components/Dropdowns/TableDropdown.vue
+++ b/src/components/Dropdowns/TableDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <a
-      class="text-coolGray-500 py-1 px-3"
+      class="text-blueGray-500 py-1 px-3"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
@@ -18,19 +18,19 @@
     >
       <a
         href="javascript:void(0);"
-        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="javascript:void(0);"
-        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="javascript:void(0);"
-        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>

From c221db86a28c7af2908886008f7331fec750814e Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:42 +0200
Subject: [PATCH 093/107] refactor: change coolGray with blueGray

---
 src/components/Dropdowns/UserDropdown.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Dropdowns/UserDropdown.vue b/src/components/Dropdowns/UserDropdown.vue
index 19705a3..27c2240 100644
--- a/src/components/Dropdowns/UserDropdown.vue
+++ b/src/components/Dropdowns/UserDropdown.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <a
-      class="text-coolGray-500 block"
+      class="text-blueGray-500 block"
       href="#pablo"
       ref="btnDropdownRef"
       v-on:click="toggleDropdown($event)"
     >
       <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="..."
@@ -28,26 +28,26 @@
     >
       <a
         href="javascript:void(0);"
-        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="javascript:void(0);"
-        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="javascript:void(0);"
-        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 class="h-0 my-2 border border-solid border-blueGray-100" />
       <a
         href="javascript:void(0);"
-        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 b60c52a8dad1829f7ac1d491be8a4ff464682ff1 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:44 +0200
Subject: [PATCH 094/107] refactor: change coolGray with blueGray

---
 src/components/Footers/Footer.vue | 34 +++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/Footers/Footer.vue b/src/components/Footers/Footer.vue
index 715702d..1223090 100644
--- a/src/components/Footers/Footer.vue
+++ b/src/components/Footers/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <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);"
@@ -14,7 +14,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>
@@ -23,7 +23,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">
@@ -46,7 +46,7 @@
               <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>
@@ -57,14 +57,14 @@
           <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=vn-footer"
                   >
                     About Us
@@ -72,7 +72,7 @@
                 </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=vn-footer"
                   >
                     Blog
@@ -80,7 +80,7 @@
                 </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=vn-footer"
                   >
                     Github
@@ -88,7 +88,7 @@
                 </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=vn-footer"
                   >
                     Free Products
@@ -98,14 +98,14 @@
             </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/vue-notus/blob/main/LICENSE.md?ref=vn-footer"
                   >
                     MIT License
@@ -113,7 +113,7 @@
                 </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=vn-footer"
                   >
                     Terms & Conditions
@@ -121,7 +121,7 @@
                 </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=vn-footer"
                   >
                     Privacy Policy
@@ -129,7 +129,7 @@
                 </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=vn-footer"
                   >
                     Contact Us
@@ -140,16 +140,16 @@
           </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 }} Vue Notus by
             <a
               href="https://www.creative-tim.com?ref=vn-footer"
-              class="text-coolGray-500 hover:text-coolGray-800"
+              class="text-blueGray-500 hover:text-blueGray-800"
             >
               Creative Tim
             </a>

From d32c6d117ab07e435f4b97c4dfa98adda13fe90b Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:45 +0200
Subject: [PATCH 095/107] refactor: change coolGray with blueGray

---
 src/components/Footers/FooterAdmin.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Footers/FooterAdmin.vue b/src/components/Footers/FooterAdmin.vue
index 7d8ab3a..fb99a0d 100644
--- a/src/components/Footers/FooterAdmin.vue
+++ b/src/components/Footers/FooterAdmin.vue
@@ -1,18 +1,18 @@
 <template>
   <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=vn-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>
@@ -23,7 +23,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com?ref=vn-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>
@@ -31,7 +31,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com/presentation?ref=vn-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>
@@ -39,7 +39,7 @@
             <li>
               <a
                 href="http://blog.creative-tim.com?ref=vn-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>
@@ -47,7 +47,7 @@
             <li>
               <a
                 href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-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"
               >
                 MIT License
               </a>

From ba5305f92b42dca70f10e61747962636b78738e7 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:46 +0200
Subject: [PATCH 096/107] refactor: change coolGray with blueGray

---
 src/components/Footers/FooterSmall.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Footers/FooterSmall.vue b/src/components/Footers/FooterSmall.vue
index d22cef7..96d0d6f 100644
--- a/src/components/Footers/FooterSmall.vue
+++ b/src/components/Footers/FooterSmall.vue
@@ -2,22 +2,22 @@
   <footer
     class="pb-6"
     :class="[
-      absolute ? 'absolute w-full bottom-0 bg-coolGray-800' : 'relative',
+      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
-            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=vn-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>
@@ -28,7 +28,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com?ref=vn-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>
@@ -36,7 +36,7 @@
             <li>
               <a
                 href="https://www.creative-tim.com/presentation?ref=vn-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>
@@ -44,7 +44,7 @@
             <li>
               <a
                 href="http://blog.creative-tim.com?ref=vn-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>
@@ -52,7 +52,7 @@
             <li>
               <a
                 href="https://github.com/creativetimofficial/vue-notus/blob/main/LICENSE.md?ref=vn-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"
               >
                 MIT License
               </a>

From e3863e875a429205dd4a809a58c6edd2a9720ff5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:48 +0200
Subject: [PATCH 097/107] refactor: change coolGray with blueGray

---
 src/components/Navbars/AdminNavbar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbars/AdminNavbar.vue b/src/components/Navbars/AdminNavbar.vue
index 069d8bb..9688210 100644
--- a/src/components/Navbars/AdminNavbar.vue
+++ b/src/components/Navbars/AdminNavbar.vue
@@ -19,14 +19,14 @@
       >
         <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 470965bacb870e2dc224c4e810f0555ae5fe4972 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:49 +0200
Subject: [PATCH 098/107] refactor: change coolGray with blueGray

---
 src/components/Navbars/AuthNavbar.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbars/AuthNavbar.vue b/src/components/Navbars/AuthNavbar.vue
index 951f21c..2a232bf 100644
--- a/src/components/Navbars/AuthNavbar.vue
+++ b/src/components/Navbars/AuthNavbar.vue
@@ -30,11 +30,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/vue/overview/notus?ref=vn-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"
               />
               Docs
             </a>
@@ -46,12 +46,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%2Fvue-notus%2F%23%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"
               />
               <span class="lg:hidden inline-block ml-2">Share</span>
             </a>
@@ -59,12 +59,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%2Fvue-notus%2F%23%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20VueJS%20UI%20Kit%20and%20Admin.%20Let%20Vue%20Notus%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level.%20"
               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"
               />
               <span class="lg:hidden inline-block ml-2">Tweet</span>
             </a>
@@ -72,12 +72,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/vue-notus?ref=vn-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"
               />
               <span class="lg:hidden inline-block ml-2">Star</span>
             </a>
@@ -85,7 +85,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 c562e7de735c831ef9fa989f67cb2f70043e9481 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:50 +0200
Subject: [PATCH 099/107] refactor: change coolGray with blueGray

---
 src/components/Navbars/IndexNavbar.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Navbars/IndexNavbar.vue b/src/components/Navbars/IndexNavbar.vue
index 5049c79..2e7bbed 100644
--- a/src/components/Navbars/IndexNavbar.vue
+++ b/src/components/Navbars/IndexNavbar.vue
@@ -10,7 +10,7 @@
       >
         <router-link to="/">
           <a
-            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"
           >
             Vue Notus
@@ -32,11 +32,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/vue/overview/notus?ref=vn-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"
               />
               Docs
             </a>
@@ -48,33 +48,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%2Fvue-notus%2F%23%2F"
               target="_blank"
             >
-              <i class="text-coolGray-400 fab fa-facebook text-lg leading-lg" />
+              <i class="text-blueGray-400 fab fa-facebook text-lg leading-lg" />
               <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%2Fvue-notus%2F%23%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20VueJS%20UI%20Kit%20and%20Admin.%20Let%20Vue%20Notus%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level.%20"
               target="_blank"
             >
-              <i class="text-coolGray-400 fab fa-twitter text-lg leading-lg" />
+              <i class="text-blueGray-400 fab fa-twitter text-lg leading-lg" />
               <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/vue-notus?ref=vn-index-navbar"
               target="_blank"
             >
-              <i class="text-coolGray-400 fab fa-github text-lg leading-lg" />
+              <i class="text-blueGray-400 fab fa-github text-lg leading-lg" />
               <span class="lg:hidden inline-block ml-2">Star</span>
             </a>
           </li>

From a8ae3897a5d02c79f6f4f85426615e3f92c9f042 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:52 +0200
Subject: [PATCH 100/107] refactor: change coolGray with blueGray

---
 src/components/Sidebar/Sidebar.vue | 80 +++++++++++++++---------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.vue b/src/components/Sidebar/Sidebar.vue
index c78754f..ace1fef 100644
--- a/src/components/Sidebar/Sidebar.vue
+++ b/src/components/Sidebar/Sidebar.vue
@@ -15,7 +15,7 @@
       </button>
       <!-- Brand -->
       <router-link
-        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"
         to="/"
       >
         Vue Notus
@@ -36,12 +36,12 @@
       >
         <!-- 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">
               <router-link
-                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"
                 to="/"
               >
                 Vue Notus
@@ -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>
@@ -92,12 +92,12 @@
                 :class="[
                   isActive
                     ? 'text-emerald-500 hover:text-emerald-600'
-                    : 'text-coolGray-700 hover:text-coolGray-500',
+                    : 'text-blueGray-700 hover:text-blueGray-500',
                 ]"
               >
                 <i
                   class="fas fa-tv mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
+                  :class="[isActive ? 'opacity-75' : 'text-blueGray-300']"
                 ></i>
                 Dashboard
               </a>
@@ -116,12 +116,12 @@
                 :class="[
                   isActive
                     ? 'text-emerald-500 hover:text-emerald-600'
-                    : 'text-coolGray-700 hover:text-coolGray-500',
+                    : 'text-blueGray-700 hover:text-blueGray-500',
                 ]"
               >
                 <i
                   class="fas fa-tools mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
+                  :class="[isActive ? 'opacity-75' : 'text-blueGray-300']"
                 ></i>
                 Settings
               </a>
@@ -140,12 +140,12 @@
                 :class="[
                   isActive
                     ? 'text-emerald-500 hover:text-emerald-600'
-                    : 'text-coolGray-700 hover:text-coolGray-500',
+                    : 'text-blueGray-700 hover:text-blueGray-500',
                 ]"
               >
                 <i
                   class="fas fa-table mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
+                  :class="[isActive ? 'opacity-75' : 'text-blueGray-300']"
                 ></i>
                 Tables
               </a>
@@ -161,12 +161,12 @@
                 :class="[
                   isActive
                     ? 'text-emerald-500 hover:text-emerald-600'
-                    : 'text-coolGray-700 hover:text-coolGray-500',
+                    : 'text-blueGray-700 hover:text-blueGray-500',
                 ]"
               >
                 <i
                   class="fas fa-map-marked mr-2 text-sm"
-                  :class="[isActive ? 'opacity-75' : 'text-coolGray-300']"
+                  :class="[isActive ? 'opacity-75' : 'text-blueGray-300']"
                 ></i>
                 Maps
               </a>
@@ -178,7 +178,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>
@@ -187,21 +187,21 @@
         <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
           <li class="items-center">
             <router-link
-              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"
               to="/auth/login"
             >
-              <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
             </router-link>
           </li>
 
           <li class="items-center">
             <router-link
-              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"
               to="/auth/register"
             >
               <i
-                class="fas fa-clipboard-list text-coolGray-300 mr-2 text-sm"
+                class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"
               ></i>
               Register
             </router-link>
@@ -212,7 +212,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>
@@ -221,20 +221,20 @@
         <ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
           <li class="items-center">
             <router-link
-              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"
               to="/landing"
             >
-              <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
             </router-link>
           </li>
 
           <li class="items-center">
             <router-link
-              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"
               to="/profile"
             >
-              <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
             </router-link>
           </li>
@@ -244,7 +244,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>
@@ -254,10 +254,10 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/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"
+                class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"
               ></i>
               Styles
             </a>
@@ -267,9 +267,9 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/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>
@@ -278,9 +278,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>
@@ -289,9 +289,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>
@@ -300,9 +300,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>
@@ -311,9 +311,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>
@@ -322,9 +322,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>
@@ -333,9 +333,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 0799801adbd5cde2168d7901bfe0a8033a5b4d70 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:53 +0200
Subject: [PATCH 101/107] refactor: change coolGray with blueGray

---
 src/layouts/Admin.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Admin.vue b/src/layouts/Admin.vue
index 30d5cdb..d59396c 100644
--- a/src/layouts/Admin.vue
+++ b/src/layouts/Admin.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <sidebar />
-    <div class="relative md:ml-64 bg-coolGray-100">
+    <div class="relative md:ml-64 bg-blueGray-100">
       <admin-navbar />
       <header-stats />
       <div class="px-4 md:px-10 mx-auto w-full -m-24">

From ba828c52ce974c231240eea1b14c90448f5f4202 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:54 +0200
Subject: [PATCH 102/107] refactor: change coolGray with blueGray

---
 src/layouts/Auth.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Auth.vue b/src/layouts/Auth.vue
index 2d23399..54e974a 100644
--- a/src/layouts/Auth.vue
+++ b/src/layouts/Auth.vue
@@ -4,7 +4,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('${registerBg2}');`"
         ></div>
         <router-view />

From 3d1a01a4602f31bf6ebc6449196921a93ffcd708 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:56 +0200
Subject: [PATCH 103/107] refactor: change coolGray with blueGray

---
 src/views/Index.vue | 118 ++++++++++++++++++++++----------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/views/Index.vue b/src/views/Index.vue
index d7360b9..26fa79c 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -7,15 +7,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">
               Vue Notus - 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">
               Vue Notus 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.
@@ -33,7 +33,7 @@
               </a>
               <a
                 href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
-                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
@@ -50,7 +50,7 @@
       />
     </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);"
@@ -65,7 +65,7 @@
           y="0"
         >
           <polygon
-            class="text-coolGray-100 fill-current"
+            class="text-blueGray-100 fill-current"
             points="2560 0 2560 100 0 100"
           ></polygon>
         </svg>
@@ -113,14 +113,14 @@
                 <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">
                       Vue Notus comes with a huge number of Fully Coded CSS
                       components.
                     </p>
@@ -129,14 +129,14 @@
                 <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>
@@ -147,12 +147,12 @@
                 <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>
@@ -161,14 +161,14 @@
                 <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 Vue Notus.
                     </p>
@@ -184,7 +184,7 @@
         <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>
@@ -192,7 +192,7 @@
               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
@@ -200,42 +200,42 @@
             </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>
@@ -243,7 +243,7 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-index"
               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>
@@ -329,7 +329,7 @@
                   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="..."
@@ -400,7 +400,7 @@
 
           <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>
@@ -408,56 +408,56 @@
               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>
@@ -465,7 +465,7 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=vn-index"
               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>
@@ -479,14 +479,14 @@
           <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
@@ -497,13 +497,13 @@
                   <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>
@@ -513,13 +513,13 @@
                   <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>
@@ -529,13 +529,13 @@
                   <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>
@@ -562,7 +562,7 @@
       <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">
             Vue Notus 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.
@@ -571,7 +571,7 @@
       </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">
@@ -632,12 +632,12 @@
       </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>
@@ -645,12 +645,12 @@
               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
@@ -660,7 +660,7 @@
               the 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!
@@ -668,7 +668,7 @@
             <a
               href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
               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>
@@ -676,14 +676,14 @@
 
           <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);"
@@ -698,7 +698,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>
@@ -717,7 +717,7 @@
             <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!
@@ -733,7 +733,7 @@
               <a
                 href="https://github.com/creativetimofficial/vue-notus?ref=vn-index"
                 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 f04894ebf92eb640549d012420880c6ead9d4de5 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:57 +0200
Subject: [PATCH 104/107] refactor: change coolGray with blueGray

---
 src/views/Landing.vue | 80 +++++++++++++++++++++----------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/views/Landing.vue b/src/views/Landing.vue
index 4a08005..ec49202 100644
--- a/src/views/Landing.vue
+++ b/src/views/Landing.vue
@@ -23,7 +23,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
                   Vue Notus. It features multiple CSS components based on the
                   Tailwind CSS design system.
@@ -46,14 +46,14 @@
             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">
@@ -67,7 +67,7 @@
                     <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>
@@ -86,7 +86,7 @@
                     <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>
@@ -105,7 +105,7 @@
                     <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>
@@ -117,7 +117,7 @@
           <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>
@@ -125,20 +125,20 @@
                 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>
-              <router-link to="/" class="font-bold text-coolGray-700 mt-8">
+              <router-link to="/" class="font-bold text-blueGray-700 mt-8">
                 Check Vue Notus!
               </router-link>
             </div>
@@ -217,7 +217,7 @@
                   <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.
@@ -233,7 +233,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-coolGray-500">
+                        <h4 class="text-blueGray-500">
                           Carefully crafted components
                         </h4>
                       </div>
@@ -249,7 +249,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-coolGray-500">
+                        <h4 class="text-blueGray-500">
                           Amazing page examples
                         </h4>
                       </div>
@@ -265,7 +265,7 @@
                         </span>
                       </div>
                       <div>
-                        <h4 class="text-coolGray-500">Dynamic components</h4>
+                        <h4 class="text-blueGray-500">Dynamic components</h4>
                       </div>
                     </div>
                   </li>
@@ -281,7 +281,7 @@
           <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.
@@ -299,7 +299,7 @@
                 <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"
+                    class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
                   >
                     Web Developer
                   </p>
@@ -336,7 +336,7 @@
                 <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"
+                    class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
                   >
                     Marketing Specialist
                   </p>
@@ -367,7 +367,7 @@
                 <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"
+                    class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
                   >
                     UI/UX Designer
                   </p>
@@ -385,7 +385,7 @@
                       <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>
@@ -404,7 +404,7 @@
                 <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"
+                    class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
                   >
                     Founder and CEO
                   </p>
@@ -428,7 +428,7 @@
                       <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>
@@ -441,7 +441,7 @@
         </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);"
@@ -456,7 +456,7 @@
             y="0"
           >
             <polygon
-              class="text-coolGray-800 fill-current"
+              class="text-blueGray-800 fill-current"
               points="2560 0 2560 100 0 100"
             ></polygon>
           </svg>
@@ -468,7 +468,7 @@
               <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.
@@ -478,42 +478,42 @@
           <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>
@@ -521,51 +521,51 @@
           </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
@@ -573,13 +573,13 @@
                     <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..."
                     />
                   </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 4c261ca34e1205e57685ee57a82706adf707c5b3 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:46:58 +0200
Subject: [PATCH 105/107] refactor: change coolGray with blueGray

---
 src/views/Profile.vue | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 74b5e44..3256473 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -28,13 +28,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"
@@ -68,62 +68,62 @@
                   <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">
+                <div class="mb-2 text-blueGray-600 mt-10">
                   <i
-                    class="fas fa-briefcase mr-2 text-lg text-coolGray-400"
+                    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">
+                <div class="mb-2 text-blueGray-600">
                   <i
-                    class="fas fa-university mr-2 text-lg text-coolGray-400"
+                    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

From b3a74238c545af6804c57593bbdf5d86d0b60724 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:47:00 +0200
Subject: [PATCH 106/107] refactor: change coolGray with blueGray

---
 src/views/auth/Login.vue | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue
index bff5599..302420d 100644
--- a/src/views/auth/Login.vue
+++ b/src/views/auth/Login.vue
@@ -3,61 +3,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-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">
+              <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="github" />
                 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="google" />
                 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>
@@ -66,9 +66,9 @@
                   <input
                     id="customCheckLogin"
                     type="checkbox"
-                    class="form-checkbox border-0 rounded text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                    class="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                   />
-                  <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>
@@ -76,7 +76,7 @@
 
               <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
@@ -87,12 +87,12 @@
         </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">
-            <router-link to="/auth/register" class="text-coolGray-200">
+            <router-link to="/auth/register" class="text-blueGray-200">
               <small>Create new account</small>
             </router-link>
           </div>

From 96bb83d16db874eb002c4fa0e7854753457eacd9 Mon Sep 17 00:00:00 2001
From: EINazare <emanuelioannazare@gmail.com>
Date: Fri, 19 Mar 2021 11:47:01 +0200
Subject: [PATCH 107/107] refactor: change coolGray with blueGray

---
 src/views/auth/Register.vue | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/views/auth/Register.vue b/src/views/auth/Register.vue
index 1c691c6..6d51be0 100644
--- a/src/views/auth/Register.vue
+++ b/src/views/auth/Register.vue
@@ -3,75 +3,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-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">
+              <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="github" />
                 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="google" />
                 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>
@@ -81,9 +81,9 @@
                   <input
                     id="customCheckLogin"
                     type="checkbox"
-                    class="form-checkbox border-0 rounded text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                    class="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                   />
-                  <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-emerald-500">
                       Privacy Policy
@@ -94,7 +94,7 @@
 
               <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