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 && (
-
- {intl.formatMessage(messages.emojiReaction)}: {intl.formatMessage(isEmojiReaction ? messages.enabled : messages.disabled)}
+ {intl.formatMessage(messages.emojiReaction)}:
-
- {intl.formatMessage(messages.publicUnlistedVisibility)}: {intl.formatMessage(isPublicUnlistedVisibility ? messages.enabled : messages.disabled)}
+ {intl.formatMessage(messages.publicUnlistedVisibility)}:
-
- {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;
+ }
+ }
}