From fa7e64df1de13b361551b0ff8f81335719c1a4a2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 27 Oct 2023 01:37:58 +0200 Subject: [PATCH] Fix various icon styles in web UI (#27579) --- .../features/account/components/header.jsx | 6 ++--- .../mastodon/features/audio/index.jsx | 6 ++--- .../features/status/components/card.jsx | 4 ++-- .../mastodon/features/video/index.jsx | 6 ++--- .../styles/mastodon/components.scss | 22 ++++++++++++++++++- 5 files changed, 32 insertions(+), 12 deletions(-) diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index 3ecfb8a2b..76074225a 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -12,8 +12,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg'; import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg'; import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; -import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg'; -import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active.svg'; +import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg'; +import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active-fill.svg'; import { Avatar } from 'mastodon/components/avatar'; import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge'; @@ -264,7 +264,7 @@ class Header extends ImmutablePureComponent { } if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { - bellBtn = ; + bellBtn = ; } if (me !== account.get('id')) { diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index 60d599b97..7a7d0910f 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/app/javascript/mastodon/features/audio/index.jsx @@ -9,10 +9,10 @@ import { is } from 'immutable'; import { ReactComponent as DownloadIcon } from '@material-symbols/svg-600/outlined/download.svg'; import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg'; -import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg'; +import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg'; import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg'; -import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg'; -import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up.svg'; +import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off-fill.svg'; +import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up-fill.svg'; import { throttle, debounce } from 'lodash'; import { Icon } from 'mastodon/components/icon'; diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx index 684c599ad..d7d688952 100644 --- a/app/javascript/mastodon/features/status/components/card.jsx +++ b/app/javascript/mastodon/features/status/components/card.jsx @@ -10,9 +10,9 @@ import classNames from 'classnames'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description.svg'; +import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description-fill.svg'; import { ReactComponent as OpenInNewIcon } from '@material-symbols/svg-600/outlined/open_in_new.svg'; -import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg'; +import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg'; import { Blurhash } from 'mastodon/components/blurhash'; import { Icon } from 'mastodon/components/icon'; diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx index c04d9e3d4..05b1316fd 100644 --- a/app/javascript/mastodon/features/video/index.jsx +++ b/app/javascript/mastodon/features/video/index.jsx @@ -10,11 +10,11 @@ import { is } from 'immutable'; import { ReactComponent as FullscreenIcon } from '@material-symbols/svg-600/outlined/fullscreen.svg'; import { ReactComponent as FullscreenExitIcon } from '@material-symbols/svg-600/outlined/fullscreen_exit.svg'; import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg'; -import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg'; +import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg'; import { ReactComponent as RectangleIcon } from '@material-symbols/svg-600/outlined/rectangle.svg'; import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg'; -import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg'; -import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up.svg'; +import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off-fill.svg'; +import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up-fill.svg'; import { throttle } from 'lodash'; import { Blurhash } from 'mastodon/components/blurhash'; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 417f262a2..b8e6af0aa 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7434,7 +7434,12 @@ noscript { border: 1px solid lighten($ui-base-color, 12%); border-radius: 4px; box-sizing: content-box; - padding: 2px; + padding: 5px; + + .icon { + width: 24px; + height: 24px; + } } } @@ -7517,6 +7522,11 @@ noscript { color: lighten($ui-highlight-color, 8%); } + .icon { + width: 18px; + height: 18px; + } + .verified { border: 1px solid rgba($valid-value-color, 0.5); margin-top: -1px; @@ -7537,6 +7547,16 @@ noscript { color: $valid-value-color; } + dd { + display: flex; + align-items: center; + gap: 4px; + + span { + display: flex; + } + } + a { color: $valid-value-color; }