tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Update block dialog copy to include quotes & collections

Browse Source 
Port a23b3c7c25cff702ea94f7f7d8a00b5095f9a8cc to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-04 17:22:24 +02:00 committed by Claire
parent 5a7684ecb9
commit e9e3a1ecaa
5 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/javascript/flavours/glitch/features/ui/components/block_modal.jsx
View File

@ -10,12 +10,14 @@ import { useDispatch } from 'react-redux';
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
import BlockIcon from '@/material-icons/400-24px/block.svg?react'; import BlockIcon from '@/material-icons/400-24px/block.svg?react';
import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
import CollectionsIcon from '@/material-icons/400-24px/category.svg?react';
import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
import { blockAccount } from 'flavours/glitch/actions/accounts'; import { blockAccount } from 'flavours/glitch/actions/accounts';
import { closeModal } from 'flavours/glitch/actions/modal'; import { closeModal } from 'flavours/glitch/actions/modal';
import { Button } from 'flavours/glitch/components/button'; import { Button } from 'flavours/glitch/components/button';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import { areCollectionsEnabled } from '../../collections/utils';
export const BlockModal = ({ accountId, acct }) => { export const BlockModal = ({ accountId, acct }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -46,31 +48,38 @@ export const BlockModal = ({ accountId, acct }) => {
<div> <div>
<h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1> <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
<div>@{acct}</div> <p>@{acct}</p>
</div> </div>
</div> </div>
<div className='safety-action-modal__bullet-points'> <ul className='safety-action-modal__bullet-points'>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
<div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div> <div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
<div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your posts and you won't see theirs." /></div> <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your content and you won't see theirs." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
<div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mentions them." /></div> <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts from others that mention them." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
<div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="They can't mention or follow you." /></div> <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="You can't mention, follow, or quote each other." /></div>
</div> </li>
</div>
{areCollectionsEnabled() &&
<li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={CollectionsIcon} /></div>
<div><FormattedMessage id='block_modal.no_collections' defaultMessage="Neither of you can add each other to collections. You'll be automatically removed from each others' existing collections, if applicable." /></div>
</li>
}
</ul>
</div> </div>
<div className={classNames('safety-action-modal__bottom', { active: expanded })}> <div className={classNames('safety-action-modal__bottom', { active: expanded })}>

30
app/javascript/flavours/glitch/features/ui/components/domain_block_modal.tsx
View File

@ -83,15 +83,15 @@ export const DomainBlockModal: React.FC<{
defaultMessage='Block domain?' defaultMessage='Block domain?'
/> />
</h1> </h1>
<div>{domain}</div> <p>{domain}</p>
</div> </div>
</div> </div>
<div className='safety-action-modal__bullet-points'> <ul className='safety-action-modal__bullet-points'>
{preview && {preview &&
preview !== 'error' && preview !== 'error' &&
preview.followers_count + preview.following_count > 0 && ( preview.followers_count + preview.following_count > 0 && (
<div> <li>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={PersonRemoveIcon} /> <Icon id='' icon={PersonRemoveIcon} />
</div> </div>
@ -113,11 +113,11 @@ export const DomainBlockModal: React.FC<{
/> />
</strong> </strong>
</div> </div>
</div> </li>
)} )}
{preview === 'error' && ( {preview === 'error' && (
<div> <li>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={PersonRemoveIcon} /> <Icon id='' icon={PersonRemoveIcon} />
</div> </div>
@ -129,10 +129,10 @@ export const DomainBlockModal: React.FC<{
/> />
</strong> </strong>
</div> </div>
</div> </li>
)} )}
<div className='safety-action-modal__bullet-points--deemphasized'> <li className='safety-action-modal__bullet-points--deemphasized'>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={CampaignIcon} /> <Icon id='' icon={CampaignIcon} />
</div> </div>
@ -142,9 +142,9 @@ export const DomainBlockModal: React.FC<{
defaultMessage="They won't know they've been blocked." defaultMessage="They won't know they've been blocked."
/> />
</div> </div>
</div> </li>
<div className='safety-action-modal__bullet-points--deemphasized'> <li className='safety-action-modal__bullet-points--deemphasized'>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={VisibilityOffIcon} /> <Icon id='' icon={VisibilityOffIcon} />
</div> </div>
@ -154,9 +154,9 @@ export const DomainBlockModal: React.FC<{
defaultMessage="You won't see posts or notifications from users on this server." defaultMessage="You won't see posts or notifications from users on this server."
/> />
</div> </div>
</div> </li>
<div className='safety-action-modal__bullet-points--deemphasized'> <li className='safety-action-modal__bullet-points--deemphasized'>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={ReplyIcon} /> <Icon id='' icon={ReplyIcon} />
</div> </div>
@ -166,9 +166,9 @@ export const DomainBlockModal: React.FC<{
defaultMessage='Nobody from this server can follow you.' defaultMessage='Nobody from this server can follow you.'
/> />
</div> </div>
</div> </li>
<div className='safety-action-modal__bullet-points--deemphasized'> <li className='safety-action-modal__bullet-points--deemphasized'>
<div className='safety-action-modal__bullet-points__icon'> <div className='safety-action-modal__bullet-points__icon'>
<Icon id='' icon={HistoryIcon} /> <Icon id='' icon={HistoryIcon} />
</div> </div>
@ -178,8 +178,8 @@ export const DomainBlockModal: React.FC<{
defaultMessage='People from this server can interact with your old posts.' defaultMessage='People from this server can interact with your old posts.'
/> />
</div> </div>
</div> </li>
</div> </ul>
</div> </div>
<div className='safety-action-modal__bottom'> <div className='safety-action-modal__bottom'>

16
app/javascript/flavours/glitch/features/ui/components/ignore_notifications_modal.jsx
View File

@ -57,22 +57,22 @@ export const IgnoreNotificationsModal = ({ filterType }) => {
<h1>{title}</h1> <h1>{title}</h1>
</div> </div>
<div className='safety-action-modal__bullet-points'> <ul className='safety-action-modal__bullet-points'>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={InventoryIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={InventoryIcon} /></div>
<div><FormattedMessage id='ignore_notifications_modal.filter_to_review_separately' defaultMessage='You can review filtered notifications separately' /></div> <div><FormattedMessage id='ignore_notifications_modal.filter_to_review_separately' defaultMessage='You can review filtered notifications separately' /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonAlertIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={PersonAlertIcon} /></div>
<div><FormattedMessage id='ignore_notifications_modal.filter_to_act_users' defaultMessage="You'll still be able to accept, reject, or report users" /></div> <div><FormattedMessage id='ignore_notifications_modal.filter_to_act_users' defaultMessage="You'll still be able to accept, reject, or report users" /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={ShieldQuestionIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={ShieldQuestionIcon} /></div>
<div><FormattedMessage id='ignore_notifications_modal.filter_to_avoid_confusion' defaultMessage='Filtering helps avoid potential confusion' /></div> <div><FormattedMessage id='ignore_notifications_modal.filter_to_avoid_confusion' defaultMessage='Filtering helps avoid potential confusion' /></div>
</div> </li>
</div> </ul>
<div> <div>
<FormattedMessage id='ignore_notifications_modal.disclaimer' defaultMessage="Mastodon cannot inform users that you've ignored their notifications. Ignoring notifications will not stop the messages themselves from being sent." /> <FormattedMessage id='ignore_notifications_modal.disclaimer' defaultMessage="Mastodon cannot inform users that you've ignored their notifications. Ignoring notifications will not stop the messages themselves from being sent." />

22
app/javascript/flavours/glitch/features/ui/components/mute_modal.jsx
View File

@ -85,31 +85,31 @@ export const MuteModal = ({ accountId, acct }) => {
<div> <div>
<h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1> <h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
<div>@{acct}</div> <p>@{acct}</p>
</div> </div>
</div> </div>
<div className='safety-action-modal__bullet-points'> <ul className='safety-action-modal__bullet-points'>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
<div><FormattedMessage id='mute_modal.they_wont_know' defaultMessage="They won't know they've been muted." /></div> <div><FormattedMessage id='mute_modal.they_wont_know' defaultMessage="They won't know they've been muted." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
<div><FormattedMessage id='mute_modal.you_wont_see_posts' defaultMessage="They can still see your posts, but you won't see theirs." /></div> <div><FormattedMessage id='mute_modal.you_wont_see_posts' defaultMessage="They can still see your posts, but you won't see theirs." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
<div><FormattedMessage id='mute_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mention them." /></div> <div><FormattedMessage id='mute_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mention them." /></div>
</div> </li>
<div> <li>
<div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div> <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
<div><FormattedMessage id='mute_modal.they_can_mention_and_follow' defaultMessage="They can mention and follow you, but you won't see them." /></div> <div><FormattedMessage id='mute_modal.they_can_mention_and_follow' defaultMessage="They can mention and follow you, but you won't see them." /></div>
</div> </li>
</div> </ul>
</div> </div>
<div className={classNames('safety-action-modal__bottom', { active: expanded })}> <div className={classNames('safety-action-modal__bottom', { active: expanded })}>

8
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -6733,14 +6733,16 @@ a.status-card {
&__bullet-points { &__bullet-points {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 16px;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
& > li,
& > div { & > div {
display: flex; display: flex;
gap: 16px; gap: 16px;
align-items: center; align-items: start;
text-wrap: pretty;
strong { strong {
font-weight: 700; font-weight: 700;
@ -6753,7 +6755,7 @@ a.status-card {
&__icon { &__icon {
width: 40px; width: 40px;
height: 40px; height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;