Fix pixel alignment for some composer icons (#29372)

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';

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';
 

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';
 

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';

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';
 

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';

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({

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';

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;
     }
   }