From bc6df9b009246775923737f9b59d3adbac096af9 Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Sun, 17 Aug 2025 17:43:30 +1000 Subject: [PATCH 1/9] =?UTF-8?q?fix=EF=BC=9Abanner=20style=20and=20gap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(public)/blogs/components/Banner.tsx | 16 +++++++++----- .../blogs/components/BlogFilterBar.tsx | 21 ++++++++++--------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/app/(public)/blogs/components/Banner.tsx b/src/app/(public)/blogs/components/Banner.tsx index fb67175..0c0bcc0 100644 --- a/src/app/(public)/blogs/components/Banner.tsx +++ b/src/app/(public)/blogs/components/Banner.tsx @@ -4,15 +4,18 @@ import { Box, styled, Typography } from '@mui/material'; const BannerWrapper = styled(Box)(({ theme }) => ({ width: '100%', height: 400, - margin: '0 auto 80px auto', + margin: '0 auto', + marginBottom: theme.spacing(10), backgroundColor: '#060606', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), boxSizing: 'border-box', + [theme.breakpoints.down('sm')]: { + marginBottom: theme.spacing(0), + paddingTop: 50, + }, })); const Title = styled(Typography)(({ theme }) => ({ @@ -25,10 +28,13 @@ const Title = styled(Typography)(({ theme }) => ({ const Subtitle = styled(Typography)(({ theme }) => ({ ...theme.typography.body1, color: '#ffffff', - maxWidth: 650, + maxWidth: 750, textAlign: 'center', lineHeight: 1.7, - opacity: 0.8, + [theme.breakpoints.down('sm')]: { + fontSize: 14, + margin: '0 15px', + }, })); export default function Banner() { diff --git a/src/app/(public)/blogs/components/BlogFilterBar.tsx b/src/app/(public)/blogs/components/BlogFilterBar.tsx index a43cc62..541fce0 100644 --- a/src/app/(public)/blogs/components/BlogFilterBar.tsx +++ b/src/app/(public)/blogs/components/BlogFilterBar.tsx @@ -42,11 +42,21 @@ const SearchBox = styled(Box)(() => ({ }, })); +const StyledSearchIcon = styled(SearchIcon)(({ theme }) => ({ + color: '#BDBDBD', + marginRight: theme.spacing(1), + display: 'inline-flex', + [theme.breakpoints.down('sm')]: { + display: 'none', + }, +})); + const StyledInput = styled(TextField)(() => ({ '& .MuiOutlinedInput-root': { border: 'none', paddingRight: 0, background: 'transparent', + fontSize: 16, }, '& fieldset': { border: 'none', @@ -114,13 +124,7 @@ export default function BlogFilterBar() { return ( - + { setKeyword(e.target.value); }} - InputProps={{ - sx: { fontSize: 16, background: 'transparent' }, - }} /> Search From a6e8bd6b892c3e03c3986917200bc574731b70d5 Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Sun, 17 Aug 2025 21:07:30 +1000 Subject: [PATCH 2/9] fix: blog card style --- .../(public)/blogs/components/BlogCard.tsx | 76 ++++++++++--------- 1 file changed, 42 insertions(+), 34 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogCard.tsx b/src/app/(public)/blogs/components/BlogCard.tsx index d63cb46..d45a866 100644 --- a/src/app/(public)/blogs/components/BlogCard.tsx +++ b/src/app/(public)/blogs/components/BlogCard.tsx @@ -1,6 +1,6 @@ 'use client'; import AccessTimeIcon from '@mui/icons-material/AccessTime'; -import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; import { Box, Card, @@ -18,7 +18,7 @@ const BlogCardWrapper = styled(Card)(({ theme }) => ({ width: '100%', minHeight: '448px', maxHeight: '528px', - padding: '12px 12px 30px', + padding: '8px 8px 32px 8px', borderRadius: 24, border: '1px solid #d5d5d5', backgroundColor: '#fff', @@ -34,9 +34,10 @@ const BlogCardWrapper = styled(Card)(({ theme }) => ({ }, [theme.breakpoints.down('md')]: { - minHeight: '380px', + minHeight: '300px', maxHeight: '450px', borderRadius: 16, + padding: '8px 8px 16px', }, })); @@ -52,6 +53,16 @@ const ImageBox = styled(Box)(() => ({ }, })); +const PlaceholderBox = styled(Box)(() => ({ + width: '100%', + height: '100%', + background: '#e5e5e5', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: '#6d6d6d', +})); + const Title = styled(Typography)(() => ({ color: '#060606', fontWeight: 700, @@ -89,19 +100,27 @@ const TagRow = styled(Box)(() => ({ const StyledTag = styled(Chip)(() => ({ background: '#a8f574', color: '#060606', - fontWeight: 600, - fontSize: 10, borderRadius: 'clamp(16px, 2vw, 20px)', height: 'clamp(15px, 20px, 24px)', padding: '0 clamp(4px, 6px, 8px)', + '& .MuiChip-label': { + padding: '0 6px', + fontSize: 12, + fontWeight: 500, + }, + [theme.breakpoints.down('md')]: { + '& .MuiChip-label': { + padding: '4 4px', + }, + }, })); const FooterRow = styled(Box)(() => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - marginTop: 'auto', width: '100%', + margin: 'auto 8px', })); const MetaInfo = styled(Box)(() => ({ @@ -113,6 +132,13 @@ const MetaInfo = styled(Box)(() => ({ fontSize: 'clamp(9px, 1vw, 11px)', })); +const MetaItem = styled(Box)(() => ({ + display: 'flex', + alignItems: 'center', + gap: '4px', + fontSize: 13, +})); + export interface BlogCardProps { _id: string; title: string; @@ -159,22 +185,10 @@ export default function BlogCard({ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> ) : ( - - No image available - + No image available )} - + {title} {summary} @@ -188,26 +202,20 @@ export default function BlogCard({ sx={{ fontWeight: 700, color: '#060606', - fontSize: 12, + fontSize: 14, }} > Read More → - - - {new Date(date).toLocaleDateString('en-CA')} - - - + + + {new Date(date).toLocaleDateString('ja-JP')} + + + {views} - + From 28d0865241b3a3db98eb844ad7fc22a7277ea54c Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Sun, 17 Aug 2025 21:17:12 +1000 Subject: [PATCH 3/9] fix: blog list layout --- src/app/(public)/blogs/components/BlogFilterBar.tsx | 1 + src/app/(public)/blogs/components/BlogList.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/(public)/blogs/components/BlogFilterBar.tsx b/src/app/(public)/blogs/components/BlogFilterBar.tsx index 541fce0..25905f1 100644 --- a/src/app/(public)/blogs/components/BlogFilterBar.tsx +++ b/src/app/(public)/blogs/components/BlogFilterBar.tsx @@ -25,6 +25,7 @@ const FilterBarWrapper = styled(Box)(() => ({ flexDirection: 'column', alignItems: 'stretch', gap: 16, + marginBottom: 20, }, })); diff --git a/src/app/(public)/blogs/components/BlogList.tsx b/src/app/(public)/blogs/components/BlogList.tsx index eb590fc..5a8adef 100644 --- a/src/app/(public)/blogs/components/BlogList.tsx +++ b/src/app/(public)/blogs/components/BlogList.tsx @@ -151,7 +151,7 @@ export default function BlogList() { ) : ( Date: Sun, 17 Aug 2025 21:29:37 +1000 Subject: [PATCH 4/9] fix: adjust buttom position --- src/app/(public)/blogs/components/BlogList.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogList.tsx b/src/app/(public)/blogs/components/BlogList.tsx index 5a8adef..116256e 100644 --- a/src/app/(public)/blogs/components/BlogList.tsx +++ b/src/app/(public)/blogs/components/BlogList.tsx @@ -5,6 +5,7 @@ import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context. import { useRouter, useSearchParams } from 'next/navigation'; import { useEffect, useRef, useState } from 'react'; +import theme from '@/theme'; import type { Blog } from '@/types/blog'; import BlogCard from './BlogCard'; @@ -17,12 +18,12 @@ const NextButton = styled(Button)(() => ({ boxShadow: 'none', width: 114, height: 48, - marginTop: 40, - marginBottom: 72, - marginLeft: 10, - marginRight: 10, + margin: '10px 10px 120px', textTransform: 'none', '&:hover': { background: '#222', boxShadow: 'none' }, + [theme.breakpoints.down('md')]: { + margin: '20px 10px 50px', + }, })); export default function BlogList() { @@ -154,7 +155,7 @@ export default function BlogList() { spacing={{ xs: 2, sm: 4 }} justifyContent="flex-start" alignItems="stretch" - sx={{ mb: 6, mt: 1 }} + sx={{ mb: { sm: 2, md: 6 }, mt: 1 }} > {blogs.map(blog => ( From ae81a6ba250901e6277a346a03e224b07110525a Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Sun, 17 Aug 2025 22:07:07 +1000 Subject: [PATCH 5/9] fix: subscription section margin --- .../blogs/components/BlogFilterBar.tsx | 2 +- .../blogs/components/SubscriptionSection.tsx | 69 +++++++------------ 2 files changed, 24 insertions(+), 47 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogFilterBar.tsx b/src/app/(public)/blogs/components/BlogFilterBar.tsx index 25905f1..90bb3f9 100644 --- a/src/app/(public)/blogs/components/BlogFilterBar.tsx +++ b/src/app/(public)/blogs/components/BlogFilterBar.tsx @@ -20,12 +20,12 @@ const FilterBarWrapper = styled(Box)(() => ({ alignItems: 'center', gap: 24, marginTop: '32px', + marginBottom: 30, justifyContent: 'flex-start', [theme.breakpoints.down('sm')]: { flexDirection: 'column', alignItems: 'stretch', gap: 16, - marginBottom: 20, }, })); diff --git a/src/app/(public)/blogs/components/SubscriptionSection.tsx b/src/app/(public)/blogs/components/SubscriptionSection.tsx index 7f2168f..e58e93b 100644 --- a/src/app/(public)/blogs/components/SubscriptionSection.tsx +++ b/src/app/(public)/blogs/components/SubscriptionSection.tsx @@ -1,10 +1,15 @@ 'use client'; import { Box, Grid, styled, TextField, Typography } from '@mui/material'; +import theme from '@/theme'; + const SubscriptionWrapper = styled(Box)(() => ({ background: '#111', textAlign: 'center', padding: '100px 16px', + [theme.breakpoints.down('md')]: { + padding: '60px 16px', + }, })); const FormWrapper = styled(Box)(() => ({ @@ -20,12 +25,26 @@ const Label = styled(Typography)(() => ({ marginBottom: 4, })); +export const StyledInput = styled(TextField)({ + '& .MuiInputBase-root': { + height: 40, + borderRadius: 12, + backgroundColor: '#fff', + }, + '& .MuiInputBase-input': { + padding: '6px 16px', // 控制输入框内边距 + }, + '& .MuiOutlinedInput-notchedOutline': { + border: '1px solid #d5d5d5', // 默认边框 + }, +}); + export default function SubscriptionSection() { return ( - @@ -73,49 +78,21 @@ export default function SubscriptionSection() { - - From 51d607e66c37c6096e5616613ba866c833be0da7 Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Fri, 22 Aug 2025 17:06:05 +1000 Subject: [PATCH 6/9] fix: filterBar style problem --- .../(public)/blogs/components/BlogFilterBar.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogFilterBar.tsx b/src/app/(public)/blogs/components/BlogFilterBar.tsx index 90bb3f9..87783f2 100644 --- a/src/app/(public)/blogs/components/BlogFilterBar.tsx +++ b/src/app/(public)/blogs/components/BlogFilterBar.tsx @@ -44,12 +44,10 @@ const SearchBox = styled(Box)(() => ({ })); const StyledSearchIcon = styled(SearchIcon)(({ theme }) => ({ - color: '#BDBDBD', + color: 'black', marginRight: theme.spacing(1), + marginLeft: theme.spacing(1), display: 'inline-flex', - [theme.breakpoints.down('sm')]: { - display: 'none', - }, })); const StyledInput = styled(TextField)(() => ({ @@ -149,9 +147,15 @@ export default function BlogFilterBar() { }} disableUnderline displayEmpty + renderValue={selected => { + if (!selected) { + return Please Select; + } + return selected; + }} sx={{ flex: 1, fontSize: 13 }} > - All + Please Select Small And Medium Businesses From 6675e179d50c2d30abf7cc8c419f0906652dfc0b Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Fri, 22 Aug 2025 17:53:17 +1000 Subject: [PATCH 7/9] fix: next button style --- src/app/(public)/blogs/components/BlogList.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/(public)/blogs/components/BlogList.tsx b/src/app/(public)/blogs/components/BlogList.tsx index be0d6bb..734b497 100644 --- a/src/app/(public)/blogs/components/BlogList.tsx +++ b/src/app/(public)/blogs/components/BlogList.tsx @@ -1,5 +1,6 @@ 'use client'; import { Box, Button, Grid, Snackbar, styled, Typography } from '@mui/material'; +import { borderRadius, fontSize } from '@mui/system'; import axios from 'axios'; import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'; import { useRouter, useSearchParams } from 'next/navigation'; @@ -23,6 +24,8 @@ const NextButton = styled(Button)(() => ({ '&:hover': { background: '#222', boxShadow: 'none' }, [theme.breakpoints.down('md')]: { margin: '20px 10px 50px', + borderRadius: 16, + fontSize: '16px', }, })); From ba64a3c7a88d5fb278a5ccf32f3df04146082d34 Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Fri, 22 Aug 2025 20:24:00 +1000 Subject: [PATCH 8/9] fix: next button style --- src/app/(public)/blogs/components/BlogList.tsx | 9 ++++++--- .../(public)/blogs/components/SubscriptionSection.tsx | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogList.tsx b/src/app/(public)/blogs/components/BlogList.tsx index 734b497..8428311 100644 --- a/src/app/(public)/blogs/components/BlogList.tsx +++ b/src/app/(public)/blogs/components/BlogList.tsx @@ -1,10 +1,10 @@ 'use client'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { Box, Button, Grid, Snackbar, styled, Typography } from '@mui/material'; -import { borderRadius, fontSize } from '@mui/system'; import axios from 'axios'; import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'; import { useRouter, useSearchParams } from 'next/navigation'; -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import theme from '@/theme'; import type { Blog } from '@/types/blog'; @@ -177,7 +177,10 @@ export default function BlogList() { void handleNextPage(); }} > - Next → + Next + )} diff --git a/src/app/(public)/blogs/components/SubscriptionSection.tsx b/src/app/(public)/blogs/components/SubscriptionSection.tsx index e58e93b..4e7fb53 100644 --- a/src/app/(public)/blogs/components/SubscriptionSection.tsx +++ b/src/app/(public)/blogs/components/SubscriptionSection.tsx @@ -32,10 +32,10 @@ export const StyledInput = styled(TextField)({ backgroundColor: '#fff', }, '& .MuiInputBase-input': { - padding: '6px 16px', // 控制输入框内边距 + padding: '6px 16px', }, '& .MuiOutlinedInput-notchedOutline': { - border: '1px solid #d5d5d5', // 默认边框 + border: '1px solid #d5d5d5', }, }); From 365e132726c6582196c2f17c22d71a01c6a63754 Mon Sep 17 00:00:00 2001 From: Freya Xu Date: Sun, 24 Aug 2025 19:45:45 +1000 Subject: [PATCH 9/9] fix: empty value problem --- src/app/(public)/blogs/components/BlogFilterBar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/(public)/blogs/components/BlogFilterBar.tsx b/src/app/(public)/blogs/components/BlogFilterBar.tsx index 87783f2..49361a8 100644 --- a/src/app/(public)/blogs/components/BlogFilterBar.tsx +++ b/src/app/(public)/blogs/components/BlogFilterBar.tsx @@ -113,7 +113,8 @@ export default function BlogFilterBar() { const params = new URLSearchParams(); if (debouncedKeyword.trim()) params.set('keyword', debouncedKeyword.trim()); - if (debouncedTopic) params.set('topic', debouncedTopic); + if (debouncedTopic && debouncedTopic !== 'all') + params.set('topic', debouncedTopic); router.replace(`/blogs?${params.toString()}`, { scroll: false }); }; @@ -155,7 +156,7 @@ export default function BlogFilterBar() { }} sx={{ flex: 1, fontSize: 13 }} > - Please Select + All Small And Medium Businesses