From 5196690aa4a17081659f15cedc4533052eb00966 Mon Sep 17 00:00:00 2001 From: ShynRou Date: Mon, 12 Jul 2021 16:01:18 +0200 Subject: [PATCH 01/92] [BuySovPage] remove dropped content --- .../BuySovPage/components/Banner/index.tsx | 81 ---------------- .../components/Promotions/index.tsx | 59 ------------ .../components/Promotions/promotion.tsx | 92 ------------------- src/app/pages/BuySovPage/index.tsx | 36 +------- 4 files changed, 1 insertion(+), 267 deletions(-) delete mode 100644 src/app/pages/BuySovPage/components/Banner/index.tsx delete mode 100644 src/app/pages/BuySovPage/components/Promotions/index.tsx delete mode 100644 src/app/pages/BuySovPage/components/Promotions/promotion.tsx diff --git a/src/app/pages/BuySovPage/components/Banner/index.tsx b/src/app/pages/BuySovPage/components/Banner/index.tsx deleted file mode 100644 index 6d5094df4..000000000 --- a/src/app/pages/BuySovPage/components/Banner/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import styled from 'styled-components/macro'; -import logo from 'assets/sov/banner.svg'; -import { useTranslation } from 'react-i18next'; -import { translations } from '../../../../../locales/i18n'; - -interface Props { - onClick: () => void; -} - -export function Banner(props: Props) { - const { t } = useTranslation(); - return ( - <> - -

{t(translations.buySovPage.banner.title)}

-
- -
- - ); -} - -const Image = styled.div` - width: 451px; - height: 438px; - margin: 0 auto 106px; - background: transparent url(${logo}) center center no-repeat; - background-size: 451px 438px; - transition: all 0.3s; - &:hover { - transform: scale(1.1); - } - @media (max-width: 640px) { - width: 300px; - height: 300px; - max-width: 100%; - margin: 0 auto 30px; - background-size: 251px 438px; - } -`; - -const H1 = styled.h1` - display: block; - margin: 0 auto 70px; - text-align: center; - font-size: 56px; - font-weight: 900; - text-transform: none; - line-height: 47px; - @media (max-width: 640px) { - font-size: 35px; - line-height: 42px; - margin: 0 auto 30px; - } -`; - -const Button = styled.button` - max-width: 320px; - width: 100%; - height: 60px; - padding: 15px; - line-height: 1; - background: #17c3b2; - border: 1px solid #17c3b2; - border-radius: 8px; - color: #ffffff; - font-size: 24px; - font-weight: 900; - letter-spacing: 2px; - transition: opacity 0.3s; - margin-bottom: 310px; - &:hover { - opacity: 75%; - } - @media (max-width: 1200px) { - margin-bottom: 30px; - } -`; diff --git a/src/app/pages/BuySovPage/components/Promotions/index.tsx b/src/app/pages/BuySovPage/components/Promotions/index.tsx deleted file mode 100644 index ca5fdf705..000000000 --- a/src/app/pages/BuySovPage/components/Promotions/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import styled from 'styled-components/macro'; -// import imgPromotion1 from 'assets/sov/promotion-1.svg'; -// import imgPromotion2 from 'assets/sov/promotion-2.svg'; -import imgPromotion3 from 'assets/sov/promotion-3.svg'; -import imgPromotion4 from 'assets/sov/promotion-4.svg'; -import { Promotion } from './promotion'; -import { useTranslation } from 'react-i18next'; -import { translations } from '../../../../../locales/i18n'; - -export function Promotions() { - const { t } = useTranslation(); - return ( -
-

- {t(translations.buySovPage.promotions.title)} -

