From 890299ead0157fbdcef32270d950485a22c4b1e6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 21 Mar 2022 17:04:44 -0500
Subject: [PATCH 1/2] ComposeForm: convert buttons to ComposeFormButton
 component

---
 .../components/compose_form_button.tsx        | 34 +++++++++++++++++++
 .../compose/components/markdown_button.js     | 17 ++++------
 .../compose/components/poll_button.js         | 18 +++++-----
 .../compose/components/privacy_dropdown.js    |  4 +--
 .../compose/components/schedule_button.js     | 19 +++++------
 .../compose/components/spoiler_button.js      | 17 ++++------
 6 files changed, 66 insertions(+), 43 deletions(-)
 create mode 100644 app/soapbox/features/compose/components/compose_form_button.tsx

diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
new file mode 100644
index 000000000..3f80c4b6a
--- /dev/null
+++ b/app/soapbox/features/compose/components/compose_form_button.tsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { IconButton } from 'soapbox/components/ui';
+
+interface IComposeFormButton {
+  icon: string,
+  title?: string,
+  active?: boolean,
+  disabled?: boolean,
+  onClick: () => void,
+}
+
+const ComposeFormButton: React.FC<IComposeFormButton> = ({
+  icon,
+  title,
+  active,
+  disabled,
+  onClick,
+}) => {
+  return (
+    <div>
+      <IconButton
+        className={classNames('text-gray-400 hover:text-gray-600', { 'text-gray-600': active })}
+        src={icon}
+        title={title}
+        disabled={disabled}
+        onClick={onClick}
+      />
+    </div>
+  );
+};
+
+export default ComposeFormButton;
diff --git a/app/soapbox/features/compose/components/markdown_button.js b/app/soapbox/features/compose/components/markdown_button.js
index 202bc0cf7..0d4b294a7 100644
--- a/app/soapbox/features/compose/components/markdown_button.js
+++ b/app/soapbox/features/compose/components/markdown_button.js
@@ -1,9 +1,8 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from '../../../components/icon_button';
+import ComposeFormButton from './compose_form_button';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
@@ -27,14 +26,12 @@ class MarkdownButton extends React.PureComponent {
     const { intl, active } = this.props;
 
     return (
-      <div className='compose-form__markdown-button'>
-        <IconButton
-          className={classNames('compose-form__markdown-button-icon', { active })}
-          src={require('@tabler/icons/icons/markdown.svg')}
-          title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-          onClick={this.handleClick}
-        />
-      </div>
+      <ComposeFormButton
+        icon={require('@tabler/icons/icons/markdown.svg')}
+        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+        active={active}
+        onClick={this.handleClick}
+      />
     );
   }
 
