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/CollectionDetails/index.tsx

@@ -247,7 +247,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
           title={intl.formatMessage(
             is4k ? messages.requestcollection4k : messages.requestcollection
           )}
-          iconSvg={<DuplicateIcon className="w-6 h-6" />}
+          iconSvg={<DuplicateIcon />}
         >
           <p>
             {intl.formatMessage(
@@ -339,7 +339,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                 }}
                 text={
                   <>
-                    <DownloadIcon className="w-5 h-5 mr-1" />
+                    <DownloadIcon />
                     <span>
                       {intl.formatMessage(
                         hasRequestable
@@ -364,7 +364,7 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
                         setIs4k(true);
                       }}
                     >
-                      <DownloadIcon className="w-5 h-5 mr-1" />
+                      <DownloadIcon />
                       <span>
                         {intl.formatMessage(messages.requestcollection4k)}
                       </span>

src/components/Common/Button/index.tsx

@@ -81,16 +81,14 @@ function Button<P extends ElementTypes = 'button'>(
 
   switch (buttonSize) {
     case 'sm':
-      buttonStyle.push('px-2.5 py-1.5 text-xs');
-      break;
-    case 'md':
-      buttonStyle.push('px-4 py-2 text-sm');
+      buttonStyle.push('px-2.5 py-1.5 text-xs button-sm');
       break;
     case 'lg':
-      buttonStyle.push('px-6 py-3 text-base');
+      buttonStyle.push('px-6 py-3 text-base button-lg');
       break;
+    case 'md':
     default:
-      buttonStyle.push('px-4 py-2 text-sm');
+      buttonStyle.push('px-4 py-2 text-sm button-md');
   }
 
   buttonStyle.push(className ?? '');

src/components/Common/ButtonWithDropdown/index.tsx

@@ -19,16 +19,16 @@ const DropdownItem: React.FC<DropdownItemProps> = ({
   buttonType = 'primary',
   ...props
 }) => {
-  let styleClass = '';
+  let styleClass = 'button-md text-white';
 
   switch (buttonType) {
     case 'ghost':
-      styleClass =
-        'text-white bg-gray-700 hover:bg-gray-600 hover:text-white focus:border-gray-500 focus:text-white';
+      styleClass +=
+        ' bg-gray-700 hover:bg-gray-600 focus:border-gray-500 focus:text-white';
       break;
     default:
-      styleClass =
-        'text-white bg-indigo-600 hover:bg-indigo-500 hover:text-white focus:border-indigo-700 focus:text-white';
+      styleClass +=
+        ' bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:text-white';
   }
   return (
     <a
@@ -60,9 +60,9 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
   useClickOutside(buttonRef, () => setIsOpen(false));
 
   const styleClasses = {
-    mainButtonClasses: 'text-white border',
-    dropdownSideButtonClasses: 'border',
-    dropdownClasses: '',
+    mainButtonClasses: 'button-md text-white border',
+    dropdownSideButtonClasses: 'button-md border',
+    dropdownClasses: 'button-md',
   };
 
   switch (buttonType) {
@@ -70,14 +70,14 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
       styleClasses.mainButtonClasses +=
         ' bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
       styleClasses.dropdownSideButtonClasses = styleClasses.mainButtonClasses;
-      styleClasses.dropdownClasses = 'bg-gray-700';
+      styleClasses.dropdownClasses += ' bg-gray-700';
       break;
     default:
       styleClasses.mainButtonClasses +=
         ' bg-indigo-600 border-indigo-600 hover:bg-indigo-500 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
       styleClasses.dropdownSideButtonClasses +=
         ' bg-indigo-700 border-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 focus:ring-blue';
-      styleClasses.dropdownClasses = 'bg-indigo-600';
+      styleClasses.dropdownClasses += ' bg-indigo-600';
   }
 
   return (
@@ -100,11 +100,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
-            {dropdownIcon ? (
-              dropdownIcon
-            ) : (
-              <ChevronDownIcon className="w-5 h-5" />
-            )}
+            {dropdownIcon ? dropdownIcon : <ChevronDownIcon />}
           </button>
           <Transition
             show={isOpen}

src/components/Common/Modal/index.tsx

@@ -108,11 +108,7 @@ const Modal: React.FC<ModalProps> = ({
           }}
         >
           <div className="sm:flex sm:items-center">
-            {iconSvg && (
-              <div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-600 rounded-full sm:mx-0 sm:h-10 sm:w-10">
-                {iconSvg}
-              </div>
-            )}
+            {iconSvg && <div className="modal-icon">{iconSvg}</div>}
             <div
               className={`mt-3 text-center sm:mt-0 sm:text-left ${
                 iconSvg ? 'sm:ml-4' : 'sm:mb-4'

src/components/Common/PlayButton/index.tsx

@@ -22,7 +22,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
       text={
         <>
           {links[0].svg}
-          {links[0].text}
+          <span>{links[0].text}</span>
         </>
       }
       onClick={() => {
@@ -40,7 +40,7 @@ const PlayButton: React.FC<PlayButtonProps> = ({ links }) => {
               buttonType="ghost"
             >
               {link.svg}
-              {link.text}
+              <span>{link.text}</span>
             </ButtonWithDropdown.Item>
           );
         })}

src/components/Discover/MovieGenreSlider/index.tsx

@@ -28,7 +28,7 @@ const MovieGenreSlider: React.FC = () => {
         <Link href="/discover/movies/genres">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.moviegenres)}</span>
-            <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+            <ArrowCircleRightIcon />
           </a>
         </Link>
       </div>

src/components/Discover/TvGenreSlider/index.tsx

@@ -28,7 +28,7 @@ const TvGenreSlider: React.FC = () => {
         <Link href="/discover/tv/genres">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.tvgenres)}</span>
-            <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+            <ArrowCircleRightIcon />
           </a>
         </Link>
       </div>

src/components/Discover/index.tsx

@@ -67,7 +67,7 @@ const Discover: React.FC = () => {
         <Link href="/requests?filter=all">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.recentrequests)}</span>
-            <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+            <ArrowCircleRightIcon />
           </a>
         </Link>
       </div>

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 className="w-5 h-5" />
+              <XCircleIcon />
             </button>
           )}
         </div>

src/components/Login/LocalLogin.tsx

@@ -104,8 +104,10 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                   <span className="inline-flex rounded-md shadow-sm">
                     <Link href="/resetpassword" passHref>
                       <Button as="a" buttonType="ghost">
-                        <SupportIcon className="w-5 h-5 mr-1" />
-                        {intl.formatMessage(messages.forgotpassword)}
+                        <SupportIcon />
+                        <span>
+                          {intl.formatMessage(messages.forgotpassword)}
+                        </span>
                       </Button>
                     </Link>
                   </span>
@@ -115,10 +117,12 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      <LoginIcon className="w-5 h-5 mr-1" />
-                      {isSubmitting
-                        ? intl.formatMessage(messages.signingin)
-                        : intl.formatMessage(messages.signin)}
+                      <LoginIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(messages.signingin)
+                          : intl.formatMessage(messages.signin)}
+                      </span>
                     </Button>
                   </span>
                 </div>

src/components/MediaSlider/index.tsx

@@ -139,7 +139,7 @@ const MediaSlider: React.FC<MediaSliderProps> = ({
           <Link href={linkUrl}>
             <a className="slider-title">
               <span>{title}</span>
-              <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+              <ArrowCircleRightIcon />
             </a>
           </Link>
         ) : (

src/components/MovieDetails/index.tsx

@@ -116,7 +116,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
-      svg: <PlayIcon className="w-5 h-5 mr-1" />,
+      svg: <PlayIcon />,
     });
   }
 
@@ -129,7 +129,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
-      svg: <PlayIcon className="w-5 h-5 mr-1" />,
+      svg: <PlayIcon />,
     });
   }
 
@@ -142,7 +142,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
-      svg: <FilmIcon className="w-5 h-5 mr-1" />,
+      svg: <FilmIcon />,
     });
   }
 
@@ -280,7 +280,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                       className="w-full sm:mb-0"
                       buttonType="success"
                     >
-                      <CheckCircleIcon className="w-5 h-5 mr-1" />
+                      <CheckCircleIcon />
                       <span>{intl.formatMessage(messages.markavailable)}</span>
                     </Button>
                   </div>
@@ -294,7 +294,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                       className="w-full sm:mb-0"
                       buttonType="success"
                     >
-                      <CheckCircleIcon className="w-5 h-5 mr-1" />
+                      <CheckCircleIcon />
                       <span>
                         {intl.formatMessage(messages.mark4kavailable)}
                       </span>
@@ -333,7 +333,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 className="block mb-2 last:mb-0"
               >
                 <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon className="w-5 h-5 mr-1" />
+                  <ExternalLinkIcon />
                   <span>{intl.formatMessage(messages.openradarr)}</span>
                 </Button>
               </a>
@@ -345,7 +345,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 rel="noreferrer"
               >
                 <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon className="w-5 h-5 mr-1" />
+                  <ExternalLinkIcon />
                   <span>{intl.formatMessage(messages.openradarr4k)}</span>
                 </Button>
               </a>
@@ -359,10 +359,10 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               confirmText={intl.formatMessage(globalMessages.areyousure)}
               className="w-full"
             >
-              <DocumentRemoveIcon className="w-5 h-5 mr-1" />
-              {intl.formatMessage(messages.manageModalClearMedia)}
+              <DocumentRemoveIcon />
+              <span>{intl.formatMessage(messages.manageModalClearMedia)}</span>
             </ConfirmButton>
-            <div className="mt-2 text-sm text-gray-400">
+            <div className="mt-3 text-xs text-gray-400">
               {intl.formatMessage(messages.manageModalClearMediaWarning)}
             </div>
           </div>
@@ -470,7 +470,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 <Link href={`/movie/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1" />
+                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1.5" />
                   </a>
                 </Link>
               </div>
@@ -653,7 +653,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             <Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
               <a className="slider-title">
                 <span>{intl.formatMessage(messages.cast)}</span>
-                <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+                <ArrowCircleRightIcon />
               </a>
             </Link>
           </div>

src/components/PlexLoginButton/index.tsx

@@ -49,12 +49,14 @@ const PlexLoginButton: React.FC<PlexLoginButtonProps> = ({
         disabled={loading || isProcessing}
         className="plex-button"
       >
-        <LoginIcon className="w-5 h-5 mr-1" />
-        {loading
-          ? intl.formatMessage(globalMessages.loading)
-          : isProcessing
-          ? intl.formatMessage(messages.signingin)
-          : intl.formatMessage(messages.signinwithplex)}
+        <LoginIcon />
+        <span>
+          {loading
+            ? intl.formatMessage(globalMessages.loading)
+            : isProcessing
+            ? intl.formatMessage(messages.signingin)
+            : intl.formatMessage(messages.signinwithplex)}
+        </span>
       </button>
     </span>
   );

src/components/RegionSelector/index.tsx

@@ -125,8 +125,8 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                         })
                       : intl.formatMessage(messages.regionDefault)}
                   </span>
-                  <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                    <ChevronDownIcon className="w-5 h-5 text-gray-500" />
+                  <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
+                    <ChevronDownIcon />
                   </span>
                 </Listbox.Button>
               </span>

src/components/RequestBlock/index.tsx

@@ -95,42 +95,42 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
           <div className="flex flex-wrap flex-shrink-0 ml-2">
             {request.status === MediaRequestStatus.PENDING && (
               <>
-                <span className="mr-1">
-                  <Button
-                    buttonType="success"
-                    onClick={() => updateRequest('approve')}
-                    disabled={isUpdating}
-                  >
-                    <CheckIcon className="w-4 h-4" />
-                  </Button>
-                </span>
-                <span className="mr-1">
-                  <Button
-                    buttonType="danger"
-                    onClick={() => updateRequest('decline')}
-                    disabled={isUpdating}
-                  >
-                    <XIcon className="w-4 h-4" />
-                  </Button>
-                </span>
-                <span>
-                  <Button
-                    buttonType="primary"
-                    onClick={() => setShowEditModal(true)}
-                    disabled={isUpdating}
-                  >
-                    <PencilIcon className="w-4 h-4" />
-                  </Button>
-                </span>
+                <Button
+                  buttonType="success"
+                  buttonSize="sm"
+                  className="mr-1"
+                  onClick={() => updateRequest('approve')}
+                  disabled={isUpdating}
+                >
+                  <CheckIcon />
+                </Button>
+                <Button
+                  buttonType="danger"
+                  buttonSize="sm"
+                  className="mr-1"
+                  onClick={() => updateRequest('decline')}
+                  disabled={isUpdating}
+                >
+                  <XIcon />
+                </Button>
+                <Button
+                  buttonType="primary"
+                  buttonSize="sm"
+                  onClick={() => setShowEditModal(true)}
+                  disabled={isUpdating}
+                >
+                  <PencilIcon />
+                </Button>
               </>
             )}
             {request.status !== MediaRequestStatus.PENDING && (
               <Button
                 buttonType="danger"
+                buttonSize="sm"
                 onClick={() => deleteRequest()}
                 disabled={isUpdating}
               >
-                <TrashIcon className="w-4 h-4" />
+                <TrashIcon />
               </Button>
             )}
           </div>

src/components/RequestButton/index.tsx

@@ -132,7 +132,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(false);
         setShowRequestModal(true);
       },
-      svg: <DownloadIcon className="w-5 h-5 mr-1" />,
+      svg: <DownloadIcon />,
     });
   }
 
