From 4068931bbaba0d85560d42847d5d2c5f4c0fdb1b Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Sun, 24 Jan 2021 22:20:40 +0100
Subject: [PATCH] Add Tailwind button for save+cancel

- remove custom styles
- add new button styles based on Tailwind classes using @apply
- extend config to allow hover:ring-blue-200 and such
- update the js-files to use new classes

- Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
---
 UI/Popup/EditableTagRendering.ts |  2 +-
 UI/Popup/QuestionBox.ts          |  2 +-
 UI/Popup/SaveButton.ts           |  7 +++----
 css/ReviewElement.css            |  3 ---
 css/tagrendering.css             | 29 -----------------------------
 index.css                        | 21 +++++++++++++++++++++
 tailwind.config.js               |  4 +++-
 7 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts
index 6c85f82..90cc17d 100644
--- a/UI/Popup/EditableTagRendering.ts
+++ b/UI/Popup/EditableTagRendering.ts
@@ -74,7 +74,7 @@ export default class EditableTagRendering extends UIElement {
             // And at last, set up the skip button
             const cancelbutton =
                 Translations.t.general.cancel.Clone()
-                    .SetClass("cancel")
+                    .SetClass("btn btn-secondary mr-3")
                     .onClick(() => {
                         self._editMode.setData(false)
                     });
diff --git a/UI/Popup/QuestionBox.ts b/UI/Popup/QuestionBox.ts
index 362d8bf..7fa94c5 100644
--- a/UI/Popup/QuestionBox.ts
+++ b/UI/Popup/QuestionBox.ts
@@ -33,7 +33,7 @@ export default class QuestionBox extends UIElement {
                     self._skippedQuestions.ping();
                 },
                 Translations.t.general.skip.Clone()
-                    .SetClass("cancel")
+                    .SetClass("btn btn-secondary mr-3")
                     .onClick(() => {
                         self._skippedQuestions.data.push(i);
                         self._skippedQuestions.ping();
diff --git a/UI/Popup/SaveButton.ts b/UI/Popup/SaveButton.ts
index 3b741a4..2c277c7 100644
--- a/UI/Popup/SaveButton.ts
+++ b/UI/Popup/SaveButton.ts
@@ -22,15 +22,14 @@ export class SaveButton extends UIElement {
     }
 
     InnerRender(): string {
-        let clss = "save";
-
         if(this._userDetails != undefined &&  !this._userDetails.data.loggedIn){
             return this._friendlyLogin.Render();
         }
+        let inactive_class = ''
         if (this._value.data === false || (this._value.data ?? "") === "") {
-            clss = "save-non-active";
+            inactive_class = "btn-disabled";
         }
-        return Translations.t.general.save.Clone().SetClass(clss).Render();
+        return Translations.t.general.save.Clone().SetClass(`btn ${inactive_class}`).Render();
     }
 
 }
\ No newline at end of file
diff --git a/css/ReviewElement.css b/css/ReviewElement.css
index 3dfd2aa..4219c09 100644
--- a/css/ReviewElement.css
+++ b/css/ReviewElement.css
@@ -114,9 +114,6 @@
     display: block ruby;
 }
 
-.review-form .save-non-active {
-    display: block ruby;
-}
 .review-form textarea {
     resize: unset;
 }
diff --git a/css/tagrendering.css b/css/tagrendering.css
index 878579e..015eaa1 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -87,25 +87,6 @@ input:checked + label .question-option-with-border {
     border: 2px solid var(--subtle-detail-color-contrast);
 }
 
-
-.save {
-    display: inline-block;
-    border: solid var(--catch-detail-color-contrast) 2px;
-    background-color: var(--catch-detail-color);
-    color: var(--catch-detail-color-contrast);
-    padding: 0.2em 0.6em;
-    font-size: x-large;
-    font-weight: bold;
-    border-radius: 1.5em;
-}
-
-.cancel {
-    display: inline-block;
-    border: solid black 0.5px;
-    padding: 0.2em 0.3em;
-    border-radius: 1.5em;
-}
-
 .login-button-friendly {
     display: inline-block;
     background-color: var(--catch-detail-color);
@@ -119,16 +100,6 @@ input:checked + label .question-option-with-border {
     width: 100%;
 }
 
-.save-non-active {
-    display: inline-block;
-    border: solid lightgrey 2px;
-    color: grey;
-    padding: 0.2em 0.3em;
-    font-size: x-large;
-    font-weight: bold;
-    border-radius: 1.5em;
-}
-
 .edit-button img {
     width: 1.3em;
     height: 1.3em;
diff --git a/index.css b/index.css
index bae4121..2e917c2 100644
--- a/index.css
+++ b/index.css
@@ -11,6 +11,27 @@
       .max-h-20vh {
           max-height: 20vh;
       }
+  .btn {
+      @apply inline-flex justify-center;
+      @apply py-2 px-4;
+      @apply border border-transparent shadow-sm;
+      @apply shadow-sm rounded-3xl;
+      @apply ring-2 ring-blue-200 hover:ring-blue-300;
+      @apply mt-1 mr-1;
+      @apply text-sm font-medium text-white;
+      @apply bg-blue-600 hover:bg-blue-700;
+      @apply focus:outline-none focus:ring-blue-700;
+  }
+
+  .btn-secondary {
+      @apply bg-gray-600 hover:bg-gray-700;
+  }
+
+  .btn-disabled {
+      @apply bg-gray-500 hover:bg-gray-500;
+      @apply text-gray-300;
+      @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200;
+      @apply cursor-default;
   }
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d9eca07..d4c4df0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,9 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      ringColor: ['hover'],
+    }
   },
   plugins: [],
 }