Compose form design changes

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

src/features/compose/components/compose-form.tsx

@@ -26,7 +26,7 @@ import WarningContainer from '../containers/warning-container';
 import { $createEmojiNode } from '../editor/nodes/emoji-node';
 import { countableText } from '../util/counter';
 
-import MarkdownButton from './markdown-button';
+import ContentTypeButton from './content-type-button';
 import PollButton from './poll-button';
 import PollForm from './polls/poll-form';
 import PrivacyDropdown from './privacy-dropdown';
@@ -197,10 +197,8 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       {features.media && <UploadButtonContainer composeId={id} />}
       <EmojiPickerDropdown onPickEmoji={handleEmojiPick} condensed={shouldCondense} />
       {features.polls && <PollButton composeId={id} />}
-      {features.privacyScopes && !group && !groupId && <PrivacyDropdown composeId={id} />}
       {features.scheduledStatuses && <ScheduleButton composeId={id} />}
       {features.spoilers && <SpoilerButton composeId={id} />}
-      {features.richText && <MarkdownButton composeId={id} />}
     </HStack>
   ), [features, id]);
 
@@ -240,6 +238,11 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     publishText = intl.formatMessage(messages.schedule);
   }
 
+  const selectButtons = [];
+
+  if (features.privacyScopes && !group && !groupId) selectButtons.push(<PrivacyDropdown composeId={id} />);
+  if (features.richText) selectButtons.push(<ContentTypeButton composeId={id} />);
+
   return (
     <Stack className='w-full' space={4} ref={formRef} onClick={handleClick} element='form' onSubmit={handleSubmit}>
       {scheduledStatusCount > 0 && !event && !group && (
@@ -269,6 +272,12 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
 
+      {!!selectButtons && (
+        <HStack space={2} wrap className='-mb-2'>
+          {selectButtons}
+        </HStack>
+      )}
+
       <div>
         <Suspense>
           <ComposeEditor

src/features/compose/components/markdown-button.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import { changeComposeContentType } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
-
-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 {
-  composeId: string;
-}
-
-const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const active = useCompose(composeId).content_type === 'text/markdown';
-
-  const onClick = () => dispatch(changeComposeContentType(composeId, active ? 'text/plain' : 'text/markdown'));
-
-  return (
-    <ComposeFormButton
-      icon={require('@tabler/icons/outline/markdown.svg')}
-      title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
-      active={active}
-      onClick={onClick}
-    />
-  );
-
-};
-
-export { MarkdownButton as default };

src/features/compose/components/privacy-dropdown.tsx

@@ -9,7 +9,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import { changeComposeVisibility } from 'soapbox/actions/compose';
 import { closeModal, openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
-import { IconButton } from 'soapbox/components/ui';
+import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useCompose } from 'soapbox/hooks';
 import { userTouching } from 'soapbox/is-mobile';
 
@@ -277,12 +277,12 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
           active: valueOption && options.indexOf(valueOption) === 0,
         })}
       >
-        <IconButton
-          className={clsx({
-            'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
-            'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
-          })}
-          src={valueOption?.icon}
+        <Button
+          theme='muted'
+          size='xs'
+          text={valueOption?.text}
+          icon={valueOption?.icon}
+          secondaryIcon={require('@tabler/icons/outline/chevron-down.svg')}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
           onMouseDown={handleMouseDown}