@@ -151,7 +151,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(false);
         setShowRequest4kModal(true);
       },
-      svg: <DownloadIcon className="w-5 h-5 mr-1" />,
+      svg: <DownloadIcon />,
     });
   }
 
@@ -168,7 +168,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(true);
         setShowRequestModal(true);
       },
-      svg: <InformationCircleIcon className="w-5 h-5 mr-1" />,
+      svg: <InformationCircleIcon />,
     });
   }
 
@@ -185,7 +185,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(true);
         setShowRequest4kModal(true);
       },
-      svg: <InformationCircleIcon className="w-5 h-5 mr-1" />,
+      svg: <InformationCircleIcon />,
     });
   }
 
@@ -201,7 +201,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequest(activeRequest, 'approve');
         },
-        svg: <CheckIcon className="w-5 h-5 mr-1" />,
+        svg: <CheckIcon />,
       },
       {
         id: 'decline-request',
@@ -209,7 +209,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequest(activeRequest, 'decline');
         },
-        svg: <XIcon className="w-5 h-5 mr-1" />,
+        svg: <XIcon />,
       }
     );
   }
@@ -229,7 +229,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequests(activeRequests, 'approve');
         },
-        svg: <CheckIcon className="w-5 h-5 mr-1" />,
+        svg: <CheckIcon />,
       },
       {
         id: 'decline-request-batch',
@@ -239,7 +239,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequests(activeRequests, 'decline');
         },
