From ed64fc92d7b8a2bcc7742baac35f9b39d61e7721 Mon Sep 17 00:00:00 2001
From: Guillaume Briday <guillaumebriday@gmail.com>
Date: Fri, 23 Dec 2022 22:22:11 -0500
Subject: [PATCH] Updating UI

---
 .npmignore         |  2 ++
 README.md          |  3 +--
 index.html         | 41 +++++++++++++++++------------------------
 postcss.config.js  |  6 ++++++
 src/app.css        | 12 ++++++++++++
 tailwind.config.js |  6 ++++++
 6 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 src/app.css
 create mode 100644 tailwind.config.js

diff --git a/.npmignore b/.npmignore
index d731436..8a781d0 100644
--- a/.npmignore
+++ b/.npmignore
@@ -11,3 +11,5 @@ spec
 tsconfig.json
 vite.config.js
 .prettierignore
+postcss.config.js
+tailwind.config.js
diff --git a/README.md b/README.md
index 26c7579..a749be9 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,6 @@
 [![](https://img.shields.io/npm/v/stimulus-popover.svg)](https://www.npmjs.com/package/stimulus-popover)
 [![](https://github.com/stimulus-components/stimulus-popover/workflows/Lint/badge.svg)](https://github.com/stimulus-components/stimulus-popover)
 [![](https://img.shields.io/github/license/stimulus-components/stimulus-popover.svg)](https://github.com/stimulus-components/stimulus-popover)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/cbec1815-8e5b-4f45-8cb2-44d24e8c9cf5/deploy-status)](https://stimulus-popover.netlify.com)
 
 ## Getting started
 
@@ -12,7 +11,7 @@ A Stimulus controller to deal with HTML popover.
 
 ## 📚 Documentation
 
-See [stimulus-popover documentation](https://stimulus-components.netlify.app/docs/components/stimulus-popover/).
+See [stimulus-popover documentation](https://www.stimulus-components.com/docs/stimulus-popover/).
 
 ## 👷‍♂️ Contributing
 
diff --git a/index.html b/index.html
index 82b3805..6e82054 100644
--- a/index.html
+++ b/index.html
@@ -4,22 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="description" content="A Stimulus controller to deal with HTML popover." />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet" />
-
-    <style>
-      [data-popover-target='card']::after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        left: 1rem;
-        border-width: 0.75rem;
-        border-color: white transparent transparent transparent;
-      }
-    </style>
 
     <title>Stimulus Popover</title>
 
     <script type="module" defer>
+      import './src/app.css'
       import { Application } from '@hotwired/stimulus'
       import Popover from './src/index'
 
@@ -83,7 +72,9 @@
           <div class="text-center">
             <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
               <span class="block xl:inline">Stimulus</span>
-              <span class="block text-yellow-600 xl:inline">Popover</span>
+              <span class="block bg-gradient-to-r from-yellow-500 to-orange-500 xl:inline bg-clip-text text-transparent"
+                >Popover</span
+              >
             </h1>
 
             <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
@@ -103,28 +94,30 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
                 class="inline-block"
                 src="https://img.shields.io/github/license/stimulus-components/stimulus-popover.svg"
               />
-
-              <img
-                class="inline-block"
-                src="https://api.netlify.com/api/v1/badges/f75f37fa-c1c7-42c3-8266-27d11c67c2b1/deploy-status"
-              />
             </p>
 
             <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
               <div class="rounded-md shadow">
                 <a
-                  href="https://github.com/stimulus-components/stimulus-popover"
-                  class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 md:py-4 md:text-lg md:px-10"
+                  href="https://www.stimulus-components.com/docs/stimulus-popover"
+                  class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-yellow-500 to-orange-500 md:py-4 md:text-lg md:px-10"
                 >
-                  GitHub
+                  Documentation &rarr;
                 </a>
               </div>
               <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                 <a
-                  href="https://stimulus-components.netlify.app/docs/components/stimulus-popover/"
-                  class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-yellow-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
+                  href="https://github.com/stimulus-components/stimulus-popover"
+                  class="w-full flex items-center justify-center gap-1 px-8 py-3 border border-transparent text-base font-medium rounded-md bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
                 >
-                  Documentation
+                  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
+                    <path
+                      fill-rule="evenodd"
+                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                      clip-rule="evenodd"
+                    ></path>
+                  </svg>
+                  GitHub
                 </a>
               </div>
             </div>
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..b06e48c
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+[data-popover-target='card']::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 1rem;
+  border-width: 0.75rem;
+  border-color: white transparent transparent transparent;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e03d3d6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ]
+}