- - {/* {t(translations.buySovPage.promotions.p1.text)}} - cta={t(translations.buySovPage.promotions.p1.cta)} - href="https://sovryn.app/blog/sovryn-go-brrrrrr.html" - image={imgPromotion2} - /> - - {t(translations.buySovPage.promotions.p2.text)}} - cta={t(translations.buySovPage.promotions.p2.cta)} - href="https://twitter.com/SovrynBTC/status/1381112432945459201" - image={imgPromotion1} - /> */} - - {t(translations.buySovPage.promotions.p3.text)}} - cta={t(translations.buySovPage.promotions.p3.cta)} - href="/yield-farm" - image={imgPromotion3} - /> - - {t(translations.buySovPage.promotions.p4.text)}} - cta={t(translations.buySovPage.promotions.p4.cta)} - href="/yield-farm" - image={imgPromotion4} - /> -
- ); -} - -const H1 = styled.h1` - margin-bottom: 20px; - font-size: 36px; - font-weight: 700; - text-transform: none; -`; diff --git a/src/app/pages/BuySovPage/components/Promotions/promotion.tsx b/src/app/pages/BuySovPage/components/Promotions/promotion.tsx deleted file mode 100644 index e7de8bcd7..000000000 --- a/src/app/pages/BuySovPage/components/Promotions/promotion.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import styled from 'styled-components/macro'; -import { NavLink } from 'react-router-dom'; - -interface Props { - title: React.ReactNode; - content: React.ReactNode; - cta: React.ReactNode; - href: string; - image: string; - imageStyle?: React.StyleHTMLAttributes; -} - -export function Promotion(props: Props) { - return ( -
-
-

{props.title}

-
- {props.content} -
-
- {props.href.startsWith('http') ? ( - - {props.cta} - - ) : ( - {props.cta} - )} -
-
- Item -
- ); -} - -const Article = styled.article` - max-width: 1200px; - margin: 0 auto 70px; - font-size: 16px; - font-weight: 400; - h1 { - text-transform: none; - font-size: 26px; - line-height: 32px; - font-weight: 700; - margin-bottom: 32px; - } - - @media screen and (min-width: 1200px) { - .img { - margin-left: 250px; - } - } - - @media screen and (max-width: 1199px) { - .img { - margin: 0 auto; - } - } - @media (max-width: 640px) { - margin: 0 auto 30px; - } - - a { - text-decoration: underline; - color: #fec004; - font-weight: 400; - &:hover { - color: #fec004; - text-decoration: none; - } - } - - .content { - margin-bottom: 30px; - } -`; - -const Img = styled.img` - width: 450px; - height: 303px; - @media (max-width: 640px) { - max-width: 100%; - margin-bottom: 20px; - } -`; diff --git a/src/app/pages/BuySovPage/index.tsx b/src/app/pages/BuySovPage/index.tsx index 3a5a70a37..3b416a6e6 100644 --- a/src/app/pages/BuySovPage/index.tsx +++ b/src/app/pages/BuySovPage/index.tsx @@ -10,7 +10,6 @@ import styled from 'styled-components/macro'; import { Header } from 'app/components/Header'; import { Footer } from 'app/components/Footer'; -import PageHeader from '../../components/PageHeader'; import { ArrowStep } from './components/ArrowStep'; import { EngageWalletStep } from './components/EngageWallet'; import { TopUpWallet } from './components/TopUpWallet'; @@ -18,33 +17,12 @@ import { BuyForm } from './components/BuyForm'; import { Welcome } from './components/Welcome'; import { InfoBar } from './components/InfoBar'; -import { Banner } from './components/Banner'; -import { Promotions } from './components/Promotions'; import { Features } from './components/Features'; import { useTranslation } from 'react-i18next'; import { translations } from '../../../locales/i18n'; export function BuySovPage() { const { t } = useTranslation(); - const ref1 = useRef(null); - const ref = useRef(null); - const scrollTo = useCallback(() => { - if (ref.current) { - window.scrollTo({ - top: ref.current.offsetTop, - behavior: 'smooth', - }); - } - }, [ref]); - - const bannerClick = useCallback(() => { - if (ref1.current) { - window.scrollTo({ - top: ref1.current.offsetTop, - behavior: 'smooth', - }); - } - }, [ref1]); return ( <> @@ -56,12 +34,7 @@ export function BuySovPage() { />
-
- - -
- - +
@@ -86,13 +59,6 @@ export function BuySovPage() {
-
- {t(translations.buySovPage.earn)} -
- - - -