refactor(css): add styles targeting SVG button/modal icons (#1464)

* refactor(css): add global classes for common icon types

* refactor(css): target child SVGs instead of creating new icon classes

* fix: fix ButtonWithDropdown style class spacing

src/components/Settings/CopyButton.tsx

@@ -32,7 +32,7 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
       }}
       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"
     >
-      <ClipboardCopyIcon className="w-5 h-5 text-white" />
+      <ClipboardCopyIcon />
     </button>
   );
 };

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -2,6 +2,7 @@ import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -263,18 +264,25 @@ const NotificationsWebhook: React.FC = () => {
                     }}
                     className="mr-2"
                   >
-                    <RefreshIcon className="w-5 h-5 mr-1" />
-                    {intl.formatMessage(messages.resetPayload)}
+                    <RefreshIcon />
+                    <span>{intl.formatMessage(messages.resetPayload)}</span>
                   </Button>
-                  <a
+                  <Link
                     href="https://docs.overseerr.dev/using-overseerr/notifications/webhooks#template-variables"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="inline-flex items-center justify-center font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md focus:outline-none hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 disabled:opacity-50 px-2.5 py-1.5 text-xs"
+                    passHref
                   >
-                    <QuestionMarkCircleIcon className="w-5 h-5 mr-1" />
-                    {intl.formatMessage(messages.templatevariablehelp)}
-                  </a>
+                    <Button
+                      as="a"
+                      buttonSize="sm"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <QuestionMarkCircleIcon />
+                      <span>
+                        {intl.formatMessage(messages.templatevariablehelp)}
+                      </span>
+                    </Button>
+                  </Link>
                 </div>
               </div>
             </div>

src/components/Settings/RadarrModal/index.tsx

@@ -357,13 +357,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       values.is4k ? messages.edit4kradarr : messages.editradarr
                     )
               }
