fix: change twitter icon (#10629)

packages/dashboard/src/components/FollowUs/index.tsx

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@mui/material'
+import { styled, Typography, useTheme } from '@mui/material'
 import { openWindow } from '@masknet/shared-base-ui'
 import { Icons } from '@masknet/icons'
 import { useDashboardI18N } from '../../locales/index.js'
@@ -31,12 +31,14 @@ function openMaskNetwork() {
 }
 export function FollowUs() {
     const t = useDashboardI18N()
+    const theme = useTheme()
+
     return (
         <div style={{ padding: '0 16px', height: 80, marginBottom: 16 }} onClick={() => openMaskNetwork()}>
             <FollowUsContainer>
                 <Typography>{t.follow_us()}</Typography>
                 <TwitterColoredContainer>
-                    <Icons.TwitterColored size={24} />
+                    <Icons.TwitterX variant="light" size={24} />
                 </TwitterColoredContainer>
             </FollowUsContainer>
         </div>

packages/dashboard/src/pages/SetupPersona/Onboarding/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useDashboardI18N } from '../../../locales/i18n_generated.js'
-import { Box, Typography } from '@mui/material'
+import { Box, Typography, useTheme } from '@mui/material'
 import { SetupFrameController } from '../../../components/SetupFrame/index.js'
 import { PrimaryButton } from '../../../components/PrimaryButton/index.js'
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
@@ -80,7 +80,7 @@ export const Onboarding = memo(function Onboarding() {
 
     const [params] = useSearchParams()
     const { showSnackbar } = useCustomSnackbar()
-
+    const theme = useTheme()
     const isCreate = params.get('isCreate')
 
     const { value: hasPaymentPassword, loading, retry } = useAsyncRetry(WalletServiceRef.value.hasPassword, [])
@@ -170,7 +170,13 @@ export const Onboarding = memo(function Onboarding() {
                 <PrimaryButton
                     onClick={onSetupTwitter}
                     size="large"
-                    startIcon={<Icons.TwitterStroke className={classes.twitter} size={20} />}>
+                    startIcon={
+                        <Icons.TwitterX
+                            variant={theme.palette.mode === 'dark' ? 'light' : 'dark'}
+                            className={classes.twitter}
+                            size={20}
+                        />
+                    }>
                     {t.persona_onboarding_to_twitter()}
                 </PrimaryButton>
                 {!isCreate ? (

packages/icons/icon-generated-as-jsx.js

@@ -492,16 +492,6 @@ export const TelegramRound = /*#__PURE__*/ __createIcon('TelegramRound', [
         u: () => new URL('./brands/TelegramRound.svg', import.meta.url),
     },
 ])
-export const Twitter3 = /*#__PURE__*/ __createIcon('twitter3', [
-    {
-        c: ['dark'],
-        u: () => new URL('./brands/twitter3.dark.svg', import.meta.url),
-    },
-    {
-        c: ['light'],
-        u: () => new URL('./brands/twitter3.light.svg', import.meta.url),
-    },
-])
 export const TwitterColored = /*#__PURE__*/ __createIcon('TwitterColored', [
     {
         u: () => new URL('./brands/TwitterColored.svg', import.meta.url),
@@ -532,6 +522,21 @@ export const TwitterRoundWithNoBorder = /*#__PURE__*/ __createIcon('TwitterRound
         u: () => new URL('./brands/TwitterRoundWithNoBorder.svg', import.meta.url),
     },
 ])
+export const TwitterX = /*#__PURE__*/ __createIcon('TwitterX', [
+    {
+        c: ['dark'],
+        u: () => new URL('./brands/TwitterX.dark.svg', import.meta.url),
+    },
+    {
+        c: ['light'],
+        u: () => new URL('./brands/TwitterX.light.svg', import.meta.url),
+    },
+])
+export const TwitterXRound = /*#__PURE__*/ __createIcon('TwitterXRound', [
+    {
+        u: () => new URL('./brands/TwitterXRound.svg', import.meta.url),
+    },
+])
 export const Uniswap = /*#__PURE__*/ __createIcon('Uniswap', [
     {
         u: () => new URL('./brands/Uniswap.svg', import.meta.url),

packages/icons/icon-generated-as-url.js

@@ -95,14 +95,15 @@ export function solana_url() { return new URL("./brands/Solana.svg", import.meta
 export function sushi_swap_url() { return new URL("./brands/SushiSwap.png", import.meta.url) }
 export function sybil_url() { return new URL("./brands/Sybil.png", import.meta.url) }
 export function telegram_round_url() { return new URL("./brands/TelegramRound.svg", import.meta.url) }
-export function twitter_3_dark_url() { return new URL("./brands/twitter3.dark.svg", import.meta.url) }
-export function twitter_3_light_url() { return new URL("./brands/twitter3.light.svg", import.meta.url) }
 export function twitter_colored_url() { return new URL("./brands/TwitterColored.svg", import.meta.url) }
 export function twitter_other_colored_url() { return new URL("./brands/TwitterOtherColored.svg", import.meta.url) }
 export function twitter_round_url() { return new URL("./brands/TwitterRound.svg", import.meta.url) }
 export function twitter_round_black_white_url() { return new URL("./brands/TwitterRoundBlackWhite.svg", import.meta.url) }
 export function twitter_round_gray_url() { return new URL("./brands/TwitterRoundGray.svg", import.meta.url) }
 export function twitter_round_with_no_border_url() { return new URL("./brands/TwitterRoundWithNoBorder.svg", import.meta.url) }
+export function twitter_x_dark_url() { return new URL("./brands/TwitterX.dark.svg", import.meta.url) }
+export function twitter_x_light_url() { return new URL("./brands/TwitterX.light.svg", import.meta.url) }
+export function twitter_x_round_url() { return new URL("./brands/TwitterXRound.svg", import.meta.url) }
 export function uniswap_url() { return new URL("./brands/Uniswap.svg", import.meta.url) }
 export function weth_url() { return new URL("./brands/WETH.svg", import.meta.url) }
 export function x_2_y_2_url() { return new URL("./brands/X2Y2.svg", import.meta.url) }

packages/mask/src/components/InjectedComponents/SwitchLogo/SwitchLogoDialog.tsx

@@ -128,7 +128,7 @@ export const SwitchLogoDialog = memo<SwitchLogoDialogProps>(() => {
                             (logoType || defaultLogoType) === SwitchLogoType.New ? classes.selected : '',
                         )}
                         onClick={() => onChange(SwitchLogoType.New)}>
-                        <Icons.Twitter3 />
+                        <Icons.TwitterX />
                         <Typography fontSize={14} fontWeight={700}>
                             {t('switch_logo_new_logo')}
                         </Typography>

packages/plugins/Avatar/src/Application/NFTAvatar.tsx

@@ -5,7 +5,7 @@ import { Avatar, Box, Stack } from '@mui/material'
 import { RainbowBox } from '../SiteAdaptor/RainbowBox.js'
 
 export const SOCIAL_MEDIA_ICON_MAPPING: Record<string, React.ReactNode> = {
-    [EnhanceableSite.Twitter]: <Icons.TwitterRound size={15} />,
+    [EnhanceableSite.Twitter]: <Icons.TwitterXRound size={14} />,
     [EnhanceableSite.Localhost]: null,
 }
 
@@ -54,6 +54,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                     overflow: 'hidden',
                     borderRadius: '100%',
                     backgroundColor: 'white',
+                    padding: '1px',
                 }}>
                 {SOCIAL_MEDIA_ICON_MAPPING[EnhanceableSite.Twitter]}
             </Stack>

packages/shared/src/UI/components/CoinMetadataTable/index.tsx

@@ -85,7 +85,7 @@ const brands: Record<TrendingAPI.CommunityType, React.ReactNode> = {
     medium: <Icons.MediumGray size={16} />,
     reddit: <Icons.RedditRoundGray size={16} />,
     telegram: <Icons.TelegramRoundGray size={16} />,
-    twitter: <Icons.TwitterRoundGray size={16} />,
+    twitter: <Icons.TwitterXRound size={16} />,
     youtube: <Icons.YouTubeGray size={16} />,
     other: null,
 }

packages/shared/src/UI/components/SocialAccountList/utils.tsx

@@ -7,7 +7,7 @@ export const resolveNextIDPlatformIcon = createLookupTableResolver<NextIDPlatfor
         [NextIDPlatform.NextID]: null,
         [NextIDPlatform.GitHub]: Icons.GitHub,
         [NextIDPlatform.Keybase]: Icons.Keybase,
-        [NextIDPlatform.Twitter]: Icons.TwitterRound,
+        [NextIDPlatform.Twitter]: Icons.TwitterXRound,
         [NextIDPlatform.ENS]: Icons.ENS,
         [NextIDPlatform.RSS3]: null,
         [NextIDPlatform.LENS]: Icons.Lens,

packages/shared/src/constants.tsx

@@ -3,7 +3,7 @@ import { Icons, type GeneratedIcon } from '@masknet/icons'
 import { EnhanceableSite } from '@masknet/shared-base'
 
 export const SOCIAL_MEDIA_ICON_MAPPING: Record<EnhanceableSite | string, ReactNode> = {
-    [EnhanceableSite.Twitter]: <Icons.TwitterColored />,
+    [EnhanceableSite.Twitter]: <Icons.TwitterX />,
     [EnhanceableSite.Facebook]: <Icons.FacebookColored />,
     [EnhanceableSite.Minds]: <Icons.Minds />,
     [EnhanceableSite.Instagram]: <Icons.InstagramColored />,
@@ -13,7 +13,7 @@ export const SOCIAL_MEDIA_ICON_MAPPING: Record<EnhanceableSite | string, ReactNo
 }
 
 export const SOCIAL_MEDIA_ROUND_ICON_MAPPING: Record<EnhanceableSite | string, GeneratedIcon | null> = {
-    [EnhanceableSite.Twitter]: Icons.TwitterRound,
+    [EnhanceableSite.Twitter]: Icons.TwitterXRound,
     [EnhanceableSite.Facebook]: Icons.FacebookRound,
     [EnhanceableSite.Minds]: Icons.MindsRound,
     [EnhanceableSite.Instagram]: Icons.InstagramRoundColored,