Change design of boost modal in web UI (#31555)

app/javascript/mastodon/features/ui/components/boost_modal.tsx

@@ -1,28 +1,17 @@
-import type { MouseEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
-import { useHistory } from 'react-router';
-
-import type Immutable from 'immutable';
 
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import AttachmentList from 'mastodon/components/attachment_list';
+import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
-import { VisibilityIcon } from 'mastodon/components/visibility_icon';
 import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown';
-import type { Account } from 'mastodon/models/account';
+import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status';
 import type { Status, StatusVisibility } from 'mastodon/models/status';
 import { useAppSelector } from 'mastodon/store';
 
-import { Avatar } from '../../../components/avatar';
-import { Button } from '../../../components/button';
-import { DisplayName } from '../../../components/display_name';
-import { RelativeTimestamp } from '../../../components/relative_timestamp';
-import StatusContent from '../../../components/status_content';
-
 const messages = defineMessages({
   cancel_reblog: {
     id: 'status.cancel_reblog_private',
@@ -37,18 +26,17 @@ export const BoostModal: React.FC<{
   onReblog: (status: Status, privacy: StatusVisibility) => void;
 }> = ({ status, onReblog, onClose }) => {
   const intl = useIntl();
-  const history = useHistory();
 
-  const default_privacy = useAppSelector(
+  const defaultPrivacy = useAppSelector(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     (state) => state.compose.get('default_privacy') as StatusVisibility,
   );
 
-  const account = status.get('account') as Account;
+  const statusId = status.get('id') as string;
   const statusVisibility = status.get('visibility') as StatusVisibility;
 
   const [privacy, setPrivacy] = useState<StatusVisibility>(
-    statusVisibility === 'private' ? 'private' : default_privacy,
+    statusVisibility === 'private' ? 'private' : defaultPrivacy,
   );
 
   const onPrivacyChange = useCallback((value: StatusVisibility) => {
@@ -60,20 +48,9 @@ export const BoostModal: React.FC<{
     onClose();
   }, [onClose, onReblog, status, privacy]);
 
-  const handleAccountClick = useCallback<MouseEventHandler>(
+  const handleCancel = useCallback(() => {
-    (e) => {
+    onClose();
-      if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
+  }, [onClose]);
-        e.preventDefault();
-        onClose();
-        history.push(`/@${account.acct}`);
-      }
-    },
-    [history, onClose, account],
-  );
-
-  const buttonText = status.get('reblogged')
-    ? messages.cancel_reblog
-    : messages.reblog;
 
   const findContainer = useCallback(
     () => document.getElementsByClassName('modal-root__container')[0],
@@ -81,81 +58,78 @@ export const BoostModal: React.FC<{
   );
 
   return (
-    <div className='modal-root__modal boost-modal'>
+    <div className='modal-root__modal safety-action-modal'>
-      <div className='boost-modal__container'>
+      <div className='safety-action-modal__top'>
-        <div
+        <div className='safety-action-modal__header'>
-          className={classNames(
+          <div className='safety-action-modal__header__icon'>
-            'status',
+            <Icon icon={RepeatIcon} id='retweet' />
-            `status-${statusVisibility}`,
-            'light',
-          )}
-        >
-          <div className='status__info'>
-            <a
-              href={`/@${account.acct}/${status.get('id') as string}`}
-              className='status__relative-time'
-              target='_blank'
-              rel='noopener noreferrer'
-            >
-              <span className='status__visibility-icon'>
-                <VisibilityIcon visibility={statusVisibility} />
-              </span>
-              <RelativeTimestamp
-                timestamp={status.get('created_at') as string}
-              />
-            </a>
-
-            <a
-              onClick={handleAccountClick}
-              href={`/@${account.acct}`}
-              className='status__display-name'
-            >
-              <div className='status__avatar'>
-                <Avatar account={account} size={48} />
-              </div>
-
-              <DisplayName account={account} />
-            </a>
           </div>
 
-          {/* @ts-expect-error Expected until StatusContent is typed */}
+          <div>
-          <StatusContent status={status} />
+            <h1>
+              {status.get('reblogged') ? (
+                <FormattedMessage
+                  id='boost_modal.undo_reblog'
+                  defaultMessage='Unboost post?'
+                />
+              ) : (
+                <FormattedMessage
+                  id='boost_modal.reblog'
+                  defaultMessage='Boost post?'
+                />
+              )}
+            </h1>
+            <div>
+              <FormattedMessage
+                id='boost_modal.combo'
+                defaultMessage='You can press {combo} to skip this next time'
+                values={{
+                  combo: (
+                    <span className='hotkey-combination'>
+                      <kbd>Shift</kbd>+<Icon id='retweet' icon={RepeatIcon} />
+                    </span>
+                  ),
+                }}
+              />
+            </div>
+          </div>
+        </div>
 
-          {(status.get('media_attachments') as Immutable.List<unknown>).size >
+        <div className='safety-action-modal__status'>
-            0 && (
+          <EmbeddedStatus statusId={statusId} />
-            <AttachmentList compact media={status.get('media_attachments')} />
-          )}
         </div>
       </div>
 
-      <div className='boost-modal__action-bar'>
+      <div className={classNames('safety-action-modal__bottom')}>
-        <div>
+        <div className='safety-action-modal__actions'>
-          <FormattedMessage
+          {!status.get('reblogged') && (
-            id='boost_modal.combo'
+            <PrivacyDropdown
-            defaultMessage='You can press {combo} to skip this next time'
+              noDirect
-            values={{
+              value={privacy}
-              combo: (
+              container={findContainer}
-                <span>
+              onChange={onPrivacyChange}
-                  Shift + <Icon id='retweet' icon={RepeatIcon} />
+              disabled={statusVisibility === 'private'}
-                </span>
+            />
-              ),
+          )}
-            }}
+
+          <div className='spacer' />
+
+          <button onClick={handleCancel} className='link-button'>
+            <FormattedMessage
+              id='confirmation_modal.cancel'
+              defaultMessage='Cancel'
+            />
+          </button>
+
+          <Button
+            onClick={handleReblog}
+            text={intl.formatMessage(
+              status.get('reblogged')
+                ? messages.cancel_reblog
+                : messages.reblog,
+            )}
           />
         </div>
-        {statusVisibility !== 'private' && !status.get('reblogged') && (
-          <PrivacyDropdown
-            noDirect
-            value={privacy}
-            container={findContainer}
-            onChange={onPrivacyChange}
-          />
-        )}
-        <Button
-          text={intl.formatMessage(buttonText)}
-          onClick={handleReblog}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
-        />
       </div>
     </div>
   );

app/javascript/mastodon/locales/en.json

@@ -97,6 +97,8 @@
   "block_modal.title": "Block user?",
   "block_modal.you_wont_see_mentions": "You won't see posts that mention them.",
   "boost_modal.combo": "You can press {combo} to skip this next time",
+  "boost_modal.reblog": "Boost post?",
+  "boost_modal.undo_reblog": "Unboost post?",
   "bundle_column_error.copy_stacktrace": "Copy error report",
   "bundle_column_error.error.body": "The requested page could not be rendered. It could be due to a bug in our code, or a browser compatibility issue.",
   "bundle_column_error.error.title": "Oh, no!",

app/javascript/styles/mastodon/components.scss

@@ -6142,6 +6142,48 @@ a.status-card {
     }
   }
 
+  &__status {
+    border: 1px solid var(--modal-border-color);
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+
+    &__account {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 8px;
+      color: $dark-text-color;
+
+      bdi {
+        color: inherit;
+      }
+    }
+
+    &__content {
+      display: -webkit-box;
+      font-size: 15px;
+      line-height: 22px;
+      color: $dark-text-color;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+      max-height: 4 * 22px;
+      overflow: hidden;
+
+      p,
+      a {
+        color: inherit;
+      }
+    }
+
+    .reply-indicator__attachments {
+      margin-top: 0;
+      font-size: 15px;
+      line-height: 22px;
+      color: $dark-text-color;
+    }
+  }
+
   &__bullet-points {
     display: flex;
     flex-direction: column;
@@ -6219,6 +6261,12 @@ a.status-card {
     gap: 8px;
     justify-content: flex-end;
 
+    &__hint {
+      font-size: 14px;
+      line-height: 20px;
+      color: $dark-text-color;
+    }
+
     .link-button {
       padding: 10px 12px;
       font-weight: 600;
@@ -6226,6 +6274,18 @@ a.status-card {
   }
 }
 
+.hotkey-combination {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  kbd {
+    padding: 3px 5px;
+    border: 1px solid var(--background-border-color);
+    border-radius: 4px;
+  }
+}
+
 .boost-modal,
 .report-modal,
 .actions-modal,
@@ -10579,6 +10639,7 @@ noscript {
     }
 
     .reply-indicator__attachments {
+      margin-top: 0;
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;