From bf237c3b4397b2a890158b7a54b292c374d14d0c Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Tue, 4 Jan 2022 15:31:24 +0800 Subject: [PATCH 1/9] fix: background of nft send confirm dialog --- .../plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx index 8106616be51c..cc4720858fbb 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx @@ -68,7 +68,7 @@ const useStyles = makeStyles()((theme) => ({ width: '100%', height: 420, overflowY: 'auto', - background: theme.palette.mode === 'light' ? '#F7F9FA' : '#17191D', + background: theme.palette.background.default, borderRadius: 12, marginTop: theme.spacing(1.5), marginBottom: theme.spacing(1.5), From f9ddd4c7251294e45a100e0cd524cd31f571c4e6 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Tue, 4 Jan 2022 17:32:20 +0800 Subject: [PATCH 2/9] fix: mask dialog color --- .../External/components/CompositionEntry.tsx | 8 +++---- .../FileService/src/SNSAdaptor/MainDialog.tsx | 21 ++++++++++++++++--- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/plugins/External/components/CompositionEntry.tsx b/packages/mask/src/plugins/External/components/CompositionEntry.tsx index 37046d484118..f27b2b708379 100644 --- a/packages/mask/src/plugins/External/components/CompositionEntry.tsx +++ b/packages/mask/src/plugins/External/components/CompositionEntry.tsx @@ -1,10 +1,10 @@ import type { Plugin } from '@masknet/plugin-infra' import { usePortalShadowRoot } from '@masknet/theme' -import { MaskDialog } from '@masknet/theme' import { DialogContent } from '@mui/material' import { useEffect } from 'react' import { MaskMessages, useI18N } from '../../../utils' import { PluginLoader } from './PluginLoader' +import { InjectedDialog } from '../../../components/shared/InjectedDialog' export function ThirdPartyPluginCompositionEntry(props: Plugin.SNSAdaptor.CompositionDialogEntry_DialogProps) { const { t } = useI18N() @@ -16,14 +16,14 @@ export function ThirdPartyPluginCompositionEntry(props: Plugin.SNSAdaptor.Compos [props.onClose], ) return usePortalShadowRoot((container) => ( - + container={container}> - + )) } diff --git a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx index 9b3ea57fcee7..88e600d20985 100644 --- a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx +++ b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx @@ -17,7 +17,7 @@ interface Props { open: boolean } -const useStyles = makeStyles()({ +const useStyles = makeStyles()((theme) => ({ actions: { alignSelf: 'center', }, @@ -29,7 +29,18 @@ const useStyles = makeStyles()({ paddingLeft: 35, paddingRight: 35, }, -}) + paper: { + width: '600px !important', + maxWidth: 'none', + boxShadow: 'none', + backgroundImage: 'none', + [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: { + display: 'block !important', + margin: 12, + }, + }, +})) + const FileServiceDialog: React.FC = (props) => { const t = useI18N() const { classes } = useStyles() @@ -60,7 +71,11 @@ const FileServiceDialog: React.FC = (props) => { showSnackbar(t.uploading_on_cancel()) } return ( - + From 08c2cff1e64b4f56be443affc1d034acf2da1db9 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 4 Jan 2022 17:51:22 +0800 Subject: [PATCH 3/9] fix: text ellipsis --- packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx index a80710b795aa..cd1704773d28 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx @@ -414,7 +414,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) { {payload.message}} subheader={ Date: Tue, 4 Jan 2022 17:55:18 +0800 Subject: [PATCH 4/9] fix: type --- packages/icons/brands/MaskGrey.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/icons/brands/MaskGrey.tsx b/packages/icons/brands/MaskGrey.tsx index 7ab13dd429ab..5cc56d67a947 100644 --- a/packages/icons/brands/MaskGrey.tsx +++ b/packages/icons/brands/MaskGrey.tsx @@ -21,6 +21,7 @@ export const MaskGreyIcon: typeof SvgIcon = createPaletteAwareIcon( fill="#15171A" /> , + undefined, '0 0 120 120', [130, 40], ) From a30cbc55ab47a60d9698a1cb07caa053bd5c4fa1 Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 4 Jan 2022 18:00:25 +0800 Subject: [PATCH 5/9] chore: dim dao page --- packages/plugins/DAO/src/components/DAOPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/plugins/DAO/src/components/DAOPage.tsx b/packages/plugins/DAO/src/components/DAOPage.tsx index 09e785e907ed..dc3bc3f9133d 100644 --- a/packages/plugins/DAO/src/components/DAOPage.tsx +++ b/packages/plugins/DAO/src/components/DAOPage.tsx @@ -1,14 +1,14 @@ -import { useState } from 'react' +import { useState, useContext } from 'react' import IframeResizer from 'iframe-resizer-react' -import { useTheme } from '@mui/material' import type { ProfileIdentifier } from '@masknet/shared-base' +import { MaskIconPaletteContext } from '../../../../icons/utils/MaskIconPaletteContext' interface DAOPageProps { identifier?: ProfileIdentifier } export function DAOPage({ identifier }: DAOPageProps) { - const mode = useTheme().palette.mode + const mode = useContext(MaskIconPaletteContext) const [size, setSize] = useState({ height: 500, width: 1 }) const onResized = (data: { height: number; width: number }) => setSize(data) From ba9de1bb879e4236fb221074da6e2e47d92ac4ad Mon Sep 17 00:00:00 2001 From: zhouhanseng Date: Tue, 4 Jan 2022 18:17:54 +0800 Subject: [PATCH 6/9] chore: dim dao page --- packages/plugins/DAO/src/components/DAOPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugins/DAO/src/components/DAOPage.tsx b/packages/plugins/DAO/src/components/DAOPage.tsx index dc3bc3f9133d..2030c3d54066 100644 --- a/packages/plugins/DAO/src/components/DAOPage.tsx +++ b/packages/plugins/DAO/src/components/DAOPage.tsx @@ -1,7 +1,7 @@ import { useState, useContext } from 'react' import IframeResizer from 'iframe-resizer-react' import type { ProfileIdentifier } from '@masknet/shared-base' -import { MaskIconPaletteContext } from '../../../../icons/utils/MaskIconPaletteContext' +import { MaskIconPaletteContext } from '@masknet/icons' interface DAOPageProps { identifier?: ProfileIdentifier From 0e571314f1cd76c4415daba63f2391ab0924ba14 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Thu, 6 Jan 2022 14:27:36 +0800 Subject: [PATCH 7/9] fix: colors --- .../src/components/shared/AbstractTab.tsx | 4 ++- .../src/components/shared/InjectedDialog.tsx | 6 +++-- .../mask/src/components/shared/NetworkTab.tsx | 15 ++++++++--- .../DashboardComponents/ActionButton.tsx | 1 + .../mask/src/plugins/ITO/SNSAdaptor/ITO.tsx | 5 ++-- .../ITO/SNSAdaptor/StyledLinearProgress.tsx | 2 ++ .../SNSAdaptor/RedPacket/OperationFooter.tsx | 8 +----- .../SNSAdaptor/RedPacketConfirmDialog.tsx | 8 +++--- .../RedPacket/SNSAdaptor/RedPacketDialog.tsx | 25 ++++++++++++++----- .../SNSAdaptor/RedPacketERC20Form.tsx | 2 +- .../SNSAdaptor/trader/Gas1559Settings.tsx | 6 ++--- .../trader/GasPrior1559Settings.tsx | 6 ++--- .../SNSAdaptor/trader/InputTokenPanel.tsx | 6 ++--- .../Trader/SNSAdaptor/trader/TradeForm.tsx | 12 ++++----- .../Trader/SNSAdaptor/trader/TraderDialog.tsx | 11 +++----- .../Trader/SNSAdaptor/trader/TraderInfo.tsx | 6 ++--- .../twitter.com/customization/custom.ts | 10 ++++---- .../customization/twitter-color-schema.json | 12 ++++----- packages/mask/src/utils/theme-global.d.ts | 2 +- .../src/SNSAdaptor/components/Upload.tsx | 4 +-- 20 files changed, 84 insertions(+), 67 deletions(-) diff --git a/packages/mask/src/components/shared/AbstractTab.tsx b/packages/mask/src/components/shared/AbstractTab.tsx index 1ea551c466ee..79bd3fe1f802 100644 --- a/packages/mask/src/components/shared/AbstractTab.tsx +++ b/packages/mask/src/components/shared/AbstractTab.tsx @@ -12,6 +12,7 @@ const useStyles = makeStyles()((theme) => ({ disabledTab: { opacity: 0.5, }, + flexContainer: {}, })) interface TabPanelProps extends BoxProps { @@ -21,7 +22,7 @@ interface TabPanelProps extends BoxProps { } export interface AbstractTabProps - extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper'> { + extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper' | 'flexContainer'> { tabs: (Omit & { cb?: () => void disableFocusRipple?: boolean @@ -49,6 +50,7 @@ export default function AbstractTab(props: AbstractTabProps) { className={classes.tabs} classes={{ indicator: classes.indicator, + flexContainer: classes.flexContainer, }} value={index ? index : value ? value : 0} TabIndicatorProps={{ style: tabIndicatorStyle }} diff --git a/packages/mask/src/components/shared/InjectedDialog.tsx b/packages/mask/src/components/shared/InjectedDialog.tsx index ab357168417d..2ad99a50b91a 100644 --- a/packages/mask/src/components/shared/InjectedDialog.tsx +++ b/packages/mask/src/components/shared/InjectedDialog.tsx @@ -58,6 +58,7 @@ export interface InjectedDialogProps extends Omit ()((theme, props) => ({ tab: { - background: theme.palette.mode === 'light' ? '#F6F8F8' : '#17191D', + backgroundColor: !props.isDashboard + ? `${theme.palette.background.default}!important` + : `${MaskColorVar.primaryBackground2}!important`, marginRight: 1, '&:last-child': { marginRight: 0, @@ -21,6 +25,10 @@ const useStyles = makeStyles()((theme, props) => ({ .join(' '), backgroundColor: theme.palette.background.paper, }, + '& .Mui-selected': { + color: '#ffffff', + backgroundColor: `${theme.palette.primary.main}!important`, + }, }, })) @@ -30,7 +38,8 @@ interface NetworkTabProps extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'ind chainId: ChainId } export function NetworkTab(props: NetworkTabProps) { - const classes = useStylesExtends(useStyles({ chainLength: props.chains.length }), props) + const isDashboard = isDashboardPage() + const classes = useStylesExtends(useStyles({ chainLength: props.chains.length, isDashboard }), props) const { chainId, setChainId, chains } = props const createTabItem = (name: string, chainId: ChainId) => ({ label: {name}, diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx index d3f81ac1d162..d46d7d8548bd 100644 --- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx +++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx @@ -167,6 +167,7 @@ const useStyles = makeStyles()({ }, failed: { backgroundColor: red[500], + color: '#fff', '&:hover': { backgroundColor: red[700], }, diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx index 1484a8a4fff9..c8ddc7b3b01c 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx @@ -154,7 +154,6 @@ const useStyles = makeStyles()((theme, props) => ({ marginTop: theme.spacing(1), }, actionButton: { - minHeight: 'auto', width: '100%', }, textProviderErr: { @@ -772,7 +771,7 @@ export function ITO(props: ITO_Props) { variant="contained" size="large" className={classes.actionButton}> - {t('plugin_ito_enter')} + {t('plugin_ito_enter')} @@ -781,7 +780,7 @@ export function ITO(props: ITO_Props) { variant="contained" size="large" className={classes.actionButton}> - {t('plugin_ito_share')} + {t('plugin_ito_share')} diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx index 561d533b596a..87864d273443 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/StyledLinearProgress.tsx @@ -5,9 +5,11 @@ const useStyles = makeStyles()((_theme) => ({ root: { height: 8, borderRadius: 5, + backgroundColor: 'rgba(255, 255, 255, 0.2)', }, bar: { borderRadius: 5, + backgroundColor: _theme.palette.common.white, }, })) diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx index 0a8c65d79052..b88d8d487d2b 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx @@ -65,7 +65,6 @@ export function OperationFooter({ } variant="contained" size="large" - className={classes.button} onClick={onClaimOrRefund}> {canClaim ? claimState.type === TransactionStateType.HASH @@ -84,12 +83,7 @@ export function OperationFooter({ connectWallet: classes.connectWallet, }}> - + {t('share')} diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 0fe82651d204..441712a8233e 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -27,9 +27,9 @@ const useStyles = makeStyles()((theme) => ({ fontSize: 14, fontWeight: 300, borderRadius: 8, - backgroundColor: '#f7f9fa', - color: '#15181B', - padding: theme.spacing(1, 0), + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + padding: theme.spacing(1.2), marginBottom: theme.spacing(1), }, token: { @@ -169,7 +169,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - + {t('plugin_red_packet_hint')} diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx index 22d4a72d4b76..942afcbd7b2e 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx @@ -34,10 +34,7 @@ const useStyles = makeStyles()((theme) => ({ paddingTop: 50, }, tabs: { - top: 0, - left: 0, - right: 0, - position: 'absolute', + borderBottom: `1px solid ${theme.palette.divider}`, }, dialogContent: { padding: 0, @@ -47,6 +44,18 @@ const useStyles = makeStyles()((theme) => ({ top: 0, zIndex: 5000, }, + indicator: { + display: 'none', + }, + tab: { + maxWidth: 120, + }, + focusTab: { + borderBottom: `2px solid ${theme.palette.primary.main}`, + }, + flexContainer: { + justifyContent: 'space-around', + }, })) enum CreateRedPacketPageStep { @@ -257,8 +266,12 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { ], state, classes: { - // focusTab: classes.focusTab, + focusTab: classes.focusTab, tabPaper: classes.tabPaper, + tab: classes.tab, + flexContainer: classes.flexContainer, + indicator: classes.indicator, + tabs: classes.tabs, }, } @@ -266,7 +279,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { const title = isCreating ? t('plugin_red_packet_display_name') : t('plugin_red_packet_details') return ( - + {step === CreateRedPacketPageStep.NewRedPacketPage ? ( diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx index c6dcf9ba10b6..3e35d9f69cb4 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx @@ -32,7 +32,7 @@ const duration = 60 * 60 * 24 const useStyles = makeStyles()((theme) => ({ field: { display: 'flex', - margin: theme.spacing(1), + margin: theme.spacing(1, 0), }, line: { display: 'flex', diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx index b21a95ae3de4..2f8e3c85d054 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx @@ -108,10 +108,10 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } borderRadius: isDashboard ? 8 : 24, }, cancelButton: { - backgroundColor: !isDashboard ? MaskColorVar.twitterBg : undefined, - color: !isDashboard ? MaskColorVar.twitterButton : undefined, + backgroundColor: !isDashboard ? theme.palette.background.default : undefined, + color: !isDashboard ? theme.palette.text.strong : undefined, '&:hover': { - backgroundColor: !isDashboard ? `${MaskColorVar.twitterBg}!important` : undefined, + backgroundColor: !isDashboard ? `${theme.palette.background.default}!important` : undefined, }, }, })) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx index 3846e9d6a345..67d38c58fc1b 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx @@ -100,10 +100,10 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } borderRadius: isDashboard ? 8 : 24, }, cancelButton: { - backgroundColor: !isDashboard ? MaskColorVar.twitterBg : undefined, - color: !isDashboard ? MaskColorVar.twitterButton : undefined, + backgroundColor: !isDashboard ? theme.palette.background.default : undefined, + color: !isDashboard ? theme.palette.text.strong : undefined, '&:hover': { - backgroundColor: !isDashboard ? `${MaskColorVar.twitterBg}!important` : undefined, + backgroundColor: !isDashboard ? `${theme.palette.background.default}!important` : undefined, }, }, })) diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx index c8eac216cbba..d170247f7cbf 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx @@ -15,8 +15,8 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } filledInput: { borderRadius: 12, padding: 12, - background: isDashboard ? MaskColorVar.primaryBackground2 : MaskColorVar.twitterInputBackground, - border: `1px solid ${isDashboard ? MaskColorVar.lineLight : MaskColorVar.twitterBorderLine}`, + background: isDashboard ? MaskColorVar.primaryBackground2 : theme.palette.background.default, + border: `1px solid ${isDashboard ? MaskColorVar.lineLight : theme.palette.divider}`, position: 'relative', }, balance: { @@ -51,7 +51,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } position: 'absolute', top: 18, right: 12, - color: isDashboard ? MaskColorVar.normalText : MaskColorVar.twitterSecond, + color: isDashboard ? MaskColorVar.normalText : theme.palette.text.secondary, }, selectedTokenChip: { borderRadius: '22px!important', diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx index 18f74a201eeb..a0f5f4b3066c 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx @@ -38,11 +38,11 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } }, reverseIcon: { cursor: 'pointer', - color: isDashboard ? `${theme.palette.text.primary}!important` : undefined, + color: isDashboard ? `${theme.palette.text.primary}!important` : theme.palette.text.strong, }, card: { - backgroundColor: isDashboard ? MaskColorVar.primaryBackground2 : MaskColorVar.twitterInputBackground, - border: `1px solid ${isDashboard ? MaskColorVar.lineLight : MaskColorVar.twitterBorderLine}`, + backgroundColor: isDashboard ? MaskColorVar.primaryBackground2 : theme.palette.background.default, + border: `1px solid ${isDashboard ? MaskColorVar.lineLight : theme.palette.divider}`, borderRadius: 12, padding: 12, }, @@ -56,7 +56,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } }, reverse: { - backgroundColor: isDashboard ? MaskColorVar.lightBackground : MaskColorVar.twitterInputBackground, + backgroundColor: isDashboard ? MaskColorVar.lightBackground : theme.palette.background.default, width: 32, height: 32, borderRadius: 16, @@ -67,7 +67,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } }, chevron: { fill: 'none', - stroke: theme.palette.text.primary, + stroke: isDashboard ? theme.palette.text.primary : theme.palette.text.strong, transition: 'all 300ms', cursor: 'pointer', }, @@ -154,7 +154,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } dropIcon: { width: 20, height: 24, - fill: isDashboard ? theme.palette.text.primary : MaskColorVar.twitterButton, + fill: isDashboard ? theme.palette.text.primary : theme.palette.text.strong, }, connectWallet: { marginTop: 0, diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx index 18741652231a..9546305afb92 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx @@ -8,7 +8,7 @@ import { TargetChainIdContext } from '../../trader/useTargetChainIdContext' import { PluginTraderMessages } from '../../messages' import { Trader, TraderProps } from './Trader' import { useI18N } from '../../../../utils' -import { makeStyles, MaskColorVar } from '@masknet/theme' +import { makeStyles } from '@masknet/theme' import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox' import { NetworkTab } from '../../../../components/shared/NetworkTab' import { useAsync, useUpdateEffect } from 'react-use' @@ -16,7 +16,7 @@ import { WalletRPC } from '../../../Wallet/messages' import { EMPTY_LIST } from '../../../../../utils-pure' import { isDashboardPage } from '@masknet/shared-base' -const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({ +const useStyles = makeStyles()((theme) => ({ walletStatusBox: { width: 535, margin: '24px auto', @@ -29,7 +29,6 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } tab: { height: 36, minHeight: 36, - backgroundColor: isDashboard ? `${MaskColorVar.primaryBackground2}!important` : undefined, }, tabPaper: { backgroundColor: 'inherit', @@ -40,10 +39,6 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } minHeight: 36, margin: '0 auto', borderRadius: 4, - '& .Mui-selected': { - color: '#ffffff', - backgroundColor: `${theme.palette.primary.main}!important`, - }, }, indicator: { display: 'none', @@ -71,7 +66,7 @@ interface TraderDialogProps { export function TraderDialog({ open, onClose }: TraderDialogProps) { const isDashboard = isDashboardPage() const { t } = useI18N() - const { classes } = useStyles({ isDashboard }) + const { classes } = useStyles() const currentChainId = useChainId() const chainIdValid = useChainIdValid() const [traderProps, setTraderProps] = useState() diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx index abb4ae62d8b0..8cf10d3021c3 100644 --- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx +++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx @@ -21,8 +21,8 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } trade: { marginBottom: 8, padding: 10, - backgroundColor: `${isDashboard ? MaskColorVar.input : MaskColorVar.twitterBottom}!important`, - border: `1px solid ${isDashboard ? MaskColorVar.lineLight : MaskColorVar.twitterBorderLine}`, + backgroundColor: `${isDashboard ? MaskColorVar.input : theme.palette.background.paper}!important`, + border: `1px solid ${isDashboard ? MaskColorVar.lineLight : theme.palette.divider}`, borderRadius: 8, cursor: 'pointer', position: 'relative', @@ -35,7 +35,7 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard } wordBreak: 'keep-all', }, cost: { - color: isDashboard ? MaskColorVar.normalText : MaskColorVar.twitterSecond, + color: isDashboard ? MaskColorVar.normalText : theme.palette.text.secondary, fontSize: 14, lineHeight: '20px', marginTop: 12, diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts index 94cfba24ae5f..3322d65a27ff 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts +++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/custom.ts @@ -75,7 +75,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) { } }) theme.palette.divider = colorSchema.divider - theme.palette.divider2 = colorSchema.divider2 + theme.palette.secondaryDivider = colorSchema.secondaryDivider theme.shape.borderRadius = isMobileTwitter ? 0 : 15 theme.breakpoints.values = { xs: 0, sm: 687, md: 1024, lg: 1280, xl: 1920 } theme.components = theme.components || {} @@ -108,7 +108,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) { root: { borderRadius: 500, textTransform: 'initial', - fontWeight: 'bold', + fontWeight: 600, minHeight: 39, paddingLeft: 15, paddingRight: 15, @@ -155,11 +155,11 @@ export function useThemeTwitterVariant(baseTheme: Theme) { }, outlined: { color: theme.palette.text.strong, - borderColor: theme.palette.divider2, + borderColor: theme.palette.secondaryDivider, backgroundColor: 'transparent', '&:hover': { color: theme.palette.action.buttonHover, - borderColor: theme.palette.divider2, + borderColor: theme.palette.secondaryDivider, backgroundColor: parseColor(theme.palette.text.primary).setAlpha(0.1).toRgbString(), }, '&.Mui-disabled': { @@ -169,7 +169,7 @@ export function useThemeTwitterVariant(baseTheme: Theme) { }, }, sizeLarge: { - minHeight: 49, + minHeight: 40, paddingLeft: 30, paddingRight: 30, [smallQuery]: { diff --git a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json index 066784a8390c..9b41bd2cde79 100644 --- a/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json +++ b/packages/mask/src/social-network-adaptor/twitter.com/customization/twitter-color-schema.json @@ -22,7 +22,7 @@ "main": "#FF5555" }, "divider": "#EFF3F4", - "divider2": "#CFD9DE", + "secondaryDivider": "#CFD9DE", "action": { "buttonHover": "#272C30", "bgHover": "#EDEFEF", @@ -52,7 +52,7 @@ "main": "#FF5555" }, "divider": "#EFF3F4", - "divider2": "#CFD9DE", + "secondaryDivider": "#CFD9DE", "action": { "buttonHover": "#272C30", "bgHover": "#EDEFEF", @@ -82,7 +82,7 @@ "main": "#FF5555" }, "divider": "#38444D", - "divider2": "#38444D", + "secondaryDivider": "#38444D", "action": { "buttonHover": "#D7DBDC", "bgHover": "#1D2933", @@ -106,7 +106,7 @@ "main": "#FF5555" }, "divider": "#38444D", - "divider2": "#38444D", + "secondaryDivider": "#38444D", "background": { "default": "#18232E", "input": "#212D39", @@ -142,7 +142,7 @@ "main": "#FF5555" }, "divider": "#2F3336", - "divider2": "#2F3336", + "secondaryDivider": "#2F3336", "action": { "buttonHover": "#D7dBDC", "bgHover": "#1A1D20", @@ -166,7 +166,7 @@ "main": "#FF5555" }, "divider": "#2F3336", - "divider2": "#2F3336", + "secondaryDivider": "#2F3336", "background": { "default": "#15171A", "input": "#1D2023", diff --git a/packages/mask/src/utils/theme-global.d.ts b/packages/mask/src/utils/theme-global.d.ts index 50f86a9dbbe7..7037f9436dfe 100644 --- a/packages/mask/src/utils/theme-global.d.ts +++ b/packages/mask/src/utils/theme-global.d.ts @@ -1,6 +1,6 @@ declare module '@mui/material/styles/createPalette.d' { export interface Palette { - divider2: string + secondaryDivider: string } export interface TypeText { hint: string diff --git a/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx b/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx index 2a55134c647e..690d4e4afd39 100644 --- a/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx +++ b/packages/plugins/FileService/src/SNSAdaptor/components/Upload.tsx @@ -91,7 +91,7 @@ export const Upload: React.FC = () => { setEncrypted(event.target.checked)} /> @@ -102,7 +102,7 @@ export const Upload: React.FC = () => { setUseCDN(event.target.checked)} /> From 8d9a9758273c755105ec9471b3995e77c3bdb699 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Fri, 7 Jan 2022 14:41:15 +0800 Subject: [PATCH 8/9] chore: thumb color --- .../theme/src/Components/SearchableList/SearchableList.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/theme/src/Components/SearchableList/SearchableList.tsx b/packages/theme/src/Components/SearchableList/SearchableList.tsx index 6c0bafa5956e..c457430b10de 100644 --- a/packages/theme/src/Components/SearchableList/SearchableList.tsx +++ b/packages/theme/src/Components/SearchableList/SearchableList.tsx @@ -4,7 +4,6 @@ import Fuse from 'fuse.js' import { uniqBy } from 'lodash-unified' import { Box, InputAdornment } from '@mui/material' import { makeStyles } from '../../makeStyles' -import { MaskColorVar } from '../../constants' import { MaskSearchableItemInList } from './MaskSearchableItemInList' import { MaskTextField, MaskTextFieldProps } from '../TextField' import { SearchIcon } from '@masknet/icons' @@ -147,7 +146,7 @@ const useStyles = makeStyles()((theme) => ({ }, '& > div::-webkit-scrollbar-thumb': { borderRadius: '4px', - backgroundColor: MaskColorVar.normalBackground, + backgroundColor: theme.palette.background.default, }, }, })) From 703405e2b76f89e4323f789a1a76f816a1330e11 Mon Sep 17 00:00:00 2001 From: nuanyang233 <528944303@qq.com> Date: Mon, 10 Jan 2022 23:26:27 +0800 Subject: [PATCH 9/9] fix: bugfix --- packages/icons/plugins/ImagePayload.tsx | 13 +++++++++++++ packages/icons/plugins/Unlock.tsx | 12 ++++++++++++ packages/icons/plugins/index.tsx | 2 ++ packages/mask/shared-ui/locales/en-US.json | 2 +- .../CompositionDialog/CompositionUI.tsx | 2 ++ .../shared/SelectRecipients/ClickableChip.tsx | 10 +++++++++- .../src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx | 9 ++++++++- .../mask/src/plugins/ITO/SNSAdaptor/index.tsx | 10 +++++++++- packages/mask/src/plugins/MaskPluginWrapper.tsx | 4 ++-- .../src/plugins/RedPacket/SNSAdaptor/index.tsx | 10 +++++++++- .../plugins/UnlockProtocol/SNSAdaptor/index.tsx | 15 +++++++++++++-- packages/plugins/FileService/package.json | 1 + .../plugins/FileService/src/SNSAdaptor/index.tsx | 10 +++++++++- packages/plugins/FileService/src/base.ts | 3 ++- packages/plugins/FileService/tsconfig.json | 1 + pnpm-lock.yaml | 9 ++++++--- 16 files changed, 99 insertions(+), 14 deletions(-) create mode 100644 packages/icons/plugins/ImagePayload.tsx create mode 100644 packages/icons/plugins/Unlock.tsx diff --git a/packages/icons/plugins/ImagePayload.tsx b/packages/icons/plugins/ImagePayload.tsx new file mode 100644 index 000000000000..d72b8d37c3eb --- /dev/null +++ b/packages/icons/plugins/ImagePayload.tsx @@ -0,0 +1,13 @@ +import { createIcon } from '../utils' + +export const ImagePayloadIcon = createIcon( + 'ImagePayloadIcon', + + + + , + '0 0 16 16', +) diff --git a/packages/icons/plugins/Unlock.tsx b/packages/icons/plugins/Unlock.tsx new file mode 100644 index 000000000000..a6aae213a8e4 --- /dev/null +++ b/packages/icons/plugins/Unlock.tsx @@ -0,0 +1,12 @@ +import { createIcon } from '../utils' + +export const UnlockIcon = createIcon( + 'UnlockIcon', + + + , + '0 0 16 16', +) diff --git a/packages/icons/plugins/index.tsx b/packages/icons/plugins/index.tsx index 1825d013e476..1381115a28db 100644 --- a/packages/icons/plugins/index.tsx +++ b/packages/icons/plugins/index.tsx @@ -12,3 +12,5 @@ export * from './PetIcon' export * from './LootMan' export * from './MaskBox' export * from './GoodGhosting' +export * from './Unlock' +export * from './ImagePayload' diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index 238a8b5587cc..a553e17389a0 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -989,7 +989,7 @@ "nft_owner_hint": "This NFT does not exist or does not belong to you.", "nft_add_dialog_title": "Add Collectible", "nft_add_button_label": "Add", - "nft_list_title": "NFT Avatar", + "nft_list_title": "NFT Avatar Setting", "nft_wallet_label": "Wallet", "nft_wallet_change": "Change", "nft_button_add_collectible": "Add Collectible", diff --git a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx index 8a3b384acfdd..01d5e848f9ef 100644 --- a/packages/mask/src/components/CompositionDialog/CompositionUI.tsx +++ b/packages/mask/src/components/CompositionDialog/CompositionUI.tsx @@ -4,6 +4,7 @@ import { LoadingButton } from '@mui/lab' import type { TypedMessage } from '@masknet/shared-base' import { useValueRef } from '@masknet/shared' import { makeStyles } from '@masknet/theme' +import { ImagePayloadIcon } from '@masknet/icons' import { Send } from '@mui/icons-material' import { PluginEntryRender, PluginEntryRenderRef } from './PluginEntryRender' import { TypedMessageEditor, TypedMessageEditorRef } from './TypedMessageEditor' @@ -131,6 +132,7 @@ export const CompositionDialogUI = forwardRef( checked={imagePayloadSelected} label={ <> + {t('post_dialog__image_payload')} {Flags.image_payload_marked_as_beta && ( }} /> diff --git a/packages/mask/src/components/shared/SelectRecipients/ClickableChip.tsx b/packages/mask/src/components/shared/SelectRecipients/ClickableChip.tsx index fc524631b755..5d4518465194 100644 --- a/packages/mask/src/components/shared/SelectRecipients/ClickableChip.tsx +++ b/packages/mask/src/components/shared/SelectRecipients/ClickableChip.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import { makeStyles } from '@masknet/theme' import DoneIcon from '@mui/icons-material/Done' import Chip, { ChipProps } from '@mui/material/Chip' +import { noop } from 'lodash-unified' export interface ClickableChipProps extends ChipProps { checked?: boolean @@ -16,6 +17,12 @@ const useStyles = makeStyles()((theme, { checked }) => ({ marginBottom: 6, cursor: 'pointer', ...(checked ? { color: theme.palette.text.buttonText, backgroundColor: theme.palette.text.primary } : {}), + '&:hover': { + color: theme.palette.text.primary, + '& > svg': { + color: `${theme.palette.text.primary} !important`, + }, + }, }, icon: { backgroundColor: 'transparent !important', @@ -30,7 +37,8 @@ export function ClickableChip(props: ClickableChipProps) { const { classes } = useStyles({ checked: Boolean(props.checked) }) return ( : undefined} + deleteIcon={props.checked ? : undefined} + onDelete={props.checked ? noop : undefined} color={props.checked ? 'primary' : 'default'} {...props} classes={{ diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx index 81684042dafe..d84f54028d25 100644 --- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx +++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx @@ -40,6 +40,9 @@ const useStyles = makeStyles()((theme) => ({ flexFlow: 'row wrap', height: 150, overflowY: 'auto', + '&::-webkit-scrollbar': { + display: 'none', + }, }, button: { textAlign: 'center', @@ -136,7 +139,11 @@ export function NFTAvatar(props: NFTAvatarProps) { {account ? ( {t('nft_wallet_label')}: {formatEthereumAddress(account, 4)} - diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx index ebb9bd6d081f..c342c02a36e6 100644 --- a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx @@ -16,6 +16,7 @@ import MaskPluginWrapper from '../../MaskPluginWrapper' import { CompositionDialog } from './CompositionDialog' import { set } from 'lodash-unified' import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary' +import { MarketsIcon } from '@masknet/icons' const useStyles = makeStyles()((theme) => ({ root: { @@ -49,7 +50,14 @@ const sns: Plugin.SNSAdaptor.Definition = { dialog({ open, onClose }) { return }, - label: { fallback: '🚀 ITO' }, + label: { + fallback: ( + <> + + ITO + + ), + }, }, } diff --git a/packages/mask/src/plugins/MaskPluginWrapper.tsx b/packages/mask/src/plugins/MaskPluginWrapper.tsx index 98b7c47a73d0..2131a7558a53 100644 --- a/packages/mask/src/plugins/MaskPluginWrapper.tsx +++ b/packages/mask/src/plugins/MaskPluginWrapper.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => { margin: theme.spacing(2, 0), width: '100%', boxSizing: 'border-box', - border: `1px solid ${theme.palette.divider}`, + border: `1px solid ${theme.palette.secondaryDivider}`, cursor: 'default', ...(isTwitter(activatedSocialNetworkUI) ? { @@ -50,7 +50,7 @@ const useStyles = makeStyles()((theme) => { justifyContent: 'flex-end', }, body: { - borderTop: `1px solid ${theme.palette.divider}`, + borderTop: `1px solid ${theme.palette.secondaryDivider}`, padding: theme.spacing(2), }, button: { diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx index e574c2840ffb..7ae24d6df6a4 100644 --- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx @@ -20,6 +20,7 @@ import type { RedPacketJSONPayload, RedPacketNftJSONPayload } from '../types' import RedPacketDialog from './RedPacketDialog' import { RedPacketInPost } from './RedPacketInPost' import { RedPacketNftInPost } from './RedPacketNftInPost' +import { RedPacketIcon } from '@masknet/icons' const sns: Plugin.SNSAdaptor.Definition = { ...base, @@ -61,7 +62,14 @@ const sns: Plugin.SNSAdaptor.Definition = { ]), CompositionDialogEntry: { dialog: RedPacketDialog, - label: { fallback: '💰 Lucky Drop' }, + label: { + fallback: ( + <> + + Luck drop + + ), + }, }, } interface ERC20RedpacketBadgeProps { diff --git a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/index.tsx b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/index.tsx index 7668967fc1d0..89b7766d18a6 100644 --- a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/index.tsx +++ b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/index.tsx @@ -1,6 +1,7 @@ import type { Plugin } from '@masknet/plugin-infra' +import { UnlockIcon } from '@masknet/icons' import { base } from '../base' -import { pluginIcon, pluginMetaKey, pluginName } from '../constants' +import { pluginMetaKey, pluginName } from '../constants' import type { UnlockLockInMetadata } from '../types' import { UnlockProtocolMetadataReader } from '../helpers' import UnlockProtocolDialog from './UnlockProtocolDialog' @@ -17,7 +18,17 @@ const sns: Plugin.SNSAdaptor.Definition = { CompositionDialogMetadataBadgeRender: new Map([ [pluginMetaKey, (meta: UnlockLockInMetadata) => 'An Unlock Protocol post has been added'], ]), - CompositionDialogEntry: { label: pluginIcon + ' ' + pluginName, dialog: UnlockProtocolDialog }, + CompositionDialogEntry: { + label: { + fallback: ( + <> + + {pluginName} + + ), + }, + dialog: UnlockProtocolDialog, + }, } export default sns diff --git a/packages/plugins/FileService/package.json b/packages/plugins/FileService/package.json index 612f73cea034..527105c25f8b 100644 --- a/packages/plugins/FileService/package.json +++ b/packages/plugins/FileService/package.json @@ -10,6 +10,7 @@ "@masknet/shared": "workspace:*", "@masknet/shared-base": "workspace:*", "@masknet/theme": "workspace:*", + "@masknet/icons": "workspace:*", "@msgpack/msgpack": "^2.7.1", "arweave": "^1.10.3", "date-fns": "^2.27.0", diff --git a/packages/plugins/FileService/src/SNSAdaptor/index.tsx b/packages/plugins/FileService/src/SNSAdaptor/index.tsx index 7193700060bc..279620daec0a 100644 --- a/packages/plugins/FileService/src/SNSAdaptor/index.tsx +++ b/packages/plugins/FileService/src/SNSAdaptor/index.tsx @@ -7,6 +7,7 @@ import { FileInfoMetadataReader } from '../helpers' import type { FileInfo } from '../types' import FileServiceDialog from './MainDialog' import { Preview } from './Preview' +import { FileServiceIcon } from '@masknet/icons' const definition: Plugin.SNSAdaptor.Definition = { ...base, @@ -21,7 +22,14 @@ const definition: Plugin.SNSAdaptor.Definition = { [META_KEY_2, onAttachedFile], ]), CompositionDialogEntry: { - label: { fallback: '📃 File Service', i18nKey: '__composition_entry' }, + label: { + fallback: ( + <> + + File Service + + ), + }, dialog: FileServiceDialog, }, } diff --git a/packages/plugins/FileService/src/base.ts b/packages/plugins/FileService/src/base.ts index eda98c0a413a..0bde37298aa5 100644 --- a/packages/plugins/FileService/src/base.ts +++ b/packages/plugins/FileService/src/base.ts @@ -1,9 +1,10 @@ import { Plugin, PluginId } from '@masknet/plugin-infra' +import { FileServiceIcon } from '@masknet/icons' import { languages } from './locales/languages' export const base: Plugin.Shared.Definition = { ID: PluginId.FileService, - icon: '📃', + icon: FileServiceIcon, name: { fallback: 'File Service', i18nKey: '__display_name' }, description: { fallback: 'Upload and share files on top of Arweave network. Store data, permanently.', diff --git a/packages/plugins/FileService/tsconfig.json b/packages/plugins/FileService/tsconfig.json index 4667db4b9bb1..a7a6e510a964 100644 --- a/packages/plugins/FileService/tsconfig.json +++ b/packages/plugins/FileService/tsconfig.json @@ -12,6 +12,7 @@ { "path": "../../plugin-infra" }, { "path": "../../shared-base" }, { "path": "../../shared" }, + { "path": "../../icons" }, { "path": "../Wallet" } ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4f5f044c7a32..7f54ea3b6457 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -641,6 +641,7 @@ importers: packages/plugins/FileService: specifiers: '@dimensiondev/common-protocols': 1.6.0-20210723072221-8f46a92 + '@masknet/icons': workspace:* '@masknet/plugin-infra': workspace:* '@masknet/plugin-wallet': workspace:* '@masknet/shared': workspace:* @@ -654,6 +655,7 @@ importers: react-use: ^17.3.1 dependencies: '@dimensiondev/common-protocols': 1.6.0-20210723072221-8f46a92 + '@masknet/icons': link:../../icons '@masknet/plugin-infra': link:../../plugin-infra '@masknet/plugin-wallet': link:../Wallet '@masknet/shared': link:../../shared @@ -3479,6 +3481,7 @@ packages: /@dimensiondev/eslint-plugin/0.0.1-20220104011158-0905fa1_eslint@8.5.0: resolution: {integrity: sha512-DyAzOQp2Dp9Nzll6dTbujqyBAXOLhlWXvDdmnfX3+cHixhvaupbMeoh4MmujkOY681N5ohVm2eKWJd/ApC4lrQ==, tarball: download/@dimensiondev/eslint-plugin/0.0.1-20220104011158-0905fa1/931c157d880a7f8a78e87326a2840ad7d4583b5c714f155e045f73a11969fc82} + engines: {node: '>= 14'} peerDependencies: eslint: '>= 8' dependencies: @@ -25321,8 +25324,8 @@ packages: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: true - github.com/ProjectOpenSea/wyvern-js/1634ad0e2f9961accca62edbf4ac624effa18552: - resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/1634ad0e2f9961accca62edbf4ac624effa18552} + github.com/ProjectOpenSea/wyvern-js/1e69699e8ba39edcb177b503caeaaefbf0c31385: + resolution: {tarball: https://codeload.github.com/ProjectOpenSea/wyvern-js/tar.gz/1e69699e8ba39edcb177b503caeaaefbf0c31385} name: wyvern-js version: 3.2.0 dependencies: @@ -25383,7 +25386,7 @@ packages: bignumber.js: 6.0.0 typed-promisify: 0.4.0 web3-provider-engine: 13.8.0 - wyvern-js: github.com/ProjectOpenSea/wyvern-js/1634ad0e2f9961accca62edbf4ac624effa18552 + wyvern-js: github.com/ProjectOpenSea/wyvern-js/1e69699e8ba39edcb177b503caeaaefbf0c31385 transitivePeerDependencies: - debug dev: false