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/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/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 58a3ce685cb9..b05b29c89c96 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -41,6 +41,9 @@ const useStyles = makeStyles()((theme) => ({
flexFlow: 'row wrap',
height: 150,
overflowY: 'auto',
+ '&::-webkit-scrollbar': {
+ display: 'none',
+ },
},
button: {
textAlign: 'center',
@@ -137,7 +140,11 @@ export function NFTAvatar(props: NFTAvatarProps) {
{account ? (
{t('nft_wallet_label')}: {formatEthereumAddress(account, 4)}
-
diff --git a/packages/mask/src/plugins/External/components/CompositionEntry.tsx b/packages/mask/src/plugins/External/components/CompositionEntry.tsx
index 46dd940fd2eb..f27b2b708379 100644
--- a/packages/mask/src/plugins/External/components/CompositionEntry.tsx
+++ b/packages/mask/src/plugins/External/components/CompositionEntry.tsx
@@ -1,9 +1,10 @@
import type { Plugin } from '@masknet/plugin-infra'
-import { usePortalShadowRoot, MaskDialog } from '@masknet/theme'
+import { usePortalShadowRoot } 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()
@@ -15,14 +16,14 @@ export function ThirdPartyPluginCompositionEntry(props: Plugin.SNSAdaptor.Compos
[props.onClose],
)
return usePortalShadowRoot((container) => (
-
+ container={container}>
-
+
))
}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index b767f3b062f6..00d220c025d8 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -152,7 +152,6 @@ const useStyles = makeStyles()((theme, props) => ({
marginTop: theme.spacing(1),
},
actionButton: {
- minHeight: 'auto',
width: '100%',
},
textProviderErr: {
@@ -770,7 +769,7 @@ export function ITO(props: ITO_Props) {
variant="contained"
size="large"
className={classes.actionButton}>
- {t('plugin_ito_enter')}
+ {t('plugin_ito_enter')}
@@ -779,7 +778,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/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/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/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={
({
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),
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/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 a4657f6a01b4..af69e295c424 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
@@ -13,8 +13,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: {
@@ -49,7 +49,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/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/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/DAO/src/components/DAOPage.tsx b/packages/plugins/DAO/src/components/DAOPage.tsx
index 09e785e907ed..2030c3d54066 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 '@masknet/icons'
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)
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/MainDialog.tsx b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
index ad869896291d..37c486754c9d 100644
--- a/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
+++ b/packages/plugins/FileService/src/SNSAdaptor/MainDialog.tsx
@@ -16,7 +16,7 @@ interface Props {
open: boolean
}
-const useStyles = makeStyles()({
+const useStyles = makeStyles()((theme) => ({
actions: {
alignSelf: 'center',
},
@@ -28,7 +28,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()
@@ -59,7 +70,11 @@ const FileServiceDialog: React.FC = (props) => {
showSnackbar(t.uploading_on_cancel())
}
return (
-
+
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)}
/>
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/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,
},
},
}))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1f3c2f7ced0..0a1e80e5aee7 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-20220110102506-9f382ee_eslint@8.5.0:
resolution: {integrity: sha512-DFNWb35mRshQA4OZzRmqPAENf49I+3/2i5mY8b37oi/i3sB+WjK8Z9BQjpz8uf+lURMhs1CdzJp9oQoTA08YZg==, tarball: download/@dimensiondev/eslint-plugin/0.0.1-20220110102506-9f382ee/00bf74704d413d6c24deba9f94bcfb2e13a94634263dc71695c71630d7716785}
+ 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