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
2021-04-26 06:09:58 -04:00
parent 079645c2c7
commit 3e5e9c0ad1
43 changed files with 265 additions and 273 deletions
--- a/src/components/CollectionDetails/index.tsx
+++ b/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>
--- a/src/components/Common/Button/index.tsx
+++ b/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 ?? '');
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/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}
--- a/src/components/Common/Modal/index.tsx
+++ b/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'
--- a/src/components/Common/PlayButton/index.tsx
+++ b/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>
          );
        })}
--- a/src/components/Discover/MovieGenreSlider/index.tsx
+++ b/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>
--- a/src/components/Discover/TvGenreSlider/index.tsx
+++ b/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>
--- a/src/components/Discover/index.tsx
+++ b/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>
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/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>
--- a/src/components/Login/LocalLogin.tsx
+++ b/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" />
+                        <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" />
+                      <LoginIcon />
+                      <span>
                        {isSubmitting
                          ? intl.formatMessage(messages.signingin)
                          : intl.formatMessage(messages.signin)}
+                      </span>
                    </Button>
                  </span>
                </div>
--- a/src/components/MediaSlider/index.tsx
+++ b/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>
        ) : (
--- a/src/components/MovieDetails/index.tsx
+++ b/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>
--- a/src/components/PlexLoginButton/index.tsx
+++ b/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" />
+        <LoginIcon />
+        <span>
          {loading
            ? intl.formatMessage(globalMessages.loading)
            : isProcessing
            ? intl.formatMessage(messages.signingin)
            : intl.formatMessage(messages.signinwithplex)}
+        </span>
      </button>
    </span>
  );
--- a/src/components/RegionSelector/index.tsx
+++ b/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>
--- a/src/components/RequestBlock/index.tsx
+++ b/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"
+                  buttonSize="sm"
+                  className="mr-1"
                  onClick={() => updateRequest('approve')}
                  disabled={isUpdating}
                >
-                    <CheckIcon className="w-4 h-4" />
+                  <CheckIcon />
                </Button>
-                </span>
-                <span className="mr-1">
                <Button
                  buttonType="danger"
+                  buttonSize="sm"
+                  className="mr-1"
                  onClick={() => updateRequest('decline')}
                  disabled={isUpdating}
                >
-                    <XIcon className="w-4 h-4" />
+                  <XIcon />
                </Button>
-                </span>
-                <span>
                <Button
                  buttonType="primary"
+                  buttonSize="sm"
                  onClick={() => setShowEditModal(true)}
                  disabled={isUpdating}
                >
-                    <PencilIcon className="w-4 h-4" />
+                  <PencilIcon />
                </Button>
-                </span>
              </>
            )}
            {request.status !== MediaRequestStatus.PENDING && (
              <Button
                buttonType="danger"
+                buttonSize="sm"
                onClick={() => deleteRequest()}
                disabled={isUpdating}
              >
-                <TrashIcon className="w-4 h-4" />
+                <TrashIcon />
              </Button>
            )}
          </div>
--- a/src/components/RequestButton/index.tsx
+++ b/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}
--- a/src/components/RequestCard/index.tsx
+++ b/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"
+                className="mt-4"
                onClick={() => deleteRequest()}
              >
-                  <TrashIcon className="w-5 h-5 mr-1" />
+                <TrashIcon />
                <span>{intl.formatMessage(messages.deleterequest)}</span>
              </Button>
-              </div>
            )}
          </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">
+            <div className="flex items-end flex-1 space-x-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">
+                <CheckIcon style={{ marginRight: '0' }} />
+                <span className="hidden ml-1.5 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">
+                <XIcon style={{ marginRight: '0' }} />
+                <span className="hidden ml-1.5 sm:block">
                  {intl.formatMessage(globalMessages.decline)}
                </span>
              </Button>
-              </span>
            </div>
          )}
      </div>
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/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>
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/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>
--- a/src/components/RequestModal/MovieRequestModal.tsx
+++ b/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">
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/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)}
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/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
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/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" />
+                              <AtSymbolIcon />
+                              <span>
                                {intl.formatMessage(messages.emailresetlink)}
+                              </span>
                            </Button>
                          </span>
                        </div>
--- a/src/components/Settings/CopyButton.tsx
+++ b/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>
  );
 };
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/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"
+                    passHref
+                  >
+                    <Button
+                      as="a"
+                      buttonSize="sm"
                      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"
                    >
-                    <QuestionMarkCircleIcon className="w-5 h-5 mr-1" />
+                      <QuestionMarkCircleIcon />
+                      <span>
                        {intl.formatMessage(messages.templatevariablehelp)}
-                  </a>
+                      </span>
+                    </Button>
+                  </Link>
                </div>
              </div>
            </div>
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/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">
--- a/src/components/Settings/SettingsAbout/Releases/index.tsx
+++ b/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>
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/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>
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/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>
--- a/src/components/Settings/SettingsMain.tsx
+++ b/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>
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/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>
              )}
--- a/src/components/Settings/SettingsServices.tsx
+++ b/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>
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/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">
--- a/src/components/StatusChacker/index.tsx
+++ b/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)}
--- a/src/components/TitleCard/index.tsx
+++ b/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>
--- a/src/components/Toast/index.tsx
+++ b/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>
--- a/src/components/TvDetails/index.tsx
+++ b/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>
--- a/src/components/UserList/BulkEditModal.tsx
+++ b/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();
      }}
--- a/src/components/UserList/index.tsx
+++ b/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>
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/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>
          )
--- a/src/components/UserProfile/index.tsx
+++ b/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>
--- a/src/styles/globals.css
+++ b/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;
 }
--- a/tailwind.config.js
+++ b/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'],