-        svg: <XIcon className="w-5 h-5 mr-1" />,
+        svg: <XIcon />,
       }
     );
   }
@@ -256,7 +256,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequest(active4kRequest, 'approve');
         },
-        svg: <CheckIcon className="w-5 h-5 mr-1" />,
+        svg: <CheckIcon />,
       },
       {
         id: 'decline-4k-request',
@@ -264,7 +264,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequest(active4kRequest, 'decline');
         },
-        svg: <XIcon className="w-5 h-5 mr-1" />,
+        svg: <XIcon />,
       }
     );
   }
@@ -284,7 +284,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequests(active4kRequests, 'approve');
         },
-        svg: <CheckIcon className="w-5 h-5 mr-1" />,
+        svg: <CheckIcon />,
       },
       {
         id: 'decline-4k-request-batch',
@@ -294,7 +294,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         action: () => {
           modifyRequests(active4kRequests, 'decline');
         },
-        svg: <XIcon className="w-5 h-5 mr-1" />,
+        svg: <XIcon />,
       }
     );
   }
@@ -315,7 +315,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(false);
         setShowRequestModal(true);
       },
-      svg: <DownloadIcon className="w-5 h-5 mr-1" />,
+      svg: <DownloadIcon />,
     });
   }
 
@@ -338,7 +338,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
         setEditRequest(false);
         setShowRequest4kModal(true);
       },
