From 11904cc42edb36e23f91a2b71de5f2b45330788e Mon Sep 17 00:00:00 2001
From: JhumanJ <julien@nahum.net>
Date: Mon, 17 Oct 2022 14:20:13 +0200
Subject: [PATCH] Fix safelist tailwind

---
 package.json                              |  2 +-
 resources/js/components/Navbar.vue        | 10 +++----
 resources/js/components/common/Button.vue | 36 +++++------------------
 resources/js/pages/welcome.vue            | 26 ++++++++--------
 resources/sass/app.scss                   |  1 -
 resources/sass/elements/_buttons.scss     | 25 ----------------
 resources/sass/elements/_card.scss        |  3 --
 resources/sass/elements/_navbar.scss      | 19 ------------
 resources/sass/elements/_transitions.scss | 17 -----------
 tailwind.config.js                        | 17 +++++------
 10 files changed, 35 insertions(+), 121 deletions(-)
 delete mode 100644 resources/sass/elements/_buttons.scss
 delete mode 100644 resources/sass/elements/_card.scss
 delete mode 100644 resources/sass/elements/_navbar.scss
 delete mode 100644 resources/sass/elements/_transitions.scss

diff --git a/package.json b/package.json
index ba053af..5b183e6 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "development": "mix",
     "watch": "mix watch",
     "watch-poll": "mix watch -- --watch-options-poll=1000",
-    "hot": "mix watch --hot",
+    "hot": "mix watch --hot --https",
     "prod": "mix --production",
     "production": "mix --production",
     "lint": "eslint --fix --ext .js,.vue resources/js"
diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
index a74c727..a90305a 100644
--- a/resources/js/components/Navbar.vue
+++ b/resources/js/components/Navbar.vue
@@ -6,7 +6,7 @@
           <router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-semibold flex items-center">
             <img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
             <span
-              class="ml-2 text-xl hidden sm:inline text-black dark:text-white"
+              class="ml-2 text-md hidden sm:inline text-black dark:text-white"
             >
               {{ appName }}</span><span
               class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
@@ -27,7 +27,7 @@
             Help
           </a>
         </div>
-        <div v-if="showAuth" class="hidden md:block pl-5 border-gray-300 border-r-2 h-5"></div>
+        <div v-if="showAuth" class="hidden md:block pl-5 border-gray-300 border-r h-5"></div>
         <div v-if="showAuth" class="block">
           <div class="flex items-center">
             <div class="ml-3 mr-4 relative">
@@ -35,7 +35,7 @@
                 <dropdown v-if="user" dusk="nav-dropdown">
                   <template #trigger="{toggle}">
                     <button id="dropdown-menu-button" type="button"
-                            class="flex items-center justify-center w-full rounded-md  px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
+                            class="flex items-center justify-center w-full rounded-md  px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
                             dusk="nav-dropdown-button" @click.prevent="toggle()"
                     >
                       <img :src="user.photo_url" class="rounded-full w-6 h-6">
@@ -90,13 +90,13 @@
                 </dropdown>
                 <div v-else>
                   <router-link v-if="$route.name !== 'login'" :to="{ name: 'login' }"
-                               class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm font-medium"
+                               class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
                                active-class="text-gray-800 dark:text-white"
                   >
                     {{ $t('login') }}
                   </router-link>
                   <router-link :to="{ name: 'register' }"
-                               class="hidden md:inline text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm font-medium"
+                               class="hidden md:inline text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white pl-3 py-2 rounded-md text-sm"
                                active-class="text-gray-800 dark:text-white"
                   >
                     <v-button v-track.nav_create_form_click :arrow="true">
diff --git a/resources/js/components/common/Button.vue b/resources/js/components/common/Button.vue
index 8adc6b7..b273951 100644
--- a/resources/js/components/common/Button.vue
+++ b/resources/js/components/common/Button.vue
@@ -3,12 +3,12 @@
     bg-${color}-${colorShades['main']} hover:bg-${color}-${colorShades['hover']} focus:ring-${color}-${colorShades['ring']}
     focus:ring-offset-${color}-${colorShades['ring-offset']} text-${colorShades['text']}
     transition ease-in duration-200 text-center text-${sizes['font']} font-semibold focus:outline-none focus:ring-2
-    focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-full `"
-          class="btn" @click="$emit('click',$event)"
+    focus:ring-offset-2 border-2 border-${colorShades['border']} rounded-lg`"
+          @click="$emit('click',$event)"
   >
     <template v-if="!loading">
       <slot />
-      <svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right mt-1 ml-2 w-4 h-4">
+      <svg v-if="arrow" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="float-right mt-1 ml-2 w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
       </svg>
     </template>
