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>