-      svg: <DownloadIcon className="w-5 h-5 mr-1" />,
+      svg: <DownloadIcon />,
     });
   }
 
@@ -376,8 +376,8 @@ const RequestButton: React.FC<RequestButtonProps> = ({
       <ButtonWithDropdown
         text={
           <>
-            {buttonOne.svg ?? null}
-            {buttonOne.text}
+            {buttonOne.svg}
+            <span>{buttonOne.text}</span>
           </>
         }
         onClick={buttonOne.action}
@@ -390,7 +390,7 @@ const RequestButton: React.FC<RequestButtonProps> = ({
                 key={`request-option-${button.id}`}
               >
                 {button.svg}
-                {button.text}
+                <span>{button.text}</span>
               </ButtonWithDropdown.Item>
             ))
           : null}

src/components/RequestCard/index.tsx

@@ -62,16 +62,15 @@ const RequestCardError: React.FC<RequestCardErrorProps> = ({ mediaId }) => {
               {intl.formatMessage(messages.mediaerror)}
             </div>
             {hasPermission(Permission.MANAGE_REQUESTS) && mediaId && (
-              <div className="mt-4">
-                <Button
-                  buttonType="danger"
-                  buttonSize="sm"
-                  onClick={() => deleteRequest()}
-                >
-                  <TrashIcon className="w-5 h-5 mr-1" />
-                  <span>{intl.formatMessage(messages.deleterequest)}</span>
-                </Button>
-              </div>
+              <Button
+                buttonType="danger"
+                buttonSize="sm"
+                className="mt-4"
+                onClick={() => deleteRequest()}
+              >
+                <TrashIcon />
+                <span>{intl.formatMessage(messages.deleterequest)}</span>
+              </Button>
             )}
           </div>
         </div>
@@ -240,31 +239,27 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
         </div>
         {requestData.status === MediaRequestStatus.PENDING &&
           hasPermission(Permission.MANAGE_REQUESTS) && (
-            <div className="flex items-end flex-1">
-              <span className="mr-2">
-                <Button
-                  buttonType="success"
-                  buttonSize="sm"
-                  onClick={() => modifyRequest('approve')}
-                >
-                  <CheckIcon className="w-4 h-4 mr-0 sm:mr-1" />
-                  <span className="hidden sm:block">
-                    {intl.formatMessage(globalMessages.approve)}
-                  </span>
-                </Button>
-              </span>
-              <span>
-                <Button
-                  buttonType="danger"
-                  buttonSize="sm"
-                  onClick={() => modifyRequest('decline')}
-                >
-                  <XIcon className="w-4 h-4 mr-0 sm:mr-1" />
-                  <span className="hidden sm:block">
-                    {intl.formatMessage(globalMessages.decline)}
-                  </span>
-                </Button>
-              </span>
+            <div className="flex items-end flex-1 space-x-2">
+              <Button
+                buttonType="success"
+                buttonSize="sm"
+                onClick={() => modifyRequest('approve')}
+              >
+                <CheckIcon style={{ marginRight: '0' }} />
+                <span className="hidden ml-1.5 sm:block">
+                  {intl.formatMessage(globalMessages.approve)}
+                </span>
+              </Button>
+              <Button
+                buttonType="danger"
+                buttonSize="sm"
+                onClick={() => modifyRequest('decline')}
+              >
+                <XIcon style={{ marginRight: '0' }} />
+                <span className="hidden ml-1.5 sm:block">
+                  {intl.formatMessage(globalMessages.decline)}
+                </span>
+              </Button>
             </div>
           )}
       </div>

src/components/RequestList/RequestItem/index.tsx

@@ -73,7 +73,7 @@ const RequestItemError: React.FC<RequestItemErroProps> = ({
             buttonSize="sm"
             onClick={() => deleteRequest()}
           >
-            <TrashIcon className="w-5 h-5 mr-1" />
+            <TrashIcon />
             <span>{intl.formatMessage(messages.deleterequest)}</span>
           </Button>
         </div>
@@ -373,10 +373,10 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 onClick={() => retryRequest()}
               >
                 <RefreshIcon
-                  className={`w-5 h-5 mr-1 ${isRetrying ? 'animate-spin' : ''}`}
+                  className={isRetrying ? 'animate-spin' : ''}
                   style={{ animationDirection: 'reverse' }}
                 />
-                <span className="block">
+                <span>
                   {intl.formatMessage(
                     isRetrying ? globalMessages.retrying : globalMessages.retry
                   )}
@@ -390,10 +390,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 confirmText={intl.formatMessage(globalMessages.areyousure)}
                 className="w-full"
               >
-                <TrashIcon className="w-5 h-5 mr-1" />
-                <span className="block">
-                  {intl.formatMessage(messages.deleterequest)}
-                </span>
+                <TrashIcon />
+                <span>{intl.formatMessage(messages.deleterequest)}</span>
               </ConfirmButton>
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
@@ -405,10 +403,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     buttonType="success"
                     onClick={() => modifyRequest('approve')}
                   >
-                    <CheckIcon className="w-5 h-5 mr-1" />
-                    <span className="block">
-                      {intl.formatMessage(globalMessages.approve)}
-                    </span>
+                    <CheckIcon />
+                    <span>{intl.formatMessage(globalMessages.approve)}</span>
                   </Button>
                 </span>
                 <span className="w-full">
@@ -417,10 +413,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     buttonType="danger"
                     onClick={() => modifyRequest('decline')}
                   >
-                    <XIcon className="w-5 h-5 mr-1" />
-                    <span className="block">
-                      {intl.formatMessage(globalMessages.decline)}
-                    </span>
+                    <XIcon />
+                    <span>{intl.formatMessage(globalMessages.decline)}</span>
                   </Button>
                 </span>
               </div>
@@ -436,10 +430,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   buttonType="primary"
                   onClick={() => setShowEditModal(true)}
                 >
-                  <PencilIcon className="w-5 h-5 mr-1" />
-                  <span className="block">
-                    {intl.formatMessage(messages.editrequest)}
-                  </span>
+                  <PencilIcon />
+                  <span>{intl.formatMessage(messages.editrequest)}</span>
                 </Button>
               </span>
             )}
@@ -451,10 +443,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 confirmText={intl.formatMessage(globalMessages.areyousure)}
                 className="w-full"
               >
-                <XIcon className="w-5 h-5 mr-1" />
-                <span className="block">
-                  {intl.formatMessage(messages.cancelRequest)}
-                </span>
+                <XIcon />
+                <span>{intl.formatMessage(messages.cancelRequest)}</span>
               </ConfirmButton>
             )}
         </div>

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -1,10 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Listbox, Transition } from '@headlessui/react';
-import {
-  AdjustmentsIcon,
-  CheckIcon,
-  ChevronDownIcon,
-} from '@heroicons/react/solid';
+import { AdjustmentsIcon } from '@heroicons/react/outline';
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
 import { isEqual } from 'lodash';
 import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
