fix: mf-3007 add gradient to decoration image

DimensionDev · Dec 18, 2022 · e4cb212 · e4cb212
1 parent 4f09fa4
commit e4cb212
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 13 deletions.
diff --git a/packages/mask/src/components/InjectedComponents/ProfileCard/index.tsx b/packages/mask/src/components/InjectedComponents/ProfileCard/index.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => {
             justifyContent: 'center',
         },
         header: {
-            backgroundImage: `url(${xmasBackgroundMini} )`,
+            backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%), url(${xmasBackgroundMini} )`,
             backgroundSize: 'cover',
             backgroundPosition: 'center bottom',
             padding: theme.spacing(2, 2, 0, 2),

diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -38,7 +38,7 @@ const useStyles = makeStyles()((theme) => ({
         width: isFacebook(activatedSocialNetworkUI) ? 876 : 'auto',
     },
     container: {
-        backgroundImage: `url(${xmasBackgroundShort})`,
+        backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), url(${xmasBackgroundShort})`,
         backgroundColor: 'white',
         backgroundSize: 'cover',
         backgroundPosition: 'center bottom',

diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingView.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingView.tsx
@@ -1,23 +1,25 @@
 import { useIsMinimalMode } from '@masknet/plugin-infra/content-script'
+import { DataProvider } from '@masknet/public-api'
+import { NFTList, xmasBackground } from '@masknet/shared'
+import { EMPTY_LIST, getSiteType, NetworkPluginID, PluginID } from '@masknet/shared-base'
+import { useValueRef } from '@masknet/shared-base-ui'
+import { ActionButton, makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
 import {
     useChainContext,
     useChainIdValid,
     useNonFungibleAssetsByCollection,
     Web3ContextProvider,
 } from '@masknet/web3-hooks-base'
-import type { AsyncState } from 'react-use/lib/useAsyncFn.js'
-import { DataProvider } from '@masknet/public-api'
-import { NFTList } from '@masknet/shared'
-import { EMPTY_LIST, PluginID, NetworkPluginID, getSiteType } from '@masknet/shared-base'
-import { ActionButton, makeStyles, MaskLightTheme, MaskTabList, useTabs } from '@masknet/theme'
 import { TrendingAPI } from '@masknet/web3-providers'
 import { createFungibleToken, TokenType } from '@masknet/web3-shared-base'
-import { isNativeTokenAddress, isNativeTokenSymbol, SchemaType, ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, isNativeTokenAddress, isNativeTokenSymbol, SchemaType } from '@masknet/web3-shared-evm'
 import { TabContext } from '@mui/lab'
 import { Link, Stack, Tab, ThemeProvider } from '@mui/material'
 import { Box, useTheme } from '@mui/system'
 import { compact } from 'lodash-es'
 import { useEffect, useMemo, useState } from 'react'
+import type { AsyncState } from 'react-use/lib/useAsyncFn.js'
+import { pluginIDSettings } from '../../../../../shared/legacy-settings/settings.js'
 import { useI18N } from '../../../../utils/index.js'
 import { resolveDataProviderLink, resolveDataProviderName } from '../../pipes.js'
 import { setStorage } from '../../storage/index.js'
@@ -35,8 +37,6 @@ import { TickersTable } from './TickersTable.js'
 import { TrendingViewDeck } from './TrendingViewDeck.js'
 import { TrendingViewError } from './TrendingViewError.js'
 import { TrendingViewSkeleton } from './TrendingViewSkeleton.js'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { pluginIDSettings } from '../../../../../shared/legacy-settings/settings.js'
 
 const useStyles = makeStyles<{
     isPopper: boolean
@@ -92,6 +92,10 @@ const useStyles = makeStyles<{
 
         cardHeader: {
             marginBottom: '-36px',
+            backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), url(${xmasBackground})`,
+            backgroundColor: 'white',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center right',
         },
         nftItems: {
             height: 530,

diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewSkeleton.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewSkeleton.tsx
@@ -1,3 +1,4 @@
+import { xmasBackground } from '@masknet/shared'
 import { LoadingBase, makeStyles, useStylesExtends } from '@masknet/theme'
 import { CardContent, Stack, Typography } from '@mui/material'
 import { useI18N } from '../../../../utils/index.js'
@@ -7,7 +8,10 @@ import { TrendingCard, TrendingCardProps } from './TrendingCard.js'
 const useStyles = makeStyles()((theme) => ({
     root: {
         padding: theme.spacing(2),
-        background: theme.palette.maskColor.modalTitleBg,
+        backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), url(${xmasBackground})`,
+        backgroundColor: 'white',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center bottom',
     },
     content: {
         height: 162,

diff --git a/packages/plugins/DecentralizedSearch/src/SNSAdaptor/SearchResultInspector.tsx b/packages/plugins/DecentralizedSearch/src/SNSAdaptor/SearchResultInspector.tsx
@@ -31,7 +31,7 @@ const useStyles = makeStyles()((theme) => ({
         overflow: 'auto',
     },
     cardHeader: {
-        backgroundImage: `url(${xmasBackground})`,
+        backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), url(${xmasBackground})`,
         backgroundColor: 'white',
         backgroundSize: 'cover',
         backgroundPosition: 'center bottom',

diff --git a/packages/shared/src/UI/components/PluginCardFrame/index.tsx b/packages/shared/src/UI/components/PluginCardFrame/index.tsx
@@ -12,7 +12,7 @@ const useStyles = makeStyles()((theme) => ({
         justifyContent: 'center',
     },
     container: {
-        backgroundImage: `url(${xmasBackground})`,
+        backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), url(${xmasBackground})`,
         backgroundColor: 'white',
         backgroundSize: 'cover',
         backgroundPosition: 'center bottom',