IconButton: add themes

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -12,12 +12,14 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Text to display next ot the button. */
   text?: string,
   /** Don't render a background behind the icon. */
-  transparent?: boolean
+  transparent?: boolean,
+  /** Predefined styles to display for the button. */
+  theme?: 'seamless' | 'outlined',
 }
 
 /** A clickable icon. */
 const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
-  const { src, className, iconClassName, text, transparent = false, ...filteredProps } = props;
+  const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
 
   return (
     <button
@@ -25,6 +27,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       type='button'
       className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
         'bg-white dark:bg-transparent': !transparent,
+        'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
         'opacity-50': filteredProps.disabled,
       }, className)}
       {...filteredProps}

app/soapbox/features/account/components/header.tsx

@@ -696,7 +696,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
   //         src={require('@tabler/icons/mail.svg')}
   //         onClick={onDirect}
   //         title={intl.formatMessage(messages.direct, { name: account.username })}
-  //         className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+  //         theme='outlined'
+  //         className='px-2'
   //         iconClassName='w-4 h-4'
   //       />
   //     );
@@ -715,7 +716,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
         src={require('@tabler/icons/upload.svg')}
         onClick={handleShare}
         title={intl.formatMessage(messages.share, { name: account.username })}
-        className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+        theme='outlined'
+        className='px-2'
         iconClassName='w-4 h-4'
       />
     );
@@ -770,7 +772,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
                   <MenuButton
                     as={IconButton}
                     src={require('@tabler/icons/dots.svg')}
-                    className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+                    theme='outlined'
+                    className='px-2'
                     iconClassName='w-4 h-4'
                     children={null}
                   />

app/soapbox/features/ui/components/subscription-button.tsx

@@ -93,7 +93,8 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
         src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
         onClick={handleToggle}
         title={title}
-        className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
+        theme='outlined'
+        className='px-2'
         iconClassName='w-4 h-4'
       />
     );