fix(ui): use appropriate cursor type for disabled UI elements (#1184)

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
+            scrollPos.isStart ? 'text-gray-800' : 'hover:text-white'
-              ? 'cursor-not-allowed 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
+            scrollPos.isEnd ? 'text-gray-800' : 'hover:text-white'
-              ? 'cursor-not-allowed text-gray-800'
-              : 'hover:text-white'
           }`}
           onClick={() => slide(Direction.RIGHT)}
           disabled={scrollPos.isEnd}

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

tailwind.config.js

@@ -59,6 +59,7 @@ module.exports = {
     },
   },
   variants: {
+    cursor: ['disabled'],
     padding: ['first', 'last', 'responsive'],
     borderWidth: ['first', 'last'],
     margin: ['first', 'last', 'responsive'],