diff --git a/app/soapbox/features/compose/components/poll_button.js b/app/soapbox/features/compose/components/poll_button.js
index a9d607d04..bc0f25a06 100644
--- a/app/soapbox/features/compose/components/poll_button.js
+++ b/app/soapbox/features/compose/components/poll_button.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from '../../../components/icon_button';
+import ComposeFormButton from './compose_form_button';
 
 const messages = defineMessages({
   add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
@@ -33,15 +33,13 @@ class PollButton extends React.PureComponent {
     }
 
     return (
-      <div className='compose-form__poll-button'>
-        <IconButton
-          className={`compose-form__poll-button-icon ${active ? 'active' : ''}`}
-          src={require('@tabler/icons/icons/chart-bar.svg')}
-          title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
-          disabled={disabled}
-          onClick={this.handleClick}
-        />
-      </div>
+      <ComposeFormButton
+        icon={require('@tabler/icons/icons/chart-bar.svg')}
+        title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
+        active={active}
+        disabled={disabled}
+        onClick={this.handleClick}
+      />
     );
   }
 
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index 3c7f011e1..415789ba5 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ b/app/soapbox/features/compose/components/privacy_dropdown.js
@@ -8,7 +8,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 
 import Icon from 'soapbox/components/icon';
 
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/ui';
 import Motion from '../../ui/util/optional_motion';
 
 const messages = defineMessages({
@@ -253,7 +253,7 @@ class PrivacyDropdown extends React.PureComponent {
       <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
         <div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}>
           <IconButton
-            className='privacy-dropdown__value-icon'
+            className='text-gray-400 hover:text-gray-600'
             src={valueOption.icon}
             title={intl.formatMessage(messages.change_privacy)}
             expanded={open}
diff --git a/app/soapbox/features/compose/components/schedule_button.js b/app/soapbox/features/compose/components/schedule_button.js
index 8522c1e3d..af2fb5598 100644
--- a/app/soapbox/features/compose/components/schedule_button.js
+++ b/app/soapbox/features/compose/components/schedule_button.js
@@ -1,9 +1,8 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from '../../../components/icon_button';
+import ComposeFormButton from './compose_form_button';
 
 const messages = defineMessages({
   add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
@@ -29,15 +28,13 @@ class ScheduleButton extends React.PureComponent {
     const { intl, active, disabled } = this.props;
 
     return (
-      <div className='compose-form__schedule-button'>
-        <IconButton
-          className={classNames('compose-form__schedule-button-icon', { active })}
-          src={require('@tabler/icons/icons/calendar-stats.svg')}
-          title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
-          disabled={disabled}
-          onClick={this.handleClick}
-        />
-      </div>
+      <ComposeFormButton
+        icon={require('@tabler/icons/icons/calendar-stats.svg')}
+        title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
+        active={active}
+        disabled={disabled}
+        onClick={this.handleClick}
+      />
     );
   }
 
diff --git a/app/soapbox/features/compose/components/spoiler_button.js b/app/soapbox/features/compose/components/spoiler_button.js
index 4a90a3336..13ec3083e 100644
--- a/app/soapbox/features/compose/components/spoiler_button.js
+++ b/app/soapbox/features/compose/components/spoiler_button.js
@@ -1,9 +1,8 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from '../../../components/icon_button';
+import ComposeFormButton from './compose_form_button';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
@@ -27,14 +26,12 @@ class SpoilerButton extends React.PureComponent {
     const { intl, active } = this.props;
 
     return (
-      <div className='compose-form__spoiler-button'>
-        <IconButton
-          className={classNames('compose-form__spoiler-button-icon', { active })}
-          src={require('@tabler/icons/icons/alert-triangle.svg')}
-          title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-          onClick={this.handleClick}
-        />
-      </div>
+      <ComposeFormButton
+        icon={require('@tabler/icons/icons/alert-triangle.svg')}
+        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+        active={active}
+        onClick={this.handleClick}
+      />
     );
   }
 

From 61fd48204bd71748824b82b2ebc2a2772d593d08 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 21 Mar 2022 17:28:57 -0500
Subject: [PATCH 2/2] ComposeForm: convert some buttons into TSX

---
 .../compose/components/markdown_button.js     | 38 ---------------
 .../compose/components/markdown_button.tsx    | 30 ++++++++++++
 .../compose/components/poll_button.js         | 46 -------------------
 .../compose/components/poll_button.tsx        | 36 +++++++++++++++
 .../compose/components/spoiler_button.js      | 38 ---------------
 .../compose/components/spoiler_button.tsx     | 29 ++++++++++++
 .../containers/markdown_button_container.js   |  5 +-
 7 files changed, 99 insertions(+), 123 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/markdown_button.js
 create mode 100644 app/soapbox/features/compose/components/markdown_button.tsx
 delete mode 100644 app/soapbox/features/compose/components/poll_button.js
 create mode 100644 app/soapbox/features/compose/components/poll_button.tsx
 delete mode 100644 app/soapbox/features/compose/components/spoiler_button.js
 create mode 100644 app/soapbox/features/compose/components/spoiler_button.tsx

diff --git a/app/soapbox/features/compose/components/markdown_button.js b/app/soapbox/features/compose/components/markdown_button.js
deleted file mode 100644
index 0d4b294a7..000000000
--- a/app/soapbox/features/compose/components/markdown_button.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
-  unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
-});
-
-export default @injectIntl
-class MarkdownButton extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active } = this.props;
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/markdown.svg')}
-        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-        active={active}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/markdown_button.tsx b/app/soapbox/features/compose/components/markdown_button.tsx
new file mode 100644
index 000000000..01b0620a0
--- /dev/null
+++ b/app/soapbox/features/compose/components/markdown_button.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
+  unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
+});
+
+interface IMarkdownButton {
+  active?: boolean,
+  onClick: () => void,
+}
+
+const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
+  const intl = useIntl();
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/markdown.svg')}
+      title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      active={active}
+      onClick={onClick}
+    />
+  );
+
+};
+
+export default MarkdownButton;
diff --git a/app/soapbox/features/compose/components/poll_button.js b/app/soapbox/features/compose/components/poll_button.js
deleted file mode 100644
index bc0f25a06..000000000
--- a/app/soapbox/features/compose/components/poll_button.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
-  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
-});
-
-export default
-@injectIntl
-class PollButton extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/chart-bar.svg')}
-        title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
-        active={active}
-        disabled={disabled}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/poll_button.tsx b/app/soapbox/features/compose/components/poll_button.tsx
new file mode 100644
index 000000000..c59ae3151
--- /dev/null
+++ b/app/soapbox/features/compose/components/poll_button.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
+  remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
+});
+
+interface IPollButton {
+  disabled?: boolean,
+  unavailable?: boolean,
+  active?: boolean,
+  onClick: () => void,
+}
+
+const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onClick }) => {
+  const intl = useIntl();
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/chart-bar.svg')}
+      title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
+      active={active}
+      disabled={disabled}
+      onClick={onClick}
+    />
+  );
+};
+
+export default PollButton;
diff --git a/app/soapbox/features/compose/components/spoiler_button.js b/app/soapbox/features/compose/components/spoiler_button.js
deleted file mode 100644
index 13ec3083e..000000000
--- a/app/soapbox/features/compose/components/spoiler_button.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
-  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
-});
-
-export default @injectIntl
-class SpoilerButton extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active } = this.props;
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/alert-triangle.svg')}
-        title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-        active={active}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/spoiler_button.tsx b/app/soapbox/features/compose/components/spoiler_button.tsx
new file mode 100644
index 000000000..6d9c1aa76
--- /dev/null
+++ b/app/soapbox/features/compose/components/spoiler_button.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
+  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
+});
+
+interface ISpoilerButton {
+  active?: boolean,
+  onClick: () => void,
+}
+
+const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
+  const intl = useIntl();
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/alert-triangle.svg')}
+      title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      active={active}
+      onClick={onClick}
+    />
+  );
+};
+
+export default SpoilerButton;
diff --git a/app/soapbox/features/compose/containers/markdown_button_container.js b/app/soapbox/features/compose/containers/markdown_button_container.js
index 4001f3c92..cab3fb4d4 100644
--- a/app/soapbox/features/compose/containers/markdown_button_container.js
+++ b/app/soapbox/features/compose/containers/markdown_button_container.js
@@ -12,7 +12,10 @@ const mapStateToProps = (state, { intl }) => {
 const mapDispatchToProps = dispatch => ({
 
   onClick() {
-    dispatch(changeComposeContentType(this.active ? 'text/plain' : 'text/markdown'));
+    dispatch((_, getState) => {
+      const active = getState().getIn(['compose', 'content_type']) === 'text/markdown';
+      dispatch(changeComposeContentType(active ? 'text/plain' : 'text/markdown'));
+    });
   },
 
 });