Composer redesign: Swap pepper to flag icon (#40456)

app/javascript/mastodon/components/icon.tsx

@@ -1,6 +1,8 @@
+import { useCallback } from 'react';
+
 import classNames from 'classnames';
 
-import type { IconWeight } from '@phosphor-icons/react';
+import type { IconWeight, Icon as PhosphorIcon } from '@phosphor-icons/react';
 
 import CheckBoxOutlineBlankIcon from '@/material-icons/400-24px/check_box_outline_blank.svg?react';
 import { isProduction } from 'mastodon/utils/environment';
@@ -61,3 +63,27 @@ export const Icon: React.FC<Props> = ({
     />
   );
 };
+
+type MaybeWeight = IconWeight | false | null;
+
+export const iconWeight = (
+  Icon: PhosphorIcon,
+  weight?: MaybeWeight,
+): React.FC<SVGPropsWithTitle> => {
+  const IconWeight = (props: SVGPropsWithTitle) => (
+    <Icon {...props} weight={weight || 'regular'} />
+  );
+  return IconWeight;
+};
+
+export function useIconWeight(
+  Icon: PhosphorIcon,
+  weight?: MaybeWeight,
+): React.FC<SVGPropsWithTitle> {
+  return useCallback(
+    (props: SVGPropsWithTitle) => (
+      <Icon {...props} weight={weight || 'regular'} />
+    ),
+    [Icon, weight],
+  );
+}

app/javascript/mastodon/components/status/action_bar.tsx

@@ -60,6 +60,7 @@ import {
   ToggleButton,
   ToggleIconButton,
 } from '../button/redesign';
+import { iconWeight, useIconWeight } from '../icon';
 import {
   Menu,
   MenuItem,
@@ -191,23 +192,10 @@ export const StatusActionBar: React.FC<StatusActionBarProps> = ({
 
   const intl = useIntl();
 
-  const favouriteIcon = useCallback(
-    (props: React.SVGProps<SVGSVGElement>) =>
-      status?.favourited ? (
-        <HeartIcon {...props} weight='fill' />
-      ) : (
-        <HeartIcon {...props} />
-      ),
-    [status?.favourited],
-  );
-  const bookmarkIcon = useCallback(
-    (props: React.SVGProps<SVGSVGElement>) =>
-      status?.bookmarked ? (
-        <BookmarkSimpleIcon {...props} weight='fill' />
-      ) : (
-        <BookmarkSimpleIcon {...props} />
-      ),
-    [status?.bookmarked],
+  const favouriteIcon = useIconWeight(HeartIcon, status?.favourited && 'fill');
+  const bookmarkIcon = useIconWeight(
+    BookmarkSimpleIcon,
+    status?.bookmarked && 'fill',
   );
 
   if (!status) {
@@ -368,9 +356,7 @@ const StatusReblogButton: React.FC<{
   );
 };
 
-const QuotesFilledIcon = (props: React.SVGProps<SVGSVGElement>) => (
-  <QuotesIcon {...props} weight='fill' />
-);
+const QuotesFilledIcon = iconWeight(QuotesIcon, 'fill');
 
 const StatusActionMenu: React.FC<{
   dismissQuoteHint: () => void;

app/javascript/mastodon/features/compose/redesign/index.tsx

@@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { LockSimpleOpenIcon, PepperIcon } from '@phosphor-icons/react';
+import { FlagIcon, LockSimpleOpenIcon } from '@phosphor-icons/react';
 
 import {
   changeComposeSpoilerness,
@@ -14,7 +14,7 @@ import {
 } from '@/mastodon/actions/compose';
 import { ToggleButton } from '@/mastodon/components/button/redesign';
 import { TextInputField } from '@/mastodon/components/form_fields/redesign';
-import { Icon } from '@/mastodon/components/icon';
+import { Icon, useIconWeight } from '@/mastodon/components/icon';
 import {
   getComposerTextarea,
   requestComposerFocus,
@@ -64,6 +64,8 @@ export const RedesignComposeForm: React.FC<
   const intl = useIntl();
   const titleId = useId();
 
+  const sensitiveIcon = useIconWeight(FlagIcon, sensitive && 'fill');
+
   return (
     <form
       {...props}
@@ -89,7 +91,7 @@ export const RedesignComposeForm: React.FC<
           size='sm'
           active={sensitive}
           onClick={onSensitiveChange}
-          leadingIcon={PepperIcon}
+          leadingIcon={sensitiveIcon}
         >
           <FormattedMessage id='compose.sensitive' defaultMessage='Sensitive' />
         </ToggleButton>