From a5b92dc9e6110502c8db0d497756bf9c799415cc Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Mon, 7 Feb 2022 18:26:34 -0600
Subject: [PATCH] css: fix disabled buttons appearing clickable.

Fix buttons appearing to be clickable when in the disabled state.

Submit buttons are normally disabled after a form is submitted. Before
these buttons would still look clickable. Now disabled buttons are greyed
out instead of looking the same as normal buttons.
---
 app/javascript/src/styles/base/010_reset.scss |  4 ----
 app/javascript/src/styles/base/040_colors.css |  2 ++
 app/javascript/src/styles/common/buttons.scss | 21 +++++++++++++------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/javascript/src/styles/base/010_reset.scss b/app/javascript/src/styles/base/010_reset.scss
index a0b8ce241..794cc6ebf 100644
--- a/app/javascript/src/styles/base/010_reset.scss
+++ b/app/javascript/src/styles/base/010_reset.scss
@@ -34,7 +34,3 @@ ol, ul {
 a:focus {
   outline: thin dotted;
 }
-
-button, input[type="button"], input[type="submit"] {
-  cursor: pointer;
-}
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index a6672364d..2e9b74e04 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -129,6 +129,7 @@ html {
   --form-input-validation-error-text-color: var(--red-5);
 
   --form-button-text-color: var(--text-color);
+  --form-button-disabled-text-color: var(--grey-5);
   --form-button-background: var(--grey-1);
   --form-button-border-color: var(--grey-2);
   --form-button-hover-background: var(--grey-0);
@@ -337,6 +338,7 @@ body[data-current-user-theme="dark"] {
   --form-input-validation-error-text-color: var(--red-5);
 
   --form-button-text-color: var(--grey-9);
+  --form-button-disabled-text-color: var(--grey-5);
   --form-button-background: var(--grey-2);
   --form-button-border-color: var(--grey-4);
   --form-button-hover-background: var(--grey-0);
diff --git a/app/javascript/src/styles/common/buttons.scss b/app/javascript/src/styles/common/buttons.scss
index 82e643ad2..4850815ab 100644
--- a/app/javascript/src/styles/common/buttons.scss
+++ b/app/javascript/src/styles/common/buttons.scss
@@ -13,18 +13,27 @@ input[type="button"], input[type="submit"], button {
   border-radius: 3px;
   padding: 0.25em 1em;
 
-  background: var(--form-button-background);
+  cursor: pointer;
   border: 1px solid var(--form-button-border-color);
+  background: var(--form-button-background);
   color: var(--form-button-text-color);
 
-  &:hover {
-    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
+  &:disabled {
+    cursor: wait;
     background: var(--form-button-hover-background);
+    color: var(--form-button-disabled-text-color);
   }
 
-  &:active {
-    box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
-    background: var(--form-button-active-background);
+  &:not(:disabled) {
+    &:hover {
+      box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
+      background: var(--form-button-hover-background);
+    }
+
+    &:active {
+      box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color);
+      background: var(--form-button-active-background);
+    }
   }
 }