From 25ffe0af453cfdcad787913b57f217303bfa59a2 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 23 Feb 2024 16:32:13 +0100 Subject: [PATCH] Fix pixel alignment for some composer icons (#29372) --- .../features/compose/components/edit_indicator.jsx | 6 +++--- .../compose/components/emoji_picker_dropdown.jsx | 2 +- .../compose/components/language_dropdown.jsx | 6 +++--- .../features/compose/components/navigation_bar.jsx | 2 +- .../features/compose/components/poll_button.jsx | 2 +- .../mastodon/features/compose/components/upload.jsx | 2 +- .../features/compose/components/upload_button.jsx | 2 +- .../compose/containers/spoiler_button_container.js | 2 +- .../400-20px/bar_chart_4_bars-fill.svg | 1 + .../material-icons/400-20px/bar_chart_4_bars.svg | 1 + .../material-icons/400-20px/close-fill.svg | 1 + app/javascript/material-icons/400-20px/close.svg | 1 + app/javascript/material-icons/400-20px/mood-fill.svg | 1 + app/javascript/material-icons/400-20px/mood.svg | 1 + .../material-icons/400-20px/photo_library-fill.svg | 1 + .../material-icons/400-20px/photo_library.svg | 1 + .../material-icons/400-20px/warning-fill.svg | 1 + app/javascript/material-icons/400-20px/warning.svg | 1 + app/javascript/material-icons/400-24px/mood-fill.svg | 1 - app/javascript/material-icons/400-24px/mood.svg | 1 - app/javascript/styles/mastodon/components.scss | 12 ++++++------ 21 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 app/javascript/material-icons/400-20px/bar_chart_4_bars-fill.svg create mode 100644 app/javascript/material-icons/400-20px/bar_chart_4_bars.svg create mode 100644 app/javascript/material-icons/400-20px/close-fill.svg create mode 100644 app/javascript/material-icons/400-20px/close.svg create mode 100644 app/javascript/material-icons/400-20px/mood-fill.svg create mode 100644 app/javascript/material-icons/400-20px/mood.svg create mode 100644 app/javascript/material-icons/400-20px/photo_library-fill.svg create mode 100644 app/javascript/material-icons/400-20px/photo_library.svg create mode 100644 app/javascript/material-icons/400-20px/warning-fill.svg create mode 100644 app/javascript/material-icons/400-20px/warning.svg delete mode 100644 app/javascript/material-icons/400-24px/mood-fill.svg delete mode 100644 app/javascript/material-icons/400-24px/mood.svg diff --git a/app/javascript/mastodon/features/compose/components/edit_indicator.jsx b/app/javascript/mastodon/features/compose/components/edit_indicator.jsx index 6cdaaebea5f..cc37d2d7d81 100644 --- a/app/javascript/mastodon/features/compose/components/edit_indicator.jsx +++ b/app/javascript/mastodon/features/compose/components/edit_indicator.jsx @@ -6,9 +6,9 @@ import { Link } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import BarChart4BarsIcon from 'mastodon/../material-icons/400-24px/bar_chart_4_bars.svg?react'; -import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react'; -import PhotoLibraryIcon from 'mastodon/../material-icons/400-24px/photo_library.svg?react'; +import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react'; +import CloseIcon from '@/material-icons/400-24px/close.svg?react'; +import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react'; import { cancelReplyCompose } from 'mastodon/actions/compose'; import { Icon } from 'mastodon/components/icon'; import { IconButton } from 'mastodon/components/icon_button'; diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx index 37017f4cc32..acc3fd0ce51 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx @@ -10,7 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { supportsPassiveEvents } from 'detect-passive-events'; import Overlay from 'react-overlays/Overlay'; -import MoodIcon from 'mastodon/../material-icons/400-24px/mood.svg?react'; +import MoodIcon from '@/material-icons/400-20px/mood.svg?react'; import { IconButton } from 'mastodon/components/icon_button'; import { assetHost } from 'mastodon/utils/config'; diff --git a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx b/app/javascript/mastodon/features/compose/components/language_dropdown.jsx index 2783ca8be2a..85057799be2 100644 --- a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx +++ b/app/javascript/mastodon/features/compose/components/language_dropdown.jsx @@ -9,9 +9,9 @@ import { supportsPassiveEvents } from 'detect-passive-events'; import fuzzysort from 'fuzzysort'; import Overlay from 'react-overlays/Overlay'; -import CancelIcon from 'mastodon/../material-icons/400-24px/cancel-fill.svg?react'; -import SearchIcon from 'mastodon/../material-icons/400-24px/search.svg?react'; -import TranslateIcon from 'mastodon/../material-icons/400-24px/translate.svg?react'; +import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react'; +import SearchIcon from '@/material-icons/400-24px/search.svg?react'; +import TranslateIcon from '@/material-icons/400-24px/translate.svg?react'; import { Icon } from 'mastodon/components/icon'; import { languages as preloadedLanguages } from 'mastodon/initial_state'; diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx index ebf59e4c838..ec5578eef3c 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx @@ -4,7 +4,7 @@ import { useIntl, defineMessages } from 'react-intl'; import { useSelector, useDispatch } from 'react-redux'; -import CloseIcon from 'mastodon/../material-icons/400-24px/close.svg?react'; +import CloseIcon from '@/material-icons/400-24px/close.svg?react'; import { cancelReplyCompose } from 'mastodon/actions/compose'; import Account from 'mastodon/components/account'; import { IconButton } from 'mastodon/components/icon_button'; diff --git a/app/javascript/mastodon/features/compose/components/poll_button.jsx b/app/javascript/mastodon/features/compose/components/poll_button.jsx index 345497abd32..cbaa25cb3c2 100644 --- a/app/javascript/mastodon/features/compose/components/poll_button.jsx +++ b/app/javascript/mastodon/features/compose/components/poll_button.jsx @@ -3,7 +3,7 @@ import { PureComponent } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; -import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react'; +import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react'; import { IconButton } from '../../../components/icon_button'; diff --git a/app/javascript/mastodon/features/compose/components/upload.jsx b/app/javascript/mastodon/features/compose/components/upload.jsx index 861232d0ecb..e8045ae81fb 100644 --- a/app/javascript/mastodon/features/compose/components/upload.jsx +++ b/app/javascript/mastodon/features/compose/components/upload.jsx @@ -9,7 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import spring from 'react-motion/lib/spring'; -import CloseIcon from '@/material-icons/400-24px/close.svg?react'; +import CloseIcon from '@/material-icons/400-20px/close.svg?react'; import EditIcon from '@/material-icons/400-24px/edit.svg?react'; import WarningIcon from '@/material-icons/400-24px/warning.svg?react'; import { Blurhash } from 'mastodon/components/blurhash'; diff --git a/app/javascript/mastodon/features/compose/components/upload_button.jsx b/app/javascript/mastodon/features/compose/components/upload_button.jsx index 50c9ad6321a..20fb20f0920 100644 --- a/app/javascript/mastodon/features/compose/components/upload_button.jsx +++ b/app/javascript/mastodon/features/compose/components/upload_button.jsx @@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; -import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react'; +import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react'; import { IconButton } from 'mastodon/components/icon_button'; const messages = defineMessages({ diff --git a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js index a2414177356..9acc43437be 100644 --- a/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/spoiler_button_container.js @@ -2,7 +2,7 @@ import { injectIntl, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; -import WarningIcon from 'mastodon/../material-icons/400-24px/warning.svg?react'; +import WarningIcon from '@/material-icons/400-20px/warning.svg?react'; import { IconButton } from 'mastodon/components/icon_button'; import { changeComposeSpoilerness } from '../../../actions/compose'; diff --git a/app/javascript/material-icons/400-20px/bar_chart_4_bars-fill.svg b/app/javascript/material-icons/400-20px/bar_chart_4_bars-fill.svg new file mode 100644 index 00000000000..78ce1472728 --- /dev/null +++ b/app/javascript/material-icons/400-20px/bar_chart_4_bars-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/bar_chart_4_bars.svg b/app/javascript/material-icons/400-20px/bar_chart_4_bars.svg new file mode 100644 index 00000000000..78ce1472728 --- /dev/null +++ b/app/javascript/material-icons/400-20px/bar_chart_4_bars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/close-fill.svg b/app/javascript/material-icons/400-20px/close-fill.svg new file mode 100644 index 00000000000..46d8afd7e19 --- /dev/null +++ b/app/javascript/material-icons/400-20px/close-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/close.svg b/app/javascript/material-icons/400-20px/close.svg new file mode 100644 index 00000000000..46d8afd7e19 --- /dev/null +++ b/app/javascript/material-icons/400-20px/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/mood-fill.svg b/app/javascript/material-icons/400-20px/mood-fill.svg new file mode 100644 index 00000000000..ef72aeef6e8 --- /dev/null +++ b/app/javascript/material-icons/400-20px/mood-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/mood.svg b/app/javascript/material-icons/400-20px/mood.svg new file mode 100644 index 00000000000..abb44c46633 --- /dev/null +++ b/app/javascript/material-icons/400-20px/mood.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/photo_library-fill.svg b/app/javascript/material-icons/400-20px/photo_library-fill.svg new file mode 100644 index 00000000000..5f5e39fbf97 --- /dev/null +++ b/app/javascript/material-icons/400-20px/photo_library-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/photo_library.svg b/app/javascript/material-icons/400-20px/photo_library.svg new file mode 100644 index 00000000000..5804edb01c2 --- /dev/null +++ b/app/javascript/material-icons/400-20px/photo_library.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/warning-fill.svg b/app/javascript/material-icons/400-20px/warning-fill.svg new file mode 100644 index 00000000000..85dd926d393 --- /dev/null +++ b/app/javascript/material-icons/400-20px/warning-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-20px/warning.svg b/app/javascript/material-icons/400-20px/warning.svg new file mode 100644 index 00000000000..d7d45a32112 --- /dev/null +++ b/app/javascript/material-icons/400-20px/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/mood-fill.svg b/app/javascript/material-icons/400-24px/mood-fill.svg deleted file mode 100644 index 9480d0fb92a..00000000000 --- a/app/javascript/material-icons/400-24px/mood-fill.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/mood.svg b/app/javascript/material-icons/400-24px/mood.svg deleted file mode 100644 index 46cafa76808..00000000000 --- a/app/javascript/material-icons/400-24px/mood.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 50b5de35dfb..2e5db497db3 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -669,12 +669,12 @@ body > [data-popper-placement] { } .icon-button.compose-form__upload__delete { - padding: 3px; + padding: 2px; border-radius: 50%; .icon { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } } @@ -720,12 +720,12 @@ body > [data-popper-placement] { } .icon-button { - padding: 3px; + padding: 2px; } .icon-button .icon { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } }