From b767a58b011cc317a889cb8c2889b3210bec5fae Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 15 Mar 2021 22:29:42 -0400
Subject: [PATCH] fix(ui): use appropriate cursor type for disabled UI elements
 (#1184)

---
 src/components/Slider/index.tsx |  8 ++------
 src/styles/globals.css          | 17 +++++++++++------
 tailwind.config.js              |  1 +
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 411cc11f..d764d991 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -163,9 +163,7 @@ const Slider: React.FC<SliderProps> = ({
       <div className="absolute right-0 flex -mt-10 text-gray-400">
         <button
           className={`${
-            scrollPos.isStart
-              ? 'cursor-not-allowed text-gray-800'
-              : 'hover:text-white'
+            scrollPos.isStart ? 'text-gray-800' : 'hover:text-white'
           }`}
           onClick={() => slide(Direction.LEFT)}
           disabled={scrollPos.isStart}
@@ -187,9 +185,7 @@ const Slider: React.FC<SliderProps> = ({
         </button>
         <button
           className={`${
-            scrollPos.isEnd
-              ? 'cursor-not-allowed text-gray-800'
-              : 'hover:text-white'
+            scrollPos.isEnd ? 'text-gray-800' : 'hover:text-white'
           }`}
           onClick={() => slide(Direction.RIGHT)}
           disabled={scrollPos.isEnd}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index a8439f3e..aaa10343 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -178,10 +178,6 @@ img.avatar-sm {
   @apply flex max-w-lg rounded-md shadow-sm;
 }
 
-textarea {
-  @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5;
-}
-
 .label-required {
   @apply text-red-500;
 }
@@ -206,14 +202,22 @@ label.text-label {
   @apply sm:mt-2;
 }
 
+button,
+input,
+select,
+textarea {
+  @apply disabled:cursor-not-allowed;
+}
+
 input[type='checkbox'] {
   @apply w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md;
 }
 
 input[type='text'],
 input[type='password'],
-select {
-  @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5;
+select,
+textarea {
+  @apply flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md sm:text-sm sm:leading-5;
 }
 
 input.rounded-l-only,
@@ -234,6 +238,7 @@ select.short {
 .protocol {
   @apply inline-flex items-center px-3 text-gray-100 bg-gray-600 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm;
 }
+
 .error {
   @apply mt-2 text-sm text-red-500;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 770c82aa..6f5299f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -59,6 +59,7 @@ module.exports = {
     },
   },
   variants: {
+    cursor: ['disabled'],
     padding: ['first', 'last', 'responsive'],
     borderWidth: ['first', 'last'],
     margin: ['first', 'last', 'responsive'],