Convert (legacy?) IconButton to tsx, remove unused code/styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/icon-button.tsx

@@ -0,0 +1,100 @@
+import classNames from 'clsx';
+import React from 'react';
+
+import Icon from 'soapbox/components/icon';
+
+interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
+  active?: boolean
+  expanded?: boolean
+  iconClassName?: string
+  pressed?: boolean
+  size?: number
+  src: string
+  text: React.ReactNode
+}
+
+const IconButton: React.FC<IIconButton> = ({
+  active,
+  className,
+  disabled,
+  expanded,
+  iconClassName,
+  onClick,
+  onKeyDown,
+  onKeyUp,
+  onKeyPress,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  pressed,
+  size = 18,
+  src,
+  tabIndex = 0,
+  text,
+  title,
+}) => {
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) =>  {
+    e.preventDefault();
+
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onMouseDown) {
+      onMouseDown(e);
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
+  const handleKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onKeyUp) {
+      onKeyUp(e);
+    }
+  };
+
+  const handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (onKeyPress && !disabled) {
+      onKeyPress(e);
+    }
+  };
+
+  const classes = classNames(className, 'icon-button', {
+    active,
+    disabled,
+  });
+
+  return (
+    <button
+      aria-label={title}
+      aria-pressed={pressed}
+      aria-expanded={expanded}
+      title={title}
+      className={classes}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      onKeyPress={handleKeyPress}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      tabIndex={tabIndex}
+      disabled={disabled}
+      type='button'
+    >
+      <div>
+        <Icon className={iconClassName} src={src} fixedWidth aria-hidden='true' />
+      </div>
+      {text && <span className='icon-button__text'>{text}</span>}
+    </button>
+  );
+};
+
+export default IconButton;

app/soapbox/features/compose/components/text-icon-button.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-interface ITextIconButton {
-  label: string,
-  title: string,
-  active: boolean,
-  onClick: () => void,
-  ariaControls: string,
-  unavailable: boolean,
-}
-
-const TextIconButton: React.FC<ITextIconButton> = ({
-  label,
-  title,
-  active,
-  ariaControls,
-  unavailable,
-  onClick,
-}) => {
-  const handleClick: React.MouseEventHandler = (e) => {
-    e.preventDefault();
-    onClick();
-  };
-
-  if (unavailable) {
-    return null;
-  }
-
-  return (
-    <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={handleClick} aria-controls={ariaControls}>
-      {label}
-    </button>
-  );
-};
-
-export default TextIconButton;

app/styles/ui.scss

@@ -44,87 +44,6 @@
   &:active {
     outline: 0 !important;
   }
-
-  &.inverted {
-    color: var(--primary-text-color--faint);
-    opacity: 1;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: var(--primary-text-color);
-    }
-
-    &.disabled {
-      color: var(--primary-text-color--faint);
-    }
-
-    &.active {
-      color: var(--highlight-text-color);
-
-      &.disabled {
-        color: var(--highlight-text-color);
-      }
-    }
-  }
-
-  &.overlayed {
-    box-sizing: content-box;
-    background: var(--foreground-color);
-    color: var(--primary-text-color--faint);
-    border-radius: 6px;
-    padding: 2px;
-    opacity: 1;
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &:hover {
-      background: var(--background-color);
-    }
-  }
-}
-
-.text-icon-button {
-  color: var(--primary-text-color--faint);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 11px;
-  padding: 0 3px;
-  line-height: 27px;
-  outline: 0;
-  transition: color 100ms ease-in;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--primary-text-color);
-    transition: color 200ms ease-out;
-  }
-
-  &.disabled {
-    color: var(--primary-text-color--faint);
-    cursor: default;
-  }
-
-  &.active {
-    color: var(--highlight-text-color);
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
 }
 
 .invisible {