-              iconSvg={
-                !radarr ? (
-                  <PlusIcon className="w-6 h-6" />
-                ) : (
-                  <PencilIcon className="w-6 h-6" />
-                )
-              }
+              iconSvg={!radarr ? <PlusIcon /> : <PencilIcon />}
             >
               <div className="mb-6">
                 <div className="form-row">

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -71,7 +71,7 @@ const Release: React.FC<ReleaseProps> = ({
       >
         <Modal
           onCancel={() => setModalOpen(false)}
-          iconSvg={<DocumentTextIcon className="w-6 h-6" />}
+          iconSvg={<DocumentTextIcon />}
           title={intl.formatMessage(messages.versionChangelog)}
           cancelText={intl.formatMessage(globalMessages.close)}
           okText={intl.formatMessage(messages.viewongithub)}
@@ -112,8 +112,8 @@ const Release: React.FC<ReleaseProps> = ({
       </div>
       <div className="flex-1 text-center sm:text-right">
         <Button buttonType="primary" onClick={() => setModalOpen(true)}>
-          <DocumentTextIcon className="w-5 h-5 mr-1" />
-          {intl.formatMessage(messages.viewchangelog)}
+          <DocumentTextIcon />
+          <span>{intl.formatMessage(messages.viewchangelog)}</span>
         </Button>
       </div>
     </div>

src/components/Settings/SettingsJobsCache/index.tsx

@@ -181,13 +181,13 @@ const SettingsJobs: React.FC = () => {
                 <Table.TD alignText="right">
                   {job.running ? (
                     <Button buttonType="danger" onClick={() => cancelJob(job)}>
-                      <StopIcon className="w-5 h-5 mr-1" />
-                      {intl.formatMessage(messages.canceljob)}
+                      <StopIcon />
+                      <span>{intl.formatMessage(messages.canceljob)}</span>
                     </Button>
                   ) : (
                     <Button buttonType="primary" onClick={() => runJob(job)}>
                       <PlayIcon className="w-5 h-5 mr-1" />
-                      {intl.formatMessage(messages.runnow)}
+                      <span>{intl.formatMessage(messages.runnow)}</span>
                     </Button>
                   )}
                 </Table.TD>
@@ -226,8 +226,8 @@ const SettingsJobs: React.FC = () => {
                 <Table.TD>{formatBytes(cache.stats.vsize)}</Table.TD>
                 <Table.TD alignText="right">
                   <Button buttonType="danger" onClick={() => flushCache(cache)}>
-                    <TrashIcon className="w-5 h-5 mr-1" />
-                    {intl.formatMessage(messages.flushcache)}
+                    <TrashIcon />
+                    <span>{intl.formatMessage(messages.flushcache)}</span>
                   </Button>
                 </Table.TD>
               </tr>

src/components/Settings/SettingsLogs/index.tsx

@@ -142,7 +142,7 @@ const SettingsLogs: React.FC = () => {
       >
         <Modal
           title={intl.formatMessage(messages.logDetails)}
-          iconSvg={<DocumentSearchIcon className="w-6 h-6" />}
+          iconSvg={<DocumentSearchIcon />}
           onCancel={() => setActiveLog(null)}
           cancelText={intl.formatMessage(globalMessages.close)}
           onOk={() => (activeLog ? copyLogString(activeLog) : undefined)}
@@ -243,13 +243,7 @@ const SettingsLogs: React.FC = () => {
               buttonType={refreshInterval ? 'default' : 'primary'}
               onClick={() => toggleLogs()}
             >
-              <span>
-                {refreshInterval ? (
-                  <PauseIcon className="w-5 h-5 mr-1" />
-                ) : (
-                  <PlayIcon className="w-5 h-5 mr-1" />
-                )}
-              </span>
+              {refreshInterval ? <PauseIcon /> : <PlayIcon />}
               <span>
                 {intl.formatMessage(
                   refreshInterval ? messages.pauseLogs : messages.resumeLogs
@@ -335,7 +329,7 @@ const SettingsLogs: React.FC = () => {
                         onClick={() => setActiveLog(row)}
                         className="mr-2"
                       >
-                        <DocumentSearchIcon className="w-5 h-5 text-white" />
+                        <DocumentSearchIcon />
                       </Button>
                     )}
                     <Button
@@ -343,7 +337,7 @@ const SettingsLogs: React.FC = () => {
                       buttonSize="sm"
                       onClick={() => copyLogString(row)}
                     >
-                      <ClipboardCopyIcon className="w-5 h-5 text-white" />
+                      <ClipboardCopyIcon />
                     </Button>
                   </Table.TD>
                 </tr>

src/components/Settings/SettingsMain.tsx

@@ -205,7 +205,7 @@ const SettingsMain: React.FC = () => {
                           }}
                           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"
                         >
-                          <RefreshIcon className="w-5 h-5" />
+                          <RefreshIcon />
                         </button>
                       </div>
                     </div>

src/components/Settings/SettingsPlex.tsx

@@ -435,9 +435,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       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"
                     >
                       <RefreshIcon
-                        className={`w-5 h-5 ${
-                          isRefreshingPresets ? 'animate-spin' : ''
-                        }`}
+                        className={isRefreshingPresets ? 'animate-spin' : ''}
                         style={{ animationDirection: 'reverse' }}
                       />
                     </button>
@@ -530,7 +528,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
       <div className="section">
         <Button onClick={() => syncLibraries()} disabled={isSyncing}>
           <RefreshIcon
-            className={`w-5 h-5 mr-1 ${isSyncing ? 'animate-spin' : ''}`}
+            className={isSyncing ? 'animate-spin' : ''}
             style={{ animationDirection: 'reverse' }}
           />
           {isSyncing
@@ -606,14 +604,14 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
             <div className="flex-1 text-right">
               {!dataSync?.running && (
                 <Button buttonType="warning" onClick={() => startScan()}>
-                  <SearchIcon className="w-5 h-5 mr-1" />
+                  <SearchIcon />
                   {intl.formatMessage(messages.startscan)}
                 </Button>
               )}
 
               {dataSync?.running && (
                 <Button buttonType="danger" onClick={() => cancelScan()}>
-                  <XIcon className="w-5 h-5 mr-1" />
+                  <XIcon />
                   {intl.formatMessage(messages.cancelscan)}
                 </Button>
               )}

src/components/Settings/SettingsServices.tsx

@@ -139,8 +139,8 @@ 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 className="w-5 h-5 mr-2" />
-              {intl.formatMessage(globalMessages.edit)}
+              <PencilIcon />
+              <span>{intl.formatMessage(globalMessages.edit)}</span>
             </button>
           </div>
           <div className="flex flex-1 w-0 -ml-px">
@@ -148,8 +148,8 @@ 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 className="w-5 h-5 mr-2" />
-              {intl.formatMessage(globalMessages.delete)}
+              <TrashIcon />
+              <span>{intl.formatMessage(globalMessages.delete)}</span>
             </button>
           </div>
         </div>
@@ -265,7 +265,7 @@ const SettingsServices: React.FC = () => {
             })
           }
           title="Delete Server"
-          iconSvg={<TrashIcon className="w-6 h-6" />}
+          iconSvg={<TrashIcon />}
         >
           {intl.formatMessage(messages.deleteserverconfirm)}
         </Modal>
@@ -341,8 +341,8 @@ const SettingsServices: React.FC = () => {
                       setEditRadarrModal({ open: true, radarr: null })
                     }
                   >
-                    <PlusIcon className="w-5 h-5 mr-1" />
-                    {intl.formatMessage(messages.addradarr)}
+                    <PlusIcon />
+                    <span>{intl.formatMessage(messages.addradarr)}</span>
                   </Button>
                 </div>
               </li>
@@ -431,8 +431,8 @@ const SettingsServices: React.FC = () => {
                       setEditSonarrModal({ open: true, sonarr: null })
                     }
                   >
-                    <PlusIcon className="w-5 h-5 mr-1" />
-                    {intl.formatMessage(messages.addsonarr)}
+                    <PlusIcon />
+                    <span>{intl.formatMessage(messages.addsonarr)}</span>
                   </Button>
                 </div>
               </li>

src/components/Settings/SonarrModal/index.tsx

@@ -388,13 +388,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       values.is4k ? messages.edit4ksonarr : messages.editsonarr
                     )
               }
-              iconSvg={
-                !sonarr ? (
-                  <PlusIcon className="w-6 h-6" />
-                ) : (
-                  <PencilIcon className="w-6 h-6" />
-                )
-              }
+              iconSvg={!sonarr ? <PlusIcon /> : <PencilIcon />}
             >
               <div className="mb-6">
                 <div className="form-row">