@@ -274,7 +271,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
   return (
     <>
       <div className="flex items-center mb-2 font-bold tracking-wider">
-        <AdjustmentsIcon className="w-5 h-5 mr-1" />
+        <AdjustmentsIcon className="w-5 h-5 mr-1.5" />
         {intl.formatMessage(messages.advancedoptions)}
       </div>
       <div className="p-4 bg-gray-600 rounded-md shadow">
@@ -522,8 +519,8 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                               ({selectedUser.email})
                             </span>
                           </span>
-                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                            <ChevronDownIcon className="w-5 h-5 text-gray-500" />
+                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
+                            <ChevronDownIcon />
                           </span>
                         </Listbox.Button>
                       </span>

src/components/RequestModal/MovieRequestModal.tsx

@@ -236,7 +236,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         }
         secondaryButtonType="danger"
         cancelText={intl.formatMessage(globalMessages.close)}
-        iconSvg={<DownloadIcon className="w-6 h-6" />}
+        iconSvg={<DownloadIcon />}
       >
         {isOwner
           ? intl.formatMessage(messages.pendingapproval)
@@ -294,7 +294,7 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
             )
       }
       okButtonType={'primary'}
-      iconSvg={<DownloadIcon className="w-6 h-6" />}
+      iconSvg={<DownloadIcon />}
     >
       {hasAutoApprove && !quota?.movie.restricted && (
         <div className="mt-6">

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -52,7 +52,7 @@ const SearchByNameModal: React.FC<SearchByNameModalProps> = ({
       okText={intl.formatMessage(globalMessages.next)}
       okDisabled={!tvdbId}
       okButtonType="primary"
-      iconSvg={<DownloadIcon className="w-6 h-6" />}
+      iconSvg={<DownloadIcon />}
     >
       <Alert
         title={intl.formatMessage(messages.notvdbiddescription)}

src/components/RequestModal/TvRequestModal.tsx

@@ -419,7 +419,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           ? intl.formatMessage(globalMessages.back)
           : intl.formatMessage(globalMessages.cancel)
       }
-      iconSvg={<DownloadIcon className="w-6 h-6" />}
+      iconSvg={<DownloadIcon />}
     >
       {editRequest
         ? isOwner

src/components/ResetPassword/RequestResetLink.tsx

@@ -124,8 +124,10 @@ const ResetPassword: React.FC = () => {
                               type="submit"
                               disabled={isSubmitting || !isValid}
                             >
-                              <AtSymbolIcon className="w-5 h-5 mr-1" />
-                              {intl.formatMessage(messages.emailresetlink)}
+                              <AtSymbolIcon />
+                              <span>
+                                {intl.formatMessage(messages.emailresetlink)}
+                              </span>
                             </Button>
                           </span>
                         </div>

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">

src/components/StatusChacker/index.tsx

@@ -39,7 +39,7 @@ const StatusChecker: React.FC = () => {
       show={data.commitTag !== process.env.commitTag}
     >
       <Modal
-        iconSvg={<SparklesIcon className="w-6 h-6" />}
+        iconSvg={<SparklesIcon />}
         title={intl.formatMessage(messages.newversionavailable)}
         onOk={() => location.reload()}
         okText={intl.formatMessage(messages.reloadOverseerr)}

src/components/TitleCard/index.tsx

@@ -10,6 +10,7 @@ import { useIsTouch } from '../../hooks/useIsTouch';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import { withProperties } from '../../utils/typeHelpers';
+import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
 import RequestModal from '../RequestModal';
 import Transition from '../Transition';
@@ -229,18 +230,18 @@ const TitleCard: React.FC<TitleCardProps> = ({
               <div className="absolute bottom-0 left-0 right-0 flex justify-between px-2 py-2">
                 {hasPermission(Permission.REQUEST) &&
                   (!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
-                    <button
+                    <Button
+                      buttonType="primary"
+                      buttonSize="sm"
                       onClick={(e) => {
                         e.preventDefault();
                         setShowRequestModal(true);
                       }}
-                      className="flex items-center justify-center w-full text-white transition duration-150 ease-in-out bg-indigo-600 rounded-md h-7 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700"
+                      className="w-full h-7"
                     >
-                      <DownloadIcon className="w-4 h-4 mr-1" />
-                      <span className="text-xs">
-                        {intl.formatMessage(globalMessages.request)}
-                      </span>
-                    </button>
+                      <DownloadIcon />
+                      <span>{intl.formatMessage(globalMessages.request)}</span>
+                    </Button>
                   )}
               </div>
             </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 className="w-5 h-5" />
+                    <XIcon />
                   </button>
                 </div>
               </div>

src/components/TvDetails/index.tsx

@@ -124,7 +124,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.playonplex),
       url: data.mediaInfo?.plexUrl,
-      svg: <PlayIcon className="w-5 h-5 mr-1" />,
+      svg: <PlayIcon />,
     });
   }
 
@@ -137,7 +137,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.play4konplex),
       url: data.mediaInfo?.plexUrl4k,
-      svg: <PlayIcon className="w-5 h-5 mr-1" />,
+      svg: <PlayIcon />,
     });
   }
 
