From 3f612d0b30a0dcf79fcc04fdee1620e24354ad57 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Sun, 5 Jan 2025 18:21:37 +0800 Subject: [PATCH] fix: mf-5500 adjust icon color of sidebar on minds (#12019) --- packages/icons/brands/MaskBlue.svg | 2 +- packages/icons/icon-generated-as-jsx.js | 22 ++++++++++++++++++- .../minds.com/injection/ToolboxHint_UI.tsx | 13 +++++++---- .../site-adaptors/minds.com/utils/selector.ts | 2 +- .../src/SiteAdaptor/RedPacket/index.tsx | 2 +- .../theme/src/ShadowRoot/ShadowRootSetup.tsx | 11 ++++------ 6 files changed, 37 insertions(+), 15 deletions(-) diff --git a/packages/icons/brands/MaskBlue.svg b/packages/icons/brands/MaskBlue.svg index 12a27dfc5aa1..0edfc3b85c16 100644 --- a/packages/icons/brands/MaskBlue.svg +++ b/packages/icons/brands/MaskBlue.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js index 400eece8619d..e6f44e7e0964 100644 --- a/packages/icons/icon-generated-as-jsx.js +++ b/packages/icons/icon-generated-as-jsx.js @@ -326,7 +326,27 @@ export const MaskBanner = /*#__PURE__*/ __createIcon('MaskBanner', [ ]) export const MaskBlue = /*#__PURE__*/ __createIcon('MaskBlue', [ { - u: () => new URL('./brands/MaskBlue.svg', import.meta.url).href, + j: () => + /*#__PURE__*/ _jsxs('svg', { + xmlns: 'http://www.w3.org/2000/svg', + viewBox: '0 0 120 120', + children: [ + /*#__PURE__*/ _jsx('path', { + d: 'M60 120A60 60 0 1 0 60 0a60 60 0 0 0 0 120', + style: { + '--default-color': '#1c68f3', + fill: 'var(--icon-color, var(--default-color, #1c68f3))', + }, + }), + /*#__PURE__*/ _jsx('path', { + fill: '#fff', + fillRule: 'evenodd', + d: 'M96 46v20H33.42a27.21 27.21 0 0 0 50.95 6H96v16.8a7.2 7.2 0 0 1-7.2 7.2H31.2a7.2 7.2 0 0 1-7.2-7.2V46zM77.47 72a21.18 21.18 0 0 1-35.03 0zM44.6 50.8a11.2 11.2 0 0 0-11.09 9.6h6.14a5.2 5.2 0 0 1 9.9 0h6.14a11.2 11.2 0 0 0-11.09-9.6m30.8 0a11.2 11.2 0 0 0-11.09 9.6h6.14a5.2 5.2 0 0 1 9.9 0h6.14a11.2 11.2 0 0 0-11.09-9.6M88.8 24a7.2 7.2 0 0 1 7.2 7.2V40H24v-8.8a7.2 7.2 0 0 1 7.2-7.2z', + clipRule: 'evenodd', + }), + ], + }), + s: true, }, ]) export const MaskGrey = /*#__PURE__*/ __createIcon('MaskGrey', [ diff --git a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx index 24d3844ff5fc..38c12f95e03e 100644 --- a/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx +++ b/packages/mask/content-script/site-adaptors/minds.com/injection/ToolboxHint_UI.tsx @@ -6,15 +6,20 @@ const mindsBreakPoint = 1221 /** px */ const Container = styled('div')` height: 45px; margin-bottom: 10px; + padding-left: 10px; ` const Item = styled(ListItemButton)` border-radius: 8px; height: 45px; padding: 4px 12px 4px 0; - color: ${({ theme }) => theme.palette.primary.main}; + color: #43434d !important; &:hover { background: unset; - color: rgb(48, 153, 242); + color: #43434d; + } + [data-icon] { + color: #43434d; + --icon-color: #43434d; } @media screen and (max-width: ${mindsBreakPoint}px) { padding: 12px 0; @@ -28,12 +33,12 @@ const Text = styled(Typography)` /* Minds font */ font-family: Roboto, Helvetica, sans-serif; font-weight: 700; - font-size: 17px; + font-size: 19px; line-height: 44px; ` const Icon = styled(ListItemIcon)` color: inherit; - min-width: 48px; + min-width: 45px; margin-left: 6px; @media screen and (max-width: ${mindsBreakPoint}px) { min-width: 0; diff --git a/packages/mask/content-script/site-adaptors/minds.com/utils/selector.ts b/packages/mask/content-script/site-adaptors/minds.com/utils/selector.ts index 451efcb9ac4a..83b21ce619f0 100644 --- a/packages/mask/content-script/site-adaptors/minds.com/utils/selector.ts +++ b/packages/mask/content-script/site-adaptors/minds.com/utils/selector.ts @@ -25,7 +25,7 @@ export function postEditorInTimelineSelector() { } export function toolboxInSidebarSelector() { - return querySelector('.m-sidebarNavigation__list li:nth-child(7)') + return querySelector('.m-sidebarNavigation__list li:has([data-ref="sidenav-wallet"])') } export function postEditorDraftContentSelector() { diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx index cc2bd7a6728f..f49b554b66da 100644 --- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx +++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx @@ -153,7 +153,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) { ) return isOnTwitter || isOnFacebook ? _(msg`${claimed} Follow @${shareTextOption.account} (mask.io) to claim lucky drops.`) + - `\npromote_short\n#mask_io #LuckyDrop\n${shareTextOption.payload}` + `\n${promote_short}\n#mask_io #LuckyDrop\n${shareTextOption.payload}` : `${claimed}\n${promote_short}\n${shareTextOption.payload}` } const head = _( diff --git a/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx b/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx index 179deceff0bc..ea68f2ea5262 100644 --- a/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx +++ b/packages/theme/src/ShadowRoot/ShadowRootSetup.tsx @@ -1,5 +1,5 @@ import { ObservableMap } from '@masknet/shared-base' -import { StrictMode, useEffect, useState, type JSX } from 'react' +import { StrictMode, useSyncExternalStore, type JSX } from 'react' import { createRoot } from 'react-dom/client' import { PreventShadowRootEventPropagationListContext } from './Contexts.js' @@ -35,13 +35,10 @@ export function setupReactShadowRootEnvironment( ) return portalContainer } +const subscribe = (f: () => void) => + shadowEnvironmentMountingRoots.event.on(shadowEnvironmentMountingRoots.ALL_EVENTS, f) function MountingPoint(props: { wrapJSX: WrapJSX; preventPropagationList: Array }) { - const [children, setChildren] = useState([]) - useEffect(() => { - shadowEnvironmentMountingRoots.event.on(shadowEnvironmentMountingRoots.ALL_EVENTS, () => { - setChildren(Array.from(shadowEnvironmentMountingRoots.values())) - }) - }, []) + const children = useSyncExternalStore(subscribe, () => shadowEnvironmentMountingRoots.asValues) return ( {props.wrapJSX ? props.wrapJSX(children) : children}