diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index 1ebf9d2a57579e..c2e5b2578bcef1 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -11,6 +11,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg'; +import { ReactComponent as DisabledIcon } from '@material-symbols/svg-600/outlined/close-fill.svg'; +import { ReactComponent as EnabledIcon } from '@material-symbols/svg-600/outlined/done-fill.svg'; import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg'; import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server'; @@ -101,6 +103,28 @@ class Section extends PureComponent { } +class CapabilityIcon extends PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + state: PropTypes.bool, + }; + + render () { + const { intl, state } = this.props; + + if (state) { + return ( + {intl.formatMessage(messages.enabled)} + ); + } else { + return ( + {intl.formatMessage(messages.disabled)} + ); + } + } +} + class About extends PureComponent { static propTypes = { @@ -201,13 +225,13 @@ class About extends PureComponent { {!isLoading && (
  1. - {intl.formatMessage(messages.emojiReaction)}: {intl.formatMessage(isEmojiReaction ? messages.enabled : messages.disabled)} + {intl.formatMessage(messages.emojiReaction)}:
  2. - {intl.formatMessage(messages.publicUnlistedVisibility)}: {intl.formatMessage(isPublicUnlistedVisibility ? messages.enabled : messages.disabled)} + {intl.formatMessage(messages.publicUnlistedVisibility)}:
  3. - {intl.formatMessage(messages.localTimeline)}: {intl.formatMessage(isLocalTimeline ? messages.enabled : messages.disabled)} + {intl.formatMessage(messages.localTimeline)}:
)} diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 0f02563b48d31e..6d36dfb6618459 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -53,4 +53,18 @@ $fluid-breakpoint: $maximum-width + 20px; border-bottom: 0; } } + + .capability-icon { + svg { + transform: translateY(4px); + } + + &.enabled { + color: green; + } + + &.disabled { + color: red; + } + } }