From 9027bfff0c25a6da1bcef7ce880e5d8211062d1d Mon Sep 17 00:00:00 2001
From: ThibG
Date: Sun, 29 Sep 2019 21:46:05 +0200
Subject: Add explanation to mute dialog, refactor and clean up mute/block UI
(#11992)
* Add some explanation to the mute modal dialog
* Remove `isSubmitting` from mute modal code, this wasn't used
* Refactor block modal
Signed-off-by: Thibaut Girka
* Refactor SCSS a bit
* Put mute modal toggle to the same side as in the report dialog for consistency
* Reword mute explanation
* Fix mute explanation styling
* Left-align all text in mute confirmation modal
---
app/javascript/mastodon/actions/blocks.js | 14 +++
.../mastodon/containers/status_container.js | 18 +---
.../containers/header_container.js | 15 +--
.../status/containers/detailed_status_container.js | 18 +---
app/javascript/mastodon/features/status/index.js | 20 +---
.../mastodon/features/ui/components/block_modal.js | 103 +++++++++++++++++++++
.../mastodon/features/ui/components/modal_root.js | 2 +
.../mastodon/features/ui/components/mute_modal.js | 15 +--
.../mastodon/features/ui/util/async-components.js | 4 +
app/javascript/mastodon/reducers/blocks.js | 22 +++++
app/javascript/mastodon/reducers/index.js | 2 +
app/javascript/mastodon/reducers/mutes.js | 2 -
app/javascript/styles/mastodon-light/diff.scss | 2 +
app/javascript/styles/mastodon/components.scss | 73 ++++++++++-----
14 files changed, 222 insertions(+), 88 deletions(-)
create mode 100644 app/javascript/mastodon/features/ui/components/block_modal.js
create mode 100644 app/javascript/mastodon/reducers/blocks.js
diff --git a/app/javascript/mastodon/actions/blocks.js b/app/javascript/mastodon/actions/blocks.js
index 7000f5a71..fd9881302 100644
--- a/app/javascript/mastodon/actions/blocks.js
+++ b/app/javascript/mastodon/actions/blocks.js
@@ -1,6 +1,7 @@
import api, { getLinks } from '../api';
import { fetchRelationships } from './accounts';
import { importFetchedAccounts } from './importer';
+import { openModal } from './modal';
export const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST';
export const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS';
@@ -10,6 +11,8 @@ export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST';
export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS';
export const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL';
+export const BLOCKS_INIT_MODAL = 'BLOCKS_INIT_MODAL';
+
export function fetchBlocks() {
return (dispatch, getState) => {
dispatch(fetchBlocksRequest());
@@ -83,3 +86,14 @@ export function expandBlocksFail(error) {
error,
};
};
+
+export function initBlockModal(account) {
+ return dispatch => {
+ dispatch({
+ type: BLOCKS_INIT_MODAL,
+ account,
+ });
+
+ dispatch(openModal('BLOCK'));
+ };
+}
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index 7b0906b39..fb22676e0 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { connect } from 'react-redux';
import Status from '../components/status';
import { makeGetStatus } from '../selectors';
@@ -15,7 +14,6 @@ import {
pin,
unpin,
} from '../actions/interactions';
-import { blockAccount } from '../actions/accounts';
import {
muteStatus,
unmuteStatus,
@@ -24,9 +22,10 @@ import {
revealStatus,
} from '../actions/statuses';
import { initMuteModal } from '../actions/mutes';
+import { initBlockModal } from '../actions/blocks';
import { initReport } from '../actions/reports';
import { openModal } from '../actions/modal';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
import { boostModal, deleteModal } from '../initial_state';
import { showAlertForError } from '../actions/alerts';
@@ -35,10 +34,8 @@ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
- blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
});
const makeMapStateToProps = () => {
@@ -138,16 +135,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onBlock (status) {
const account = status.get('account');
- dispatch(openModal('CONFIRM', {
- message: @{account.get('acct')} }} />,
- confirm: intl.formatMessage(messages.blockConfirm),
- onConfirm: () => dispatch(blockAccount(account.get('id'))),
- secondary: intl.formatMessage(messages.blockAndReport),
- onSecondary: () => {
- dispatch(blockAccount(account.get('id')));
- dispatch(initReport(account, status));
- },
- }));
+ dispatch(initBlockModal(account));
},
onReport (status) {
diff --git a/app/javascript/mastodon/features/account_timeline/containers/header_container.js b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
index 4d4ae6e82..8728b4806 100644
--- a/app/javascript/mastodon/features/account_timeline/containers/header_container.js
+++ b/app/javascript/mastodon/features/account_timeline/containers/header_container.js
@@ -5,7 +5,6 @@ import Header from '../components/header';
import {
followAccount,
unfollowAccount,
- blockAccount,
unblockAccount,
unmuteAccount,
pinAccount,
@@ -16,6 +15,7 @@ import {
directCompose,
} from '../../../actions/compose';
import { initMuteModal } from '../../../actions/mutes';
+import { initBlockModal } from '../../../actions/blocks';
import { initReport } from '../../../actions/reports';
import { openModal } from '../../../actions/modal';
import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
@@ -25,9 +25,7 @@ import { List as ImmutableList } from 'immutable';
const messages = defineMessages({
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
- blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
- blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
});
const makeMapStateToProps = () => {
@@ -64,16 +62,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')));
} else {
- dispatch(openModal('CONFIRM', {
- message: @{account.get('acct')} }} />,
- confirm: intl.formatMessage(messages.blockConfirm),
- onConfirm: () => dispatch(blockAccount(account.get('id'))),
- secondary: intl.formatMessage(messages.blockAndReport),
- onSecondary: () => {
- dispatch(blockAccount(account.get('id')));
- dispatch(initReport(account));
- },
- }));
+ dispatch(initBlockModal(account));
}
},
diff --git a/app/javascript/mastodon/features/status/containers/detailed_status_container.js b/app/javascript/mastodon/features/status/containers/detailed_status_container.js
index 61e0c428a..333c295dc 100644
--- a/app/javascript/mastodon/features/status/containers/detailed_status_container.js
+++ b/app/javascript/mastodon/features/status/containers/detailed_status_container.js
@@ -1,4 +1,3 @@
-import React from 'react';
import { connect } from 'react-redux';
import DetailedStatus from '../components/detailed_status';
import { makeGetStatus } from '../../../selectors';
@@ -15,7 +14,6 @@ import {
pin,
unpin,
} from '../../../actions/interactions';
-import { blockAccount } from '../../../actions/accounts';
import {
muteStatus,
unmuteStatus,
@@ -24,9 +22,10 @@ import {
revealStatus,
} from '../../../actions/statuses';
import { initMuteModal } from '../../../actions/mutes';
+import { initBlockModal } from '../../../actions/blocks';
import { initReport } from '../../../actions/reports';
import { openModal } from '../../../actions/modal';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
import { boostModal, deleteModal } from '../../../initial_state';
import { showAlertForError } from '../../../actions/alerts';
@@ -35,10 +34,8 @@ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
- blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
});
const makeMapStateToProps = () => {
@@ -138,16 +135,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onBlock (status) {
const account = status.get('account');
- dispatch(openModal('CONFIRM', {
- message: @{account.get('acct')} }} />,
- confirm: intl.formatMessage(messages.blockConfirm),
- onConfirm: () => dispatch(blockAccount(account.get('id'))),
- secondary: intl.formatMessage(messages.blockAndReport),
- onSecondary: () => {
- dispatch(blockAccount(account.get('id')));
- dispatch(initReport(account, status));
- },
- }));
+ dispatch(initBlockModal(account));
},
onReport (status) {
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index f78a9489a..029057d40 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -23,7 +23,6 @@ import {
mentionCompose,
directCompose,
} from '../../actions/compose';
-import { blockAccount } from '../../actions/accounts';
import {
muteStatus,
unmuteStatus,
@@ -32,6 +31,7 @@ import {
revealStatus,
} from '../../actions/statuses';
import { initMuteModal } from '../../actions/mutes';
+import { initBlockModal } from '../../actions/blocks';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
import { ScrollContainer } from 'react-router-scroll-4';
@@ -39,7 +39,7 @@ import ColumnBackButton from '../../components/column_back_button';
import ColumnHeader from '../../components/column_header';
import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import { boostModal, deleteModal } from '../../initial_state';
@@ -52,13 +52,11 @@ const messages = defineMessages({
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
- blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
});
const makeMapStateToProps = () => {
@@ -296,19 +294,9 @@ class Status extends ImmutablePureComponent {
}
handleBlockClick = (status) => {
- const { dispatch, intl } = this.props;
+ const { dispatch } = this.props;
const account = status.get('account');
-
- dispatch(openModal('CONFIRM', {
- message: @{account.get('acct')} }} />,
- confirm: intl.formatMessage(messages.blockConfirm),
- onConfirm: () => dispatch(blockAccount(account.get('id'))),
- secondary: intl.formatMessage(messages.blockAndReport),
- onSecondary: () => {
- dispatch(blockAccount(account.get('id')));
- dispatch(initReport(account, status));
- },
- }));
+ dispatch(initBlockModal(account));
}
handleReport = (status) => {
diff --git a/app/javascript/mastodon/features/ui/components/block_modal.js b/app/javascript/mastodon/features/ui/components/block_modal.js
new file mode 100644
index 000000000..a07baeaa6
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/block_modal.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import { makeGetAccount } from '../../../selectors';
+import Button from '../../../components/button';
+import { closeModal } from '../../../actions/modal';
+import { blockAccount } from '../../../actions/accounts';
+import { initReport } from '../../../actions/reports';
+
+
+const makeMapStateToProps = () => {
+ const getAccount = makeGetAccount();
+
+ const mapStateToProps = state => ({
+ account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])),
+ });
+
+ return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ onConfirm(account) {
+ dispatch(blockAccount(account.get('id')));
+ },
+
+ onBlockAndReport(account) {
+ dispatch(blockAccount(account.get('id')));
+ dispatch(initReport(account));
+ },
+
+ onClose() {
+ dispatch(closeModal());
+ },
+ };
+};
+
+export default @connect(makeMapStateToProps, mapDispatchToProps)
+@injectIntl
+class BlockModal extends React.PureComponent {
+
+ static propTypes = {
+ account: PropTypes.object.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onBlockAndReport: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ };
+
+ componentDidMount() {
+ this.button.focus();
+ }
+
+ handleClick = () => {
+ this.props.onClose();
+ this.props.onConfirm(this.props.account);
+ }
+
+ handleSecondary = () => {
+ this.props.onClose();
+ this.props.onBlockAndReport(this.props.account);
+ }
+
+ handleCancel = () => {
+ this.props.onClose();
+ }
+
+ setRef = (c) => {
+ this.button = c;
+ }
+
+ render () {
+ const { account } = this.props;
+
+ return (
+
+
+
+ @{account.get('acct')} }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
index 5fc37368b..58d3ba8db 100644
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -13,6 +13,7 @@ import ConfirmationModal from './confirmation_modal';
import FocalPointModal from './focal_point_modal';
import {
MuteModal,
+ BlockModal,
ReportModal,
EmbedModal,
ListEditor,
@@ -25,6 +26,7 @@ const MODAL_COMPONENTS = {
'BOOST': () => Promise.resolve({ default: BoostModal }),
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
'MUTE': MuteModal,
+ 'BLOCK': BlockModal,
'REPORT': ReportModal,
'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
'EMBED': EmbedModal,
diff --git a/app/javascript/mastodon/features/ui/components/mute_modal.js b/app/javascript/mastodon/features/ui/components/mute_modal.js
index ac356b42a..c364c5ba2 100644
--- a/app/javascript/mastodon/features/ui/components/mute_modal.js
+++ b/app/javascript/mastodon/features/ui/components/mute_modal.js
@@ -11,7 +11,6 @@ import { toggleHideNotifications } from '../../../actions/mutes';
const mapStateToProps = state => {
return {
- isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
account: state.getIn(['mutes', 'new', 'account']),
notifications: state.getIn(['mutes', 'new', 'notifications']),
};
@@ -38,7 +37,6 @@ export default @connect(mapStateToProps, mapDispatchToProps)
class MuteModal extends React.PureComponent {
static propTypes = {
- isSubmitting: PropTypes.bool.isRequired,
account: PropTypes.object.isRequired,
notifications: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
@@ -81,11 +79,16 @@ class MuteModal extends React.PureComponent {
values={{ name: @{account.get('acct')} }}
/>
-
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
index 0084c1510..bb0fcb859 100644
--- a/app/javascript/mastodon/features/ui/util/async-components.js
+++ b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -106,6 +106,10 @@ export function MuteModal () {
return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
}
+export function BlockModal () {
+ return import(/* webpackChunkName: "modals/block_modal" */'../components/block_modal');
+}
+
export function ReportModal () {
return import(/* webpackChunkName: "modals/report_modal" */'../components/report_modal');
}
diff --git a/app/javascript/mastodon/reducers/blocks.js b/app/javascript/mastodon/reducers/blocks.js
new file mode 100644
index 000000000..1b6507163
--- /dev/null
+++ b/app/javascript/mastodon/reducers/blocks.js
@@ -0,0 +1,22 @@
+import Immutable from 'immutable';
+
+import {
+ BLOCKS_INIT_MODAL,
+} from '../actions/blocks';
+
+const initialState = Immutable.Map({
+ new: Immutable.Map({
+ account_id: null,
+ }),
+});
+
+export default function mutes(state = initialState, action) {
+ switch (action.type) {
+ case BLOCKS_INIT_MODAL:
+ return state.withMutations((state) => {
+ state.setIn(['new', 'account_id'], action.account.get('id'));
+ });
+ default:
+ return state;
+ }
+}
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index 0f4b209d4..b8d608888 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -15,6 +15,7 @@ import settings from './settings';
import push_notifications from './push_notifications';
import status_lists from './status_lists';
import mutes from './mutes';
+import blocks from './blocks';
import reports from './reports';
import contexts from './contexts';
import compose from './compose';
@@ -51,6 +52,7 @@ const reducers = {
settings,
push_notifications,
mutes,
+ blocks,
reports,
contexts,
compose,
diff --git a/app/javascript/mastodon/reducers/mutes.js b/app/javascript/mastodon/reducers/mutes.js
index a96232dbd..4672e5097 100644
--- a/app/javascript/mastodon/reducers/mutes.js
+++ b/app/javascript/mastodon/reducers/mutes.js
@@ -7,7 +7,6 @@ import {
const initialState = Immutable.Map({
new: Immutable.Map({
- isSubmitting: false,
account: null,
notifications: true,
}),
@@ -17,7 +16,6 @@ export default function mutes(state = initialState, action) {
switch (action.type) {
case MUTES_INIT_MODAL:
return state.withMutations((state) => {
- state.setIn(['new', 'isSubmitting'], false);
state.setIn(['new', 'account'], action.account);
state.setIn(['new', 'notifications'], true);
});
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index e7114ed07..45305d696 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -310,6 +310,7 @@ html {
.boost-modal,
.confirmation-modal,
.mute-modal,
+.block-modal,
.report-modal,
.embed-modal,
.error-modal,
@@ -326,6 +327,7 @@ html {
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
+.block-modal__action-bar,
.onboarding-modal__paginator,
.error-modal__footer {
background: darken($ui-base-color, 6%);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 398522afb..64d40f824 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4533,7 +4533,8 @@ a.status-card.compact:hover {
.confirmation-modal,
.report-modal,
.actions-modal,
-.mute-modal {
+.mute-modal,
+.block-modal {
background: lighten($ui-secondary-color, 8%);
color: $inverted-text-color;
border-radius: 8px;
@@ -4587,7 +4588,8 @@ a.status-card.compact:hover {
.boost-modal__action-bar,
.confirmation-modal__action-bar,
-.mute-modal__action-bar {
+.mute-modal__action-bar,
+.block-modal__action-bar {
display: flex;
justify-content: space-between;
background: $ui-secondary-color;
@@ -4615,11 +4617,13 @@ a.status-card.compact:hover {
font-size: 14px;
}
-.mute-modal {
+.mute-modal,
+.block-modal {
line-height: 24px;
}
-.mute-modal .react-toggle {
+.mute-modal .react-toggle,
+.block-modal .react-toggle {
vertical-align: middle;
}
@@ -4830,33 +4834,35 @@ a.status-card.compact:hover {
}
.confirmation-modal__action-bar,
-.mute-modal__action-bar {
- .confirmation-modal__secondary-button,
- .confirmation-modal__cancel-button,
- .mute-modal__cancel-button {
- background-color: transparent;
- color: $lighter-text-color;
- font-size: 14px;
- font-weight: 500;
-
- &:hover,
- &:focus,
- &:active {
- color: darken($lighter-text-color, 4%);
- }
- }
-
+.mute-modal__action-bar,
+.block-modal__action-bar {
.confirmation-modal__secondary-button {
flex-shrink: 1;
}
}
+.confirmation-modal__secondary-button,
+.confirmation-modal__cancel-button,
+.mute-modal__cancel-button,
+.block-modal__cancel-button {
+ background-color: transparent;
+ color: $lighter-text-color;
+ font-size: 14px;
+ font-weight: 500;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: darken($lighter-text-color, 4%);
+ }
+}
+
.confirmation-modal__container,
.mute-modal__container,
+.block-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
- text-align: center;
strong {
font-weight: 500;
@@ -4869,6 +4875,31 @@ a.status-card.compact:hover {
}
}
+.confirmation-modal__container,
+.report-modal__target {
+ text-align: center;
+}
+
+.block-modal,
+.mute-modal {
+ &__explanation {
+ margin-top: 20px;
+ }
+
+ .setting-toggle {
+ margin-top: 20px;
+ margin-bottom: 24px;
+ display: flex;
+ align-items: center;
+
+ &__label {
+ color: $inverted-text-color;
+ margin: 0;
+ margin-left: 8px;
+ }
+ }
+}
+
.report-modal__target {
padding: 15px;
--
cgit