[bugfix] show header logo + align header buttons

the logo wasn’t showing on the small screen layout. this fixes that. it also neatly aligns the buttons in the header area.

.woodpecker/snapshot_next.yaml

@@ -0,0 +1,24 @@
+# https://woodpecker-ci.org/docs/usage/workflow-syntax#when---global-workflow-conditions
+when:
+  - event: push
+    branch: next
+
+# https://goreleaser.com/ci/woodpecker/
+# https://woodpecker-ci.org/docs/usage/workflow-syntax#clone
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      tags: true
+
+# https://woodpecker-ci.org/plugins/docker-buildx
+steps:
+  publish:
+    image: woodpeckerci/plugin-docker-buildx:5.2.2
+    settings:
+      pull_image: true
+      username: gotosocial
+      password:
+        from_secret: gts_docker_password
+      repo: superseriousbusiness/masto-fe-standalone
+      tag: next

CHANGELOG.md

@@ -11,19 +11,31 @@ 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 basaed on “Keep a Changelog” (#80)
+- Added a CHANGELOG.md based on “Keep a Changelog” (#80)
 
 ### Changed
 
 - Preserve ‘mastodon-settings’ in localStorage (#66)
 - Redesigned the login page (#76)
-- Changed all icons with the Phosphor icon set (#77)
+- Changed all icons to the Phosphor icon set (#77)
+- Changed AUTHORS.md to reflect fork contributors (#89)
 
 ### 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)
+- Fixed an issue where media items wouldn’t show correctly (#109)
+
+### Removed
+
+- Removed FontAwesome (#99)
+- Removed unused CSS files (#99)
+- Removed various unused assets
 
 ## [0.5.0] - 2025-07-14
 

Dockerfile

@@ -22,9 +22,11 @@ RUN yarn && yarn build:production
 ### RUNTIME IMAGE ###
 FROM nginx:alpine AS runtime
 
+# Ensure deps up to date.
+RUN apk upgrade --update --no-cache
+
 # Copy bigger nested stuff.
 COPY --from=builder /build/public/packs/js/flavours/glitch /usr/share/nginx/html/packs/js/flavours/glitch
-COPY --from=builder /build/public/packs/js/flavours/vanilla /usr/share/nginx/html/packs/js/flavours/vanilla
 
 # Copy remaining files.
 COPY --from=builder /build/public /usr/share/nginx/html/

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

@@ -28,7 +28,8 @@ export const Avatar: React.FC<Props> = ({
     ...styleFromParent,
     width: `${size}px`,
     height: `${size}px`,
-    backgroundSize: `${size}px ${size}px`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
   };
 
   if (account) {

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' fixedWidth />
+        <Icon id='arrow-left' className='column-back-button__icon' />
         <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' fixedWidth />
+          <Icon id='arrow-left' className='column-back-button__icon' />
           <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' fixedWidth />
+          <Icon id='arrow-left' className='column-back-button__icon' />
           <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} fixedWidth className='column-header__icon' />
+              <Icon id={icon} className='column-header__icon' />
               {title}
             </button>
           )}

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

@@ -5,17 +5,10 @@ import classNames from "classnames";
 interface Props extends React.HTMLAttributes<HTMLImageElement> {
   id: string,
   className?: string,
-  fixedWidth?: boolean,
   children?: never,
 }
 
-export const Icon: React.FC<Props> = ({
+export const Icon: React.FC<Props> = ({ id, className, title, ...other }) => (
-  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'>
+  <div className="gts-icon-with-badge">
-    <Icon id={id} fixedWidth className={className} />
+    <Icon id={id} 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_content.jsx

@@ -329,7 +329,6 @@ class StatusContent extends PureComponent {
           mediaIcons.forEach((mediaIcon, idx) => {
             toggleText.push(
               <Icon
-                fixedWidth
                 className='status__content__spoiler-icon'
                 id={mediaIcon}
                 aria-hidden='true'
@@ -354,16 +353,12 @@ class StatusContent extends PureComponent {
 
       return (
         <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p
+          <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
-            style={{ marginBottom: hidden && status.get("mentions").isEmpty() ? "0px" : null }}
+          {" "}
-          >
+          <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
-            <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
+            <Icon id={hidden ? "eye-closed" : "eye"} />
-            {" "}
+            {toggleText}
-            <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
+          </button>
-              <Icon id={hidden ? "eye-closed" : "eye"} />
-              {toggleText}
-            </button>
-          </p>
 
           {mentionsPlaceholder}
 

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

@@ -86,7 +86,6 @@ class StatusIcons extends PureComponent {
   renderIcon (mediaIcon) {
     return (
       <Icon
-        fixedWidth
         className='status__media-icon'
         key={`media-icon--${mediaIcon}`}
         id={mediaIcon}
@@ -113,7 +112,6 @@ 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)}
@@ -121,7 +119,6 @@ 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,7 +36,6 @@ 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"} fixedWidth /> {title}
+          <Icon id={collapsed ? "caret-right" : "caret-down"} /> {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' fixedWidth />
+            <Icon id='info' />
             <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' fixedWidth />
+          <Icon id='info' />
           <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' fixedWidth />
+            <Icon id='check' />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
           <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
-            <Icon id='x' fixedWidth />
+            <Icon id='x' />
             <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' fixedWidth /></div>
+          <div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' /></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"} fixedWidth /></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"} /></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>
+              <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>
 
               <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' fixedWidth /></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' /></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"} fixedWidth />
+                <Icon id={"file-arrow-down"} />
               </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' fixedWidth id={icon} />}
+          {icon && <Icon className='icon' id={icon} />}
 
           <div className='privacy-dropdown__option__content'>
             <strong>{text}</strong>

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

@@ -393,7 +393,6 @@ 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='asterisk' /></Link>
+        ><Icon id='gts-simple' /></Link>
         {renderForColumn("HOME", (
           <Link
             aria-label={intl.formatMessage(messages.home_timeline)}

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

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

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' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
+        <SearchSection title={<><Icon id='users' /><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' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
+        <SearchSection title={<><Icon id='tag' /><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' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
+        <SearchSection title={<><Icon id='chat-circle-dots' /><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' fixedWidth />
+          <Icon id='magnifying-glass' />
           <FormattedMessage id='explore.search_results' defaultMessage='Search results' />
         </header>
 

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

@@ -46,7 +46,6 @@ 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' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
+              <SearchSection key='accounts' title={<><Icon id='users' /><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' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
+              <SearchSection key='hashtags' title={<><Icon id='tag' /><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' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
+              <SearchSection key='statuses' title={<><Icon id='chat-circle-dots' /><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' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
+        <Icon id='plus' /> <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' fixedWidth />
+            <Icon id='dot' className='column-link__icon' />
             {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 fixedWidth id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
+    const iconElem = icon ? <Icon id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
 
     if (href) {
       return (

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' fixedWidth />
+              <Icon id='flag' />
             </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 fixedWidth id='user-plus' />
+              <Icon 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"} fixedWidth />
+          <Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} />
         </button>
         <button
           className={selectedFilter === "favourite" ? "active" : ""}
           onClick={this.onClick("favourite")}
           title={intl.formatMessage(tooltips.favourites)}
         >
-          <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
+          <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} />
         </button>
         <button
           className={selectedFilter === "reblog" ? "active" : ""}
           onClick={this.onClick("reblog")}
           title={intl.formatMessage(tooltips.boosts)}
         >
-          <Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
+          <Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} />
         </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"} fixedWidth />
+          <Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} />
         </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"} fixedWidth />
+          <Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} />
         </button>
         <button
           className={selectedFilter === "follow" ? "active" : ""}
           onClick={this.onClick("follow")}
           title={intl.formatMessage(tooltips.follows)}
         >
-          <Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
+          <Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} />
         </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 fixedWidth id='user-plus' />
+              <Icon 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' fixedWidth />
+              <Icon id='user' />
             </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} fixedWidth className='column-header__icon' />;
+      iconElement = <Icon id={icon} 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} fixedWidth className='column-link__icon' /> : icon;
+  const iconElement = typeof icon === "string" ? <Icon id={icon} className='column-link__icon' /> : icon;
 
   if (href) {
     return (

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

@@ -19,7 +19,7 @@ const Account = connect(state => ({
   account: state.getIn(["accounts", me]),
 }))(({ account }) => (
   <Permalink href={account.get("url")} to={`/@${account.get("acct")}`} title={account.get("acct")}>
-    <Avatar account={account} size={35} />
+    <Avatar account={account} size={34} />
   </Permalink>
 ));
 
@@ -108,8 +108,7 @@ class Header extends PureComponent {
     return (
       <div className='ui__header'>
         <Link to='/' className='ui__header__logo'>
-          <WordmarkLogo />
+          <Icon id='gts-simple' />
-          <SymbolLogo />
         </Link>
 
         <div className='ui__header__links'>

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' fixedWidth /></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' /></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 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 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"} fixedWidth />
+                <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"} fixedWidth />
+                <Icon id={muted ? "speaker-slash" : "speaker-high"} />
               </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' fixedWidth /></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' /></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>}
+              {(!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' 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' /></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>
+              <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>
             </div>
           </div>
         </div>

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

@@ -29,7 +29,7 @@ const initialState = ImmutableMap({
     shared_state : true,
   }),
   collapsed : ImmutableMap({
-    enabled     : true,
+    enabled     : false,
     auto        : ImmutableMap({
       all              : false,
       notifications    : false,

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

@@ -10,7 +10,7 @@
   background-size: $size $size;
 }
 
-@mixin single-column($media, $parent: '&') {
+@mixin single-column($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -21,7 +21,7 @@
   }
 }
 
-@mixin limited-single-column($media, $parent: '&') {
+@mixin limited-single-column($media, $parent: "&") {
   .auto-columns #{$parent},
   .single-column #{$parent} {
     @media #{$media} {
@@ -30,7 +30,7 @@
   }
 }
 
-@mixin multi-columns($media, $parent: '&') {
+@mixin multi-columns($media, $parent: "&") {
   .auto-columns #{$parent} {
     @media #{$media} {
       @content;
@@ -43,9 +43,9 @@
 
 @mixin fullwidth-gallery {
   &.full-width {
-    margin-left: -10px;
+    margin-left: -15px;
-    margin-right: -10px;
+    margin-right: -15px;
-    width: inherit;
+    width: calc(100% + 30px);
     max-width: none;
     border-radius: 0;
   }

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

@@ -1,7 +1,7 @@
-$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
+$emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
-  'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
+  "end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign"
-  'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
+  "heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on"
-  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
+  "registered" "soon" "spider" "telephone_receiver" "tm" "top" "wavy_dash" !default;
 
 %emoji-color-inversion {
   filter: invert(1);
@@ -9,30 +9,28 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
 
 .emojione {
   @each $emoji in $emojis-requiring-inversion {
-    &[title=':#{$emoji}:'] {
+    &[title=":#{$emoji}:"] {
       @extend %emoji-color-inversion;
     }
   }
 }
 
 .hicolor-privacy-icons {
-  .status__visibility-icon.fa-globe,
+  :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="planet"] {
-  .privacy-dropdown__option .fa-globe {
     color: #1976d2;
   }
 
-  .status__visibility-icon.fa-unlock,
+  :is(.status__visibility-icon, .privacy-dropdown__option)
-  .privacy-dropdown__option .fa-unlock {
+    use[href*="lock-open-simple"] {
     color: #388e3c;
   }
 
-  .status__visibility-icon.fa-lock,
+  :is(.status__visibility-icon, .privacy-dropdown__option)
-  .privacy-dropdown__option .fa-lock {
+    use[href*="lock-simple"] {
     color: #ffa000;
   }
 
-  .status__visibility-icon.fa-envelope,
+  :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="#at"] {
-  .privacy-dropdown__option .fa-envelope {
     color: #d32f2f;
   }
 }

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

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 $no-columns-breakpoint: 600px;
 $sidebar-width: 240px;
@@ -1456,7 +1456,7 @@ a.sparkline {
 
     &::after {
       display: block;
-      content: '';
+      content: "";
       width: 50px;
       height: 21px;
       position: absolute;
@@ -1850,7 +1850,7 @@ a.sparkline {
 
     &::after {
       position: absolute;
-      content: '';
+      content: "";
       width: 1px;
       background: $highlight-text-color;
       bottom: 0;

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

@@ -1,9 +1,9 @@
 @function hex-color($color) {
-  @if type-of($color) == 'color' {
+  @if type-of($color) == "color" {
     $color: str-slice(ie-hex-str($color), 4);
   }
 
-  @return '%23' + unquote($color);
+  @return "%23" + unquote($color);
 }
 
 body {
@@ -14,7 +14,7 @@ body {
   font-weight: 400;
   color: var(--color-fg);
   text-rendering: optimizelegibility;
-  font-feature-settings: 'kern';
+  font-feature-settings: "kern";
   text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
@@ -35,13 +35,13 @@ body {
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
-      'Segoe UI',
+      "Segoe UI",
       Oxygen,
       Ubuntu,
       Cantarell,
-      'Fira Sans',
+      "Fira Sans",
-      'Droid Sans',
+      "Droid Sans",
-      'Helvetica Neue',
+      "Helvetica Neue",
       $font-sans-serif,
       sans-serif;
   }

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

@@ -157,7 +157,7 @@
   }
 
   .gts-icon {
-    --size: 20px;
+    --size-icon: 20px;
 
     display: block;
   }
@@ -195,7 +195,7 @@
   }
 
   .gts-icon {
-    --size: 16px;
+    --size-icon: 16px;
 
     margin-inline-end: 5px;
     vertical-align: text-bottom;
@@ -370,7 +370,7 @@
   }
 
   svg.gts-icon {
-    --size: 20px;
+    --size-icon: 20px;
   }
 }
 
@@ -467,12 +467,12 @@
       width: 2px;
       height: 24px;
       background: var(--color-notifications-lines);
-      content: '';
+      content: "";
     }
   }
 
   svg.gts-icon {
-    --size: 20px;
+    --size-icon: 20px;
 
     display: block;
   }
@@ -635,7 +635,7 @@
       }
 
       .gts-icon {
-        --size: 24px;
+        --size-icon: 24px;
 
         display: block;
       }
@@ -867,18 +867,13 @@
 }
 
 .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

@@ -56,57 +56,6 @@
 
 $ui-header-height: 55px;
 
-.ui__header {
-  display: none;
-  box-sizing: border-box;
-  height: $ui-header-height;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  justify-content: space-between;
-  align-items: center;
-
-  &__logo {
-    display: inline-flex;
-    padding: 15px;
-
-    .logo {
-      height: $ui-header-height - 30px;
-      width: auto;
-    }
-
-    .logo--wordmark {
-      display: none;
-    }
-
-    @media screen and (width >= 320px) {
-      .logo--wordmark {
-        display: block;
-      }
-
-      .logo--icon {
-        display: none;
-      }
-    }
-  }
-
-  &__links {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 10px;
-    overflow: hidden;
-
-    .button {
-      flex: 0 0 auto;
-    }
-
-    .button-tertiary {
-      flex-shrink: 1;
-    }
-  }
-}
-
 .tabs-bar__wrapper {
   background: darken($ui-base-color, 8%);
   position: sticky;
@@ -295,7 +244,7 @@ $ui-header-height: 55px;
 
     &::before {
       display: block;
-      content: '';
+      content: "";
       position: absolute;
       bottom: -13px;
       inset-inline-start: 0;
@@ -335,6 +284,8 @@ $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;
@@ -343,8 +294,6 @@ $ui-header-height: 55px;
   transition: all 0.3s;
 
   .gts-icon {
-    --size: 24px;
-
     display: block;
   }
 }
@@ -355,6 +304,7 @@ $ui-header-height: 55px;
   align-items: center;
   flex-grow: 1;
   padding: 12px 0 13px 15px;
+  text-align: start;
 }
 
 .column-header__buttons {
@@ -404,16 +354,14 @@ $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 {
@@ -735,6 +683,8 @@ $ui-header-height: 55px;
 }
 
 .column-inline-form {
+  --size-icon: 20px;
+
   padding: 7px 15px;
   padding-inline-end: 5px;
   display: flex;
@@ -760,10 +710,6 @@ $ui-header-height: 55px;
     margin: 0 5px;
     padding: 6px;
   }
-
-  .gts-icon {
-    --size: 20px;
-  }
 }
 
 .column-settings__outer {
@@ -1054,6 +1000,8 @@ $ui-header-height: 55px;
   }
 
   &__action {
+    --size-icon: 20px;
+
     float: right;
 
     .icon-button {
@@ -1066,8 +1014,6 @@ $ui-header-height: 55px;
     }
 
     .gts-icon {
-      --size: 20px;
-
       display: block;
     }
   }

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

@@ -64,7 +64,7 @@
     &:focus {
       outline: 0;
     }
-    @include single-column('screen and (max-width: 630px)') {
+    @include single-column("screen and (max-width: 630px)") {
       font-size: 16px;
     }
   }
@@ -103,7 +103,7 @@
     color: $highlight-text-color;
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     display: none;
   }
 
@@ -240,11 +240,11 @@
         outline: 0;
       }
 
-      @include single-column('screen and (max-width: 630px)') {
+      @include single-column("screen and (max-width: 630px)") {
         font-size: 16px;
       }
 
-      @include limited-single-column('screen and (max-width: 600px)') {
+      @include limited-single-column("screen and (max-width: 600px)") {
         height: 100px !important; // prevent auto-resize textarea
         resize: vertical;
       }
@@ -514,7 +514,7 @@
   }
 
   svg.gts-icon {
-    --size: 20px;
+    --size-icon: 20px;
 
     scale: 1.2;
   }
@@ -565,16 +565,14 @@
 }
 
 .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;
@@ -611,23 +609,22 @@
 
 .compose-form__publish {
   display: flex;
-  justify-content: flex-end;
-  min-width: 0;
-  flex: 0 0 auto;
   column-gap: 5px;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-top: 10px;
+  min-width: 0;
 
-  .compose-form__publish-button-wrapper {
+  button {
-    overflow: hidden;
+    --size-icon: 18px;
-    padding-top: 10px;
 
-    button {
+    display: flex;
-      padding: 7px 10px;
+    align-items: center;
-      text-align: center;
+    flex-shrink: 0;
-    }
+    gap: 5px;
-
+    padding: 8px 12px;
-    & > .side_arm {
+    line-height: 20px;
-      width: 36px;
+    text-align: center;
-    }
   }
 }
 

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

@@ -42,8 +42,8 @@
   text-overflow: ellipsis;
   cursor: pointer;
 
-  input[type='radio'],
+  input[type="radio"],
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     display: none;
   }
 

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

@@ -35,8 +35,8 @@ $doodle-background: #d9e1e8;
         margin-inline-end: 2px;
       }
 
-      input[type='number'],
+      input[type="number"],
-      input[type='text'] {
+      input[type="text"] {
         width: 40px;
       }
 

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

@@ -16,11 +16,11 @@
     padding-inline-end: 10px;
   }
 
-  @include single-column('screen and (max-width: 630px)') {
+  @include single-column("screen and (max-width: 630px)") {
     flex: auto;
   }
 
-  @include limited-single-column('screen and (max-width: 630px)') {
+  @include limited-single-column("screen and (max-width: 630px)") {
     &,
     &:first-child,
     &:last-child {
@@ -34,7 +34,7 @@
     flex: 1 1 200px;
   }
 
-  @include single-column('screen and (max-width: 630px)') {
+  @include single-column("screen and (max-width: 630px)") {
     :root & {
       //  Overrides `.wide` for single-column view
       flex: auto;
@@ -73,6 +73,8 @@
 }
 
 .layout-multiple-columns .drawer__tab {
+  --size-icon: 24px;
+
   display: flex;
   gap: 5px;
   align-items: center;
@@ -88,8 +90,6 @@
   transition: all 0.3s;
 
   .gts-icon {
-    --size: 24px;
-
     display: block;
   }
 
@@ -109,11 +109,11 @@
   flex: none;
 
   @include limited-single-column(
-    'screen and (max-width: #{$no-gap-breakpoint})'
+    "screen and (max-width: #{$no-gap-breakpoint})"
   ) {
     margin-bottom: 0;
   }
-  @include single-column('screen and (max-width: 630px)') {
+  @include single-column("screen and (max-width: 630px)") {
     font-size: 16px;
   }
 }
@@ -149,12 +149,10 @@
 }
 
 .navigation-bar .compose__action-bar button {
+  --size-icon: 20px;
+
   display: flex;
   padding: 6px;
-
-  svg.gts-icon {
-    --size: 20px;
-  }
 }
 
 .drawer--results {
@@ -299,7 +297,7 @@
   .mbstobon-#{$i} .drawer__inner__mastodon {
     @if $i == 3 {
       background:
-        url('~flavours/glitch/images/wave-drawer.png')
+        url("~flavours/glitch/images/wave-drawer.png")
           no-repeat
           bottom /
           100%
@@ -307,7 +305,7 @@
         lighten($ui-base-color, 4%);
     } @else {
       background:
-        url('~flavours/glitch/images/wave-drawer-glitched.png')
+        url("~flavours/glitch/images/wave-drawer-glitched.png")
           no-repeat
           bottom /
           100%
@@ -316,7 +314,7 @@
     }
 
     & > .mastodon {
-      background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
+      background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png")
         no-repeat
         left
         bottom /

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

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

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

@@ -174,7 +174,7 @@
 
   &:hover::before {
     z-index: 0;
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     inset-inline-start: 0;

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

@@ -1,26 +1,26 @@
-@import 'misc';
+@import "misc";
-@import 'boost';
+@import "boost";
-@import 'accounts';
+@import "accounts";
-@import 'domains';
+@import "domains";
-@import 'status';
+@import "status";
-@import 'modal';
+@import "modal";
-@import 'compose_form';
+@import "compose_form";
-@import 'columns';
+@import "columns";
-@import 'regeneration_indicator';
+@import "regeneration_indicator";
-@import 'directory';
+@import "directory";
-@import 'search';
+@import "search";
-@import 'emoji';
+@import "emoji";
-@import 'doodle';
+@import "doodle";
-@import 'drawer';
+@import "drawer";
-@import 'media';
+@import "media";
-@import 'sensitive';
+@import "sensitive";
-@import 'lists';
+@import "lists";
-@import 'emoji_picker';
+@import "emoji_picker";
-@import 'local_settings';
+@import "local_settings";
-@import 'single_column';
+@import "single_column";
-@import 'announcements';
+@import "announcements";
-@import 'explore';
+@import "explore";
-@import 'scrollbars';
+@import "scrollbars";
-@import 'signed_out';
+@import "signed_out";
-@import 'privacy_policy';
+@import "privacy_policy";
-@import 'about';
+@import "about";

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

@@ -64,30 +64,7 @@
   line-height: 18px;
 }
 
-.media-gallery {
-  box-sizing: border-box;
-  margin-top: 8px;
-  overflow: hidden;
-  border-radius: 4px;
-  position: relative;
-  width: 100%;
-  min-height: 64px;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
-  gap: 2px;
-
-  @include fullwidth-gallery;
-}
-
 .media-gallery__item {
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  border-radius: 4px;
-  overflow: hidden;
-
   &--tall {
     grid-row: span 2;
   }
@@ -190,7 +167,7 @@
     color: rgba($white, 0.7);
 
     .gts-icon {
-      --size: 24px;
+      --size-icon: 24px;
 
       display: block;
     }
@@ -284,11 +261,9 @@
     padding: 20px 0;
 
     .icon-button {
-      color: $white;
+      --size-icon: 24px;
 
-      .gts-icon {
+      color: $white;
-        --size: 24px;
-      }
 
       &:hover,
       &:focus,
@@ -572,14 +547,14 @@
   }
 
   &__buttons-bar {
+    --size-icon: 20px;
+
     display: flex;
     justify-content: space-between;
     padding-bottom: 8px;
     margin: 0 -5px;
 
     .gts-icon {
-      --size: 20px;
-
       display: block;
     }
 
@@ -671,7 +646,7 @@
     }
 
     &::before {
-      content: '';
+      content: "";
       width: 50px;
       background: rgba($white, 0.35);
       border-radius: 4px;
@@ -741,7 +716,7 @@
     position: relative;
 
     &::before {
-      content: '';
+      content: "";
       width: 100%;
       background: rgba($white, 0.35);
       border-radius: 4px;

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

@@ -180,7 +180,7 @@
   }
 
   &.disabled {
-    color: darken($action-button-color, 13%);
+    opacity: 0.3;
     background-color: transparent;
     cursor: default;
   }
@@ -223,7 +223,6 @@
     }
 
     &.disabled {
-      color: lighten($lighter-text-color, 7%);
       background-color: transparent;
     }
 
@@ -344,7 +343,7 @@ body > [data-popper-placement] {
 
 .ellipsis {
   &::after {
-    content: '…';
+    content: "…";
   }
 }
 
@@ -471,7 +470,7 @@ body > [data-popper-placement] {
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
     max-height: $media-modal-media-max-height;
-    background: url('~images/void.png') repeat;
+    background: url("~images/void.png") repeat;
     object-fit: contain;
   }
 
@@ -729,7 +728,7 @@ body > [data-popper-placement] {
   &:hover,
   &:focus,
   &:active {
-    @include multi-columns('screen and (min-width: 631px)') {
+    @include multi-columns("screen and (min-width: 631px)") {
       background: lighten($ui-base-color, 14%);
       border-bottom-color: lighten($ui-base-color, 14%);
     }
@@ -1054,7 +1053,7 @@ body > [data-popper-placement] {
     border-bottom-color: $ui-highlight-color;
   }
 
-  @include limited-single-column('screen and (max-width: 600px)') {
+  @include limited-single-column("screen and (max-width: 600px)") {
     font-size: 16px;
   }
 
@@ -1150,7 +1149,7 @@ button.icon-button.active i.fa-retweet {
   padding-top: 20px + 48px;
 
   .regeneration-indicator__figure {
-    background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
+    background-image: url("~flavours/glitch/images/elephant_ui_disappointed.svg");
   }
 }
 
@@ -1316,6 +1315,8 @@ button.icon-button.active i.fa-retweet {
 }
 
 .spoiler-button {
+  --size-icon: 18px;
+
   top: 0;
   inset-inline-start: 0;
   width: 100%;
@@ -1324,8 +1325,6 @@ 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

@@ -267,7 +267,7 @@
 }
 
 .onboarding-modal__page__wrapper-0 {
-  background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom /
+  background: url("~images/elephant_ui_greeting.svg") no-repeat left bottom /
     auto 250px;
   height: 100%;
   padding: 0;
@@ -1060,15 +1060,13 @@
   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;
-    }
   }
 }
 
@@ -1204,7 +1202,7 @@
     width: 100px;
     height: 100px;
     transform: translate(-50%, -50%);
-    background: url('~images/reticle.png') no-repeat 0 0;
+    background: url("~images/reticle.png") no-repeat 0 0;
     border-radius: 50%;
     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
   }

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

@@ -87,14 +87,14 @@
     counter-increment: list-counter;
 
     &::before {
-      content: counter(list-counter) '.';
+      content: counter(list-counter) ".";
       position: absolute;
       inset-inline-start: 0;
     }
   }
 
   ul > li::before {
-    content: '';
+    content: "";
     position: absolute;
     background-color: $darker-text-color;
     border-radius: 50%;

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

@@ -4,7 +4,7 @@
 
 .search__icon,
 .search__icon.gts-icon {
-  --size: 20px;
+  --size-icon: 20px;
 
   position: absolute;
   top: 13px;
@@ -35,6 +35,8 @@
 }
 
 .search__button {
+  --size-icon: 20px;
+
   position: absolute;
   top: 7px;
   right: 7px;
@@ -48,8 +50,6 @@
   transition: all 0.3s;
 
   .gts-icon {
-    --size: 20px;
-
     display: block;
   }
 
@@ -154,13 +154,11 @@
 
 .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/single_column.scss

@@ -277,8 +277,8 @@
 
   .layout-single-column .ui__header {
     display: flex;
-    background: $ui-base-color;
     border-bottom: 1px solid lighten($ui-base-color, 8%);
+    background: $ui-base-color;
   }
 
   .layout-single-column {

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

@@ -89,16 +89,6 @@
       }
     }
 
-    &.mention {
-      &:hover {
-        text-decoration: none;
-
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-
     .fa {
       color: $dark-text-color;
     }
@@ -169,12 +159,8 @@
     outline: 0;
     background: lighten($ui-base-color, 4%);
 
-    &.status.status-direct {
+    &.status.status-direct.muted {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+      background: transparent;
-
-      &.muted {
-        background: transparent;
-      }
     }
 
     .detailed-status,
@@ -219,7 +205,8 @@
   }
 
   &.status-direct {
-    background: mix($ui-base-color, $ui-highlight-color, 95%);
+    --color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};
+
     border-bottom-color: lighten($ui-base-color, 12%);
   }
 
@@ -277,7 +264,7 @@
         rgba($base-shadow-color, 0.8)
       );
       pointer-events: none;
-      content: '';
+      content: "";
     }
 
     .display-name:hover .display-name__html {
@@ -291,7 +278,7 @@
       padding-top: 0;
 
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         bottom: 0;
@@ -412,19 +399,11 @@
 }
 
 .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,
@@ -449,9 +428,9 @@
 }
 
 .detailed-status {
-  background: lighten($ui-base-color, 4%);
+  padding: 15px;
-  padding: 14px 10px;
   border-top: 1px solid lighten($ui-base-color, 8%);
+  background: lighten($ui-base-color, 4%);
 
   &--flex {
     display: flex;
@@ -582,9 +561,8 @@ a.status__display-name,
 
 .status__avatar {
   flex: none;
-  margin-inline-end: 10px;
+  height: var(--size-avatar);
-  height: 48px;
+  width: var(--size-avatar);
-  width: 48px;
 }
 
 .muted {
@@ -918,7 +896,7 @@ a.status-card.compact:hover {
 
   &.unread {
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       inset-inline-start: 0;
@@ -956,7 +934,7 @@ a.status-card.compact:hover {
       height: 100%;
 
       &::before {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         top: 10px - 4px;

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

@@ -1,3 +1,3 @@
-@import 'contrast/variables';
+@import "contrast/variables";
-@import 'index';
+@import "index";
-@import 'contrast/diff';
+@import "contrast/diff";

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

@@ -309,9 +309,9 @@ code {
       max-width: 100%;
       height: auto;
       border-radius: 4px;
-      background: url('images/void.png');
+      background: url("images/void.png");
 
-      &[src$='missing.png'] {
+      &[src$="missing.png"] {
         visibility: hidden;
       }
 
@@ -404,7 +404,7 @@ code {
         flex: 1 1 auto;
       }
 
-      input[type='checkbox'] {
+      input[type="checkbox"] {
         position: absolute;
         inset-inline-start: 0;
         top: 5px;
@@ -420,12 +420,12 @@ code {
     border-radius: 4px;
   }
 
-  input[type='text'],
+  input[type="text"],
-  input[type='number'],
+  input[type="number"],
-  input[type='email'],
+  input[type="email"],
-  input[type='password'],
+  input[type="password"],
-  input[type='url'],
+  input[type="url"],
-  input[type='datetime-local'],
+  input[type="datetime-local"],
   textarea {
     box-sizing: border-box;
     font-size: 16px;
@@ -463,11 +463,11 @@ code {
     }
   }
 
-  input[type='text'],
+  input[type="text"],
-  input[type='number'],
+  input[type="number"],
-  input[type='email'],
+  input[type="email"],
-  input[type='password'],
+  input[type="password"],
-  input[type='datetime-local'] {
+  input[type="datetime-local"] {
     &:focus:invalid:not(:placeholder-shown),
     &:required:invalid:not(:placeholder-shown) {
       border-color: lighten($error-red, 12%);
@@ -479,11 +479,11 @@ code {
       color: lighten($error-red, 12%);
     }
 
-    input[type='text'],
+    input[type="text"],
-    input[type='number'],
+    input[type="number"],
-    input[type='email'],
+    input[type="email"],
-    input[type='password'],
+    input[type="password"],
-    input[type='datetime-local'],
+    input[type="datetime-local"],
     textarea,
     select {
       border-color: lighten($error-red, 12%);
@@ -619,7 +619,7 @@ code {
       overflow: hidden;
 
       &::after {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         top: 0;
@@ -1019,7 +1019,7 @@ code {
     flex: 1 1 auto;
   }
 
-  input[type='text'] {
+  input[type="text"] {
     background: transparent;
     border: 0;
     padding: 10px;
@@ -1205,7 +1205,7 @@ code {
     border-color: $highlight-text-color;
 
     &::before {
-      content: '';
+      content: "";
       width: 10px;
       height: 10px;
       border-radius: 50%;

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

@@ -2,8 +2,8 @@
 
 /* Variables */
 :root {
-  --drawer-border-radius: 8px;
+  --drawer-border-radius: var(--size-layout-radius);
-  --button-border-radius: 6px;
+  --button-border-radius: var(--size-ui-radius);
 }
 
 /* Icons debug */
@@ -13,11 +13,10 @@
 
 /* Diff */
 .gts-icon {
-  --size: 1em;
-
   display: inline-block;
-  width: var(--size);
+  flex-shrink: 0;
-  height: var(--size);
+  width: var(--size-icon);
+  height: var(--size-icon);
 }
 
 .gts-icon-with-badge {
@@ -59,7 +58,7 @@
 .column-header .gts-icon,
 .column-link .gts-icon,
 .local-settings__navigation__item .gts-icon {
-  --size: 24px;
+  --size-icon: 24px;
 }
 
 .navigation-panel {
@@ -94,12 +93,9 @@
   }
 }
 
-.notification__filter-bar svg,
+.notification__filter-bar svg.gts-icon,
-.status__info__icons svg {
+.status__info__icons svg.gts-icon {
-  --size: 18px;
+  --size-icon: 18px;
-
-  width: var(--size);
-  height: var(--size);
 }
 
 .detailed-status__meta {
@@ -121,16 +117,25 @@
 }
 
 .detailed-status__meta svg {
-  --size: 16px;
+  --size-icon: 16px;
-
-  width: var(--size);
-  height: var(--size);
 }
 
 .notification__favourite-icon-wrapper svg {
-  --size: 16px;
+  --size-icon: 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/_config.scss

@@ -6,8 +6,10 @@
 */
 
 /* 🛠️ Config */
-@import 'colors';
+@import "colors";
-@import 'sizes';
+@import "sizes";
 
 /* 🧩 Components */
-@import 'status';
+@import "media-gallery";
+@import "status";
+@import "ui-header";

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

@@ -6,6 +6,7 @@
     --color-fg: #fff;
     --color-bg: #191b22;
     --color-lines: #3d4455;
+    --color-logo: #c76c33;
 
     /* Accent */
     --color-accent: #8c8dff;
@@ -70,4 +71,5 @@
     /* Status */
     --color-status-fg: ;
     --color-status-bg: #282c37;
+    --color-status-bg--focus: #313543;
 }

app/javascript/flavours/glitch/styles/gts/media-gallery.scss

@@ -0,0 +1,73 @@
+/* 🖼️ Media Gallery */
+.media-gallery {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: var(--size-ui-gap);
+    overflow: hidden;
+}
+
+.media-gallery:not(.full-width) {
+    border-radius: var(--size-ui-radius);
+}
+
+.media-gallery.full-width {
+    margin-inline: -15px;
+
+    /* the `div` is there for specificity */
+    div.media-gallery__item {
+        border-radius: 0;
+    }
+}
+
+.media-gallery:not(.full-width) .spoiler-button__overlay {
+    border-radius: var(--size-ui-radius);
+}
+
+.media-gallery__item {
+    overflow: hidden;
+}
+
+/* Only one image */
+.media-gallery__item:nth-child(2):nth-last-child(1) {
+    border-radius: var(--size-ui-radius);
+}
+
+/* First image in a set of two */
+.media-gallery__item:nth-child(2):nth-last-child(2) {
+    border-top-left-radius: var(--size-ui-radius);
+    border-bottom-left-radius: var(--size-ui-radius);
+}
+
+/* Second image in a set of two */
+.media-gallery__item:nth-child(3):nth-last-child(1) {
+    border-top-right-radius: var(--size-ui-radius);
+    border-bottom-right-radius: var(--size-ui-radius);
+}
+
+/* First image in a set of at least two */
+.media-gallery__item:nth-child(2):not(:nth-last-child(1)) {
+    border-top-left-radius: var(--size-ui-radius);
+}
+
+/* Second image in a set of at least two */
+.media-gallery__item:nth-child(3):not(:nth-last-child(1)) {
+    border-top-right-radius: var(--size-ui-radius);
+}
+
+/* Second to last image in an even set */
+.media-gallery__item:nth-last-child(2):nth-child(even) {
+    border-bottom-left-radius: var(--size-ui-radius);
+}
+
+/* Last image in an even set */
+.media-gallery__item:last-child:nth-child(odd) {
+    border-bottom-right-radius: var(--size-ui-radius);
+}
+
+/* Last image in an uneven set */
+.media-gallery__item:last-child:nth-child(even) {
+    grid-column: 1/-1;
+    border-bottom-right-radius: var(--size-ui-radius);
+    border-bottom-left-radius: var(--size-ui-radius);
+}

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

@@ -1,4 +1,15 @@
 /* 📏 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;
+    --size-header-block: #{$ui-header-height};
 }

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

@@ -1,15 +1,50 @@
 /* 🚥 Status */
-@import 'status/status-account';
+@import "status/status-account";
-@import 'status/status-display-name';
+@import "status/status-display-name";
-@import 'status/status-icons';
+@import "status/status-icons";
-@import 'status/status-info';
+@import "status/status-info";
-@import 'status/status-prepend';
+@import "status/status-prepend";
-@import 'status/status-spoiler';
+@import "status/status-spoiler";
 
-.status__content {
+.status {
+    background-color: var(--color-status-bg);
+
+    &.focusable:focus {
+        --color-status-bg: var(--color-status-bg--focus);
+    }
+}
+
+.status__content,
+.detailed-status .status__content {
     line-height: 1.5;
 }
 
+.status__content p {
+    margin-bottom: 12px;
+}
+
+.media-gallery {
+    margin-top: 16px;
+}
+
 .status__action-bar :is(a, button) {
     color: var(--color-secondary-fg);
 }
+
+.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: 10px;
+    gap: var(--size-layout-gap);
     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: start;
+    align-self: center;
     justify-self: start;
     color: var(--color-content-fg);
     font-size: 15px;
@@ -12,6 +12,12 @@
         text-overflow: clip;
     }
 
+    .display-name__html,
+    .display-name__account {
+        display: block;
+        line-height: max(21px, 1.4em);
+    }
+
     .display-name__html {
         font-weight: 700;
     }

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: 5px;
+    gap: var(--size-ui-gap);
     align-items: start;
     color: var(--color-secondary-fg);
 
     svg.gts-icon {
-        --size: 18px;
-
         display: block;
     }
 
@@ -22,7 +22,7 @@
         right: calc(100% + 5px);
         width: 20px;
         height: 100%;
-        content: '';
+        content: "";
         background: linear-gradient(90deg, transparent, var(--color-status-bg));
         transition: all 0.2s;
     }

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

@@ -1,7 +1,7 @@
 /* 🚥 Status: Info */
 .status__info {
     display: grid;
-    gap: 5px;
+    gap: var(--size-ui-gap);
     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: 5px;
+    gap: var(--size-ui-gap);
     padding: 5px 10px;
     border: 1px solid var(--color-accent-lines);
     border-radius: 50px;
@@ -19,11 +19,9 @@
 }
 
 .status__prepend-icon {
-    --size: 18px;
+    --size-icon: 18px;
 
     display: block;
-    width: var(--size);
-    height: var(--size);
 }
 
 .status__prepend-display-name {

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

@@ -1,8 +1,15 @@
 /* 🚥 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: 5px;
+    gap: var(--size-ui-gap);
-    margin-top: 5px;
     padding: 5px 8px;
     border: 1px solid var(--color-accent-lines);
     border-radius: 8px;
@@ -12,10 +19,6 @@
     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/gts/ui-header.scss

@@ -0,0 +1,43 @@
+/* 🧑‍💻 UI: Header */
+.ui__header {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: 7px;
+    height: var(--size-header-block);
+    box-sizing: border-box;
+
+    svg.gts-icon {
+        display: block;
+    }
+}
+
+.ui__header__logo {
+    --size-icon: 32px;
+    padding: 8px;
+}
+
+.ui__header__links {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-inline: 10px;
+    overflow: hidden;
+
+    a {
+        display: flex;
+        align-items: center;
+        line-height: 20px;
+    }
+
+    .button {
+        flex: 0 0 auto;
+    }
+
+    .button-tertiary {
+        flex-shrink: 1;
+    }
+}

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

@@ -1,28 +1,28 @@
-@import 'mixins';
+@import "mixins";
-@import 'variables';
+@import "variables";
-@import 'styles/fonts/roboto';
+@import "styles/fonts/roboto";
-@import 'styles/fonts/roboto-mono';
+@import "styles/fonts/roboto-mono";
 
-@import 'reset';
+@import "reset";
-@import 'basics';
+@import "basics";
-@import 'branding';
+@import "branding";
-@import 'containers';
+@import "containers";
-@import 'lists';
+@import "lists";
-@import 'modal';
+@import "modal";
-@import 'widgets';
+@import "widgets";
-@import 'forms';
+@import "forms";
-@import 'accounts';
+@import "accounts";
-@import 'statuses';
+@import "statuses";
-@import 'components/index';
+@import "components/index";
-@import 'polls';
+@import "polls";
-@import 'about';
+@import "about";
-@import 'tables';
+@import "tables";
-@import 'admin';
+@import "admin";
-@import 'accessibility';
+@import "accessibility";
-@import 'rtl';
+@import "rtl";
-@import 'dashboard';
+@import "dashboard";
-@import 'rich_text';
+@import "rich_text";
 
-@import 'gts';
+@import "gts";
-@import 'gts/config';
+@import "gts/config";
-@import 'tangerine/config';
+@import "tangerine/config";

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

@@ -1,5 +1,5 @@
-@import 'styles/fonts/roboto';
+@import "styles/fonts/roboto";
-@import 'reset';
+@import "reset";
 
 :root {
     --color-bg: #191b22;
@@ -91,7 +91,7 @@ button {
     }
 }
 
-input[type='text'] {
+input[type="text"] {
     display: block;
     margin: 0;
     padding: 15px;

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

@@ -1,4 +1,4 @@
-@import 'mastodon-light/variables';
+@import "mastodon-light/variables";
-@import 'index';
+@import "index";
-@import 'mastodon-light/diff';
+@import "mastodon-light/diff";
-@import 'mastodon-light/colors';
+@import "mastodon-light/colors";

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

@@ -6,6 +6,7 @@
   --color-fg: #000;
   --color-bg: #eff3f5;
   --color-lines: #c0cdd9;
+  --color-logo: #df8958;
 
   /* Accent */
   --color-accent: #4d4eff;
@@ -40,4 +41,5 @@
   /* Status */
   --color-status-fg: var(--color-fg);
   --color-status-bg: #fff;
+  --color-status-bg--focus: hsl(0deg, 0%, 96%);
 }

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

@@ -141,7 +141,7 @@ html {
 }
 
 .compose-form__autosuggest-wrapper,
-.poll__option input[type='text'],
+.poll__option input[type="text"],
 .compose-form .spoiler-input__input,
 .compose-form__poll-wrapper select,
 .search__input,
@@ -495,10 +495,10 @@ html {
 }
 
 .simple_form {
-  input[type='text'],
+  input[type="text"],
-  input[type='number'],
+  input[type="number"],
-  input[type='email'],
+  input[type="email"],
-  input[type='password'],
+  input[type="password"],
   textarea {
     &:hover {
       border-color: lighten($ui-base-color, 12%);

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

@@ -54,4 +54,4 @@ $account-background-color: $white !default;
   @return hsl(hue($color), saturation($color), lightness($color) - $amount);
 }
 
-$emojis-requiring-inversion: 'chains';
+$emojis-requiring-inversion: "chains";

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

@@ -76,8 +76,8 @@
       max-width: calc(100% - 45px - 25px);
     }
 
-    input[type='radio'],
+    input[type="radio"],
-    input[type='checkbox'] {
+    input[type="checkbox"] {
       display: none;
     }
 
@@ -85,7 +85,7 @@
       flex: 1 1 auto;
     }
 
-    input[type='text'] {
+    input[type="text"] {
       display: block;
       box-sizing: border-box;
       width: 100%;
@@ -189,7 +189,8 @@
 
   &__footer {
     display: flex;
-    gap: 5px;
+    align-items: center;
+    gap: min(0.22em, 4px);
     padding-top: 6px;
     padding-bottom: 5px;
     color: $dark-text-color;
@@ -217,8 +218,8 @@
 
   .button {
     height: 36px;
+    margin-inline-end: min(0.22em, 4px);
     padding: 0 16px;
-    margin-inline-end: 10px;
     font-size: 14px;
   }
 }
@@ -240,10 +241,10 @@
   }
 
   .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
-    padding: 10px;
     display: flex;
     align-items: center;
+    border-top: 1px solid darken($simple-background-color, 8%);
+    padding: 10px;
 
     button,
     select {
@@ -303,10 +304,6 @@
     padding: 6px 10px;
     padding-inline-end: 30px;
   }
-
-  .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
-  }
 }
 
 .muted .poll {

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

@@ -107,11 +107,11 @@ body.rtl {
   }
 
   .fa-chevron-left::before {
-    content: '\F054';
+    content: "\F054";
   }
 
   .fa-chevron-right::before {
-    content: '\F053';
+    content: "\F053";
   }
 
   .dismissable-banner,

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

@@ -86,7 +86,7 @@
 }
 
 .embed {
-  .status__content[data-spoiler='folded'] {
+  .status__content[data-spoiler="folded"] {
     .e-content {
       display: none;
     }

app/javascript/flavours/glitch/styles/tangerine/_config.scss

@@ -4,7 +4,7 @@
 */
 
 /* 🛠️ Config */
-@import 'keyframes';
+@import "keyframes";
 
 /* 🧩 Components */
-@import 'status-bar';
+@import "status-bar";

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

@@ -83,9 +83,9 @@ $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 1175px;
 
-$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-sans-serif: "mastodon-font-sans-serif" !default;
-$font-display: 'mastodon-font-display' !default;
+$font-display: "mastodon-font-display" !default;
-$font-monospace: 'mastodon-font-monospace' !default;
+$font-monospace: "mastodon-font-monospace" !default;
 
 // Avatar border size (8% default, 100% for rounded avatars)
 $ui-avatar-border-size: 8%;

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

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 .hero-widget {
   margin-bottom: 10px;