stepper

src/views/Home/components/CourseCom.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, Box } from '@pancakeswap/uikit'
+import { Flex, Heading, Text, Box, Stepper, Step, Card } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background-image: url('/images/home/three.svg');
   background-size: 100%;
   background-repeat: no-repeat;
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
@@ -36,80 +37,9 @@ const FlexMain = styled(Flex)`
     justify-content: center;
   }
 `
-const SortDiv = styled.div`
-  height: 190px;
-  position: relative;
 
-  ${({ theme }) => theme.mediaQueries.xs} {
-    height: 330px;
-    & > .card-content {
-      left: 20px;
-      width: 300px;
-    }
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    height: 190px;
-    :nth-of-type(odd) {
-      & > .card-content {
-        width: 372px;
-        left: 60px;
-      }
-    }
-
-    :nth-of-type(even) {
-      & > .card-content {
-        width: 372px;
-        left: -420px;
-      }
-    }
-  }
-`
-
-const SortNum = styled.div`
-  position: absolute;
-  top: 0;
-  left: -43px;
-  width: 82px;
-  height: 82px;
-  background: #1fc7d4;
-  border-radius: 50%;
-  font-size: 46px;
-  color: #faf9fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    font-size: 26px;
-    top: 0;
-    left: -23px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    position: absolute;
-    width: 82px;
-    height: 82px;
-    font-size: 46px;
-    top: 0;
-    left: -43px;
-  }
-`
-
-const CardDiv = styled.div`
-  width: 372px;
-  box-sizing: border-box;
-  padding: 28px 40px 16px 26px;
-  border: 1px solid #e7e3eb;
-  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 25px;
-  position: absolute;
-  top: -25%;
-  background: #fff;
+const CardDiv = styled(Card)`
+  padding: 20px;
 `
 
 const CourseCom: React.FC = () => {
@@ -121,7 +51,7 @@ const CourseCom: React.FC = () => {
       id: 1,
       list: [
         { text: t('The project concept was born in May 2021') },
-        { text: t('Set up HighClty team in June 2021') },
+        { text: t('Set up HighCity team in June 2021') },
         { text: t('May 2021 -- January 2022 Team run-in') },
       ],
     },
@@ -163,18 +93,14 @@ const CourseCom: React.FC = () => {
 
   return (
     <>
-      <FristPage>
+      <FirstPage>
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <FlexMain>
             <div>
-              {list.map((item, index) => {
-                return (
-                  <SortDiv
-                    key={item.id}
-                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
-                  >
-                    <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
-                    <CardDiv className="card-content">
+              <Stepper>
+                {list.map((item, index) => (
+                  <Step key={item.id} index={index} status={index % 2 ? 'past' : 'current'}>
+                    <CardDiv>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -184,13 +110,13 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </SortDiv>
-                )
-              })}
+                  </Step>
+                ))}
+              </Stepper>
             </div>
           </FlexMain>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Home/components/FristCom.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'contexts/Localization'
 
 import FlexItemCom from './FlexItemCom'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background-image: url('/images/home/bg.svg');
   background-size: cover;
   background-repeat: no-repeat;
@@ -133,7 +133,7 @@ const FristCom: React.FC = () => {
   ])
   return (
     <>
-      <FristPage>
+      <FirstPage>
         <StyledPage px={['16px', '24px']} mx="auto">
           <FlexDiv>
             <ImageDiv src="/images/home/logo.svg" alt="" width={315} height={315} />
@@ -160,7 +160,7 @@ const FristCom: React.FC = () => {
             })}
           </ScoreDiv>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Home/components/IntroduceCom.tsx

@@ -3,8 +3,9 @@ import styled from 'styled-components'
 import { Heading, Text, Box, Image } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
-const FristPage = styled.div`
+const FirstPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
@@ -94,7 +95,7 @@ const IntroduceCom: React.FC = () => {
 
   return (
     <>
-      <FristPage>
+      <FirstPage>
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <BoxMain>
             <MainDiv>
@@ -102,11 +103,11 @@ const IntroduceCom: React.FC = () => {
                 <Image src="/images/home/intor.svg" alt="" width={75} height={75} />
               </div>
             </MainDiv>
-            <HeadingDiv textAlign="center">HlighCitySwap</HeadingDiv>
-            <TextCom>{t('HlighCitySwapInfo')}</TextCom>
+            <HeadingDiv textAlign="center">HighCitySwap</HeadingDiv>
+            <TextCom>{t('HighCitySwapInfo')}</TextCom>
           </BoxMain>
         </StyledPage>
-      </FristPage>
+      </FirstPage>
     </>
   )
 }

src/views/Recommend/components/Connected.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'contexts/Localization'
 import { Button, useModal, Text } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
-import HeaderMian from './HeaderMain'
+import HeaderMain from './HeaderMain'
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -44,7 +44,7 @@ const ConnectedCom: React.FC = () => {
 
   return (
     <MainDiv>
-      <HeaderMian title={t('recommend')} />
+      <HeaderMain title={t('recommend')} />
       <>
         <FlexCom name={t('The lower the number of')} value="100000(人)" />
         <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />

src/views/Recommend/components/HeaderMain.tsx

@@ -17,11 +17,11 @@ const TipDiv = styled(Image)`
   top: 24px;
   left: 0;
 `
-const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
+const HeaderMain: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
       {title}
     </HeadingDiv>
   )
 }
-export default HeaderMian
+export default HeaderMain

src/views/Recommend/components/Regimental.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
 import { Text, Image, Button } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
-import HeaderMian from './HeaderMain'
+import HeaderMain from './HeaderMain'
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -27,7 +27,7 @@ const FooterBtn = styled.div`
   padding-bottom: 20px;
 `
 
-const ContengDiv = styled.div`
+const ContentDiv = styled.div`
   width: 60%;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
@@ -66,9 +66,9 @@ const LogoImage = styled.div`
 const RegimentalCom: React.FC = () => {
   const { t } = useTranslation()
   return (
-    <ContengDiv>
+    <ContentDiv>
       <MainDiv>
-        <HeaderMian title={t('Regimental recommendation')} />
+        <HeaderMain title={t('Regimental recommendation')} />
         <LogoImage>
           <Image src="/images/recommend/logo.svg" width={249} height={249} />
         </LogoImage>
@@ -102,7 +102,7 @@ const RegimentalCom: React.FC = () => {
           <TextDiv color="textSubtle">{t('commission fee')}</TextDiv>
         </FooterDiv>
       </MainDiv>
-    </ContengDiv>
+    </ContentDiv>
   )
 }
 export default RegimentalCom

src/views/Recommend/index.tsx

@@ -14,7 +14,7 @@ const MainDiv = styled.div`
   justify-content: center;
 `
 
-const ContengDiv = styled.div`
+const ContentDiv = styled.div`
   width: 60%;
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
@@ -34,13 +34,13 @@ const ContengDiv = styled.div`
 
 const Nft: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
-  const [type, typeState] = useState(false)
+  const [type, setType] = useState(false)
   //  是否连接钱包
-  const [status, statusState] = useState(true)
+  const [status, setStatus] = useState(true)
 
   return (
     <MainDiv>
-      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
+      {type ? <RegimentalCom /> : <ContentDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContentDiv>}
     </MainDiv>
   )
 }