@@ -150,7 +150,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     mediaLinks.push({
       text: intl.formatMessage(messages.watchtrailer),
       url: trailerUrl,
-      svg: <FilmIcon className="w-5 h-5 mr-1" />,
+      svg: <FilmIcon />,
     });
   }
 
@@ -316,7 +316,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                       className="w-full sm:mb-0"
                       buttonType="success"
                     >
-                      <CheckCircleIcon className="w-5 h-5 mr-1" />
+                      <CheckCircleIcon />
                       <span>{intl.formatMessage(messages.markavailable)}</span>
                     </Button>
                   </div>
@@ -330,14 +330,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                       className="w-full sm:mb-0"
                       buttonType="success"
                     >
-                      <CheckCircleIcon className="w-5 h-5 mr-1" />
+                      <CheckCircleIcon />
                       <span>
                         {intl.formatMessage(messages.mark4kavailable)}
                       </span>
                     </Button>
                   </div>
                 )}
-              <div className="mt-3 text-xs text-gray-300">
+              <div className="mt-3 text-xs text-gray-400">
                 {intl.formatMessage(messages.allseasonsmarkedavailable)}
               </div>
             </div>
@@ -372,7 +372,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 className="block mb-2 last:mb-0"
               >
                 <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon className="w-5 h-5 mr-1" />
