💄 style: improve market layout styles and mobile style (lobehub#2347)

* 💄 style: Layout styles patch * 💄 style: Update style
bentwnghk · May 3, 2024 · 79b8115 · 79b8115
1 parent 91b6f58
commit 79b8115
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 23 deletions.
diff --git a/src/app/(main)/(mobile)/me/features/AvatarBanner.tsx b/src/app/(main)/(mobile)/me/features/AvatarBanner.tsx
@@ -4,28 +4,32 @@ import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-export const useStyles = createStyles(({ css, token }) => ({
+export const AVATAR_SIZE = 80;
+
+export const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   avatar: css`
-    position: absolute;
     z-index: 10;
 
     flex: none;
 
-    background: ${token.colorBgContainer};
-    border: 6px solid ${token.colorBgContainer};
+    margin-top: -${AVATAR_SIZE / 2 + 6}px;
+
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
+    border: 6px solid ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 50%;
   `,
   banner: css`
     position: relative;
     flex: none;
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
   `,
   bannerBox: css`
     position: relative;
 
     overflow: hidden;
 
     width: 100%;
-    height: 180px;
+    height: 100px;
 
     background: ${token.colorBgLayout};
   `,

diff --git a/src/app/(main)/(mobile)/me/features/Cate.tsx b/src/app/(main)/(mobile)/me/features/Cate.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -11,12 +10,11 @@ import Cell from '@/components/Cell';
 import Divider from '@/components/Cell/Divider';
 
 const SettingCate = memo(() => {
-  const theme = useTheme();
   const settingItems = useCategory({ mobile: true });
   const router = useRouter();
 
   return (
-    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+    <Flexbox width={'100%'}>
       {settingItems?.map(({ key, icon, label, type }: any, index) => {
         if (type === 'divider') return <Divider key={index} />;
         return (

diff --git a/src/app/(main)/(mobile)/me/features/ExtraCate.tsx b/src/app/(main)/(mobile)/me/features/ExtraCate.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,11 +9,10 @@ import Divider from '@/components/Cell/Divider';
 import { useExtraCate } from './useExtraCate';
 
 const ExtraCate = memo(() => {
-  const theme = useTheme();
   const mainItems = useExtraCate();
 
   return (
-    <Flexbox style={{ background: theme.colorBgContainer }} width={'100%'}>
+    <Flexbox width={'100%'}>
       {mainItems?.map(({ key, icon, label, type, onClick }: any, index) => {
         if (type === 'divider') return <Divider key={index} />;
         return <Cell icon={icon} key={key} label={label} onClick={onClick} />;

diff --git a/src/app/(main)/(mobile)/me/page.tsx b/src/app/(main)/(mobile)/me/page.tsx
@@ -5,7 +5,7 @@ import BrandWatermark from '@/components/BrandWatermark';
 import Avatar from '@/features/AvatarWithUpload';
 import { isMobileDevice } from '@/utils/responsive';
 
-import AvatarBanner from './features/AvatarBanner';
+import AvatarBanner, { AVATAR_SIZE } from './features/AvatarBanner';
 import Cate from './features/Cate';
 import ExtraCate from './features/ExtraCate';
 
@@ -17,7 +17,7 @@ const Page = () => {
   return (
     <>
       <AvatarBanner>
-        <Avatar size={88} />
+        <Avatar size={AVATAR_SIZE} />
       </AvatarBanner>
       <Cate />
       <ExtraCate />

diff --git a/src/app/(main)/market/features/AgentCard/index.tsx b/src/app/(main)/market/features/AgentCard/index.tsx
@@ -28,12 +28,13 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
     background: ${token.colorBgContainer};
     border-radius: ${token.borderRadiusLG}px;
-    box-shadow: 0 0 1px 1px ${token.colorFillQuaternary} inset;
+    box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillQuaternary : token.colorFillSecondary}
+      inset;
 
     transition: box-shadow 0.2s ${token.motionEaseInOut};
 
     &:hover {
-      box-shadow: 0 0 1px 1px ${token.colorFillSecondary} inset;
+      box-shadow: 0 0 1px 1px ${isDarkMode ? token.colorFillSecondary : token.colorFill} inset;
     }
   `,
   desc: css`
@@ -50,6 +51,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   title: css`
     margin-bottom: 0 !important;
     font-size: 18px !important;
+    font-weight: bold;
   `,
 }));
 

diff --git a/src/app/(main)/market/features/AgentList.tsx b/src/app/(main)/market/features/AgentList.tsx
@@ -58,7 +58,16 @@ const AgentList = memo<AgentListProps>(({ mobile }) => {
     [],
   );
 
-  if (isLoading) return <Skeleton paragraph={{ rows: 8 }} title={false} />;
+  if (isLoading || (!searchKeywords && agentList?.length === 0)) {
+    return (
+      <>
+        <h2 className={styles.title}>{t('title.recentSubmits')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+        <h2 className={styles.title}>{t('title.allAgents')}</h2>
+        <Skeleton paragraph={{ rows: 8 }} title={false} />
+      </>
+    );
+  }
 
   if (searchKeywords) {
     if (agentList.length === 0) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

diff --git a/src/app/(main)/market/features/TagList.tsx b/src/app/(main)/market/features/TagList.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from 'antd';
+import { Button, Skeleton } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   active: css`
     color: ${token.colorBgLayout};
     background: ${token.colorPrimary};
@@ -20,11 +20,11 @@ const useStyles = createStyles(({ css, token }) => ({
     }
   `,
   tag: css`
-    background: ${token.colorBgContainer};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
     border: none;
 
     &:hover {
-      background: ${token.colorBgElevated} !important;
+      background: ${isDarkMode ? token.colorBgElevated : token.colorFill} !important;
     }
   `,
 }));
@@ -38,6 +38,10 @@ const TagList = memo(() => {
   ]);
   const agentTagList = useMarketStore(agentMarketSelectors.getAgentTagList, isEqual);
 
+  if (agentTagList?.length === 0) {
+    return <Skeleton paragraph={{ rows: 4 }} title={false} />;
+  }
+
   const list = md ? agentTagList : agentTagList.slice(0, 20);
 
   return (

diff --git a/src/components/Cell/Divider.tsx b/src/components/Cell/Divider.tsx
@@ -4,9 +4,9 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token, isDarkMode }) => css`
     height: 6px;
-    background: ${token.colorBgLayout};
+    background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,
 );
 

diff --git a/src/components/Cell/index.tsx b/src/components/Cell/index.tsx
@@ -5,10 +5,11 @@ import { ReactNode, memo } from 'react';
 
 const { Item } = List;
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
     padding-block: 16px !important;
+    background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,
 }));