From 19c83de975dd11130f1f40743fe51fdbf4389daa Mon Sep 17 00:00:00 2001
From: Thomas Willems <twillems@willtho.com>
Date: Sun, 28 Jan 2024 11:14:17 +0100
Subject: [PATCH] add .is-disabled

---
 src/tailwind.config.js | 2 +-
 src/www/css/app.css    | 7 +------
 src/www/index.html     | 4 ++--
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/tailwind.config.js b/src/tailwind.config.js
index 2546eaa0..33ba6746 100644
--- a/src/tailwind.config.js
+++ b/src/tailwind.config.js
@@ -19,7 +19,7 @@ module.exports = {
   plugins: [
     function addDisabledClass({ addUtilities }) {
       const newUtilities = {
-        '.inactive': {
+        '.is-disabled': {
           opacity: '0.25',
           cursor: 'default',
         },
diff --git a/src/www/css/app.css b/src/www/css/app.css
index c63cd014..00837d4c 100644
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@@ -1371,11 +1371,6 @@ video {
   transition-duration: 150ms;
 }
 
-.disabled-link {
-  opacity: 0.25;
-  cursor: default;
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1392,7 +1387,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.inactive {
+.is-disabled {
   opacity: 0.25;
   cursor: default;
 }
diff --git a/src/www/index.html b/src/www/index.html
index 8931c725..826cf526 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -258,7 +258,7 @@
                       class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
                       :class="{
                         'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
-                        'opacity-25': !client.downloadableConfig
+                        'is-disabled': !client.downloadableConfig
                       }"
                       :title="!client.downloadableConfig ? $t('noPrivKey') : $t('showQR')"
                       @click="qrcode = `./api/wireguard/client/${client.id}/qrcode.svg`">
@@ -276,7 +276,7 @@
                       class="align-middle inline-block bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 p-2 rounded transition"
                       :class="{
                         'hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white': client.downloadableConfig,
-                        'disabled-link': !client.downloadableConfig
+                        'is-disabled': !client.downloadableConfig
                       }"
                       :title="!client.downloadableConfig ? $t('noPrivKey') : $t('downloadConfig')"
                       @click="if(!client.downloadableConfig) { $event.preventDefault(); }">