Dis 133 mobile adaption blogs page (#193)

* fix：banner style and gap

* fix: blog card style

* fix: blog list layout

* fix: adjust buttom position

* fix: subscription section margin

* fix: filterBar style problem

* fix: next button style

* fix: next button style

* fix: empty value problem

---------

Co-authored-by: Depeng Sun <[email protected]>

Author: FreyaXu399

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)(() => ({
@@ -115,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 });
   };
@@ -149,9 +148,15 @@ export default function BlogFilterBar() {
           }}
           disableUnderline
           displayEmpty
+          renderValue={selected => {
+            if (!selected) {
+              return <span style={{ color: '#BDBDBD' }}>Please Select</span>;
+            }
+            return selected;
+          }}
           sx={{ flex: 1, fontSize: 13 }}
         >
-          <MenuItem value="">All</MenuItem>
+          <MenuItem value="all">All</MenuItem>
           <MenuItem value="Small And Medium Businesses">
             Small And Medium Businesses
           </MenuItem>

src/app/(public)/blogs/components/BlogList.tsx

@@ -1,9 +1,10 @@
 'use client';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Box, Button, Grid, Snackbar, styled, Typography } from '@mui/material';
 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';
@@ -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',
   },
 }));
 
@@ -174,7 +177,10 @@ export default function BlogList() {
               void handleNextPage();
             }}
           >
-            Next →
+            Next
+            <ArrowForwardIcon
+              sx={{ width: '20px', height: '18px', marginLeft: '6px' }}
+            />
           </NextButton>
         )}
       </Box>

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',
   },
 });