Status redesign: Use Callout for CWs (#40800)

app/javascript/mastodon/components/status/attachments.module.scss

@@ -25,19 +25,9 @@
 }
 
 .gallerySpoilerWrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   margin-bottom: var(--space-2);
 }
 
-.gallerySpoilerContent {
-  @include mixins.type-body-strong;
-
-  font-style: italic;
-  flex-grow: 1;
-}
-
 .galleryHideButtons {
   :global(.media-gallery__item__badges),
   :global(.media-gallery__actions) {

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

@@ -4,6 +4,8 @@ import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { WarningIcon } from '@phosphor-icons/react';
+
 import { openModal } from '@/mastodon/actions/modal';
 import type { DeployPictureInPictureCallback } from '@/mastodon/actions/picture_in_picture';
 import { deployPictureInPicture } from '@/mastodon/actions/picture_in_picture';
@@ -27,6 +29,7 @@ import { decodeIDNA } from '@/mastodon/utils/links';
 
 import { Avatar } from '../avatar';
 import { Button } from '../button/redesign';
+import { Callout } from '../callout/redesign';
 import { Card, CardActions, CardBody, CardTitle } from '../card';
 import { DisplayName } from '../display_name';
 import { RelativeTimestamp } from '../relative_timestamp';
@@ -345,10 +348,12 @@ const MediaAttachmentWrapper: React.FC<{
   return (
     <div className={classes.galleryWrapper} ref={wrapperRef}>
       {showSpoiler && (
-        <div className={classes.gallerySpoilerWrapper}>
-          <span className={classes.gallerySpoilerContent}>{message}</span>
-          <Button variant='solid' size='sm' onClick={onToggle}>
-            {visible ? (
+        <Callout
+          className={classes.gallerySpoilerWrapper}
+          icon={WarningIcon}
+          actionClick={onToggle}
+          actionText={
+            visible ? (
               <FormattedMessage
                 id='content_warning.media.hide_short'
                 defaultMessage='Hide media'
@@ -358,15 +363,17 @@ const MediaAttachmentWrapper: React.FC<{
                 id='content_warning.media.show_short'
                 defaultMessage='Show media'
               />
-            )}
-          </Button>
-        </div>
+            )
+          }
+        >
+          {message}
+        </Callout>
       )}
       <div
         data-color-scheme='dark'
         className={classNames(
           mainClasses.contentWrapper,
-          !visible && mainClasses.isFiltered,
+          !visible && mainClasses.hasContentWarning,
           !visible && classes.galleryHideButtons,
         )}
       >

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

@@ -188,7 +188,8 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
         <div
           className={classNames(
             classes.contentWrapper,
-            isHidden && classes.isFiltered,
+            isHidden && classes.hasContentWarning,
+            !showDespiteFilter && isFiltered && classes.isFiltered,
           )}
           id={contentWrapperId}
           inert={isHidden}

app/javascript/mastodon/components/status/styles.module.scss

@@ -60,10 +60,6 @@
   --content-col: span 2;
 }
 
-.isFiltered {
-  content: '';
-}
-
 .header {
   grid-column: span 2;
 }
@@ -100,18 +96,6 @@
   margin-inline-start: auto;
 }
 
-.spoiler {
-  display: flex;
-  align-items: center;
-}
-
-.spoilerContent {
-  @include mixins.type-body-strong;
-
-  font-style: italic;
-  flex-grow: 1;
-}
-
 .contentWrapper,
 .content {
   display: flex;
@@ -124,7 +108,11 @@
   --fade-time: 100ms;
 
   overflow: clip;
-  border-radius: var(--radius-2);
+  border-radius: var(--radius-4);
+
+  &.isFiltered {
+    display: none;
+  }
 
   &::after {
     content: '';
@@ -156,7 +144,7 @@
     }
   }
 
-  &.isFiltered::after {
+  &.hasContentWarning::after {
     visibility: visible;
     opacity: 1;
     transition:

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

@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
+import { WarningIcon } from '@phosphor-icons/react';
+
 import { toggleStatusSpoilers } from '@/mastodon/actions/statuses';
 import { selectStatusFilters } from '@/mastodon/selectors/filters';
 import { selectPlainStatus } from '@/mastodon/selectors/statuses';
@@ -10,7 +12,7 @@ import {
   useAppSelector,
 } from '@/mastodon/store/typed_functions';
 
-import { Button } from '../button/redesign';
+import { Callout } from '../callout/redesign';
 import { EmojiHTML } from '../emoji/html';
 
 import { useStatusContext } from './hooks';
@@ -79,27 +81,26 @@ const StatusWarningDisplay: React.FC<{
   wrapperId?: string;
 }> = ({ hidden, onToggle, children, wrapperId }) => {
   return (
-    <div className={classes.spoiler}>
-      <div className={classes.spoilerContent}>{children}</div>
-
-      <Button
-        variant='solid'
-        size='sm'
-        onClick={onToggle}
-        aria-controls={wrapperId}
-      >
-        {hidden ? (
+    <Callout
+      className={classes.spoiler}
+      aria-controls={wrapperId}
+      actionClick={onToggle}
+      icon={WarningIcon}
+      actionText={
+        hidden ? (
           <FormattedMessage
-            id='content_warning.hide_short'
-            defaultMessage='Hide'
+            id='content_warning.hide_post'
+            defaultMessage='Hide post'
           />
         ) : (
           <FormattedMessage
-            id='content_warning.show_short'
-            defaultMessage='Show'
+            id='content_warning.show_post'
+            defaultMessage='Show post'
           />
-        )}
-      </Button>
-    </div>
+        )
+      }
+    >
+      {children}
+    </Callout>
   );
 };

app/javascript/mastodon/locales/en.json

@@ -684,11 +684,12 @@
   "confirmations.withdraw_request.confirm": "Withdraw request",
   "confirmations.withdraw_request.title": "Withdraw request to follow {name}?",
   "content_warning.hide": "Hide post",
-  "content_warning.hide_short": "Hide",
+  "content_warning.hide_post": "Hide post",
   "content_warning.media.hide_short": "Hide media",
   "content_warning.media.show_short": "Show media",
   "content_warning.show": "Show anyway",
   "content_warning.show_more": "Show more",
+  "content_warning.show_post": "Show post",
   "content_warning.show_short": "Show",
   "conversation.delete": "Delete conversation",
   "conversation.mark_as_read": "Mark as read",