From cb0ad15138b04bea20e57721406d092b585d7cef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Tue, 14 Oct 2025 14:00:10 +0200 Subject: [PATCH] [feature] replace icons with Phosphor (#77) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces all icons with the [Phosphor icon set](https://phosphoricons.com/). To accomodate these icons this also touches general style of buttons, headings, and other containers of icons. I want to give a massive shout out to [Niléane](https://nileane.fr/@nileane) and her project [Tangerine UI](https://github.com/nileane/TangerineUI-for-Mastodon). Most of the icons/adjustments I’ve made are based on her choices and work. Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/77 Contains: commit 4cd78295dd6507837bb68aa71fa4da4c19606ad1 Author: Zoë Bijl Date: Tue Oct 14 13:57:50 2025 +0200 [bugfix] increase contrast for spoiler link commit 4594e776e06c3e40d7e64ebc9d77e8c6acc92cee Author: Zoë Bijl Date: Tue Oct 14 13:48:05 2025 +0200 [bugfix] increase contrast for “secondary” in light mode Increase the contrast for icons, usernames, and some other places commit 7db3518be740385774dbdf451f13f56f87913ee4 Author: Zoë Bijl Date: Tue Oct 14 13:39:36 2025 +0200 [bugfix] increase size of overlayed buttons …such as the hide sensitive content button commit 3fd37bbfa5d17bf6db099702d86096a99b55dd84 Author: Zoë Bijl Date: Tue Oct 14 13:29:22 2025 +0200 [bugfix] resize three dot menu next to user commit 82a4b2b8d9a4ccf460e7f43e9d31553040aba335 Author: Zoë Bijl Date: Tue Oct 14 13:23:29 2025 +0200 [bugfix] use correct icon name commit 470cb995f933396a1232e8d4f614d18993aeef22 Author: Zoë Bijl Date: Tue Oct 14 12:55:27 2025 +0200 [bugfix] add back translation for pin/unpin button https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/77#issuecomment-7718876 commit 255b64c8f74b4678347ba1f50ecfdfbf5d90f16c Author: Zoë Bijl Date: Tue Oct 14 12:22:34 2025 +0200 [bugfix] restore title functionality for icons the `title`-attribute doesn’t work on ``-elements. the way to do it is with a nested ``-element. this adds this functionality commit 9c25c362fb84ead98e431ad9687315ea4019e47e Author: Zoë Bijl Date: Tue Oct 14 11:54:44 2025 +0200 [bugfix] remove import of Icon This gave me an error yesterday i think, but seems fine now, so 🤷🏻‍♀️. From review: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/77#issuecomment-7719077 commit 36065d03fb3274d72557f31324bb24a8360b19e1 Author: Zoë Bijl Date: Tue Oct 14 10:43:02 2025 +0200 [docs] update changelog commit 80cb9ef0c558b1b97c091b3918b8484cbc5eea54 Author: Zoë Bijl Date: Tue Oct 14 10:09:10 2025 +0200 [bugfix] first pass at deduping and sorting commit 59beb0892137cecba3078fa4ce2cdaad1d37ee89 Author: Zoë Bijl Date: Tue Oct 14 01:59:50 2025 +0200 fix lint issues commit 3ffcdffdf1f94c27676119eba01d4649a0a9e30c Author: Zoë Bijl Date: Tue Oct 14 01:53:24 2025 +0200 liint commit cda2a62ee5f9d61b27bd0c58d247ceab3632ab0c Author: Zoë Bijl Date: Tue Oct 14 01:46:50 2025 +0200 lint commit 373b756e8a2a0983de3766e380f65df37122cdb0 Author: Zoë Bijl Date: Tue Oct 14 00:55:35 2025 +0200 rename calls commit d53ca0d9905e1482f6287af05a84c587784610ab Author: Zoë Bijl Date: Tue Oct 14 00:52:25 2025 +0200 rename icon components commit 07a1e149e12e0165c24b28a1a5a9ffe452619262 Author: Zoë Bijl Date: Tue Oct 14 00:45:21 2025 +0200 [feature] change _all_ remaining icons commit 53fdc6b82fa6bfcc326e6f1975f48dcafefc7063 Author: Zoë Bijl Date: Mon Oct 13 20:17:04 2025 +0200 [feature] change upload form icons commit d143b433b2814f440202a2e4ce055c624d10ba50 Author: Zoë Bijl Date: Mon Oct 13 13:56:27 2025 +0200 [bugfix] allow icon with badge to expand horizontally This allows it to contain more numbers / text. Getting double digit notifications for example. Or the follow request cap '40+' text. commit b737f07676d05cfe684dea9e932b61abbf8e4667 Author: Zoë Bijl Date: Mon Oct 13 13:46:13 2025 +0200 [bugfix] import correct component for “follow request” menu item commit 03205b05a9c7df798e59d5df064ced35abfa9665 Author: Zoë Bijl Date: Mon Oct 13 13:07:40 2025 +0200 [feature] update follow request icons commit 199db8b9af110d8a53be8ae0ff1841b94551e1a3 Author: Zoë Bijl Date: Mon Oct 13 01:40:23 2025 +0200 [feature] change video player controls commit 9fcbf23274e1a9623ee06dad70f39c53788dc922 Author: Zoë Bijl Date: Sun Oct 12 14:07:37 2025 +0200 [feature] change unlisted status icon to an open padlock Custom made icon based on Phosphor. I flipped the “lock” bit so it’s easier to distinguish. commit a359bf4ab131682f298d6572f1ffd442bb835043 Author: Zoë Bijl Date: Fri Oct 10 17:30:10 2025 +0200 [build] add regex for stylelint/custom-property-pattern Example: https://regex101.com/r/eITX54/1 commit 972624b3605ed43583bbcbc15d4c47a8bb69b137 Author: Zoë Bijl Date: Fri Oct 10 15:52:28 2025 +0200 [build] edit custom-property-pattern commit caf3c1e41abfd23ec64f25859daf91ad0327a65e Author: Zoë Bijl Date: Fri Oct 10 15:46:05 2025 +0200 [bugfix] fix media modal icons commit 3d2df89ab5ed0d99c5160d62d880b026ebf08d14 Author: Zoë Bijl Date: Fri Oct 10 15:35:59 2025 +0200 [bugfix] correct notification filter bar colours commit 36308a2234a86b150ffdc62608adc278e3738c88 Author: Zoë Bijl Date: Fri Oct 10 15:30:48 2025 +0200 [bugfix] fix account search result styling commit eea1c0315b22278d8ef5660c7f3e986c777ed1f4 Author: Zoë Bijl Date: Fri Oct 10 15:30:17 2025 +0200 [bugfix] fix drawer colours commit c2140a4be110bfe7ea4a76aa2797e149d2154114 Author: Zoë Bijl Date: Fri Oct 10 15:29:37 2025 +0200 [bugfix] fix search styling commit 22c7fc2491718428782308efc907563781a33d4c Author: Zoë Bijl Date: Fri Oct 10 15:28:48 2025 +0200 [feature] change icons to Phosphor commit f1eeb8990828aa0650806229e85687b00187b1fb Author: Zoë Bijl Date: Fri Oct 10 14:23:29 2025 +0200 [bugfix] properly set colors for lightmode commit 7138e11984d9a71cfb0dcffecb9de5ac2d07654e Author: Zoë Bijl Date: Fri Oct 10 14:22:59 2025 +0200 [feature] use css variables for select component - Search field - Notifications filter bar/account post bar - Status prepend part ('x' boosted) - body background color commit b91f194012bfd4e9cc5fb79c107442c7b9af6211 Author: Zoë Bijl Date: Fri Oct 10 13:58:45 2025 +0200 [bugfix] set font-weight on account portion of the display name commit 49ebf988a4b7f0576f898bc196e96fb610bb73f7 Author: Zoë Bijl Date: Fri Oct 10 12:16:41 2025 +0200 [chore] correct path to login.css commit 6433626943e1569904f97f90159121ae9421ed06 Author: Zoë Bijl Date: Fri Oct 10 12:10:54 2025 +0200 [chore] fix lint issues commit 9034a3d10353681a723a7c8f83b4c98175552541 Author: Zoë Bijl Date: Fri Oct 10 12:10:38 2025 +0200 [chore] update stylelint rules commit 5d5325d0675af5c7a36d6698e44acaa63bfeef04 Author: Zoë Bijl Date: Fri Oct 10 12:02:52 2025 +0200 [bugfix] style `.gts-icon-with-badge` Fixes styling for the notification badge commit fbd22639d997eafa1cb937a8bd49009b96abeb0d Author: Zoë Bijl Date: Fri Oct 10 09:30:14 2025 +0200 icon badge style commit 7f1c3fd388b25e9c4644d7c75af8959a78800927 Author: Zoë Bijl Date: Fri Oct 10 09:03:07 2025 +0200 [chore] fix lint issues commit 5e063da7842f098cccc174c69451fc5392b95df6 Author: Zoë Bijl Date: Fri Oct 10 01:01:35 2025 +0200 [feature] change icon for “new list” button commit c22c8ea097b719980e41a3e68c7e0553fec72bc6 Author: Zoë Bijl Date: Thu Oct 9 23:50:28 2025 +0200 [chore] add debug style for `.fa` I want to remove all FontAwesome from the project. This will help find any that are left over. commit f23696240396c75a3ee9b1780d9357f53caaeaf9 Author: Zoë Bijl Date: Thu Oct 9 23:49:39 2025 +0200 [feature] change “local only” status icon commit 94a1ec45c2b796c5c468b08104b5a668b25247bf Author: Zoë Bijl Date: Thu Oct 9 23:31:42 2025 +0200 [bugfix] properly align account buttons commit 7adcf93c80005364b8fdea1ab35c65e592327377 Author: Zoë Bijl Date: Thu Oct 9 23:31:25 2025 +0200 [bugfix] set border radius on smaller screens commit 8ad4c080698cb8e1f10e6ff95af26beb12504608 Author: Zoë Bijl Date: Thu Oct 9 23:03:15 2025 +0200 [feature] remove icons from notification purge bar commit 457c3c291020286f4e6a968c8af25d141fa9a9e4 Author: Zoë Bijl Date: Thu Oct 9 19:49:49 2025 +0200 [feature] change list edit buttons commit 046be63ed6a0d7126420dd9c08843630fae7c08d Author: Zoë Bijl Date: Thu Oct 9 18:15:14 2025 +0200 [feature] update dismissible banner icon commit 506e59034bbcf59a8718a6ee8261b74aedc3b36f Author: Zoë Bijl Date: Thu Oct 9 15:08:15 2025 +0200 [feature] change header pin state/move icons commit d97df4b87ff5de70328424affe0991206e52fe68 Author: Zoë Bijl Date: Thu Oct 9 11:42:55 2025 +0200 [chore] fix lint:js errors commit b418204ae3619a276e60f14097c99bc0e19c4d03 Author: Zoë Bijl Date: Thu Oct 9 09:50:37 2025 +0200 [chore] fix lint:js errors …related to the icons commit 415b05d20abae733f313e2b994765eca58e9eb81 Author: Zoë Bijl Date: Wed Oct 8 13:44:51 2025 +0200 [feature] replace column move icons commit 14f119be65fe610f90c8b28f187df6a37fcc7c36 Author: Zoë Bijl Date: Wed Oct 8 13:38:18 2025 +0200 [bugfix] hide overflow text commit 6fb2dd73be3565cab4324e87ae98e40cf1bd846d Author: Zoë Bijl Date: Wed Oct 8 12:05:25 2025 +0200 [feature] improve status-prepend display name hover state commit f8f0b403af3d527e204dba981225fd23c8b365a3 Author: Zoë Bijl Date: Wed Oct 8 11:55:57 2025 +0200 [bugfix] uncomment slim back button styles commit 8b254ae288f4d2ff349e89350cfd30603dbcf50d Author: Zoë Bijl Date: Wed Oct 8 11:44:54 2025 +0200 [feature] refactor status styling This does a bunch of stuff: - split out status components into their own file - unify spacing within a status - outline all icons - neatly fade the overflow part of a username - add underlines to username links when appropriate - correctly size all icons in a status - restyle spoiler link (content warning button) commit ebfbed05532377cfdfb42b906942297cb6f68163 Author: Zoë Bijl Date: Wed Oct 8 11:40:18 2025 +0200 [feature] change content warning state icon commit f70946ef4895743ec631171c1eb99db9ef015c82 Author: Zoë Bijl Date: Wed Oct 8 11:26:22 2025 +0200 [bugfix] remove unnecessary `` commit 312b15758151d2ad1229139353f4d7e50296971e Author: Zoë Bijl Date: Wed Oct 8 11:15:07 2025 +0200 [bugfix] correctly align status prepend commit 2cd3a82fc70fff3c534ba95618518aa5e0e73609 Author: Zoë Bijl Date: Wed Oct 8 11:04:39 2025 +0200 [bugfix] set correct icon state in detailed status view This change was already made for the normal status view. It sets the icon to be filled when a status is boosted or favourited. Also forgoing the need for the Glitch checkmark. commit e1c13259058959244ffa3ac16b388e5bf23a669d Author: Zoë Bijl Date: Wed Oct 8 11:02:58 2025 +0200 [feature] replace load-gap icon commit d483cab118da26a49e4e1149369298990737047e Author: Zoë Bijl Date: Wed Oct 8 11:00:05 2025 +0200 [feature] align `drawer` and `compose-panel` components - Neatly aligns both the `.drawer` and `.compose-panel` components - Fixes `.search__input` padding when inside the `.compose-panel` commit 3c85b02b51c87bfbf0701c271db9c0ef80d93eb7 Author: Zoë Bijl Date: Wed Oct 8 10:52:37 2025 +0200 [feature] add “sizes” variables file commit 7a4b9c6634e67df0470b406080a0d995909ae418 Author: Zoë Bijl Date: Tue Oct 7 17:26:30 2025 +0200 [feature] space out status action bar items commit ebfd05be3d091cc303edad32824eac1623626d8f Author: Zoë Bijl Date: Tue Oct 7 17:25:49 2025 +0200 [bugfix] remove “sticky” background on focus commit a977011b344a06b9e3f8e224ffa77c079393b182 Author: Zoë Bijl Date: Tue Oct 7 17:24:52 2025 +0200 [feature] refactor status prepend box commit 52fbda27ed77eb1a4c3aadff1312d50596c72cd4 Author: Zoë Bijl Date: Tue Oct 7 17:20:44 2025 +0200 [feature] add GTS specific CSS provides a space to place rewritten CSS; should help keep track of what has been done. commit 7209169ba95ab0f4a1aa714740136a68e292c2ed Author: Zoë Bijl Date: Mon Oct 6 13:02:02 2025 +0200 [feature] add animations to status bar icons When activated the status bar (under a toot) icons now do a cute lil animation, courtesy of Tangerine UI. commit c0ea21299f357f592e449b224eb75398b0047a4d Author: Zoë Bijl Date: Sun Oct 5 01:36:12 2025 +0200 [feature] refactor search box / add drawer outlines - add outlines to some UI elements like the timeline and drawers - search “clear” button is now an actual ` ); diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx index eaa08af53..f5219f28a 100644 --- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx +++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx @@ -27,7 +27,7 @@ export default class ColumnBackButtonSlim extends PureComponent { return (
- +
diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx index 4254995c8..9ce770c19 100644 --- a/app/javascript/flavours/glitch/components/column_header.jsx +++ b/app/javascript/flavours/glitch/components/column_header.jsx @@ -7,6 +7,7 @@ import { FormattedMessage, injectIntl, defineMessages } from "react-intl"; import classNames from "classnames"; import { Icon } from "flavours/glitch/components/icon"; +import { IconButton } from "flavours/glitch/components/icon_button"; const messages = defineMessages({ show: { id: "column_header.show_settings", defaultMessage: "Show settings" }, @@ -117,34 +118,39 @@ class ColumnHeader extends PureComponent { } if (multiColumn && pinned) { - pinButton = ; + pinButton = (); moveButtons = ( -
- - +
+ +
); } else if (multiColumn && this.props.onPin) { - pinButton = ; + pinButton = (); } if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) { backButton = ( ); } + + const columnHeaderFooter = ( +
+ {pinButton} {moveButtons} +
+ ); const collapsedContent = [ extraContent, ]; if (multiColumn) { - collapsedContent.push(pinButton); - collapsedContent.push(moveButtons); + collapsedContent.push(columnHeaderFooter); } if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) { @@ -155,10 +161,10 @@ class ColumnHeader extends PureComponent { aria-label={formatMessage(collapsed ? messages.show : messages.hide)} onClick={this.handleToggleClick} > - - - {collapseIssues && } - +
+ + {collapseIssues && } +
); } diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx index 50ec411e2..d3871f375 100644 --- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx +++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx @@ -35,7 +35,8 @@ export const DismissableBanner: React.FC> = ({
diff --git a/app/javascript/flavours/glitch/components/domain.tsx b/app/javascript/flavours/glitch/components/domain.tsx index 624936438..d8b0045f5 100644 --- a/app/javascript/flavours/glitch/components/domain.tsx +++ b/app/javascript/flavours/glitch/components/domain.tsx @@ -34,7 +34,7 @@ export const Domain: React.FC = ({ domain, onUnblockDomain }) => {
diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx index f51a13b20..7eb3de155 100644 --- a/app/javascript/flavours/glitch/components/icon.tsx +++ b/app/javascript/flavours/glitch/components/icon.tsx @@ -13,10 +13,11 @@ export const Icon: React.FC = ({ id, className, fixedWidth, + title, ...other }) => ( - + + {title && {title}} + + ); diff --git a/app/javascript/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx index 84ad5818e..99f897b86 100644 --- a/app/javascript/flavours/glitch/components/icon_button.tsx +++ b/app/javascript/flavours/glitch/components/icon_button.tsx @@ -82,24 +82,10 @@ export class IconButton extends React.PureComponent { }; render() { - // Hack required for some icons which have an overriden size - let containerSize = "1.28571429em"; - if (this.props.style?.fontSize) { - containerSize = `${this.props.size * 1.28571429}px`; - } - const style = { - fontSize: `${this.props.size}px`, - height: containerSize, - lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; - if (!this.props.label) { - style.width = containerSize; - } else { - style.textAlign = "left"; - } const { active, diff --git a/app/javascript/flavours/glitch/components/icon_with_badge.tsx b/app/javascript/flavours/glitch/components/icon_with_badge.tsx index 4696f76ab..ef328c3f2 100644 --- a/app/javascript/flavours/glitch/components/icon_with_badge.tsx +++ b/app/javascript/flavours/glitch/components/icon_with_badge.tsx @@ -16,11 +16,11 @@ export const IconWithBadge: React.FC = ({ issueBadge, className, }) => ( - +
{count > 0 && ( - {formatNumber(count)} + {formatNumber(count)} )} - {issueBadge && } - + {issueBadge &&
} +
); diff --git a/app/javascript/flavours/glitch/components/load_gap.tsx b/app/javascript/flavours/glitch/components/load_gap.tsx index 054337ae9..8b10dbbc7 100644 --- a/app/javascript/flavours/glitch/components/load_gap.tsx +++ b/app/javascript/flavours/glitch/components/load_gap.tsx @@ -28,7 +28,7 @@ export const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)} > - + ); }; diff --git a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx index 73c878de0..444c137a0 100644 --- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx +++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx @@ -17,10 +17,10 @@ import ImmutablePureComponent from "react-immutable-pure-component"; import { Icon } from "flavours/glitch/components/icon"; const messages = defineMessages({ - btnAll : { id: "notification_purge.btn_all", defaultMessage: "Select\nall" }, - btnNone : { id: "notification_purge.btn_none", defaultMessage: "Select\nnone" }, - btnInvert : { id: "notification_purge.btn_invert", defaultMessage: "Invert\nselection" }, - btnApply : { id: "notification_purge.btn_apply", defaultMessage: "Clear\nselected" }, + btnAll : { id: "notification_purge.btn_all", defaultMessage: "All" }, + btnNone : { id: "notification_purge.btn_none", defaultMessage: "None" }, + btnInvert : { id: "notification_purge.btn_invert", defaultMessage: "Invert" }, + btnApply : { id: "notification_purge.btn_apply", defaultMessage: "Remove" }, }); class NotificationPurgeButtons extends ImmutablePureComponent { @@ -35,25 +35,24 @@ class NotificationPurgeButtons extends ImmutablePureComponent { }; render () { - const { intl, markNewForDelete } = this.props; + const { intl } = this.props; - //className='active' return (
- -
); diff --git a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx index e03555c71..f153fca7b 100644 --- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx +++ b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx @@ -22,7 +22,7 @@ class PictureInPicturePlaceholder extends PureComponent { render () { return (
- +
); diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 019faa3a0..452403d3b 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -648,7 +648,7 @@ class Status extends ImmutablePureComponent { if (pictureInPicture.get("inUse")) { media.push(); - mediaIcons.push("video-camera"); + mediaIcons.push("film-strip"); } else if (attachments.size > 0) { const language = status.getIn(["translation", "language"]) || status.get("language"); @@ -688,7 +688,7 @@ class Status extends ImmutablePureComponent { )} , ); - mediaIcons.push("music"); + mediaIcons.push("music-note"); } else if (attachments.getIn([0, "type"]) === "video") { const attachment = status.getIn(["media_attachments", 0]); const description = attachment.getIn(["translation", "description"]) || attachment.get("description"); @@ -715,7 +715,7 @@ class Status extends ImmutablePureComponent { />)} , ); - mediaIcons.push("video-camera"); + mediaIcons.push("film-strip"); } else { // Media type is 'image' or 'gifv' media.push( @@ -737,7 +737,7 @@ class Status extends ImmutablePureComponent { )} , ); - mediaIcons.push("picture-o"); + mediaIcons.push("image"); } if (!status.get("sensitive") && !(status.get("spoiler_text").length > 0) && settings.getIn(["collapsed", "backgrounds", "preview_images"])) { @@ -759,7 +759,7 @@ class Status extends ImmutablePureComponent { if (status.get("poll")) { const language = status.getIn(["translation", "language"]) || status.get("language"); contentMedia.push(); - contentMediaIcons.push("tasks"); + contentMediaIcons.push("chart-bar-horizontal"); } // Here we prepare extra data-* attributes for CSS selectors. @@ -819,17 +819,15 @@ class Status extends ImmutablePureComponent { {(connectReply || connectUp || connectToRoot) &&
}
- - {muted && prepend} - {!muted || !isCollapsed ? ( - - ) : null} - + {muted && prepend} + {!muted || !isCollapsed ? ( + + ) : null} - - - + + + {filterButton} @@ -323,7 +322,7 @@ class StatusActionBar extends ImmutablePureComponent { scrollKey={scrollKey} status={status} items={menu} - icon='ellipsis-h' + icon='dots-three-outline' size={18} direction='right' ariaLabel={intl.formatMessage(messages.more)} diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index e8277ed8e..f29ced63b 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -360,6 +360,7 @@ class StatusContent extends PureComponent { {" "}

diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx index 0ca3864d1..77827b94a 100644 --- a/app/javascript/flavours/glitch/components/status_icons.jsx +++ b/app/javascript/flavours/glitch/components/status_icons.jsx @@ -114,7 +114,7 @@ class StatusIcons extends PureComponent {