Upgraded to Tailwind v3

SinSiXX · Jan 6, 2022 · 9640ca0 · 9640ca0
1 parent 0b7c511
commit 9640ca0
Show file tree

Hide file tree

Showing 14 changed files with 1,154 additions and 1,152 deletions.
diff --git a/composer.json b/composer.json
@@ -21,7 +21,7 @@
         "maatwebsite/excel": "^3.1",
         "mews/captcha": "^3.0.0",
         "php-mime-mail-parser/php-mime-mail-parser": "^7.0",
-        "pragmarx/google2fa-laravel": "^1.3",
+        "pragmarx/google2fa-laravel": "^2.0.0",
         "pragmarx/version": "^1.2",
         "ramsey/uuid": "^4.0"
     },

diff --git a/composer.lock b/composer.lock
diff --git a/config/version.yml b/config/version.yml
@@ -5,9 +5,9 @@ current:
   major: 0
   minor: 8
   patch: 9
-  prerelease: ''
+  prerelease: 1-g0b7c511
   buildmetadata: ''
-  commit: 69a50b
+  commit: 0b7c51
   timestamp:
     year: 2020
     month: 10

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,17 +13,17 @@
         "pre-commit": "lint-staged"
     },
     "dependencies": {
-        "autoprefixer": "^10.2.4",
-        "axios": "^0.22.0",
+      "autoprefixer": "^10.4.1",
+        "axios": "^0.24.0",
         "cross-env": "^7.0.3",
         "dayjs": "^1.10.4",
         "laravel-mix": "^6.0.11",
         "lodash": "^4.17.20",
         "portal-vue": "^2.1.7",
-        "postcss": "^8.1.14",
+        "postcss": "^8.4.5",
         "postcss-import": "^14.0.0",
         "resolve-url-loader": "^4.0.0",
-        "tailwindcss": "^2.0.1",
+        "tailwindcss": "^3.0.11",
         "tippy.js": "^6.2.7",
         "v-clipboard": "^2.2.3",
         "vue": "^2.6.12",
@@ -35,9 +35,9 @@
         "vuedraggable": "^2.24.2"
     },
     "devDependencies": {
-        "css-loader": "^5.2.7",
+        "css-loader": "^6.0.0",
         "husky": "^7.0.0",
-        "lint-staged": "^11.0.0",
+        "lint-staged": "^12.0.0",
         "prettier": "^2.2.1"
     },
     "lint-staged": {

diff --git a/resources/js/components/MoreOptions.vue b/resources/js/components/MoreOptions.vue
@@ -20,11 +20,11 @@
 
     <transition
       enter-active-class="transition ease-out duration-100"
-      enter-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
+      enter-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
       leave-active-class="transition ease-in duration-75"
-      leave-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
+      leave-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
     >
       <div
         v-show="isOpen"

diff --git a/resources/js/components/Toggle.vue b/resources/js/components/Toggle.vue
@@ -4,12 +4,12 @@
     type="button"
     :aria-pressed="value.toString()"
     :class="this.value ? 'bg-cyan-500' : 'bg-grey-300'"
-    class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none"
+    class="relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none"
   >
     <span class="sr-only">Use setting</span>
     <span
       :class="this.value ? 'translate-x-5' : 'translate-x-0'"
-      class="relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+      class="relative inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
     >
       <span
         :class="this.value ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200'"

diff --git a/resources/js/pages/Aliases.vue b/resources/js/pages/Aliases.vue
@@ -211,7 +211,7 @@
               @keyup.esc="aliasIdToEdit = aliasDescriptionToEdit = ''"
               v-model="aliasDescriptionToEdit"
               type="text"
-              class="flex-grow text-sm appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
+              class="grow text-sm appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
               :class="aliasDescriptionToEdit.length > 200 ? 'border-red-500' : 'border-transparent'"
               placeholder="Add description"
               tabindex="0"

diff --git a/resources/js/pages/Domains.vue b/resources/js/pages/Domains.vue
@@ -75,7 +75,7 @@
               @keyup.esc="domainIdToEdit = domainDescriptionToEdit = ''"
               v-model="domainDescriptionToEdit"
               type="text"
-              class="flex-grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
+              class="grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
               :class="
                 domainDescriptionToEdit.length > 200 ? 'border-red-500' : 'border-transparent'
               "

diff --git a/resources/js/pages/Usernames.vue b/resources/js/pages/Usernames.vue
@@ -75,7 +75,7 @@
               @keyup.esc="usernameIdToEdit = usernameDescriptionToEdit = ''"
               v-model="usernameDescriptionToEdit"
               type="text"
-              class="flex-grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
+              class="grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
               :class="
                 usernameDescriptionToEdit.length > 200 ? 'border-red-500' : 'border-transparent'
               "

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -83,10 +83,10 @@
                                 Verification:
                             </label>
 
-                            <div class="flex flex-grow flex-wrap">
-                                <img src="{{captcha_src('mini')}}" class="flex-shrink-0 h-12 w-16 mr-2 mt-2">
+                            <div class="flex grow flex-wrap">
+                                <img src="{{captcha_src('mini')}}" class="shrink-0 h-12 w-16 mr-2 mt-2">
 
-                                <input id="captcha" type="text" class="flex-grow mt-2 appearance-none bg-grey-100 rounded p-3 text-grey-700 focus:ring{{ $errors->has('captcha') ? ' border-red-500' : '' }}" name="captcha" placeholder="Enter the text you see" required>
+                                <input id="captcha" type="text" class="grow mt-2 appearance-none bg-grey-100 rounded p-3 text-grey-700 focus:ring{{ $errors->has('captcha') ? ' border-red-500' : '' }}" name="captcha" placeholder="Enter the text you see" required>
                             </div>
 
                             @if ($errors->has('captcha'))

diff --git a/resources/views/nav/nav.blade.php b/resources/views/nav/nav.blade.php
@@ -1,7 +1,7 @@
 @auth
 <nav class="bg-indigo-900 py-4 shadow">
     <div class="container flex items-center justify-between flex-wrap">
-        <div class="flex items-center flex-shrink-0 text-white mr-6">
+        <div class="flex items-center shrink-0 text-white mr-6">
             <a href="{{ route('aliases.index') }}">
                 <img class="h-6" alt="AnonAddy Logo" src="/svg/icon-logo.svg">
             </a>
@@ -11,8 +11,8 @@
             <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
             </button>
         </div>
-        <div class="w-full flex-grow md:flex md:items-center md:w-auto" :class="mobileNavActive ? 'block' : 'hidden'">
-            <div class="text-base md:flex-grow">
+        <div class="w-full grow md:flex md:items-center md:w-auto" :class="mobileNavActive ? 'block' : 'hidden'">
+            <div class="text-base md:grow">
                 <a href="{{ route('aliases.index') }}" class="block mt-4 md:inline-block md:mt-0 hover:text-white mr-4 {{ Route::currentRouteNamed('aliases.index') ? 'text-white' : 'text-indigo-100' }}">
                     Aliases
                 </a>

diff --git a/resources/views/settings/show.blade.php b/resources/views/settings/show.blade.php
@@ -455,7 +455,7 @@
                             <p class="mt-6">TOTP 2 factor authentication requires the use of Google Authenticator or another compatible app such as Aegis or andOTP (both on F-droid) for Android. Alternatively, you can use the code below. Make sure that you write down your secret code in a safe place.</p>
 
                             <div>
-                                <img src="{{ $qrCode }}">
+                                {!! $qrCode !!}
                                 <p class="mb-2">Secret: {{ $authSecret }}</p>
                                 <form method="POST" action="{{ route('settings.2fa_regenerate') }}">
                                     @csrf

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,28 +1,22 @@
 module.exports = {
-  purge: {
-    content: [
-      'app/**/*.php',
-      'resources/**/*.html',
-      'resources/**/*.js',
-      'resources/**/*.php',
-      'resources/**/*.vue',
-    ],
-
-    // These options are passed through directly to PurgeCSS
-    options: {
-      safelist: [
-        /-active$/,
-        /-enter$/,
-        /-leave-to$/,
-        /show$/,
-        'bg-green-400',
-        'bg-red-400',
-        'bg-grey-400',
-      ],
+  content: [
+    'app/**/*.php',
+    'resources/**/*.html',
+    'resources/**/*.js',
+    'resources/**/*.php',
+    'resources/**/*.vue',
+  ],
+  safelist: [
+    {
+      pattern: /(-active|-enter|-leave-to|show)$/,
     },
-  },
+    'bg-green-400',
+    'bg-red-400',
+    'bg-grey-400',
+  ],
   theme: {
     colors: {
+      current: 'currentColor',
       white: '#FFF',
       black: '#000',
       transparent: 'transparent',