fix: mf-5500 adjust icon color of sidebar on minds (#12019)

DimensionDev · Jan 5, 2025 · 3f612d0 · 3f612d0
1 parent 8113b89
commit 3f612d0
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 15 deletions.
diff --git a/packages/icons/brands/MaskBlue.svg b/packages/icons/brands/MaskBlue.svg
diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js
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
@@ -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
@@ -25,7 +25,7 @@ export function postEditorInTimelineSelector() {
 }
 
 export function toolboxInSidebarSelector() {
-    return querySelector<E>('.m-sidebarNavigation__list li:nth-child(7)')
+    return querySelector<E>('.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
@@ -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
@@ -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<keyof HTMLElementEventMap> }) {
-    const [children, setChildren] = useState<JSX.Element[]>([])
-    useEffect(() => {
-        shadowEnvironmentMountingRoots.event.on(shadowEnvironmentMountingRoots.ALL_EVENTS, () => {
-            setChildren(Array.from(shadowEnvironmentMountingRoots.values()))
-        })
-    }, [])
+    const children = useSyncExternalStore(subscribe, () => shadowEnvironmentMountingRoots.asValues)
     return (
         <PreventShadowRootEventPropagationListContext value={props.preventPropagationList}>
             {props.wrapJSX ? props.wrapJSX(children) : children}