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

@@ -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)
                     });

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();

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();
     }
 
 }

css/ReviewElement.css

@@ -114,9 +114,6 @@
     display: block ruby;
 }
 
-.review-form .save-non-active {
-    display: block ruby;
-}
 .review-form textarea {
     resize: unset;
 }

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;

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;
   }
 }
 

tailwind.config.js

@@ -14,7 +14,9 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      ringColor: ['hover'],
+    }
   },
   plugins: [],
 }