Feat: Change homepage style

mc-cloud-town · Aug 10, 2024 · 7dfa9fd · 7dfa9fd
1 parent 604944e
commit 7dfa9fd
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/src/components/collection/CollectionPageBase.tsx b/src/components/collection/CollectionPageBase.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Select, SelectProps } from 'antd';
+import { GlobalToken, Select, SelectProps, theme } from 'antd';
 import styled from 'styled-components';
 
 import PageHeader from '#/common/PageHeader.tsx';
@@ -15,9 +15,10 @@ import getImageUrl from '@/utils/getImageUrl.ts';
 import useApi from '@/hooks/useApi.ts';
 import { StatusShowingGroup } from '#/common/StatusShowingGroup.tsx';
 
-const Container = styled.div`
+const Container = styled.div<{ $token: GlobalToken }>`
   padding: 50px 40px;
-  background-color: #6f9b9c;
+  color: #fff;
+  background-color: ${(props) => props.$token.colorPrimary};
 
   @media (max-width: 400px) {
     padding: 50px 10px;
@@ -45,6 +46,7 @@ const CollectionPageBase = ({
   );
 
   const navigate = useNavigate();
+  const { token } = theme.useToken();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState<{
@@ -141,10 +143,10 @@ const CollectionPageBase = ({
     <>
       <PageHeader
         backgroundComponent={<HeaderImage imageUrl={getImageUrl(imageUrl)} />}
-        maskColor={'#6f9b9c'}
+        maskColor={token.colorPrimary}
         headerTextArray={[t(`${pageType}Collection.title`)]}
       />
-      <Container>
+      <Container $token={token}>
         <SelectWrapper>
           <StyledSelect
             size={'large'}
@@ -157,7 +159,7 @@ const CollectionPageBase = ({
         </SelectWrapper>
         <CardsSection
           title={t(`${pageType}Collection.title`)}
-          darkMode={true}
+          type={'primary'}
           imageContentSections={bindEventImageContents}
           useStaticDataApi={true}
         />

diff --git a/src/components/common/CardsSection.tsx b/src/components/common/CardsSection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Button, Flex } from 'antd';
+import { Card, Button, Flex, theme, GlobalToken } from 'antd';
 import { Link } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
@@ -10,16 +10,18 @@ import getImageUrl from '@/utils/getImageUrl.ts';
 import { fadeIn } from '@/styles/animation.ts';
 import { STATIC_DATA_API } from '@/constants';
 
-const Section = styled.section<{ $darkMode: boolean }>`
-  background-color: #ecf0f1;
-  padding: 50px 20px;
+const Section = styled.section<{
+  $type: 'default' | 'dark' | 'primary';
+  $token: GlobalToken;
+}>`
+  background-color: ${(props) =>
+    props.$type === 'dark'
+      ? props.$token.colorPrimaryBg
+      : props.$type === 'primary'
+        ? props.$token.colorPrimary
+        : props.$token.colorBgBase};
 
-  ${(props) =>
-    props.$darkMode &&
-    `
-    background-color: #6f9b9c;
-    color: #fff;
-  `};
+  padding: 50px 20px;
 `;
 
 const CardContainer = styled.div`
@@ -132,7 +134,7 @@ const StyledButton = styled(Button)`
 
 interface CardsSectionProps {
   title: string;
-  darkMode?: boolean;
+  type?: 'default' | 'dark' | 'primary';
   imageContentSections: IImageContent[];
   useStaticDataApi?: boolean;
 }
@@ -147,14 +149,15 @@ interface CardsSectionProps {
  */
 const CardsSection: React.FC<CardsSectionProps> = ({
   title,
-  darkMode = false,
+  type = 'default',
   imageContentSections,
   useStaticDataApi = false,
-}: CardsSectionProps) => {
+}) => {
   const { animate, ref } = useAnimateOnScroll();
+  const { token } = theme.useToken();
 
   return (
-    <Section ref={ref} $darkMode={darkMode}>
+    <Section ref={ref} $type={type} $token={token}>
       <SectionTitle $fadeIn={animate}>{title}</SectionTitle>
       <CardContainer>
         {imageContentSections.map((section, index) => (
@@ -190,7 +193,10 @@ const CardsSection: React.FC<CardsSectionProps> = ({
                 section.buttons.map((button, idx) =>
                   button.link ? (
                     <Link key={idx} to={button.link}>
-                      <Button type={button.type || 'primary'} ghost={darkMode}>
+                      <Button
+                        type={button.type || 'primary'}
+                        ghost={type === 'dark'}
+                      >
                         {button.text}
                       </Button>
                     </Link>
@@ -201,7 +207,7 @@ const CardsSection: React.FC<CardsSectionProps> = ({
                       ghost={
                         button.type !== 'link' &&
                         button.type !== 'text' &&
-                        darkMode
+                        type === 'dark'
                       }
                       href={button.href}
                       target={button.href ? '_blank' : ''}

diff --git a/src/components/common/CarouselSection.tsx b/src/components/common/CarouselSection.tsx
@@ -10,7 +10,7 @@ import { fadeIn } from '@/styles/animation.ts';
 import { STATIC_DATA_API } from '@/constants';
 
 const Section = styled.section`
-  background-color: #b1dde6;
+  background-color: #ecf0f1;
   padding: 50px 20px;
 
   @media (max-width: 400px) {
@@ -37,7 +37,6 @@ const SectionSubtitle = styled.h3<{ $fadeIn: boolean }>`
   font-weight: bold;
   margin-top: 20px;
   opacity: 0;
-  color: #6f9b9c;
   border-radius: 10px;
 
   ${(props) =>

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -98,7 +98,7 @@ const HomePage = () => {
       />
       <CardsSection
         title={t('home.feature.title')}
-        darkMode={true}
+        type={'dark'}
         imageContentSections={t('home.feature.card', { returnObjects: true })}
       />
       <CarouselSection