[bugfix] only play animations when prefers-reduced-motion: no-preference

this can be generalised further i think but for now it does what i need it to do.

CHANGELOG.md

@@ -11,30 +11,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added documentation for `yarn dev` (#75)
 - Added an .editorconfig (#78)
-- Added a CHANGELOG.md basaed on “Keep a Changelog” (#80)
+- Added a changelog basaed on “Keep a Changelog” (#80)
 
 ### Changed
 
 - Preserve ‘mastodon-settings’ in localStorage (#66)
 - Redesigned the login page (#76)
-- Changed all icons to the Phosphor icon set (#77)
-- Changed AUTHORS.md to reflect fork contributors (#89)
+- Changed all icons with the Phosphor icon set (#77)
 
 ### Fixed
 
 - Updated caniuse-lite browserlist (#82)
 - Fixed various linter issues (#85)
-- Fixed various CSS issues (#100)
 - Updated Prettier to 3.6.2 (#86)
-- Updated Yarn to 4.10.3 (#90)
-- Updated Webpack to 5.102.1 (#83)
-- Updated ESlint to 9.37.0 (#88)
-
-### Removed
-
-- Removed FontAwesome (#99)
-- Removed unused CSS files (#99)
-- Removed various unused assets
 
 ## [0.5.0] - 2025-07-14
 

app/javascript/flavours/glitch/components/column_back_button.jsx

@@ -32,7 +32,7 @@ export default class ColumnBackButton extends PureComponent {
 
     const component = (
       <button onClick={this.handleClick} className='column-back-button'>
-        <Icon id='arrow-left' className='column-back-button__icon' />
+        <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
         <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
       </button>
     );

app/javascript/flavours/glitch/components/column_back_button_slim.jsx

@@ -27,7 +27,7 @@ export default class ColumnBackButtonSlim extends PureComponent {
     return (
       <div className='column-back-button--slim'>
         <div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
-          <Icon id='arrow-left' className='column-back-button__icon' />
+          <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </div>
       </div>

app/javascript/flavours/glitch/components/column_header.jsx

@@ -133,7 +133,7 @@ class ColumnHeader extends PureComponent {
     if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
-          <Icon id='arrow-left' className='column-back-button__icon' />
+          <Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
           <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
         </button>
       );
@@ -176,7 +176,7 @@ class ColumnHeader extends PureComponent {
         <h1 className={buttonClassName}>
           {hasTitle && (
             <button onClick={this.handleTitleClick}>
-              <Icon id={icon} className='column-header__icon' />
+              <Icon id={icon} fixedWidth className='column-header__icon' />
               {title}
             </button>
           )}

app/javascript/flavours/glitch/components/display_name.tsx

@@ -1,13 +1,10 @@
-import PropTypes from "prop-types";
 import React from "react";
 
 import classNames from "classnames";
 
-import ImmutablePropTypes from "react-immutable-proptypes";
+import  { type List } from "immutable";
 
-import { type List } from "immutable";
-
-import { type Account } from "flavours/glitch/types/resources";
+import  { type Account } from "flavours/glitch/types/resources";
 
 import { autoPlayGif } from "../initial_state";
 
@@ -18,15 +15,9 @@ interface Props {
   others?: List<Account>,
   localDomain?: string,
   inline?: boolean,
-  nameLayout?: string,
 }
 
 export class DisplayName extends React.PureComponent<Props> {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    nameLayout: ImmutablePropTypes.map.isRequired,
-  };
-
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,
   }) => {
@@ -64,7 +55,7 @@ export class DisplayName extends React.PureComponent<Props> {
   };
 
   render() {
-    const { others, localDomain, inline, nameLayout } = this.props;
+    const { others, localDomain, inline } = this.props;
 
     let displayName: React.ReactNode,
       suffix: React.ReactNode,
@@ -82,7 +73,7 @@ export class DisplayName extends React.PureComponent<Props> {
         .map((a) => (
           <bdi key={a.get("id")}>
             <strong
-              className="display-name__html"
+              className='display-name__html'
               dangerouslySetInnerHTML={{ __html: a.get("display_name_html") }}
             />
           </bdi>
@@ -102,39 +93,39 @@ export class DisplayName extends React.PureComponent<Props> {
       displayName = (
         <bdi>
           <strong
-            className="display-name__html"
+            className='display-name__html'
             dangerouslySetInnerHTML={{
               __html: account.get("display_name_html"),
             }}
           />
         </bdi>
       );
-      suffix = <span className="display-name__account">@{acct}</span>;
+      suffix = <span className='display-name__account'>@{acct}</span>;
     } else {
       displayName = (
         <bdi>
-          <strong className="display-name__html">
-            <Skeleton width="10ch" />
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
           </strong>
         </bdi>
       );
       suffix = (
-        <span className="display-name__account">
-          <Skeleton width="7ch" />
+        <span className='display-name__account'>
+          <Skeleton width='7ch' />
         </span>
       );
     }
 
     return (
-      <div
-        className={classNames("display-name", { inline }, nameLayout)}
+      <span
+        className={classNames("display-name", { inline })}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
         {displayName}
         {inline ? " " : null}
         {suffix}
-      </div>
+      </span>
     );
   }
 }

app/javascript/flavours/glitch/components/icon.tsx

@@ -5,10 +5,17 @@ import classNames from "classnames";
 interface Props extends React.HTMLAttributes<HTMLImageElement> {
   id: string,
   className?: string,
+  fixedWidth?: boolean,
   children?: never,
 }
 
-export const Icon: React.FC<Props> = ({ id, className, title, ...other }) => (
+export const Icon: React.FC<Props> = ({
+  id,
+  className,
+  fixedWidth,
+  title,
+  ...other
+}) => (
   <svg className={classNames("gts-icon", className)} {...other}>
     {title && <title>{title}</title>}
     <use href={`/icons.svg#${id}`} />

app/javascript/flavours/glitch/components/icon_with_badge.tsx

@@ -16,11 +16,11 @@ export const IconWithBadge: React.FC<Props> = ({
   issueBadge,
   className,
 }) => (
-  <div className="gts-icon-with-badge">
-    <Icon id={id} className={className} />
+  <div className='gts-icon-with-badge'>
+    <Icon id={id} fixedWidth className={className} />
     {count > 0 && (
-      <span className="gts-icon-with-badge__badge">{formatNumber(count)}</span>
+      <span className='gts-icon-with-badge__badge'>{formatNumber(count)}</span>
     )}
-    {issueBadge && <div className="gts-icon-with-badge__issue-badge" />}
+    {issueBadge && <div className='gts-icon-with-badge__issue-badge' />}
   </div>
 );

app/javascript/flavours/glitch/components/status.jsx

@@ -826,7 +826,6 @@ class Status extends ImmutablePureComponent {
                 friend={account}
                 collapsed={isCollapsed}
                 parseClick={parseClick}
-                settings={settings}
               />
             ) : null}
             <StatusIcons

app/javascript/flavours/glitch/components/status_content.jsx

@@ -329,6 +329,7 @@ class StatusContent extends PureComponent {
           mediaIcons.forEach((mediaIcon, idx) => {
             toggleText.push(
               <Icon
+                fixedWidth
                 className='status__content__spoiler-icon'
                 id={mediaIcon}
                 aria-hidden='true'

app/javascript/flavours/glitch/components/status_header.jsx

@@ -15,7 +15,6 @@ export default class StatusHeader extends PureComponent {
     status: ImmutablePropTypes.map.isRequired,
     friend: ImmutablePropTypes.map,
     parseClick: PropTypes.func.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
   };
 
   //  Handles clicks on account name/image
@@ -34,7 +33,6 @@ export default class StatusHeader extends PureComponent {
     const {
       status,
       friend,
-      settings,
     } = this.props;
 
     const account = status.get("account");
@@ -64,7 +62,7 @@ export default class StatusHeader extends PureComponent {
           onClick={this.handleAccountClick}
           rel='noopener noreferrer'
         >
-          <DisplayName account={account} nameLayout={settings.get("name_layout")} />
+          <DisplayName account={account} />
         </a>
       </div>
     );

app/javascript/flavours/glitch/components/status_icons.jsx

@@ -86,6 +86,7 @@ class StatusIcons extends PureComponent {
   renderIcon (mediaIcon) {
     return (
       <Icon
+        fixedWidth
         className='status__media-icon'
         key={`media-icon--${mediaIcon}`}
         id={mediaIcon}
@@ -112,6 +113,7 @@ class StatusIcons extends PureComponent {
         {settings.get("reply") && status.get("in_reply_to_id", null) !== null ? (
           <Icon
             className='status__reply-icon'
+            fixedWidth
             id='arrow-bend-double-up-left'
             aria-hidden='true'
             title={intl.formatMessage(messages.inReplyTo)}
@@ -119,6 +121,7 @@ class StatusIcons extends PureComponent {
         ) : null}
         {settings.get("local_only") && status.get("local_only") &&
           <Icon
+            fixedWidth
             id='house-line'
             aria-hidden='true'
             title={intl.formatMessage(messages.localOnly)}

app/javascript/flavours/glitch/components/status_visibility_icon.jsx

@@ -36,6 +36,7 @@ class VisibilityIcon extends ImmutablePureComponent {
 
     const icon = (<Icon
       className='status__visibility-icon'
+      fixedWidth
       id={visibilityIcon}
       title={label}
       aria-hidden='true'

app/javascript/flavours/glitch/features/about/index.jsx

@@ -72,7 +72,7 @@ class Section extends PureComponent {
     return (
       <div className={classNames("about__section", { active: !collapsed })}>
         <div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
-          <Icon id={collapsed ? "caret-right" : "caret-down"} /> {title}
+          <Icon id={collapsed ? "caret-right" : "caret-down"} fixedWidth /> {title}
         </div>
 
         {!collapsed && (

app/javascript/flavours/glitch/features/account/components/action_bar.jsx

@@ -28,7 +28,7 @@ class ActionBar extends PureComponent {
       return (
         <div>
           <div className='account__disclaimer'>
-            <Icon id='info' />
+            <Icon id='info' fixedWidth />
             <FormattedMessage
               id='account.suspended_disclaimer_full'
               defaultMessage='This user has been suspended by a moderator.'
@@ -43,7 +43,7 @@ class ActionBar extends PureComponent {
     if (account.get("acct") !== account.get("username")) {
       extraInfo = (
         <div className='account__disclaimer'>
-          <Icon id='info' />
+          <Icon id='info' fixedWidth />
           <FormattedMessage
             id='account.disclaimer_full'
             defaultMessage="Information below may reflect the user's profile incompletely."

app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx

@@ -22,12 +22,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
 
         <div className='follow-request-banner__action'>
           <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
-            <Icon id='check' />
+            <Icon id='check' fixedWidth />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
           <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
-            <Icon id='x' />
+            <Icon id='x' fixedWidth />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>
         </div>

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -37,7 +37,7 @@ export default class MovedNote extends ImmutablePureComponent {
     return (
       <div className='account__moved-note'>
         <div className='account__moved-note__message'>
-          <div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' /></div>
+          <div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' fixedWidth /></div>
           <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
         </div>
 

app/javascript/flavours/glitch/features/audio/index.jsx

@@ -564,8 +564,8 @@ class Audio extends PureComponent {
         <div className='video-player__controls active'>
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth /></button>
 
               <div className={classNames("video-player__volume", { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                 <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@@ -585,9 +585,9 @@ class Audio extends PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' /></button>}
+              {!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
               <a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
-                <Icon id={"file-arrow-down"} />
+                <Icon id={"file-arrow-down"} fixedWidth />
               </a>
             </div>
           </div>

app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx

@@ -155,7 +155,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
     if (!contents) {
       contents = (
         <>
-          {icon && <Icon className='icon' id={icon} />}
+          {icon && <Icon className='icon' fixedWidth id={icon} />}
 
           <div className='privacy-dropdown__option__content'>
             <strong>{text}</strong>

app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx

@@ -393,6 +393,7 @@ class EmojiPickerDropdown extends PureComponent {
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
         <button ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} onClick={this.onToggle} onKeyDown={this.onToggle}>
           {button || <Icon 
+            fixedWidth
             id='smiley'
             aria-hidden='true'
             className={classNames("emojione", { "pulse-loading": active && loading })}

app/javascript/flavours/glitch/features/compose/components/header.jsx

@@ -80,7 +80,7 @@ class Header extends ImmutablePureComponent {
           title={intl.formatMessage(messages.start)}
           to='/getting-started'
           className='drawer__tab'
-        ><Icon id='gts-simple' /></Link>
+        ><Icon id='asterisk' /></Link>
         {renderForColumn("HOME", (
           <Link
             aria-label={intl.formatMessage(messages.home_timeline)}

app/javascript/flavours/glitch/features/compose/components/publisher.jsx

@@ -62,10 +62,9 @@ class Publisher extends ImmutablePureComponent {
     } else if (privacy === "private" || privacy === "direct") {
       const iconId = privacyIcons[privacy];
       publishText = (
-        <>
-          <Icon id={iconId} />
-          <span>{intl.formatMessage(messages.publish)}</span>
-        </>
+        <span>
+          <Icon id={iconId} /> {intl.formatMessage(messages.publish)}
+        </span>
       );
     } else {
       publishText = privacy !== "unlisted" ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
@@ -81,22 +80,26 @@ class Publisher extends ImmutablePureComponent {
     return (
       <div className={computedClass}>
         {sideArm && !isEditing && sideArm !== "none" ? (
-          <Button
-            className='side_arm'
-            disabled={disabled}
-            onClick={onSecondarySubmit}
-            style={{ padding: null }}
-            text={<Icon id={privacyIcons[sideArm]} />}
-            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
-          />
+          <div className='compose-form__publish-button-wrapper'>
+            <Button
+              className='side_arm'
+              disabled={disabled}
+              onClick={onSecondarySubmit}
+              style={{ padding: null }}
+              text={<Icon id={privacyIcons[sideArm]} />}
+              title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
+            />
+          </div>
         ) : null}
-        <Button
-          className='primary'
-          text={publishText}
-          title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
-          onClick={this.handleSubmit}
-          disabled={disabled}
-        />
+        <div className='compose-form__publish-button-wrapper'>
+          <Button
+            className='primary'
+            text={publishText}
+            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
+            onClick={this.handleSubmit}
+            disabled={disabled}
+          />
+        </div>
       </div>
     );
   }

app/javascript/flavours/glitch/features/compose/components/search_results.jsx

@@ -43,7 +43,7 @@ class SearchResults extends ImmutablePureComponent {
 
     if (results.get("accounts") && results.get("accounts").size > 0) {
       accounts = (
-        <SearchSection title={<><Icon id='users' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
+        <SearchSection title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
           {withoutLastResult(results.get("accounts")).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
           {(results.get("accounts").size > INITIAL_PAGE_LIMIT && results.get("accounts").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
         </SearchSection>
@@ -52,7 +52,7 @@ class SearchResults extends ImmutablePureComponent {
 
     if (results.get("hashtags") && results.get("hashtags").size > 0) {
       hashtags = (
-        <SearchSection title={<><Icon id='tag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
+        <SearchSection title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
           {withoutLastResult(results.get("hashtags")).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
           {(results.get("hashtags").size > INITIAL_PAGE_LIMIT && results.get("hashtags").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
         </SearchSection>
@@ -61,7 +61,7 @@ class SearchResults extends ImmutablePureComponent {
 
     if (results.get("statuses") && results.get("statuses").size > 0) {
       statuses = (
-        <SearchSection title={<><Icon id='chat-circle-dots' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
+        <SearchSection title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
           {withoutLastResult(results.get("statuses")).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
           {(results.get("statuses").size > INITIAL_PAGE_LIMIT && results.get("statuses").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
         </SearchSection>
@@ -71,7 +71,7 @@ class SearchResults extends ImmutablePureComponent {
     return (
       <div className='drawer--results'>
         <header className='search-results__header'>
-          <Icon id='magnifying-glass' />
+          <Icon id='magnifying-glass' fixedWidth />
           <FormattedMessage id='explore.search_results' defaultMessage='Search results' />
         </header>
 

app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx

@@ -46,6 +46,7 @@ class TextareaIcons extends ImmutablePureComponent {
               title={intl.formatMessage(message)}
             >
               <Icon
+                fixedWidth
                 id={icon}
               />
             </span>

app/javascript/flavours/glitch/features/explore/results.jsx

@@ -165,19 +165,19 @@ class Results extends PureComponent {
         filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
           <>
             {accounts.size > 0 && (
-              <SearchSection key='accounts' title={<><Icon id='users' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
+              <SearchSection key='accounts' title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
                 {accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
               </SearchSection>
             )}
 
             {hashtags.size > 0 && (
-              <SearchSection key='hashtags' title={<><Icon id='tag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
+              <SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
                 {hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
               </SearchSection>
             )}
 
             {statuses.size > 0 && (
-              <SearchSection key='statuses' title={<><Icon id='chat-circle-dots' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
+              <SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
                 {statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
               </SearchSection>
             )}

app/javascript/flavours/glitch/features/filters/select_filter.jsx

@@ -78,7 +78,7 @@ class SelectFilter extends PureComponent {
   renderCreateNew (name) {
     return (
       <div key='add-new-filter' role='button' tabIndex={0} className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}>
-        <Icon id='plus' /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
+        <Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
       </div>
     );
   }

app/javascript/flavours/glitch/features/list_adder/components/list.jsx

@@ -55,7 +55,7 @@ class List extends ImmutablePureComponent {
       <div className='list'>
         <div className='list__wrapper'>
           <div className='list__display-name'>
-            <Icon id='dot' className='column-link__icon' />
+            <Icon id='dot' className='column-link__icon' fixedWidth />
             {list.get("title")}
           </div>
 

app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx

@@ -45,7 +45,7 @@ export default class LocalSettingsPage extends PureComponent {
       active,
     }, className);
 
-    const iconElem = icon ? <Icon id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
+    const iconElem = icon ? <Icon fixedWidth id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
 
     if (href) {
       return (

app/javascript/flavours/glitch/features/local_settings/page/index.jsx

@@ -33,10 +33,6 @@ const messages = defineMessages({
   unlisted: { id: "privacy.unlisted.short", defaultMessage: "Unlisted" },
   private: { id: "privacy.private.short", defaultMessage: "Followers only" },
   direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
-  namelayout_display: { id: "namelayout.display", defaultMessage: "Display name" },
-  namelayout_handle: { id: "namelayout.handle", defaultMessage: "Handle" },
-  namelayout_both_y: { id: "namelayout.both.vertical", defaultMessage: "Both (Vertical)" },
-  namelayout_both_x: { id: "namelayout.both.horizontal", defaultMessage: "Both (Horizontal)" },
 });
 
 class LocalSettingsPage extends PureComponent {
@@ -202,22 +198,6 @@ class LocalSettingsPage extends PureComponent {
             <span className='hint'><FormattedMessage id='settings.wide_view_hint' defaultMessage='Stretches columns to better fill the available space.' /></span>
           </LocalSettingsPageItem>
         </section>
-        <section>
-          <h2><FormattedMessage id='settings.name_layout' defaultMessage='Name layout' /></h2>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={["name_layout"]}
-            id='mastodon-settings--status-username-inline'
-            onChange={onChange}
-            options={[
-              { value: "display", message: intl.formatMessage(messages.namelayout_display) },
-              { value: "handle", message: intl.formatMessage(messages.namelayout_handle) },
-              { value: "both_y", message: intl.formatMessage(messages.namelayout_both_y) },
-              { value: "both_x", message: intl.formatMessage(messages.namelayout_both_x) },
-            ]}
-          >
-          </LocalSettingsPageItem>
-        </section>
       </div>
     ),
     ({ intl, onChange, settings }) => (

app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx

@@ -95,7 +95,7 @@ export default class AdminReport extends ImmutablePureComponent {
         <div className={classNames("notification notification-admin-report focusable", { unread })} tabIndex={0}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='flag' />
+              <Icon id='flag' fixedWidth />
             </div>
 
             <span title={notification.get("created_at")}>

app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx

@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
         <div className={classNames("notification notification-admin-sign-up focusable", { unread })} tabIndex={0}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user-plus' />
+              <Icon fixedWidth id='user-plus' />
             </div>
 
             <FormattedMessage

app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx

@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
           onClick={this.onClick("mention")}
           title={intl.formatMessage(tooltips.mentions)}
         >
-          <Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} />
+          <Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "favourite" ? "active" : ""}
           onClick={this.onClick("favourite")}
           title={intl.formatMessage(tooltips.favourites)}
         >
-          <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} />
+          <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "reblog" ? "active" : ""}
           onClick={this.onClick("reblog")}
           title={intl.formatMessage(tooltips.boosts)}
         >
-          <Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} />
+          <Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "poll" ? "active" : ""}
           onClick={this.onClick("poll")}
           title={intl.formatMessage(tooltips.polls)}
         >
-          <Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} />
+          <Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "status" ? "active" : ""}
           onClick={this.onClick("status")}
           title={intl.formatMessage(tooltips.statuses)}
         >
-          <Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} />
+          <Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} fixedWidth />
         </button>
         <button
           className={selectedFilter === "follow" ? "active" : ""}
           onClick={this.onClick("follow")}
           title={intl.formatMessage(tooltips.follows)}
         >
-          <Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} />
+          <Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
         </button>
       </div>
     );

app/javascript/flavours/glitch/features/notifications/components/follow.jsx

@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
         <div className={classNames("notification notification-follow focusable", { unread })} tabIndex={0}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user-plus' />
+              <Icon fixedWidth id='user-plus' />
             </div>
 
             <FormattedMessage

app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx

@@ -103,7 +103,7 @@ class FollowRequest extends ImmutablePureComponent {
         <div className={classNames("notification notification-follow-request focusable", { unread })} tabIndex={0}>
           <div className='notification__message'>
             <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user' />
+              <Icon id='user' fixedWidth />
             </div>
 
             <FormattedMessage

app/javascript/flavours/glitch/features/ui/components/column_header.jsx

@@ -24,7 +24,7 @@ export default class ColumnHeader extends PureComponent {
     let iconElement = "";
 
     if (icon) {
-      iconElement = <Icon id={icon} className='column-header__icon' />;
+      iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />;
     }
 
     return (

app/javascript/flavours/glitch/features/ui/components/column_link.jsx

@@ -8,7 +8,7 @@ import { Icon } from "flavours/glitch/components/icon";
 const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => {
   const className = classNames("column-link", { "column-link--transparent": transparent });
   const badgeElement = typeof badge !== "undefined" ? <span className='column-link__badge'>{badge}</span> : null;
-  const iconElement = typeof icon === "string" ? <Icon id={icon} className='column-link__icon' /> : icon;
+  const iconElement = typeof icon === "string" ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
 
   if (href) {
     return (

app/javascript/flavours/glitch/features/ui/components/media_modal.jsx

@@ -141,8 +141,8 @@ class MediaModal extends ImmutablePureComponent {
 
     const index = this.getIndex();
 
-    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' /></button>;
-    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' /></button>;
+    const leftNav  = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' fixedWidth /></button>;
+    const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' fixedWidth /></button>;
 
     const content = media.map((image) => {
       const width  = image.getIn(["meta", "original", "width"]) || null;

app/javascript/flavours/glitch/features/video/index.jsx

@@ -640,11 +640,11 @@ class Video extends PureComponent {
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
               <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}>
-                <Icon id={paused ? "play" : "pause"} />
+                <Icon id={paused ? "play" : "pause"} fixedWidth />
               </button>
               
               <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}>
-                <Icon id={muted ? "speaker-slash" : "speaker-high"} />
+                <Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
               </button>
 
               <div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
@@ -667,10 +667,10 @@ class Video extends PureComponent {
             </div>
 
             <div className='video-player__buttons right'>
-              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' /></button>}
-              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' /></button>}
-              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' /></button>}
-              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} /></button>
+              {(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' fixedWidth /></button>}
+              {(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' fixedWidth /></button>}
+              {onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' fixedWidth /></button>}
+              <button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} fixedWidth /></button>
             </div>
           </div>
         </div>

app/javascript/flavours/glitch/main.jsx

@@ -5,6 +5,7 @@ import Mastodon from "flavours/glitch/containers/mastodon";
 import { me } from "flavours/glitch/initial_state";
 import * as perf from "flavours/glitch/performance";
 import ready from "flavours/glitch/ready";
+import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
 import { store } from "flavours/glitch/store";
 
 /**
@@ -12,6 +13,7 @@ import { store } from "flavours/glitch/store";
  */
 function main() {
   perf.start("main()");
+  setReducedMotionBodyClass();
 
   return ready(async () => {
     const mountNode = document.getElementById("mastodon");

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -29,7 +29,7 @@ const initialState = ImmutableMap({
     shared_state : true,
   }),
   collapsed : ImmutableMap({
-    enabled     : false,
+    enabled     : true,
     auto        : ImmutableMap({
       all              : false,
       notifications    : false,
@@ -53,7 +53,6 @@ const initialState = ImmutableMap({
     pop_in_player    : true,
     pop_in_position  : "right",
   }),
-  name_layout : "both_y",
   notifications : ImmutableMap({
     favicon_badge : false,
     tab_badge     : true,

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -43,9 +43,9 @@
 
 @mixin fullwidth-gallery {
   &.full-width {
-    margin-left: -15px;
-    margin-right: -15px;
-    width: calc(100% + 30px);
+    margin-left: -10px;
+    margin-right: -10px;
+    width: calc(100% + 20px);
     max-width: none;
     border-radius: 0;
   }

app/javascript/flavours/glitch/styles/accessibility.scss

@@ -16,21 +16,23 @@ $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
 }
 
 .hicolor-privacy-icons {
-  :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="planet"] {
+  .status__visibility-icon.fa-globe,
+  .privacy-dropdown__option .fa-globe {
     color: #1976d2;
   }
 
-  :is(.status__visibility-icon, .privacy-dropdown__option)
-    use[href*="lock-open-simple"] {
+  .status__visibility-icon.fa-unlock,
+  .privacy-dropdown__option .fa-unlock {
     color: #388e3c;
   }
 
-  :is(.status__visibility-icon, .privacy-dropdown__option)
-    use[href*="lock-simple"] {
+  .status__visibility-icon.fa-lock,
+  .privacy-dropdown__option .fa-lock {
     color: #ffa000;
   }
 
-  :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="#at"] {
+  .status__visibility-icon.fa-envelope,
+  .privacy-dropdown__option .fa-envelope {
     color: #d32f2f;
   }
 }

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -157,7 +157,7 @@
   }
 
   .gts-icon {
-    --size-icon: 20px;
+    --size: 20px;
 
     display: block;
   }
@@ -195,7 +195,7 @@
   }
 
   .gts-icon {
-    --size-icon: 16px;
+    --size: 16px;
 
     margin-inline-end: 5px;
     vertical-align: text-bottom;
@@ -370,7 +370,7 @@
   }
 
   svg.gts-icon {
-    --size-icon: 20px;
+    --size: 20px;
   }
 }
 
@@ -472,7 +472,7 @@
   }
 
   svg.gts-icon {
-    --size-icon: 20px;
+    --size: 20px;
 
     display: block;
   }
@@ -635,7 +635,7 @@
       }
 
       .gts-icon {
-        --size-icon: 24px;
+        --size: 24px;
 
         display: block;
       }
@@ -867,13 +867,18 @@
 }
 
 .follow-request-banner .button {
-  --size-icon: 20px;
-
   display: flex;
   align-items: center;
   gap: 5px;
   justify-content: center;
   width: 100%;
+
+  svg.gts-icon {
+    --size: 20px;
+
+    width: var(--size);
+    height: var(--size);
+  }
 }
 
 .account-memorial-banner__message {

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -335,8 +335,6 @@ $ui-header-height: 55px;
 .column-header__back-button,
 .column-header__footer-button,
 .column-header__setting-btn {
-  --size-icon: 24px;
-
   display: flex;
   border: 0;
   color: inherit;
@@ -345,6 +343,8 @@ $ui-header-height: 55px;
   transition: all 0.3s;
 
   .gts-icon {
+    --size: 24px;
+
     display: block;
   }
 }
@@ -355,7 +355,6 @@ $ui-header-height: 55px;
   align-items: center;
   flex-grow: 1;
   padding: 12px 0 13px 15px;
-  text-align: start;
 }
 
 .column-header__buttons {
@@ -405,14 +404,16 @@ $ui-header-height: 55px;
 
 .column-header__footer-button,
 .column-header__setting-btn {
-  --size-icon: 20px;
-
   gap: 5px;
   align-items: center;
   padding: 6px;
   border-radius: var(--button-border-radius);
   color: inherit;
 
+  .gts-icon {
+    --size: 20px;
+  }
+
   &:focus-visible,
   &:hover,
   &.active {
@@ -734,8 +735,6 @@ $ui-header-height: 55px;
 }
 
 .column-inline-form {
-  --size-icon: 20px;
-
   padding: 7px 15px;
   padding-inline-end: 5px;
   display: flex;
@@ -761,6 +760,10 @@ $ui-header-height: 55px;
     margin: 0 5px;
     padding: 6px;
   }
+
+  .gts-icon {
+    --size: 20px;
+  }
 }
 
 .column-settings__outer {
@@ -1051,8 +1054,6 @@ $ui-header-height: 55px;
   }
 
   &__action {
-    --size-icon: 20px;
-
     float: right;
 
     .icon-button {
@@ -1065,6 +1066,8 @@ $ui-header-height: 55px;
     }
 
     .gts-icon {
+      --size: 20px;
+
       display: block;
     }
   }

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -514,7 +514,7 @@
   }
 
   svg.gts-icon {
-    --size-icon: 20px;
+    --size: 20px;
 
     scale: 1.2;
   }
@@ -565,14 +565,16 @@
 }
 
 .privacy-dropdown__option {
-  --size-icon: 24px;
-
   display: flex;
   align-items: center;
   padding: 10px;
   color: $inverted-text-color;
   cursor: pointer;
 
+  svg.gts-icon {
+    --size: 24px;
+  }
+
   .privacy-dropdown__option__content {
     flex: 1 1 auto;
     color: $lighter-text-color;
@@ -609,22 +611,23 @@
 
 .compose-form__publish {
   display: flex;
-  column-gap: 5px;
-  flex: 0 0 auto;
   justify-content: flex-end;
-  margin-top: 10px;
   min-width: 0;
+  flex: 0 0 auto;
+  column-gap: 5px;
 
-  button {
-    --size-icon: 18px;
+  .compose-form__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
 
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 5px;
-    padding: 8px 12px;
-    line-height: 20px;
-    text-align: center;
+    button {
+      padding: 7px 10px;
+      text-align: center;
+    }
+
+    & > .side_arm {
+      width: 36px;
+    }
   }
 }
 

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -73,8 +73,6 @@
 }
 
 .layout-multiple-columns .drawer__tab {
-  --size-icon: 24px;
-
   display: flex;
   gap: 5px;
   align-items: center;
@@ -90,6 +88,8 @@
   transition: all 0.3s;
 
   .gts-icon {
+    --size: 24px;
+
     display: block;
   }
 
@@ -149,10 +149,12 @@
 }
 
 .navigation-bar .compose__action-bar button {
-  --size-icon: 20px;
-
   display: flex;
   padding: 6px;
+
+  svg.gts-icon {
+    --size: 20px;
+  }
 }
 
 .drawer--results {

app/javascript/flavours/glitch/styles/components/emoji.scss

@@ -77,8 +77,8 @@
   color: $inverted-text-color;
   background: transparent;
 
-  svg.gts-icon {
-    --size-icon: 24px;
+  svg {
+    --size: 24px;
 
     margin: 0;
   }

app/javascript/flavours/glitch/styles/components/media.scss

@@ -189,7 +189,7 @@
     color: rgba($white, 0.7);
 
     .gts-icon {
-      --size-icon: 24px;
+      --size: 24px;
 
       display: block;
     }
@@ -283,10 +283,12 @@
     padding: 20px 0;
 
     .icon-button {
-      --size-icon: 24px;
-
       color: $white;
 
+      .gts-icon {
+        --size: 24px;
+      }
+
       &:hover,
       &:focus,
       &:active {
@@ -569,14 +571,14 @@
   }
 
   &__buttons-bar {
-    --size-icon: 20px;
-
     display: flex;
     justify-content: space-between;
     padding-bottom: 8px;
     margin: 0 -5px;
 
     .gts-icon {
+      --size: 20px;
+
       display: block;
     }
 

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -1315,8 +1315,6 @@ button.icon-button.active i.fa-retweet {
 }
 
 .spoiler-button {
-  --size-icon: 18px;
-
   top: 0;
   inset-inline-start: 0;
   width: 100%;
@@ -1325,6 +1323,8 @@ button.icon-button.active i.fa-retweet {
   z-index: 100;
 
   svg.gts-icon {
+    --size: 18px;
+
     display: block;
   }
 

app/javascript/flavours/glitch/styles/components/modal.scss

@@ -1060,13 +1060,15 @@
   padding: 15px;
 
   .report-modal__close {
-    --size-icon: 20px;
-
     position: absolute;
     top: 10px;
     inset-inline-end: 10px;
     display: flex;
     padding: 6px;
+
+    svg.gts-icon {
+      --size: 20px;
+    }
   }
 }
 

app/javascript/flavours/glitch/styles/components/search.scss

@@ -4,7 +4,7 @@
 
 .search__icon,
 .search__icon.gts-icon {
-  --size-icon: 20px;
+  --size: 20px;
 
   position: absolute;
   top: 13px;
@@ -35,8 +35,6 @@
 }
 
 .search__button {
-  --size-icon: 20px;
-
   position: absolute;
   top: 7px;
   right: 7px;
@@ -50,6 +48,8 @@
   transition: all 0.3s;
 
   .gts-icon {
+    --size: 20px;
+
     display: block;
   }
 
@@ -154,11 +154,13 @@
 
 .search-results__header,
 .search-results__section__header h3 {
-  --size-icon: 20px;
-
   display: flex;
   gap: 5px;
   align-items: center;
+
+  .gts-icon {
+    --size: 20px;
+  }
 }
 
 .search-results__header {

app/javascript/flavours/glitch/styles/components/status.scss

@@ -89,6 +89,16 @@
       }
     }
 
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+
     .fa {
       color: $dark-text-color;
     }
@@ -399,11 +409,19 @@
 }
 
 .status__action-bar {
-  --size-icon: 20px;
-
   display: flex;
   gap: 10px;
   align-items: center;
+
+  svg.gts-icon {
+    --size: 20px;
+  }
+
+  &.detailed-status__action-bar {
+    svg.gts-icon {
+      --size: 24px;
+    }
+  }
 }
 
 .status__action-bar-button,
@@ -428,9 +446,9 @@
 }
 
 .detailed-status {
-  padding: 15px;
-  border-top: 1px solid lighten($ui-base-color, 8%);
   background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+  border-top: 1px solid lighten($ui-base-color, 8%);
 
   &--flex {
     display: flex;
@@ -561,8 +579,9 @@ a.status__display-name,
 
 .status__avatar {
   flex: none;
-  height: var(--size-avatar);
-  width: var(--size-avatar);
+  margin-inline-end: 10px;
+  height: 48px;
+  width: 48px;
 }
 
 .muted {

app/javascript/flavours/glitch/styles/gts.scss

@@ -2,8 +2,8 @@
 
 /* Variables */
 :root {
-  --drawer-border-radius: var(--size-layout-radius);
-  --button-border-radius: var(--size-ui-radius);
+  --drawer-border-radius: 8px;
+  --button-border-radius: 6px;
 }
 
 /* Icons debug */
@@ -13,10 +13,11 @@
 
 /* Diff */
 .gts-icon {
+  --size: 1em;
+
   display: inline-block;
-  flex-shrink: 0;
-  width: var(--size-icon);
-  height: var(--size-icon);
+  width: var(--size);
+  height: var(--size);
 }
 
 .gts-icon-with-badge {
@@ -58,7 +59,7 @@
 .column-header .gts-icon,
 .column-link .gts-icon,
 .local-settings__navigation__item .gts-icon {
-  --size-icon: 24px;
+  --size: 24px;
 }
 
 .navigation-panel {
@@ -93,9 +94,12 @@
   }
 }
 
-.notification__filter-bar svg.gts-icon,
-.status__info__icons svg.gts-icon {
-  --size-icon: 18px;
+.notification__filter-bar svg,
+.status__info__icons svg {
+  --size: 18px;
+
+  width: var(--size);
+  height: var(--size);
 }
 
 .detailed-status__meta {
@@ -117,25 +121,16 @@
 }
 
 .detailed-status__meta svg {
-  --size-icon: 16px;
+  --size: 16px;
+
+  width: var(--size);
+  height: var(--size);
 }
 
 .notification__favourite-icon-wrapper svg {
-  --size-icon: 16px;
+  --size: 16px;
 
+  width: var(--size);
+  height: var(--size);
   color: $highlight-text-color;
 }
-
-.drawer__pager {
-  flex-grow: unset;
-}
-
-.drawer__inner {
-  position: relative;
-  top: unset;
-}
-
-.drawer__inner__mastodon,
-.drawer__inner.darker {
-  display: none;
-}

app/javascript/flavours/glitch/styles/gts/colors.scss

@@ -6,7 +6,6 @@
     --color-fg: #fff;
     --color-bg: #191b22;
     --color-lines: #3d4455;
-    --color-logo: #c76c33;
 
     /* Accent */
     --color-accent: #8c8dff;

app/javascript/flavours/glitch/styles/gts/sizes.scss

@@ -1,14 +1,4 @@
 /* 📏 Sizes */
 :root {
-    /* Layout: larger elements, mostly containers */
     --size-layout-gap: 10px;
-    --size-layout-radius: 8px;
-
-    /* UI: smaller elements such as form elements and icons */
-    --size-ui-gap: 5px;
-    --size-ui-radius: 6px;
-
-    /* Components */
-    --size-avatar: 46px;
-    --size-icon: 20px;
 }

app/javascript/flavours/glitch/styles/gts/status.scss

@@ -30,19 +30,3 @@
 .status__action-bar :is(a, button) {
     color: var(--color-secondary-fg);
 }
-
-.status .mention,
-.status .mention:hover {
-    text-decoration: none;
-}
-
-.status .mention:is(:focus, :hover) span {
-    text-decoration-color: currentcolor;
-}
-
-.status .mention span {
-    text-decoration-line: underline;
-    text-decoration-color: var(--color-accent-lines);
-    text-decoration-thickness: 2px;
-    text-underline-offset: 2px;
-}

app/javascript/flavours/glitch/styles/gts/status/status-account.scss

@@ -2,7 +2,7 @@
 .status__info__account {
     display: grid;
     grid-template-columns: auto 1fr;
-    gap: var(--size-layout-gap);
+    gap: 10px;
     overflow: hidden;
     text-overflow: clip;
 }

app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss

@@ -1,6 +1,6 @@
 /* 🚥 Status: Display name */
 .status__display-name {
-    align-self: center;
+    align-self: start;
     justify-self: start;
     color: var(--color-content-fg);
     font-size: 15px;
@@ -12,22 +12,6 @@
         text-overflow: clip;
     }
 
-    .display-name__html,
-    .display-name__account {
-        display: block;
-        line-height: max(21px, 1.4em);
-    }
-
-    .display-name.both_x {
-        display: flex;
-        gap: var(--size-ui-gap);
-    }
-
-    .display-name.handle bdi,
-    .display-name.display .display-name__account {
-        display: none;
-    }
-
     .display-name__html {
         font-weight: 700;
     }
@@ -37,14 +21,7 @@
         font-weight: 400;
     }
 
-    .display-name.handle .display-name__account {
-        color: currentcolor;
-        font-size: inherit;
-        font-weight: 700;
-    }
-
-    &:hover .display-name__html,
-    &:hover .display-name.handle .display-name__account {
+    &:hover .display-name__html {
         text-decoration-line: underline;
         text-decoration-color: currentColor;
         text-decoration-thickness: 2px;

app/javascript/flavours/glitch/styles/gts/status/status-icons.scss

@@ -1,14 +1,14 @@
 /* 🚥 Status: Icons */
 .status__info__icons {
-    --size-icon: 18px;
-
     position: relative;
     display: flex;
-    gap: var(--size-ui-gap);
+    gap: 5px;
     align-items: start;
     color: var(--color-secondary-fg);
 
     svg.gts-icon {
+        --size: 18px;
+
         display: block;
     }
 

app/javascript/flavours/glitch/styles/gts/status/status-info.scss

@@ -1,7 +1,7 @@
 /* 🚥 Status: Info */
 .status__info {
     display: grid;
-    gap: var(--size-ui-gap);
+    gap: 5px;
     grid-template-columns: 1fr auto;
 
     .notification__message {

app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss

@@ -3,7 +3,7 @@
     display: inline-flex;
     align-items: center;
     align-self: start;
-    gap: var(--size-ui-gap);
+    gap: 5px;
     padding: 5px 10px;
     border: 1px solid var(--color-accent-lines);
     border-radius: 50px;
@@ -19,9 +19,11 @@
 }
 
 .status__prepend-icon {
-    --size-icon: 18px;
+    --size: 18px;
 
     display: block;
+    width: var(--size);
+    height: var(--size);
 }
 
 .status__prepend-display-name {

app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss

@@ -1,15 +1,7 @@
 /* 🚥 Status: Spoiler link */
-
-.status__content__spoiler,
 .status__content__spoiler-link {
-    margin-block-start: var(--size-ui-gap);
-}
-
-.status__content__spoiler-link {
-    --size-icon: 14px;
-
     display: flex;
-    gap: var(--size-ui-gap);
+    gap: 5px;
     padding: 5px 8px;
     border: 1px solid var(--color-accent-lines);
     border-radius: 8px;
@@ -19,6 +11,10 @@
     background: var(--color-accent-bg);
     transition: all 0.3s;
 
+    .gts-icon {
+        --size: 14px;
+    }
+
     &:hover {
         border-color: var(--color-lines);
         color: var(--color-fg);

app/javascript/flavours/glitch/styles/mastodon-light/colors.scss

@@ -6,7 +6,6 @@
   --color-fg: #000;
   --color-bg: #eff3f5;
   --color-lines: #c0cdd9;
-  --color-logo: #df8958;
 
   /* Accent */
   --color-accent: #4d4eff;

app/javascript/flavours/glitch/styles/polls.scss

@@ -189,8 +189,7 @@
 
   &__footer {
     display: flex;
-    align-items: center;
-    gap: min(0.22em, 4px);
+    gap: 5px;
     padding-top: 6px;
     padding-bottom: 5px;
     color: $dark-text-color;
@@ -218,8 +217,8 @@
 
   .button {
     height: 36px;
-    margin-inline-end: min(0.22em, 4px);
     padding: 0 16px;
+    margin-inline-end: 10px;
     font-size: 14px;
   }
 }
@@ -241,10 +240,10 @@
   }
 
   .poll__footer {
-    display: flex;
-    align-items: center;
     border-top: 1px solid darken($simple-background-color, 8%);
     padding: 10px;
+    display: flex;
+    align-items: center;
 
     button,
     select {

app/javascript/flavours/glitch/styles/tangerine/status-bar.scss

@@ -1,12 +1,12 @@
 /* 🚥 Status Bar */
-.status-favourite.active svg {
+.no-reduce-motion .status-favourite.active svg {
     animation: bounce 0.4s ease-out;
 }
 
-.status-boost.active svg {
+.no-reduce-motion .status-boost.active svg {
     animation: launch 1.2s ease-in 1;
 }
 
-.status-bookmark.active svg {
+.no-reduce-motion .status-bookmark.active svg {
     animation: bounce-vertical 0.4s ease-out;
 }

app/javascript/flavours/glitch/utils/accessibility.js

@@ -0,0 +1,26 @@
+import ready from "../ready";
+
+ready(() => {
+  setReducedMotionBodyClass();
+});
+
+export function setMediaQueryBodyClass(query, className) {
+  if (query.matches) {
+    document.body.classList.add(className.true);
+    document.body.classList.remove(className.false);
+  } else {
+    document.body.classList.add(className.false);
+    document.body.classList.remove(className.true);
+  }
+}
+
+export function setReducedMotionBodyClass() {
+  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const className = {
+    true: "reduce-motion",
+    false: "no-reduce-motion",
+  };
+
+  setMediaQueryBodyClass(prefersReducedMotion, className);
+  prefersReducedMotion.addEventListener("change", () => setReducedMotionBodyClass(prefersReducedMotion));
+}

app/javascript/mastodon/common.js

@@ -1,4 +1,5 @@
 import Rails from "@rails/ujs";
+import "font-awesome/css/font-awesome.css";
 
 export function start() {
   require.context("../images/", true);

public/icons.svg

@@ -14,20 +14,6 @@
       <path fill="#333a42" d="M418 531c0 24-23 29-32 8q-8-20-31-19c-12 0-24 11-27 19-6 19-32 16-33-4 0-28 27-55 61-57s62 29 62 53m122 63q3-3 4-8t-2-9l-5-4-7-1q-10-3-21-2l-28 3-5 4q-3 5-2 9 1 5 4 8 5 8 14 9 8 2 17 2 9 1 17-2 9-2 14-9m-3 70q19 3 34-7l6-6q2-3 1-8-1-3-5-5-3-2-8-1l-5 2q-10 4-21 4-12-1-21-7-5-3-9-9l-9 9q-10 6-21 7-11 0-22-4l-5-2q-3-1-7 1t-5 5q-1 5 1 8l6 6q15 10 34 7 16-1 28-10 13 9 28 10m63-133c0 24 23 29 32 8q8-20 31-19c12 0 24 11 26 19 6 20 33 16 33-3 1-29-26-56-60-58s-62 29-62 53"/>
     </symbol>
     
-    <symbol id="gts-simple" viewBox="0 0 65 65">
-        <path fill="var(--color-logo)" d="M62.2 37.2c3.6 3 3 7.5.8 9.6 1 9.6-5.4 9.2-6.4 5.5-3.1 4.1-5.4 2.6-5.7 2.4a32 32 0 0 1-18 5.3q-10-.2-17.6-5.3c-2.4 1.6-4.9.6-6.3-1.6-5 5.3-7.4-.7-6-4.5-3.6-1.8-3.4-6 1-11.4q-.3-1.6-.3-3.4c0-10 7-21.2 15.7-23.2-5.7-3.7.3-8.2 6.3-3.7 2.1-5 7.3-5 7.4-.7 8 0 12.4 2.9 16.3 5 2.2 1 4.8 2.3 7.9 2.4 3.6.2 5.6 4.1 1.6 7.2 2.3 4 3.3 7.9 3.3 16.4"/>
-        <path fill="#e8e7e5" d="M22.1 19.6a15 15 0 0 0-5.2 1c-4.3 1.5-6.6 5.2-7.6 9.2a16 16 0 0 1 9.7-3.5c7.6-.4 10.2 5.1 10.2 7.5q0 3.6-2.9 5a21 21 0 0 1-8.1 1.4c-3.2 0-5.2-.6-9-1.4 2 10.6 12 17 24 17 11.8 0 21.8-6.4 24-17-3.9.8-5.9 1.4-9.1 1.4-1.3 0-6-.2-8.1-1.4q-3-1.4-3-5c.1-2.4 2.7-7.9 10.2-7.5 4.7.3 7 1.5 9.8 3.5-1-4-3.3-7.7-7.6-9.2-7.6-2.8-12.6 1.3-16.3 1.4-2.7 0-6.2-2.4-11-2.4m35.4 13.7v1.2zm0 2.1v.2zm0 .6v.1zm-.2 2.2v.2zm-48-8.4"/>
-        <path fill="#77889b" d="M29.2 33.8c0-2.4-2.6-7.9-10.2-7.5a16 16 0 0 0-9.7 3.5 21 21 0 0 0-.1 9c3.8.8 5.8 1.4 9 1.4a20 20 0 0 0 8.1-1.4q3-1.4 3-5m7.9 0c0-2.4 2.6-7.9 10.1-7.5 4.7.3 7 1.5 9.8 3.5a21 21 0 0 1 .1 9c-3.8.8-5.8 1.4-9 1.4-1.3 0-6-.2-8.1-1.4q-3-1.4-3-5"/>
-        <path fill="#333a42" d="M26.4 34.4c0 1.8-1.7 2.2-2.4.6q-.6-1.5-2.3-1.4c-1 0-1.8.8-2 1.4a1.2 1.2 0 0 1-2.4-.3c0-2 2-4 4.5-4.2 2.5-.1 4.6 2.2 4.6 4m4.4 4.7-.3-.6q0-.4.2-.7l.4-.2.4-.2h1.6l2.1.2.4.2.2.7-.3.6q-.5.6-1.1.7l-1.3.1-1.2-.1q-.6-.1-1-.7m4.3 5.1q1.5.2 2.5-.6.3 0 .5-.4v-.5q0-.3-.3-.4l-.6-.1-.3.1q-.7.3-1.6.3t-1.6-.5l-.7-.6-.7.6q-.7.5-1.5.5-.7 0-1.6-.3l-.4-.1h-.5l-.4.5.1.5.4.4q1.2.8 2.5.6 1.2 0 2.1-.7 1 .7 2.1.7m4.7-9.9c0 1.8 1.7 2.2 2.3.6q.8-1.5 2.4-1.4c.9 0 1.7.8 2 1.4.4 1.5 2.3 1.2 2.4-.2 0-2.1-2-4.2-4.5-4.3s-4.6 2.1-4.6 4"/>
-    </symbol>
-    
-    <symbol id="gts-phosphor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-      <g fill="currentcolor">
-        <ellipse cx="16" cy="17" opacity=".2" rx="12" ry="11"/>
-        <path d="M13.6 5c.5-1 2.4-1.7 2.4 0v1q3.6 0 6.5 1.7 2.5 1 3.4 1 1.7 0 1.6 1.3 0 .7-1 1.6a10 10 0 0 1 1.4 6.8q1 1 1.1 2.2 0 1.3-.7 1.8 0 3-1 3.2-1.2.4-1.6-.9-1 1.3-1.7 1.3-.5 0-.8-.2-3 2.1-7.2 2.2-4.1 0-7.2-2.2-.4.4-1 .3-.5 0-1.3-1-1.1 1.1-2 .8-.8-.6-.5-2.7-.8-.5-1-1.7 0-1.2 1.2-2.8L4 17a11 11 0 0 1 6.8-10c-1.1-.6-1.4-1.7-.4-2q1.6-.6 3 1.4l-.2-.2q0-.5.4-1.2m2.4 6c-2.6 0-5-2.2-6.7-.7Q6 12.8 6 17c0 5 4.5 9 10 9s10-4 10-9q-.1-4.2-3.4-6.8c-1.8-1.4-4 .7-6.6.7m-1.2 7.4-.2-.4v-.5l.3-.3h.3l.9-.1h.9l.3.1.2.3v.9l-.7.6h-1.4q-.5-.1-.6-.6M13 16.5c0 1-1 1.2-1.3.3q-.3-.8-1.3-.7t-1 .7c-.3.8-1.4.7-1.4-.1 0-1.2 1-2.3 2.5-2.3 1.4-.1 2.5 1.1 2.5 2.1m6 0c0 1 1 1.2 1.3.3q.3-.8 1.3-.7t1 .7c.3.8 1.4.7 1.4-.1 0-1.1-1-2.3-2.5-2.3-1.4-.1-2.5 1.1-2.5 2.1m-1.7 5.9q1 0 1.7-.4l.3-.4v-.4l-.2-.2h-.6q-.5.3-1 .2l-1.1-.4q-.3 0-.5-.4l-.5.4-1 .4q-.6 0-1.1-.2h-.6q-.3 0-.3.2v.4l.4.4q.6.4 1.7.4.8 0 1.4-.6z"/>
-      </g>
-    </symbol>
-    
     <symbol id="arrow-bend-up-left" fill="currentcolor" viewBox="0 0 256 256">
         <path d="M80,56v96L32,104Z" opacity="0.2"></path>
         <path d="M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z"></path>
@@ -297,7 +283,7 @@
     
     <symbol id="lock-open-simple" fill="currentcolor" viewBox="0 0 256 256">
         <path d="M216,96V208a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8H208A8,8,0,0,1,216,96Z" opacity="0.2"></path>
-        <path d="M207.998431,8 C231.042632,8 251.349085,24.3122088 255.838251,46.407134 C256.717967,50.7369471 253.92111,54.9601045 249.591297,55.83982 C245.261484,56.7195356 241.038327,53.922679 240.158611,49.592866 C237.195711,35.0099629 223.489823,24 207.998431,24 C190.325319,24 175.998431,38.326888 175.998431,56 L175.998431,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L159.998431,80 L159.998431,56 C159.998431,29.490332 181.488763,8 207.998431,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
+        <path d="M48,8 C74.509668,8 96,29.490332 96,56 L95.9994315,80 L208,80 C216.836556,80 224,87.163444 224,96 L224,208 C224,216.836556 216.836556,224 208,224 L48,224 C39.163444,224 32,216.836556 32,208 L32,96 C32,87.163444 39.163444,80 48,80 L79.9994315,80 L80,56 C80,38.5036191 65.9582171,24.2868724 48.5291785,24.0042871 L48,24 C32.5086083,24 18.8027209,35.0099629 15.83982,49.592866 C14.9601045,53.922679 10.7369471,56.7195356 6.40713405,55.83982 C2.077321,54.9601045 -0.719535601,50.7369471 0.160179973,46.407134 C4.64934606,24.3122088 24.9557992,8 48,8 Z M208,96 L48,96 L48,208 L208,208 L208,96 Z"/>
     </symbol>
     
     <symbol id="magnifying-glass" fill="currentcolor" viewBox="0 0 256 256">

public/index.html

@@ -26,7 +26,7 @@
 
     <script src="/packs/js/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body no-reduce-motion system-font'>
+<body class='app-body system-font'>
 <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
 </div>
 </body>