fix(css): don't target button globally (#1510)

* fix(css): don't target button globally

* fix(css): revert toast change

src/components/Layout/SearchInput/index.tsx

@@ -41,7 +41,7 @@ const SearchInput: React.FC = () => {
               className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
               onClick={() => clear()}
             >
-              <XCircleIcon />
+              <XCircleIcon className="w-5 h-5" />
             </button>
           )}
         </div>

src/components/RequestBlock/index.tsx

@@ -97,7 +97,6 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               <>
                 <Button
                   buttonType="success"
-                  buttonSize="sm"
                   className="mr-1"
                   onClick={() => updateRequest('approve')}
                   disabled={isUpdating}
@@ -106,7 +105,6 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
                 </Button>
                 <Button
                   buttonType="danger"
-                  buttonSize="sm"
                   className="mr-1"
                   onClick={() => updateRequest('decline')}
                   disabled={isUpdating}
@@ -115,7 +113,6 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
                 </Button>
                 <Button
                   buttonType="primary"
-                  buttonSize="sm"
                   onClick={() => setShowEditModal(true)}
                   disabled={isUpdating}
                 >
@@ -126,7 +123,6 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             {request.status !== MediaRequestStatus.PENDING && (
               <Button
                 buttonType="danger"
-                buttonSize="sm"
                 onClick={() => deleteRequest()}
                 disabled={isUpdating}
               >

src/components/Settings/CopyButton.tsx

@@ -30,7 +30,7 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
         e.preventDefault();
         setCopied();
       }}
-      className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
+      className="input-action"
     >
       <ClipboardCopyIcon />
     </button>

src/components/Settings/SettingsMain.tsx

@@ -203,7 +203,7 @@ const SettingsMain: React.FC = () => {
                             e.preventDefault();
                             regenerate();
                           }}
-                          className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
+                          className="input-action"
                         >
                           <RefreshIcon />
                         </button>

src/components/Settings/SettingsPlex.tsx

@@ -431,7 +431,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                         e.preventDefault();
                         refreshPresetServers();
                       }}
-                      className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
+                      className="input-action"
                     >
                       <RefreshIcon
                         className={isRefreshingPresets ? 'animate-spin' : ''}

src/components/Settings/SettingsServices.tsx

@@ -139,7 +139,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
               onClick={() => onEdit()}
               className="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
             >
-              <PencilIcon />
+              <PencilIcon className="w-5 h-5 mr-2" />
               <span>{intl.formatMessage(globalMessages.edit)}</span>
             </button>
           </div>
@@ -148,7 +148,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
               onClick={() => onDelete()}
               className="relative inline-flex items-center justify-center flex-1 w-0 py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10"
             >
-              <TrashIcon />
+              <TrashIcon className="w-5 h-5 mr-2" />
               <span>{intl.formatMessage(globalMessages.delete)}</span>
             </button>
           </div>

src/components/Toast/index.tsx

@@ -50,7 +50,7 @@ const Toast: React.FC<ToastProps> = ({
                     onClick={() => onDismiss()}
                     className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500"
                   >
-                    <XIcon />
+                    <XIcon className="w-5 h-5" />
                   </button>
                 </div>
               </div>

src/styles/globals.css

@@ -278,18 +278,27 @@ select.rounded-r-only {
 }
 
 input.short {
-  width: 4.875rem;
+  @apply w-20;
 }
 
 select.short {
   @apply w-min;
 }
 
-button svg,
+button.input-action {
-.button-md svg {
+  @apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
+}
+
+.button-md svg,
+button.input-action svg,
+.plex-button svg {
   @apply w-5 h-5 mr-2 last:mr-0;
 }
 
+.button-md svg {
+  @apply last:w-4 last:h-4;
+}
+
 .button-sm svg {
   @apply w-4 h-4 mr-1.5 last:w-5 last:h-5 last:mr-0;
 }

tailwind.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
@@ -59,19 +59,6 @@ module.exports = {
       }),
     },
   },
-  variants: {
-    cursor: ['disabled'],
-    width: ['first', 'last', 'responsive'],
-    height: ['first', 'last', 'responsive'],
-    padding: ['first', 'last', 'responsive'],
-    borderWidth: ['first', 'last'],
-    margin: ['first', 'last', 'responsive'],
-    boxShadow: ['group-focus', 'responsive'],
-    opacity: ['disabled', 'hover', 'group-hover'],
-    ringColor: ['focus', 'focus-within', 'hover', 'active'],
-    scale: ['hover', 'focus', 'group-hover'],
-    zIndex: ['hover', 'responsive'],
-  },
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),