+                  <ExternalLinkIcon />
                   <span>{intl.formatMessage(messages.opensonarr)}</span>
                 </Button>
               </a>
@@ -384,7 +384,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 rel="noreferrer"
               >
                 <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon className="w-5 h-5 mr-1" />
+                  <ExternalLinkIcon />
                   <span>{intl.formatMessage(messages.opensonarr4k)}</span>
                 </Button>
               </a>
@@ -398,10 +398,10 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
               confirmText={intl.formatMessage(globalMessages.areyousure)}
               className="w-full"
             >
-              <DocumentRemoveIcon className="w-5 h-5 mr-1" />
-              {intl.formatMessage(messages.manageModalClearMedia)}
+              <DocumentRemoveIcon />
+              <span>{intl.formatMessage(messages.manageModalClearMedia)}</span>
             </ConfirmButton>
-            <div className="mt-2 text-sm text-gray-400">
+            <div className="mt-3 text-xs text-gray-400">
               {intl.formatMessage(messages.manageModalClearMediaWarning)}
             </div>
           </div>
@@ -522,7 +522,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 <Link href={`/tv/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1" />
+                    <ArrowCircleRightIcon className="inline-block w-5 h-5 ml-1.5" />
                   </a>
                 </Link>
               </div>
@@ -679,7 +679,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
               <a className="slider-title">
                 <span>{intl.formatMessage(messages.cast)}</span>
-                <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+                <ArrowCircleRightIcon />
               </a>
             </Link>
           </div>

src/components/UserList/BulkEditModal.tsx

@@ -85,7 +85,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
   return (
     <Modal
       title={intl.formatMessage(messages.edituser)}
-      iconSvg={<PencilIcon className="w-6 h-6" />}
+      iconSvg={<PencilIcon />}
       onOk={() => {
         updateUsers();
       }}

src/components/UserList/index.tsx

@@ -273,7 +273,7 @@ const UserList: React.FC = () => {
           okButtonType="danger"
           onCancel={() => setDeleteModal({ isOpen: false })}
           title={intl.formatMessage(messages.deleteuser)}
-          iconSvg={<TrashIcon className="w-6 h-6" />}
+          iconSvg={<TrashIcon />}
         >
           {intl.formatMessage(messages.deleteconfirm)}
         </Modal>
@@ -335,7 +335,7 @@ const UserList: React.FC = () => {
             return (
               <Modal
                 title={intl.formatMessage(messages.createuser)}
-                iconSvg={<UserAddIcon className="w-6 h-6" />}
+                iconSvg={<UserAddIcon />}
                 onOk={() => handleSubmit()}
                 okText={
                   isSubmitting
@@ -451,8 +451,8 @@ const UserList: React.FC = () => {
               buttonType="primary"
               onClick={() => setCreateModal({ isOpen: true })}
             >
-              <UserAddIcon className="w-5 h-5 mr-1" />
-              {intl.formatMessage(messages.createlocaluser)}
+              <UserAddIcon />
+              <span>{intl.formatMessage(messages.createlocaluser)}</span>
             </Button>
             <Button
               className="flex-grow outline lg:mr-2"
@@ -460,8 +460,8 @@ const UserList: React.FC = () => {
               disabled={isImporting}
               onClick={() => importFromPlex()}
             >
-              <InboxInIcon className="w-5 h-5 mr-1" />
-              {intl.formatMessage(messages.importfromplex)}
+              <InboxInIcon />
+              <span>{intl.formatMessage(messages.importfromplex)}</span>
             </Button>
           </div>
           <div className="flex flex-grow mb-2 lg:mb-0 lg:flex-grow-0">
@@ -523,8 +523,8 @@ const UserList: React.FC = () => {
                   onClick={() => setShowBulkEditModal(true)}
                   disabled={selectedUsers.length === 0}
                 >
-                  <PencilIcon className="w-5 h-5 mr-1" />
-                  {intl.formatMessage(messages.bulkedit)}
+                  <PencilIcon />
+                  <span>{intl.formatMessage(messages.bulkedit)}</span>
                 </Button>
               )}
             </Table.TH>

src/components/UserProfile/ProfileHeader/index.tsx

@@ -93,8 +93,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             passHref
           >
             <Button as="a">
-              <CogIcon className="w-5 h-5 mr-1" />
-              {intl.formatMessage(messages.settings)}
+              <CogIcon />
+              <span>{intl.formatMessage(messages.settings)}</span>
             </Button>
           </Link>
         ) : (
@@ -106,8 +106,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
               passHref
             >
               <Button as="a">
-                <UserIcon className="w-5 h-5 mr-1" />
-                {intl.formatMessage(messages.profile)}
+                <UserIcon />
+                <span>{intl.formatMessage(messages.profile)}</span>
               </Button>
             </Link>
           )

src/components/UserProfile/index.tsx

@@ -237,7 +237,7 @@ const UserProfile: React.FC = () => {
             <Link href={`/users/${user?.id}/requests?filter=all`}>
               <a className="slider-title">
                 <span>{intl.formatMessage(messages.recentrequests)}</span>
-                <ArrowCircleRightIcon className="w-6 h-6 ml-2" />
+                <ArrowCircleRightIcon />
               </a>
             </Link>
           </div>

src/styles/globals.css

@@ -74,6 +74,10 @@ a.slider-title {
   @apply hover:text-white;
 }
 
+a.slider-title svg {
+  @apply w-6 h-6 ml-2;
+}
+
 .media-page {
   @apply relative px-4 -mx-4 bg-center bg-cover;
   margin-top: calc(-4rem - env(safe-area-inset-top));
@@ -281,6 +285,23 @@ select.short {
   @apply w-min;
 }
 
+button svg,
+.button-md svg {
+  @apply w-5 h-5 mr-2 last:mr-0;
+}
+
+.button-sm svg {
+  @apply w-4 h-4 mr-1.5 last:w-5 last:h-5 last:mr-0;
+}
+
+.modal-icon {
+  @apply flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto text-white bg-gray-600 rounded-full sm:mx-0 sm:h-10 sm:w-10;
+}
+
+.modal-icon svg {
+  @apply w-6 h-6;
+}
+
 .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;
 }

tailwind.config.js

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