From 2f5e41b9252302770b3908fd3211614777c11676 Mon Sep 17 00:00:00 2001 From: Jack Works Date: Wed, 29 Dec 2021 15:07:19 +0800 Subject: [PATCH 1/3] feat: support dim color --- packages/icons/brands/MiniMask.tsx | 1 + packages/icons/general/Eye.tsx | 1 + packages/icons/general/EyeOff.tsx | 1 + packages/icons/general/LinkOut.tsx | 1 + packages/icons/general/PublicKey.tsx | 1 + packages/icons/general/Retweet.tsx | 1 + packages/icons/plugins/GoodGhosting.tsx | 1 + packages/icons/plugins/Valuables.tsx | 1 + .../icons/settings/SettingsAppearance.tsx | 1 + packages/icons/settings/SettingsBackup.tsx | 1 + packages/icons/settings/SettingsEmail.tsx | 1 + packages/icons/settings/SettingsLanguage.tsx | 1 + packages/icons/settings/SettingsPassword.tsx | 1 + packages/icons/settings/SettingsPhone.tsx | 1 + packages/icons/settings/SettingsRestore.tsx | 1 + packages/icons/settings/SettingsSync.tsx | 1 + .../icons/utils/MaskIconPaletteContext.ts | 4 ++++ packages/icons/utils/index.tsx | 19 +++++++++++++++++-- packages/icons/utils/previewer.tsx | 8 ++++++++ 19 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 packages/icons/utils/MaskIconPaletteContext.ts diff --git a/packages/icons/brands/MiniMask.tsx b/packages/icons/brands/MiniMask.tsx index 0ea5f45921d5..aeee3c5260b0 100644 --- a/packages/icons/brands/MiniMask.tsx +++ b/packages/icons/brands/MiniMask.tsx @@ -45,5 +45,6 @@ export const MiniMaskIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 48 48', ) diff --git a/packages/icons/general/Eye.tsx b/packages/icons/general/Eye.tsx index 10ee37a1f4a5..9bc23f7ae8c1 100644 --- a/packages/icons/general/Eye.tsx +++ b/packages/icons/general/Eye.tsx @@ -34,5 +34,6 @@ export const EyeIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/EyeOff.tsx b/packages/icons/general/EyeOff.tsx index 3682c90cc3cd..8ad8888f0b90 100644 --- a/packages/icons/general/EyeOff.tsx +++ b/packages/icons/general/EyeOff.tsx @@ -20,5 +20,6 @@ export const EyeOffIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/LinkOut.tsx b/packages/icons/general/LinkOut.tsx index 56ea11197f18..5fa992219d78 100644 --- a/packages/icons/general/LinkOut.tsx +++ b/packages/icons/general/LinkOut.tsx @@ -37,5 +37,6 @@ export const LinkOutIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/PublicKey.tsx b/packages/icons/general/PublicKey.tsx index 4344d91da09b..6d153f302306 100644 --- a/packages/icons/general/PublicKey.tsx +++ b/packages/icons/general/PublicKey.tsx @@ -20,5 +20,6 @@ export const PublicKeyIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 20 20', ) diff --git a/packages/icons/general/Retweet.tsx b/packages/icons/general/Retweet.tsx index 9d29a8d03bc5..c822893b3ba1 100644 --- a/packages/icons/general/Retweet.tsx +++ b/packages/icons/general/Retweet.tsx @@ -14,5 +14,6 @@ export const RetweetIcon = createPaletteAwareIcon( fill="#D9D9D9" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/plugins/GoodGhosting.tsx b/packages/icons/plugins/GoodGhosting.tsx index 98aa38a205bd..cf0ee878da90 100644 --- a/packages/icons/plugins/GoodGhosting.tsx +++ b/packages/icons/plugins/GoodGhosting.tsx @@ -15,5 +15,6 @@ export const GoogGhostingIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 28 28', ) diff --git a/packages/icons/plugins/Valuables.tsx b/packages/icons/plugins/Valuables.tsx index 063a3c421a09..4052ede662bf 100644 --- a/packages/icons/plugins/Valuables.tsx +++ b/packages/icons/plugins/Valuables.tsx @@ -19,5 +19,6 @@ export const ValuablesIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 28 28', ) diff --git a/packages/icons/settings/SettingsAppearance.tsx b/packages/icons/settings/SettingsAppearance.tsx index a04fba614897..63c102d6d29a 100644 --- a/packages/icons/settings/SettingsAppearance.tsx +++ b/packages/icons/settings/SettingsAppearance.tsx @@ -25,5 +25,6 @@ export const SettingsAppearanceIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsBackup.tsx b/packages/icons/settings/SettingsBackup.tsx index bed49f36aebf..4d9cb5589384 100644 --- a/packages/icons/settings/SettingsBackup.tsx +++ b/packages/icons/settings/SettingsBackup.tsx @@ -29,5 +29,6 @@ export const SettingsBackupIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsEmail.tsx b/packages/icons/settings/SettingsEmail.tsx index ce547527bd63..6646ff27dc83 100644 --- a/packages/icons/settings/SettingsEmail.tsx +++ b/packages/icons/settings/SettingsEmail.tsx @@ -23,5 +23,6 @@ export const SettingsEmailIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsLanguage.tsx b/packages/icons/settings/SettingsLanguage.tsx index 868fbae8114f..5957de1e5a4a 100644 --- a/packages/icons/settings/SettingsLanguage.tsx +++ b/packages/icons/settings/SettingsLanguage.tsx @@ -71,5 +71,6 @@ export const SettingsLanguageIcon: typeof SvgIcon = createPaletteAwareIcon( , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsPassword.tsx b/packages/icons/settings/SettingsPassword.tsx index 72f7bbb09327..a39f08886cbe 100644 --- a/packages/icons/settings/SettingsPassword.tsx +++ b/packages/icons/settings/SettingsPassword.tsx @@ -21,5 +21,6 @@ export const SettingsPasswordIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsPhone.tsx b/packages/icons/settings/SettingsPhone.tsx index 38f8a38979a7..46ea51b8ff5b 100644 --- a/packages/icons/settings/SettingsPhone.tsx +++ b/packages/icons/settings/SettingsPhone.tsx @@ -23,5 +23,6 @@ export const SettingsPhoneIcon: typeof SvgIcon = createPaletteAwareIcon( /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsRestore.tsx b/packages/icons/settings/SettingsRestore.tsx index 7b381314e084..3ec5b3586d35 100644 --- a/packages/icons/settings/SettingsRestore.tsx +++ b/packages/icons/settings/SettingsRestore.tsx @@ -21,5 +21,6 @@ export const SettingsRestoreIcon: typeof SvgIcon = createPaletteAwareIcon( strokeLinejoin="round" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/settings/SettingsSync.tsx b/packages/icons/settings/SettingsSync.tsx index 504295924756..5a66ae6b2d84 100644 --- a/packages/icons/settings/SettingsSync.tsx +++ b/packages/icons/settings/SettingsSync.tsx @@ -31,5 +31,6 @@ export const SettingsSyncIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#fff" /> , + undefined, '0 0 24 24', ) diff --git a/packages/icons/utils/MaskIconPaletteContext.ts b/packages/icons/utils/MaskIconPaletteContext.ts new file mode 100644 index 000000000000..e4507360a637 --- /dev/null +++ b/packages/icons/utils/MaskIconPaletteContext.ts @@ -0,0 +1,4 @@ +import { createContext } from 'react' + +export type MaskIconPalette = 'light' | 'dark' | 'dim' +export const MaskIconPaletteContext = createContext('dark') diff --git a/packages/icons/utils/index.tsx b/packages/icons/utils/index.tsx index 6a72e2bbcf6c..0361bd2b5595 100644 --- a/packages/icons/utils/index.tsx +++ b/packages/icons/utils/index.tsx @@ -1,5 +1,6 @@ import { useTheme, SvgIcon, SvgIconProps, Theme } from '@mui/material' -import { forwardRef, memo, ForwardedRef } from 'react' +import { forwardRef, memo, ForwardedRef, useContext } from 'react' +import { MaskIconPaletteContext } from './MaskIconPaletteContext' /** @internal */ export type Size = [width: number | undefined, height: number | undefined] @@ -41,6 +42,7 @@ export function createIcon(name: string, svg: SvgIconRaw, viewBox?: string, defa * @param name Name of the Icon * @param light SVG content when the theme is light theme. Do not include tag * @param dark SVG content when the theme is light theme. Do not include tag + * @param dim SVG content when the theme is dark, and the MaskIconPaletteContext is "dim". Do not include tag * @param viewBox The viewbox * @param defaultSize Only use this when the icon is not square. Unit: px * @returns A component that same type as icons from @mui/icons-material @@ -49,8 +51,21 @@ export function createPaletteAwareIcon( name: string, light: JSX.Element, dark: JSX.Element, + dim: JSX.Element | undefined, viewBox?: string, defaultSize?: Size, ) { - return createIcon(name, (theme) => (theme.palette.mode === 'light' ? light : dark), viewBox, defaultSize) + return createIcon( + name, + (theme) => { + const isDim = useContext(MaskIconPaletteContext) + if (theme.palette.mode === 'dark') { + if (isDim && dim) return dim + return dark + } + return light + }, + viewBox, + defaultSize, + ) } diff --git a/packages/icons/utils/previewer.tsx b/packages/icons/utils/previewer.tsx index 700dd5bc07a9..a1018d21bcc7 100644 --- a/packages/icons/utils/previewer.tsx +++ b/packages/icons/utils/previewer.tsx @@ -1,3 +1,4 @@ +import { MaskIconPaletteContext } from './MaskIconPaletteContext' /** @internal */ export interface IconPreviewProps { icons: Record> @@ -14,6 +15,13 @@ export function IconPreview(props: IconPreviewProps) { {name} } /> } /> + + + + } + /> ))} From 90812bcbfce189541bcda6cfe7af36492d604edf Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Wed, 29 Dec 2021 17:21:45 +0800 Subject: [PATCH 2/3] fix: add icon palette context in mask ui root --- packages/icons/index.ts | 1 + packages/icons/utils/index.tsx | 3 ++- packages/mask/src/UIRoot.tsx | 12 +++++++++++- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/icons/index.ts b/packages/icons/index.ts index 9f9bb5772baa..902aa31f743b 100644 --- a/packages/icons/index.ts +++ b/packages/icons/index.ts @@ -1,4 +1,5 @@ export { createIcon } from './utils' +export * from './utils/MaskIconPaletteContext' export * from './general' export * from './brands' export * from './plugins' diff --git a/packages/icons/utils/index.tsx b/packages/icons/utils/index.tsx index 0361bd2b5595..92d78089bb60 100644 --- a/packages/icons/utils/index.tsx +++ b/packages/icons/utils/index.tsx @@ -58,7 +58,8 @@ export function createPaletteAwareIcon( return createIcon( name, (theme) => { - const isDim = useContext(MaskIconPaletteContext) + const palette = useContext(MaskIconPaletteContext) + const isDim = palette === 'dim' if (theme.palette.mode === 'dark') { if (isDim && dim) return dim return dark diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx index f2fb7cfeeb7d..8ae74f0b18d0 100644 --- a/packages/mask/src/UIRoot.tsx +++ b/packages/mask/src/UIRoot.tsx @@ -11,7 +11,8 @@ import { activatedSocialNetworkUI } from './social-network' import { isFacebook } from './social-network-adaptor/facebook.com/base' import { pluginIDSettings } from './settings/settings' import { fixWeb3State } from './plugins/EVM/UI/Web3State' - +import { getBackgroundColor } from './utils' +import { MaskIconPaletteContext } from '@masknet/icons' const identity = (jsx: React.ReactNode) => jsx as JSX.Element function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) { return f.reduceRight((prev, curr) => curr(prev), <>{init}) @@ -24,8 +25,17 @@ type MaskThemeProvider = React.PropsWithChildren<{ function MaskThemeProvider({ children, baseline, useTheme }: MaskThemeProvider) { const theme = useTheme() + const backgroundColor = getBackgroundColor(document.body) + const isDark = theme.palette.mode === 'dark' + const isDarker = backgroundColor === 'rgb(0,0,0)' + return compose( children, + (jsx) => ( + + {jsx} + + ), (jsx) => , (jsx) => ( Date: Thu, 30 Dec 2021 13:25:52 +0800 Subject: [PATCH 3/3] fix: add conditions for judging the twitter environment --- packages/mask/src/UIRoot.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx index 8ae74f0b18d0..f24b44a7b9fe 100644 --- a/packages/mask/src/UIRoot.tsx +++ b/packages/mask/src/UIRoot.tsx @@ -13,6 +13,7 @@ import { pluginIDSettings } from './settings/settings' import { fixWeb3State } from './plugins/EVM/UI/Web3State' import { getBackgroundColor } from './utils' import { MaskIconPaletteContext } from '@masknet/icons' +import { isTwitter } from './social-network-adaptor/twitter.com/base' const identity = (jsx: React.ReactNode) => jsx as JSX.Element function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) { return f.reduceRight((prev, curr) => curr(prev), <>{init}) @@ -32,7 +33,8 @@ function MaskThemeProvider({ children, baseline, useTheme }: MaskThemeProvider) return compose( children, (jsx) => ( - + {jsx} ),