From bc3b817ab720e2e38aa6cc84da92d0f368f445c4 Mon Sep 17 00:00:00 2001
From: khatab Wedaa <38974561+khatabwedaa@users.noreply.github.com>
Date: Wed, 25 Nov 2020 20:33:05 +0200
Subject: [PATCH] Upgrade to tailwindcss v2 (#29)

* Update tailwindcss version

* Update utility classes

* Add colors note
---
 package.json                                  |   2 +-
 src/components/Main.vue                       |   1 +
 .../ui/Authentication/LoginWithSideImage.vue  |   8 +-
 .../ui/Authentication/SimpleLogin.vue         |   8 +-
 src/components/ui/Forms/Simple.vue            |  16 +--
 src/components/ui/Navbars/WithCategories.vue  |   4 +-
 tailwind.config.js                            | 118 ++++++++++++++++++
 7 files changed, 138 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 579ddd4..52bdfc6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "core-js": "^3.6.4",
     "highlight.js": "^10.0.2",
     "postcss-import": "^12.0.1",
-    "tailwindcss": "^1.8.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-backtotop": "^1.6.1",
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 8c85502..bb38437 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -13,6 +13,7 @@
             </div>
 
             <p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
+            <p class="mt-4 text-gray-700 text-center underline">Note Meraki UI use Tailwindcss V1 color we are working to Support V2 colors</p>
         </div>
 
         <div class="w-full max-w-6xl mx-auto">
diff --git a/src/components/ui/Authentication/LoginWithSideImage.vue b/src/components/ui/Authentication/LoginWithSideImage.vue
index e072016..f77d90f 100644
--- a/src/components/ui/Authentication/LoginWithSideImage.vue
+++ b/src/components/ui/Authentication/LoginWithSideImage.vue
@@ -32,7 +32,7 @@
 
                     <div class="mt-4">
                         <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                        <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
+                        <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
                     </div>
 
                     <div class="mt-4">
@@ -41,7 +41,7 @@
                             <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
                         </div>
 
-                        <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
+                        <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
                     </div>
 
                     <div class="mt-8">
@@ -100,7 +100,7 @@
 
                 <div class="mt-4">
                     <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                    <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
+                    <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
                 </div>
 
                 <div class="mt-4">
@@ -109,7 +109,7 @@
                         <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
                     </div>
 
-                    <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
+                    <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
                 </div>
 
                 <div class="mt-8">
diff --git a/src/components/ui/Authentication/SimpleLogin.vue b/src/components/ui/Authentication/SimpleLogin.vue
index badb95d..41ffe14 100644
--- a/src/components/ui/Authentication/SimpleLogin.vue
+++ b/src/components/ui/Authentication/SimpleLogin.vue
@@ -11,11 +11,11 @@
 
                     <form>
                         <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
+                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                         </div>
 
                         <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
+                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                         </div>
 
                         <div class="flex justify-between items-center mt-4">
@@ -54,11 +54,11 @@
 
                 <form>
                     <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
+                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                     </div>
 
                     <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
+                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                     </div>
 
                     <div class="flex justify-between items-center mt-4">
diff --git a/src/components/ui/Forms/Simple.vue b/src/components/ui/Forms/Simple.vue
index 23401fd..b4a11d1 100644
--- a/src/components/ui/Forms/Simple.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -8,22 +8,22 @@
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                         <div>
                             <label class="text-gray-700" for="username">Username</label>
-                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="emailAddress">Email Address</label>
-                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="password">Password</label>
-                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
                     </div>
 
@@ -49,22 +49,22 @@
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                     <div>
                         <label class="text-gray-700" for="username">Username</label>
-                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="password">Password</label>
-                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
                 </div>
 
diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
index 9a76abb..27bc65e 100644
--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -45,7 +45,7 @@
                         </div>
                     </div>
 
-                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
                         <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
                         <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
                         <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
@@ -132,7 +132,7 @@
                     </div>
                 </div>
 
-                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
                     <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
                     <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
                     <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
diff --git a/tailwind.config.js b/tailwind.config.js
index 375fd8f..842510f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,124 @@ module.exports = {
                 128: "32rem",
             },
         },
+        colors: {
+            transparent: "transparent",
+            current: "currentColor",
+
+            black: "#000",
+            white: "#fff",
+
+            gray: {
+                100: "#f7fafc",
+                200: "#edf2f7",
+                300: "#e2e8f0",
+                400: "#cbd5e0",
+                500: "#a0aec0",
+                600: "#718096",
+                700: "#4a5568",
+                800: "#2d3748",
+                900: "#1a202c",
+            },
+            red: {
+                100: "#fff5f5",
+                200: "#fed7d7",
+                300: "#feb2b2",
+                400: "#fc8181",
+                500: "#f56565",
+                600: "#e53e3e",
+                700: "#c53030",
+                800: "#9b2c2c",
+                900: "#742a2a",
+            },
+            orange: {
+                100: "#fffaf0",
+                200: "#feebc8",
+                300: "#fbd38d",
+                400: "#f6ad55",
+                500: "#ed8936",
+                600: "#dd6b20",
+                700: "#c05621",
+                800: "#9c4221",
+                900: "#7b341e",
+            },
+            yellow: {
+                100: "#fffff0",
+                200: "#fefcbf",
+                300: "#faf089",
+                400: "#f6e05e",
+                500: "#ecc94b",
+                600: "#d69e2e",
+                700: "#b7791f",
+                800: "#975a16",
+                900: "#744210",
+            },
+            green: {
+                100: "#f0fff4",
+                200: "#c6f6d5",
+                300: "#9ae6b4",
+                400: "#68d391",
+                500: "#48bb78",
+                600: "#38a169",
+                700: "#2f855a",
+                800: "#276749",
+                900: "#22543d",
+            },
+            teal: {
+                100: "#e6fffa",
+                200: "#b2f5ea",
+                300: "#81e6d9",
+                400: "#4fd1c5",
+                500: "#38b2ac",
+                600: "#319795",
+                700: "#2c7a7b",
+                800: "#285e61",
+                900: "#234e52",
+            },
+            blue: {
+                100: "#ebf8ff",
+                200: "#bee3f8",
+                300: "#90cdf4",
+                400: "#63b3ed",
+                500: "#4299e1",
+                600: "#3182ce",
+                700: "#2b6cb0",
+                800: "#2c5282",
+                900: "#2a4365",
+            },
+            indigo: {
+                100: "#ebf4ff",
+                200: "#c3dafe",
+                300: "#a3bffa",
+                400: "#7f9cf5",
+                500: "#667eea",
+                600: "#5a67d8",
+                700: "#4c51bf",
+                800: "#434190",
+                900: "#3c366b",
+            },
+            purple: {
+                100: "#faf5ff",
+                200: "#e9d8fd",
+                300: "#d6bcfa",
+                400: "#b794f4",
+                500: "#9f7aea",
+                600: "#805ad5",
+                700: "#6b46c1",
+                800: "#553c9a",
+                900: "#44337a",
+            },
+            pink: {
+                100: "#fff5f7",
+                200: "#fed7e2",
+                300: "#fbb6ce",
+                400: "#f687b3",
+                500: "#ed64a6",
+                600: "#d53f8c",
+                700: "#b83280",
+                800: "#97266d",
+                900: "#702459",
+            },
+        },
     },
     variants: {
         transitionProperty: ({ after }) => after(["motion-reduce"]),