@@ -23,7 +23,7 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'normal'
+      default: 'blue'
     },
 
     shade: {
@@ -38,7 +38,7 @@ export default {
 
     nativeType: {
       type: String,
-      default: 'submit'
+      default: null
     },
 
     loading: {
@@ -54,26 +54,6 @@ export default {
 
   computed: {
     colorShades () {
-      if (this.color === 'nt-blue') {
-        return {
-          main: 'default',
-          hover: 'light',
-          ring: 'light',
-          'ring-offset': 'lighter',
-          text: 'white',
-          border: 'nt-blue'
-        }
-      }
-      if (['red','green','blue'].indexOf(this.color) >= 0) {
-        return {
-          main: '600',
-          hover: 'light',
-          ring: 'light',
-          'ring-offset': 'lighter',
-          text: 'white',
-          border: 'white'
-        }
-      }
       if (this.shade === 'lighter') {
         return {
           main: '200',
@@ -81,7 +61,7 @@ export default {
           ring: '100',
           'ring-offset': '50',
           text: 'gray-900',
-          border: 'nt-blue'
+          border: 'blue'
         }
       }
       if (this.shade === 'light') {
@@ -99,8 +79,8 @@ export default {
         hover: '700',
         ring: '500',
         'ring-offset': '200',
-        text: 'nt-blue',
-        border: 'nt-blue'
+        text: 'white',
+        border: 'blue'
       }
     },
     sizes () {
diff --git a/resources/js/pages/welcome.vue b/resources/js/pages/welcome.vue
index 6718263..4594285 100644
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
-      <div class="w-full ">
+      <div class="w-full bg-gradient-to-b from-white to-gray-50">
         <div class="w-full md:mx-auto flex flex-wrap mb-10 md:-mb-64 md:pt-10 relative max-w-5xl">
           <div
             class="flex flex-col justify-center w-full text-center lg:pr-10 p-6 lg:p-10 relative z-10"
@@ -9,7 +9,7 @@
             <h1 dusk="title" class="text-4xl lg:text-5xl">
               The open-source <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-blue-600">form builder</span><br>
             </h1>
-            <h3 class="mt-6 text-xl text-gray-500 dark:text-gray-400 max-w-xl mx-auto">
+            <h3 class="mt-6 text-xl text-gray-600 dark:text-gray-400 max-w-xl mx-auto">
               Create beautiful forms and share them anywhere. It takes seconds, you don't need to know how to code
               and <span
               class="font-semibold"
@@ -17,32 +17,34 @@
             </h3>
             <div class="mt-6 flex justify-center">
               <router-link class="mr-1" :to="{ name: 'register' }">
-                <v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
+                <v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="blue">
                   Create a form for FREE
                 </v-button>
               </router-link>
             </div>
-            <div class="justify-center flex mt-10">
-              <div class="flex text-gray-400 mr-4">
+            <div class="justify-center flex gap-2 mt-10">
+              <div class="flex items-center text-gray-400 text-sm">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
-                Unlimited forms
+                <span>Unlimited forms</span>
               </div>
-              <div class="flex text-gray-400 mr-4">
+              <div class="flex items-center text-gray-400 text-sm">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
+                     stroke="currentColor" class="w-4 h-4 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
-                Unlimited fields
+                <span>
+                  Unlimited fields
+                </span>
               </div>
-              <div class="flex text-gray-400">
+              <div class="flex text-gray-400 text-sm">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-4 h-4 mt-1 mr-1">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                 </svg>
-                Unlimited responses
+                <span>Unlimited responses</span>
               </div>
             </div>
           </div>
@@ -78,7 +80,7 @@
         <p class="text-gray-300 my-8">No trial. Generous, unlimited free plan.</p>
         <div class="mt-6 flex justify-center">
           <router-link class="mr-1" :to="{ name: 'register' }">
-            <v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="nt-blue">
+            <v-button v-track.welcome_create_form_click :arrow="true" class="py-4" color="blue">
               Create a form for FREE
             </v-button>
           </router-link>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 5642d22..ef2d9ee 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import 'elements/transitions';
 @import 'fonts';
 
 body.dark * {
diff --git a/resources/sass/elements/_buttons.scss b/resources/sass/elements/_buttons.scss
deleted file mode 100644
index 1e35cd0..0000000
--- a/resources/sass/elements/_buttons.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.btn-loading {
-  position: relative;
-  pointer-events: none;
-  color: transparent !important;
-
-  &:after {
-    animation: spinAround 500ms infinite linear;
-    border: 2px solid #dbdbdb;
-    border-radius: 50%;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    display: block;
-    height: 1em;
-    width: 1em;
-    position: absolute;
-    left: calc(50% - (1em / 2));
-    top: calc(50% - (1em / 2));
-  }
-}
-
-@keyframes spinAround {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(359deg); }
-}
diff --git a/resources/sass/elements/_card.scss b/resources/sass/elements/_card.scss
deleted file mode 100644
index ed1522b..0000000
--- a/resources/sass/elements/_card.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.card {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
diff --git a/resources/sass/elements/_navbar.scss b/resources/sass/elements/_navbar.scss
deleted file mode 100644
index e5dbeba..0000000
--- a/resources/sass/elements/_navbar.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.navbar {
-  font-weight: 600;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-}
-
-.nav-item {
-  .dropdown-menu {
-    border: none;
-    margin-top: .5rem;
-    border-top: 1px solid #f2f2f2 !important;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
-  }
-}
-
-.nav-link {
-  .svg-inline--fa {
-    font-size: 1.4rem;
-  }
-}
diff --git a/resources/sass/elements/_transitions.scss b/resources/sass/elements/_transitions.scss
deleted file mode 100644
index aebe03a..0000000
--- a/resources/sass/elements/_transitions.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.page-enter-active,
-.page-leave-active {
-  transition: opacity .2s;
-}
-.page-enter,
-.page-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .15s
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 59336c8..8718719 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,17 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  mode: 'jit',
-  important: true,
   content: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue'
   ],
-  options: {
-    safelist: [
-      /.*bg-(nt-blue|blue|gray|red|yellow|green).*/, // Buttons
-      ...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
-    ]
-  },
+  safelist: [
+    {
+      pattern:  /.*bg-(blue|gray|red|yellow|green).*/,
+    },
+    ...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
+  ],
   darkMode: 'class', // or 'media' or 'class'
   theme: {
     extend: {
@@ -69,6 +67,5 @@ module.exports = {
         spacing: 'margin, padding'
       }
     }
-  },
-  plugins: []
+  }
 }