From 37cd92be8e0d4f44843aaad721f02133416eb148 Mon Sep 17 00:00:00 2001 From: huiii421 Date: Sat, 23 Aug 2025 05:04:28 +1000 Subject: [PATCH 1/4] update the x icon --- .../blogs/[id]/components/SocialMedia.tsx | 38 ++++++------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx index 95528fb..790fb97 100644 --- a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx +++ b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx @@ -2,9 +2,9 @@ import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; +import XIcon from '@mui/icons-material/X'; import { Box, IconButton, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; -import Image from 'next/image'; import React from 'react'; // Styled components @@ -16,9 +16,9 @@ const SocialContainer = styled(Box)(({ theme }) => ({ [theme.breakpoints.down('md')]: { flexDirection: 'row', alignItems: 'center', - justifyContent: 'flex-end', // 移动端靠右对齐 - gap: theme.spacing(0.5), // 缩小间距 - width: '100%', // 占满宽度以便靠右 + justifyContent: 'flex-end', + gap: theme.spacing(0.5), + width: '100%', }, })); @@ -28,7 +28,7 @@ const StyledLabelWrapper = styled(Box)(({ theme }) => ({ [theme.breakpoints.down('md')]: { marginLeft: 0, paddingBottom: 0, - display: 'none', // 移动端隐藏文字 + display: 'none', }, })); @@ -36,27 +36,24 @@ const StyledIconRow = styled(Box)(({ theme }) => ({ display: 'flex', gap: theme.spacing(1), [theme.breakpoints.down('md')]: { - gap: theme.spacing(0.5), // 缩小图标间距 - justifyContent: 'flex-end', // 图标靠右 + gap: theme.spacing(0.5), + justifyContent: 'flex-end', }, })); const StyledIconButton = styled(IconButton)(({ theme }) => ({ color: theme.palette.common.black, + padding: theme.spacing(1), '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)', }, [theme.breakpoints.down('md')]: { - padding: theme.spacing(0.75), // 增加内边距 - width: 44, // 增大宽度 - height: 44, // 增大高度 + padding: theme.spacing(0.5), '& .MuiSvgIcon-root': { - fontSize: 22, // 增大图标大小 - width: 22, - height: 22, + fontSize: 22, }, '& img': { - width: 22, // 增大图片大小 + width: 22, height: 22, }, }, @@ -70,15 +67,6 @@ const SocialLabel = styled(Typography)(({ theme }) => ({ }, })); -// 自定义X图标组件，确保与其他图标大小一致 -const XIcon = styled(Box)({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 22, - height: 22, -}); - const SocialMedia = () => { const handleShare = (platform: string) => { const url = window.location.href; @@ -131,9 +119,7 @@ const SocialMedia = () => { handleShare('twitter'); }} > - - X - + From cf398e45c90d54d27a534e29c554f09f3ba4cde1 Mon Sep 17 00:00:00 2001 From: huiii421 Date: Mon, 25 Aug 2025 20:09:44 +1000 Subject: [PATCH 2/4] bugfix: update icon size --- .../blogs/[id]/components/IntroSection.tsx | 5 +-- .../blogs/[id]/components/SocialMedia.tsx | 32 +++++++++++++++++-- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/app/(public)/blogs/[id]/components/IntroSection.tsx b/src/app/(public)/blogs/[id]/components/IntroSection.tsx index 8e50dc0..758dc6f 100644 --- a/src/app/(public)/blogs/[id]/components/IntroSection.tsx +++ b/src/app/(public)/blogs/[id]/components/IntroSection.tsx @@ -54,6 +54,7 @@ const HeaderContainer = styled(Box)(({ theme }) => ({ alignItems: 'flex-start', gap: theme.spacing(1), marginTop: theme.spacing(1), + marginBottom: theme.spacing(2), }, })); @@ -83,8 +84,8 @@ const AvatarContainer = styled(Box)(({ theme }) => ({ alignItems: 'center', justifyContent: 'center', [theme.breakpoints.down('md')]: { - width: '60px', - height: '60px', + width: '40px', + height: '40px', borderRadius: '50%', backgroundColor: '#f5f5f5', overflow: 'hidden', diff --git a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx index 790fb97..aefc8ab 100644 --- a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx +++ b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx @@ -35,22 +35,48 @@ const StyledLabelWrapper = styled(Box)(({ theme }) => ({ const StyledIconRow = styled(Box)(({ theme }) => ({ display: 'flex', gap: theme.spacing(1), + + '& > :nth-of-type(-n+2)': { + borderRadius: 8, + padding: theme.spacing(0.5, 1), + overflow: 'hidden', + }, + '& > :nth-of-type(-n+2) .MuiTouchRipple-root': { + borderRadius: 8, + }, + + '& > :nth-of-type(-n+2) .MuiSvgIcon-root': { + borderRadius: 6, + overflow: 'hidden', + }, + [theme.breakpoints.down('md')]: { gap: theme.spacing(0.5), justifyContent: 'flex-end', + '& > :nth-of-type(-n+2)': { + borderRadius: 8, + padding: theme.spacing(0.8), + }, + '& > :nth-of-type(-n+2) .MuiTouchRipple-root': { + borderRadius: 8, + }, }, })); const StyledIconButton = styled(IconButton)(({ theme }) => ({ color: theme.palette.common.black, - padding: theme.spacing(1), + padding: theme.spacing(0.5, 1), '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)', }, [theme.breakpoints.down('md')]: { - padding: theme.spacing(0.5), + padding: theme.spacing(0.8), '& .MuiSvgIcon-root': { - fontSize: 22, + fontSize: 24, + '& path': { + transform: 'scale(1.3)', + transformOrigin: 'center', + }, }, '& img': { width: 22, From dc4cd656888f8ebfc1c3f2fb19901597431988d6 Mon Sep 17 00:00:00 2001 From: huiii421 Date: Mon, 25 Aug 2025 20:34:47 +1000 Subject: [PATCH 3/4] fixbugs --- src/app/(public)/blogs/[id]/components/SocialMedia.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx index 901dd66..fad9d92 100644 --- a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx +++ b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx @@ -3,7 +3,6 @@ import FacebookIcon from '@mui/icons-material/Facebook'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; import XIcon from '@mui/icons-material/X'; -import XIcon from '@mui/icons-material/X'; import { Box, IconButton, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; import React from 'react'; @@ -20,9 +19,6 @@ const SocialContainer = styled(Box)(({ theme }) => ({ justifyContent: 'flex-end', gap: theme.spacing(0.5), width: '100%', - justifyContent: 'flex-end', - gap: theme.spacing(0.5), - width: '100%', }, })); @@ -33,7 +29,6 @@ const StyledLabelWrapper = styled(Box)(({ theme }) => ({ marginLeft: 0, paddingBottom: 0, display: 'none', - display: 'none', }, })); @@ -84,7 +79,6 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({ }, }, '& img': { - width: 22, width: 22, height: 22, }, From dc45ca712c60ff07129d986e9e51ce5c1b8f9e6a Mon Sep 17 00:00:00 2001 From: huiii421 Date: Mon, 25 Aug 2025 20:37:22 +1000 Subject: [PATCH 4/4] update icon x --- src/app/(public)/blogs/[id]/components/SocialMedia.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx index fad9d92..aefc8ab 100644 --- a/src/app/(public)/blogs/[id]/components/SocialMedia.tsx +++ b/src/app/(public)/blogs/[id]/components/SocialMedia.tsx @@ -146,7 +146,6 @@ const SocialMedia = () => { }} > -