diff --git a/packages/icons/general/History.dark.svg b/packages/icons/general/History.dark.svg
new file mode 100644
index 000000000000..50073703fac5
--- /dev/null
+++ b/packages/icons/general/History.dark.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/icons/general/History.svg b/packages/icons/general/History.light.svg
similarity index 100%
rename from packages/icons/general/History.svg
rename to packages/icons/general/History.light.svg
diff --git a/packages/icons/plugins/CrossBridge.png b/packages/icons/plugins/CrossBridge.png
new file mode 100644
index 000000000000..099b0a822472
Binary files /dev/null and b/packages/icons/plugins/CrossBridge.png differ
diff --git a/packages/icons/plugins/CrossBridge.svg b/packages/icons/plugins/CrossBridge.svg
deleted file mode 100644
index a5d495bb5832..000000000000
--- a/packages/icons/plugins/CrossBridge.svg
+++ /dev/null
@@ -1,87 +0,0 @@
-
diff --git a/packages/icons/plugins/Markets.png b/packages/icons/plugins/Markets.png
new file mode 100644
index 000000000000..c020ef8b0396
Binary files /dev/null and b/packages/icons/plugins/Markets.png differ
diff --git a/packages/icons/plugins/Markets.svg b/packages/icons/plugins/Markets.svg
deleted file mode 100644
index b7593f593b83..000000000000
--- a/packages/icons/plugins/Markets.svg
+++ /dev/null
@@ -1,81 +0,0 @@
-
diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
index e74769c348ab..bbd742f5ae9e 100644
--- a/packages/mask/src/components/shared/ApplicationBoard.tsx
+++ b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles<{ shouldScroll: boolean; isCarouselReady: boolean }
const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
return {
applicationWrapper: {
- padding: theme.spacing(1, 0.25, 1, 1),
+ padding: theme.spacing(1, process.env.engine === 'firefox' ? 1.5 : 0.25, 1, 1),
transform: props.isCarouselReady ? 'translate(-8px, -8px)' : 'translateX(-8px)',
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
@@ -33,7 +33,9 @@ const useStyles = makeStyles<{ shouldScroll: boolean; isCarouselReady: boolean }
gridGap: 10,
justifyContent: 'space-between',
height: 320,
- width: props.shouldScroll ? 583 : 576,
+ width: props.shouldScroll && process.env.engine !== 'firefox' ? 583 : 570,
+ scrollbarColor: `${theme.palette.maskColor.secondaryLine} ${theme.palette.maskColor.secondaryLine}`,
+ scrollbarWidth: 'thin',
'::-webkit-scrollbar': {
backgroundColor: 'transparent',
width: 20,
diff --git a/packages/mask/src/components/shared/ApplicationRecommendArea.tsx b/packages/mask/src/components/shared/ApplicationRecommendArea.tsx
index 17b5d73eebda..ef4b1db7fa80 100644
--- a/packages/mask/src/components/shared/ApplicationRecommendArea.tsx
+++ b/packages/mask/src/components/shared/ApplicationRecommendArea.tsx
@@ -8,6 +8,7 @@ const useStyles = makeStyles()(() => {
return {
recommendFeatureAppListWrapper: {
display: 'flex',
+ scrollbarColor: 'transparent transparent',
overflowX: 'scroll',
margin: '0 2px 5px',
padding: '8px 0px 0',
@@ -19,6 +20,7 @@ const useStyles = makeStyles()(() => {
position: 'relative',
zIndex: 100,
overflowX: 'scroll',
+ scrollbarColor: 'transparent transparent',
overscrollBehavior: 'contain',
'& .carousel__slider': {
padding: '8px 2px 0',
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
index 9e6d47b77c49..eca9ab5402cd 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
@@ -10,7 +10,7 @@ import type { JSON_PayloadComposeMask } from '../types'
import { ITO_MetadataReader, payloadIntoMask } from './helpers'
import { CompositionDialog } from './CompositionDialog'
import { set } from 'lodash-unified'
-import { MarketsIcon, MarketsClaimIcon } from '@masknet/icons'
+import { Markets, MarketsClaimIcon } from '@masknet/icons'
import { ApplicationEntry } from '@masknet/shared'
import { CrossIsolationMessages } from '@masknet/shared-base'
import { ClaimAllDialog } from './ClaimAllDialog'
@@ -54,14 +54,14 @@ const sns: Plugin.SNSAdaptor.Definition = {
},
label: (
<>
-
+
ITO
),
},
ApplicationEntries: [
(() => {
- const icon =
+ const icon =
const name =
const iconFilterColor = 'rgba(56, 228, 239, 0.3)'
const clickHandler = () =>
@@ -135,7 +135,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
})(),
],
wrapperProps: {
- icon: ,
+ icon: ,
backgroundGradient:
'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(28, 104, 243, 0.2) 0%, rgba(41, 228, 253, 0.2) 100%), #FFFFFF;',
},
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
index 01e1cc2d2a3b..004c76dc1b19 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -20,11 +20,11 @@ import type { RedPacketSettings } from './hooks/useCreateCallback'
import { RedPacketConfirmDialog } from './RedPacketConfirmDialog'
import { RedPacketPast } from './RedPacketPast'
import { TabContext, TabPanel } from '@mui/lab'
-import { HistoryIcon } from '@masknet/icons'
+import { History } from '@masknet/icons'
import { RedPacketERC20Form } from './RedPacketERC20Form'
import { RedPacketERC721Form } from './RedPacketERC721Form'
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles<{ showHistory: boolean }>()((theme, { showHistory }) => ({
content: {
position: 'relative',
paddingTop: 50,
@@ -71,6 +71,15 @@ const useStyles = makeStyles()((theme) => ({
width: 20,
marginRight: 4,
},
+ injectedDialog: {
+ ...(showHistory
+ ? {
+ '& [role="dialog"]': {
+ height: '620px !important',
+ },
+ }
+ : {}),
+ },
}))
enum CreateRedPacketPageStep {
@@ -86,7 +95,9 @@ interface RedPacketDialogProps extends withClasses {
export default function RedPacketDialog(props: RedPacketDialogProps) {
const t = useI18N()
- const { cx, classes } = useStyles()
+ const [showHistory, setShowHistory] = useState(false)
+ const [step, setStep] = useState(CreateRedPacketPageStep.NewRedPacketPage)
+ const { cx, classes } = useStyles({ showHistory })
const { attachMetadata, dropMetadata } = useCompositionContext()
const state = useState(DialogTabs.create)
const [isNFTRedPacketLoaded, setIsNFTRedPacketLoaded] = useState(false)
@@ -94,8 +105,6 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
const account = useAccount(NetworkPluginID.PLUGIN_EVM)
const [settings, setSettings] = useState()
- const [showHistory, setShowHistory] = useState(false)
- const [step, setStep] = useState(CreateRedPacketPageStep.NewRedPacketPage)
const onClose = useCallback(() => {
setStep(CreateRedPacketPageStep.NewRedPacketPage)
@@ -163,7 +172,6 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
const isCreateStep = step === CreateRedPacketPageStep.NewRedPacketPage
const title = isCreateStep ? t.display_name() : t.details()
-
const [currentTab, onChange, tabs] = useTabs('tokens', 'collectibles')
return (
@@ -174,7 +182,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
title={title}
titleTail={
step === CreateRedPacketPageStep.NewRedPacketPage && !showHistory ? (
- setShowHistory((history) => !history)} />
+ setShowHistory((history) => !history)} />
) : null
}
titleTabs={
@@ -185,6 +193,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
) : null
}
+ className={classes.injectedDialog}
onClose={() => (showHistory ? setShowHistory(false) : onBack())}
isOnBack={showHistory || step !== CreateRedPacketPageStep.NewRedPacketPage}
disableTitleBorder>
diff --git a/packages/plugins/CrossChainBridge/src/SNSAdaptor/index.tsx b/packages/plugins/CrossChainBridge/src/SNSAdaptor/index.tsx
index bd60fd7d81bd..ca889ac7b709 100644
--- a/packages/plugins/CrossChainBridge/src/SNSAdaptor/index.tsx
+++ b/packages/plugins/CrossChainBridge/src/SNSAdaptor/index.tsx
@@ -1,6 +1,6 @@
import type { Plugin } from '@masknet/plugin-infra'
import { ApplicationEntry } from '@masknet/shared'
-import { CrossBridgeIcon } from '@masknet/icons'
+import { CrossBridge } from '@masknet/icons'
import { PluginI18NFieldRender } from '@masknet/plugin-infra/content-script'
import { base } from '../base'
import { useState } from 'react'
@@ -11,7 +11,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
init(signal, context) {},
ApplicationEntries: [
(() => {
- const icon =
+ const icon =
const name = { i18nKey: '__plugin_name', fallback: 'Cross-chain' }
const iconFilterColor = 'rgba(183, 212, 255, 0.3)'
return {