From a20fe8fe43133d9c622c87fc8a0e4b9f9ae2976a Mon Sep 17 00:00:00 2001 From: myf <> Date: Wed, 20 Apr 2022 13:39:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/views/Home/components/CourseCom.tsx | 12 ++--- src/views/Home/components/FlexItemCom.tsx | 8 ++- src/views/Home/components/IntroduceCom.tsx | 4 +- .../recommend/components/BuyNftModal.tsx | 27 +++------- .../{ConnectedComponent.tsx => Connected.tsx} | 28 +++------- src/views/recommend/components/FlexCom.tsx | 21 ++++---- src/views/recommend/components/HeaderMain.tsx | 13 +++-- ...RegimentalComponent.tsx => Regimental.tsx} | 54 +++---------------- src/views/recommend/components/TextFlex.tsx | 10 +++- .../recommend/components/UnunitedCom.tsx | 11 ++-- src/views/recommend/index.tsx | 6 +-- 12 files changed, 70 insertions(+), 126 deletions(-) rename src/views/recommend/components/{ConnectedComponent.tsx => Connected.tsx} (73%) rename src/views/recommend/components/{RegimentalComponent.tsx => Regimental.tsx} (67%) diff --git a/src/App.tsx b/src/App.tsx index f0114a3..842648b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,7 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder')) const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity')) const Referral = lazy(() => import('./views/Referral')) const Nft = lazy(() => import('./views/Nft')) -const Recommend = lazy(() => import('./views/recommend')) +const Recommend = lazy(() => import('./views/Recommend')) // This config is required for number formatting BigNumber.config({ diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx index a9c17d3..c01f851 100644 --- a/src/views/Home/components/CourseCom.tsx +++ b/src/views/Home/components/CourseCom.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { Flex, Heading, Text, Box } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' @@ -7,7 +7,6 @@ const FristPage = styled.div` background-image: url('/images/home/three.svg'); background-size: 100%; background-repeat: no-repeat; - padding: 8rem 0 0.8rem 0; ` const StyledPage = styled(Box)` @@ -43,7 +42,7 @@ const SortDiv = styled.div` ${({ theme }) => theme.mediaQueries.xs} { height: 330px; - & > .bXcYNu { + & > .card-content { left: 20px; width: 300px; } @@ -52,14 +51,14 @@ const SortDiv = styled.div` ${({ theme }) => theme.mediaQueries.lg} { height: 190px; :nth-of-type(odd) { - & > .bXcYNu { + & > .card-content { width: 372px; left: 60px; } } :nth-of-type(even) { - & > .bXcYNu { + & > .card-content { width: 372px; left: -420px; } @@ -175,8 +174,7 @@ const CourseCom: React.FC = () => { style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }} > {index + 1} - {/* style={{ left: index % 2 ? '-420px' : '60px' }} */} - + {item.title} {item.list.map((childItem) => { return ( diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx index 9b3ae72..34126a3 100644 --- a/src/views/Home/components/FlexItemCom.tsx +++ b/src/views/Home/components/FlexItemCom.tsx @@ -2,6 +2,11 @@ import React from 'react' import styled from 'styled-components' import { Text } from '@pancakeswap/uikit' +interface FlexProp { + name: string + value: string +} + const ScoreItem = styled.div` width: 100%; ` @@ -16,7 +21,7 @@ const ItemSubText = styled(Text)` font-size: 20px; ` -export default function FlexItemCom({ name, value }) { +const FlexItemCom: React.FC = ({ name, value }) => { return ( {value} @@ -24,3 +29,4 @@ export default function FlexItemCom({ name, value }) { ) } +export default FlexItemCom diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx index 2f57bbe..61dd480 100644 --- a/src/views/Home/components/IntroduceCom.tsx +++ b/src/views/Home/components/IntroduceCom.tsx @@ -1,11 +1,10 @@ import React from 'react' import styled from 'styled-components' -import { Flex, Heading, Text, BaseLayout, Box, Button, Image } from '@pancakeswap/uikit' +import { Heading, Text, Box, Image } from '@pancakeswap/uikit' import { useTranslation } from 'contexts/Localization' const FristPage = styled.div` background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%); - padding: 8rem 0 0.8rem 0; ` const StyledPage = styled(Box)` @@ -30,7 +29,6 @@ const BoxMain = styled(Box)` box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); opacity: 1; border-radius: 20px; - /* padding: 94px 92px 37px 92px; */ position: relative; ${({ theme }) => theme.mediaQueries.xs} { padding: 94px 30px 37px 30px; diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx index d84019c..a4515df 100644 --- a/src/views/recommend/components/BuyNftModal.tsx +++ b/src/views/recommend/components/BuyNftModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' import { Flex, Button, Modal, Image } from '@pancakeswap/uikit' @@ -7,13 +7,6 @@ import FlexCom from './FlexCom' const ModalDiv = styled(Modal)` width: 80%; - & > .jCXCIB { - border-bottom: none; - text-align: center; - & > .hMvvbb { - justify-content: center; - } - } ${({ theme }) => theme.mediaQueries.xs} { } @@ -22,23 +15,21 @@ const ModalDiv = styled(Modal)` const InfoDiv = styled.div` box-sizing: border-box; padding: 30px 26px; - /* width: calc(100% - 280px); */ - margin-left: 2rem; + margin-left: 60px; box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28); ${({ theme }) => theme.mediaQueries.xs} { padding: 20px 10px; - margin-left: 0rem; + margin-left: 0; } ${({ theme }) => theme.mediaQueries.lg} { padding: 30px 26px; - margin-left: 2rem; + margin-left: 60px; } ` const UpBtn = styled(Button)` width: 50%; margin: 20px auto 0px auto; border-radius: 50px; - /* background: ${({ theme }) => theme.colors.gradients.violet}; */ background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); border: none; ` @@ -56,16 +47,13 @@ const ImageDiv = styled(Image)` } ` -export default function BuyNftModal() { +const BuyNftModal: React.FC = () => { const { t } = useTranslation() - const onDismiss = () => { - console.log('aaa') - } + // const onDismiss = () => {} return ( - + - {/* */} ) } +export default BuyNftModal diff --git a/src/views/recommend/components/ConnectedComponent.tsx b/src/views/recommend/components/Connected.tsx similarity index 73% rename from src/views/recommend/components/ConnectedComponent.tsx rename to src/views/recommend/components/Connected.tsx index f26edc5..80c8dff 100644 --- a/src/views/recommend/components/ConnectedComponent.tsx +++ b/src/views/recommend/components/Connected.tsx @@ -1,23 +1,11 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' -import { Button, Heading, Image, useModal, Text } from '@pancakeswap/uikit' +import { Button, useModal, Text } from '@pancakeswap/uikit' import FlexCom from './FlexCom' import BuyNftModal from './BuyNftModal' import HeaderMian from './HeaderMain' -const HeadingDiv = styled(Heading)` - padding-top: 30px; - position: relative; -` - -const TipDiv = styled(Image)` - position: absolute; - cursor: pointer; - top: 24px; - left: 30px; -` - const ButtonDiv = styled(Button)` width: 100%; margin: 20px auto 0px auto; @@ -30,7 +18,6 @@ const UpBtn = styled(Button)` width: 100%; margin: 20px auto 0px auto; border-radius: 50px; - /* background: ${({ theme }) => theme.colors.gradients.violet}; */ background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); border: none; ` @@ -39,32 +26,30 @@ const FooterBtn = styled.div` width: 100%; box-sizing: border-box; padding-bottom: 20px; - /* padding: 0 0px 20px 0px; */ ` const MainDiv = styled.div` padding: 0 30px; ` const FooterDiv = styled.div` - margin: 0 auto 3rem auto; + margin: 0 auto 30px auto; ` const TextDiv = styled(Text)` margin-top: 10px; font-size: 14px; ` -export default function ConnectedCom() { + +const ConnectedCom: React.FC = () => { const { t } = useTranslation() const [onBuyModal] = useModal() return ( - + <> - {/* */} - {t('No income is received temporarily')} {t('Upgrade commander')} @@ -77,3 +62,4 @@ export default function ConnectedCom() { ) } +export default ConnectedCom diff --git a/src/views/recommend/components/FlexCom.tsx b/src/views/recommend/components/FlexCom.tsx index 676f3b6..e66d270 100644 --- a/src/views/recommend/components/FlexCom.tsx +++ b/src/views/recommend/components/FlexCom.tsx @@ -1,21 +1,21 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { Flex, Text } from '@pancakeswap/uikit' +interface FlexProps { + name: string + value: string + paddings?: string | '0px' + leftColor?: string | 'text' + RightColor?: string | 'textSubtle' +} + const FlexDiv = styled(Flex)` justify-content: space-between; align-items: center; margin-top: 20px; ` - -export default function FlexCom({ - name, - value, - paddings = '0', - leftColor = 'text', - RightColor = 'textSubtle', - color = '#1FC7D4', -}) { +const FlexCom: React.FC = ({ name, value, paddings, leftColor, RightColor }) => { return ( {name} @@ -23,3 +23,4 @@ export default function FlexCom({ ) } +export default FlexCom diff --git a/src/views/recommend/components/HeaderMain.tsx b/src/views/recommend/components/HeaderMain.tsx index 8d5bf4b..af0f007 100644 --- a/src/views/recommend/components/HeaderMain.tsx +++ b/src/views/recommend/components/HeaderMain.tsx @@ -1,6 +1,10 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' -import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit' +import { Image, Heading } from '@pancakeswap/uikit' + +interface HeaderProp { + title: string +} const HeadingDiv = styled(Heading)` padding-top: 30px; @@ -13,12 +17,11 @@ const TipDiv = styled(Image)` top: 24px; left: 0; ` -export default function HeaderMian({ title, tip = true }) { +const HeaderMian: React.FC = ({ title }) => { return ( - {tip ? : ''} - {/* */} {title} ) } +export default HeaderMian diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/Regimental.tsx similarity index 67% rename from src/views/recommend/components/RegimentalComponent.tsx rename to src/views/recommend/components/Regimental.tsx index cfde662..c619df8 100644 --- a/src/views/recommend/components/RegimentalComponent.tsx +++ b/src/views/recommend/components/Regimental.tsx @@ -1,51 +1,10 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' -import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit' +import { Text, Image, Button } from '@pancakeswap/uikit' import FlexCom from './FlexCom' import HeaderMian from './HeaderMain' -// const MainDiv = styled.div` -// width: 60%; -// ` -const HeaderFlex = styled(Flex)` - padding-left: 20px; -` - -const BuyButton = styled(Button)` - width: 150px; - border-radius: 50px; - margin-left: 20px; - /* background: ${({ theme }) => theme.colors.gradients.violet}; */ - background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); -` - -const ContentFlex = styled(Flex)` - flex-wrap: wrap; - justify-content: center; - width: 100%; -` - -const InfoDiv = styled.div` - width: calc(50% - 40px); - margin: 0 20px; - /* width: 400px; */ - min-width: 315px; - background: #ffffff; - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); - border-radius: 40px; - box-sizing: border-box; - margin-top: 50px; - padding: 0 30px 35px 30px; -` -// const ButtonDiv = styled(Button)` -// width: 100%; -// margin: 20px auto 0px auto; -// border-radius: 50px; -// border: 1px solid ${({ theme }) => theme.colors.primaryDark}; -// color: ${({ theme }) => theme.colors.primaryDark}; -// ` - const ButtonDiv = styled(Button)` width: 100%; margin: 20px auto 0px auto; @@ -58,7 +17,6 @@ const UpBtn = styled(Button)` width: 100%; margin: 20px auto 0px auto; border-radius: 50px; - /* background: ${({ theme }) => theme.colors.gradients.violet}; */ background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%); border: none; ` @@ -67,7 +25,6 @@ const FooterBtn = styled.div` width: 100%; box-sizing: border-box; padding-bottom: 20px; - /* padding: 0 0px 20px 0px; */ ` const ContengDiv = styled.div` @@ -94,7 +51,7 @@ const MainDiv = styled.div` padding: 0 30px; ` const FooterDiv = styled.div` - margin: 0 auto 3rem auto; + margin: 0 auto 30px auto; ` const TextDiv = styled(Text)` margin-top: 10px; @@ -106,12 +63,12 @@ const LogoImage = styled.div` justify-content: center; ` -export default function RegimentalCom() { +const RegimentalCom: React.FC = () => { const { t } = useTranslation() return ( - + @@ -148,3 +105,4 @@ export default function RegimentalCom() { ) } +export default RegimentalCom diff --git a/src/views/recommend/components/TextFlex.tsx b/src/views/recommend/components/TextFlex.tsx index 43e204a..85dada1 100644 --- a/src/views/recommend/components/TextFlex.tsx +++ b/src/views/recommend/components/TextFlex.tsx @@ -1,7 +1,12 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { Flex } from '@pancakeswap/uikit' +interface TextProps { + color: string + text?: string | '' +} + const MainDiv = styled(Flex)` box-sizing: border-box; padding: 14px 36px; @@ -12,6 +17,7 @@ const MainDiv = styled(Flex)` justify-content: center; ` -export default function TextFlex({ color, text = '' }) { +const TextFlex: React.FC = ({ color, text = '' }) => { return {text} } +export default TextFlex diff --git a/src/views/recommend/components/UnunitedCom.tsx b/src/views/recommend/components/UnunitedCom.tsx index f2654d0..f697364 100644 --- a/src/views/recommend/components/UnunitedCom.tsx +++ b/src/views/recommend/components/UnunitedCom.tsx @@ -1,21 +1,21 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { useTranslation } from 'contexts/Localization' import { Button, Heading, Text } from '@pancakeswap/uikit' const HeadingDiv = styled(Heading)` - padding-top: 5rem; + padding-top: 90px; ` const ButtonDiv = styled(Button)` width: 80%; - margin: 5rem auto 10px auto; + margin: 80px auto 10px auto; margin-left: 10%; border-radius: 50px; ` const FooterDiv = styled.div` width: 80%; - margin: 0 auto 3rem auto; + margin: 0 auto 30px auto; margin-left: 10%; ` const TextDiv = styled(Text)` @@ -23,7 +23,7 @@ const TextDiv = styled(Text)` font-size: 14px; ` -export default function UnunitedCom() { +const UnunitedCom: React.FC = () => { const { t } = useTranslation() return ( <> @@ -39,3 +39,4 @@ export default function UnunitedCom() { ) } +export default UnunitedCom diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx index cab26a9..7542356 100644 --- a/src/views/recommend/index.tsx +++ b/src/views/recommend/index.tsx @@ -1,10 +1,8 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit' - import UnunitedCom from './components/UnunitedCom' -import ConnectedCom from './components/ConnectedComponent' -import RegimentalCom from './components/RegimentalComponent' +import ConnectedCom from './components/Connected' +import RegimentalCom from './components/Regimental' const MainDiv = styled.div` min-height: calc(100vh - 64px);