From 7fa782cbf59e9f0add347138b830cc372ac07b65 Mon Sep 17 00:00:00 2001
From: myf <>
Date: Wed, 20 Apr 2022 15:09:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home/components/CourseCom.tsx       | 96 +++----------------
 src/views/Home/components/IntroduceCom.tsx    |  1 +
 .../recommend/components/BuyNftModal.tsx      |  3 -
 src/views/recommend/components/FlexCom.tsx    | 16 +++-
 src/views/recommend/components/HeaderMain.tsx |  6 --
 src/views/recommend/components/TextFlex.tsx   |  2 +-
 src/views/recommend/index.tsx                 |  4 +-
 7 files changed, 26 insertions(+), 102 deletions(-)

diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx
index c01f851..2cd2109 100644
--- a/src/views/Home/components/CourseCom.tsx
+++ b/src/views/Home/components/CourseCom.tsx
@@ -1,6 +1,6 @@
 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, CardBody } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
@@ -36,80 +36,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 = () => {
@@ -167,14 +96,11 @@ const CourseCom: React.FC = () => {
         <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) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <Step key={index} index={index} status={index % 2 ? 'past' : 'current'}>
+                    <CardDiv>
                       <Heading>{item.title}</Heading>
                       {item.list.map((childItem) => {
                         return (
@@ -184,9 +110,9 @@ const CourseCom: React.FC = () => {
                         )
                       })}
                     </CardDiv>
-                  </SortDiv>
-                )
-              })}
+                  </Step>
+                ))}
+              </Stepper>
             </div>
           </FlexMain>
         </StyledPage>
diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx
index 61dd480..c05626a 100644
--- a/src/views/Home/components/IntroduceCom.tsx
+++ b/src/views/Home/components/IntroduceCom.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
   background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
+  padding: 100px 0 50px 0;
 `
 
 const StyledPage = styled(Box)`
diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx
index a4515df..5acf3c2 100644
--- a/src/views/recommend/components/BuyNftModal.tsx
+++ b/src/views/recommend/components/BuyNftModal.tsx
@@ -7,9 +7,6 @@ import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
   width: 80%;
-
-  ${({ theme }) => theme.mediaQueries.xs} {
-  }
 `
 
 const InfoDiv = styled.div`
diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx
index e66d270..3ac05e5 100644
--- a/src/views/recommend/components/FlexCom.tsx
+++ b/src/views/recommend/components/FlexCom.tsx
@@ -5,9 +5,9 @@ import { Flex, Text } from '@pancakeswap/uikit'
 interface FlexProps {
   name: string
   value: string
-  paddings?: string | '0px'
-  leftColor?: string | 'text'
-  RightColor?: string | 'textSubtle'
+  paddings?: string
+  leftColor?: string
+  rightColor?: string
 }
 
 const FlexDiv = styled(Flex)`
@@ -15,11 +15,17 @@ const FlexDiv = styled(Flex)`
   align-items: center;
   margin-top: 20px;
 `
-const FlexCom: React.FC<FlexProps> = ({ name, value, paddings, leftColor, RightColor }) => {
+const FlexCom: React.FC<FlexProps> = ({
+  name,
+  value,
+  paddings = '0px',
+  leftColor = 'text',
+  rightColor = 'textSubtle',
+}) => {
   return (
     <FlexDiv style={{ padding: paddings }}>
       <Text color={leftColor}>{name}</Text>
-      <Text color={RightColor}>{value}</Text>
+      <Text color={rightColor}>{value}</Text>
     </FlexDiv>
   )
 }
diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx
index af0f007..f5f8a4e 100644
--- a/src/views/recommend/components/HeaderMain.tsx
+++ b/src/views/recommend/components/HeaderMain.tsx
@@ -11,12 +11,6 @@ const HeadingDiv = styled(Heading)`
   position: relative;
 `
 
-const TipDiv = styled(Image)`
-  position: absolute;
-  cursor: pointer;
-  top: 24px;
-  left: 0;
-`
 const HeaderMian: React.FC<HeaderProp> = ({ title }) => {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx
index 85dada1..fd732a1 100644
--- a/src/views/recommend/components/TextFlex.tsx
+++ b/src/views/recommend/components/TextFlex.tsx
@@ -4,7 +4,7 @@ import { Flex } from '@pancakeswap/uikit'
 
 interface TextProps {
   color: string
-  text?: string | ''
+  text?: string
 }
 
 const MainDiv = styled(Flex)`
diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx
index 7542356..7d4c6f9 100644
--- a/src/views/recommend/index.tsx
+++ b/src/views/recommend/index.tsx
@@ -32,7 +32,7 @@ const ContengDiv = styled.div`
   }
 `
 
-const Nft: React.FC = () => {
+const Recommend: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
   const [type, typeState] = useState(false)
   //  是否连接钱包
@@ -44,4 +44,4 @@ const Nft: React.FC = () => {
     </MainDiv>
   )
 }
-export default Nft
+export default Recommend