From edffe9a837641654fe5b141349b6cff26f5d4a34 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 7 Jun 2022 13:55:34 -0500
Subject: [PATCH] SensitiveButton: use UI components

---
 .../components/ui/form-group/form-group.tsx    |  6 +++++-
 .../compose/components/sensitive-button.tsx    | 18 ++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index 75517fc79..ec0da73e4 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -8,6 +8,8 @@ import Stack from '../stack/stack';
 interface IFormGroup {
   /** Input label message. */
   labelText?: React.ReactNode,
+  /** Input label tooltip message. */
+  labelTitle?: string,
   /** Input hint message. */
   hintText?: React.ReactNode,
   /** Input errors. */
@@ -16,7 +18,7 @@ interface IFormGroup {
 
 /** Input container with label. Renders the child. */
 const FormGroup: React.FC<IFormGroup> = (props) => {
-  const { children, errors = [], labelText, hintText } = props;
+  const { children, errors = [], labelText, labelTitle, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
   const inputChildren = React.Children.toArray(children);
   const hasError = errors?.length > 0;
@@ -41,6 +43,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
               htmlFor={formFieldId}
               data-testid='form-group-label'
               className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
+              title={labelTitle}
             >
               {labelText}
             </label>
@@ -74,6 +77,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           htmlFor={formFieldId}
           data-testid='form-group-label'
           className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+          title={labelTitle}
         >
           {labelText}
         </label>
diff --git a/app/soapbox/features/compose/components/sensitive-button.tsx b/app/soapbox/features/compose/components/sensitive-button.tsx
index 74a5176af..e1c7b48ba 100644
--- a/app/soapbox/features/compose/components/sensitive-button.tsx
+++ b/app/soapbox/features/compose/components/sensitive-button.tsx
@@ -1,8 +1,8 @@
-import classNames from 'classnames';
 import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { changeComposeSensitivity } from 'soapbox/actions/compose';
+import { FormGroup, Checkbox } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -23,20 +23,18 @@ const SensitiveButton: React.FC = () => {
   };
 
   return (
-    <div className='compose-form__sensitive-button'>
-      <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
-        <input
+    <div className='px-2.5 py-1'>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />}
+        labelTitle={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      >
+        <Checkbox
           name='mark-sensitive'
-          type='checkbox'
           checked={active}
           onChange={onClick}
           disabled={disabled}
         />
-
-        <span className={classNames('checkbox', { active })} />
-
-        <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
-      </label>
+      </FormGroup>
     </div>
   );
 };