From 3e060d0e8192174e87a313b96f4f13ed030dce8a Mon Sep 17 00:00:00 2001
From: Chef Hutch <79279477+ChefHutch@users.noreply.github.com>
Date: Tue, 1 Jun 2021 09:12:37 +0100
Subject: [PATCH] (styles) Add some initial new lottery styles (#1385)

* style(page-section): Improve readibility of section styles

* style(lottery-v2): Sneaking in some page styles

* style(lottery-v2): PageSectionStyles tidy

* style(page-section): Further simplification and improvement of styles
---
 src/components/PageSection/CurvedDivider.tsx  | 12 ++--
 src/components/PageSection/index.tsx          | 29 ++++++----
 src/components/PageSection/svg/CurvedSvg.tsx  |  1 +
 .../components/TicketsNumberButton.tsx        | 22 +++++++
 src/views/LotteryV2/pageSectionStyles.tsx     |  4 ++
 .../LotteryV2/svgs/TicketPurchaseCard.tsx     | 57 +++++++++++++++++++
 src/views/LotteryV2/svgs/index.tsx            |  3 +
 src/views/TradingCompetition/index.tsx        | 26 +++++++--
 8 files changed, 130 insertions(+), 24 deletions(-)
 create mode 100644 src/views/LotteryV2/components/TicketsNumberButton.tsx
 create mode 100644 src/views/LotteryV2/pageSectionStyles.tsx
 create mode 100644 src/views/LotteryV2/svgs/TicketPurchaseCard.tsx
 create mode 100644 src/views/LotteryV2/svgs/index.tsx

diff --git a/src/components/PageSection/CurvedDivider.tsx b/src/components/PageSection/CurvedDivider.tsx
index 7aa103a063d25..e01e936d0da96 100644
--- a/src/components/PageSection/CurvedDivider.tsx
+++ b/src/components/PageSection/CurvedDivider.tsx
@@ -5,25 +5,21 @@ import { CurvedSvgTop, CurvedSvgBottom } from './svg/CurvedSvg'
 interface CurvedDividerProps extends WrapperProps {
   svgFill?: string
   dividerComponent?: React.ReactNode
+  curvePosition?: 'top' | 'bottom'
 }
 interface WrapperProps {
   index: number
-  curvePosition?: 'top' | 'bottom'
 }
 
 const Wrapper = styled.div<WrapperProps>`
+  z-index: ${({ index }) => index};
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  z-index: ${({ index }) => index};
-  margin: ${({ curvePosition }) => (curvePosition === 'top' ? '-32px' : '32px')} 0 0;
-  ${({ theme }) => theme.mediaQueries.sm} {
-    margin: ${({ curvePosition }) => (curvePosition === 'top' ? '-40px' : '40px')} 0 0;
-  }
 `
 
-const ComponentWrapper = styled.div<{ index: number }>`
+const ComponentWrapper = styled.div<WrapperProps>`
   z-index: ${({ index }) => index + 1};
   position: absolute;
   top: 50%;
@@ -33,7 +29,7 @@ const ComponentWrapper = styled.div<{ index: number }>`
 
 const CurvedDivider: React.FC<CurvedDividerProps> = ({ svgFill, index, curvePosition, dividerComponent }) => {
   return (
-    <Wrapper index={index} curvePosition={curvePosition}>
+    <Wrapper index={index}>
       {dividerComponent && <ComponentWrapper index={index}>{dividerComponent}</ComponentWrapper>}
       {curvePosition === 'top' ? (
         <CurvedSvgTop svgFill={svgFill} width="100%" />
diff --git a/src/components/PageSection/index.tsx b/src/components/PageSection/index.tsx
index 816311245e4a0..62a3fcdb21273 100644
--- a/src/components/PageSection/index.tsx
+++ b/src/components/PageSection/index.tsx
@@ -14,7 +14,6 @@ interface PageSectionProps extends BackgroundColorProps {
 interface BackgroundColorProps extends FlexProps {
   index: number
   background?: string
-  hasZeroMargin?: boolean
 }
 
 const BackgroundColor = styled(Flex)<BackgroundColorProps>`
@@ -22,14 +21,6 @@ const BackgroundColor = styled(Flex)<BackgroundColorProps>`
   flex-direction: column;
   z-index: ${({ index }) => index - 1};
   background: ${({ background, theme }) => background || theme.colors.background};
-  padding: 48px 0;
-  margin: ${({ hasZeroMargin }) => (hasZeroMargin ? '0' : '-32px')} 0;
-  ${({ theme }) => theme.mediaQueries.sm} {
-    margin: ${({ hasZeroMargin }) => (hasZeroMargin ? '0' : '-52px')} 0;
-  }
-  @media screen and (min-width: 1920px) {
-    margin: ${({ hasZeroMargin }) => (hasZeroMargin ? '0' : '-72px')} 0;
-  }
 `
 
 const ChildrenWrapper = styled(Container)`
@@ -58,7 +49,23 @@ const PageSection: React.FC<PageSectionProps> = ({
   hasCurvedDivider = true,
   ...props
 }) => {
-  const hasZeroMargin = !hasCurvedDivider || curvePosition === 'top'
+  const getPadding = () => {
+    // No curved divider
+    if (!hasCurvedDivider) {
+      return '48px 0'
+    }
+    // Bottom curved divider
+    // Less bottom padding, as the divider is present there
+    if (curvePosition === 'bottom') {
+      return '48px 0 14px'
+    }
+    // Top curved divider
+    // Less top padding, as the divider is present there
+    if (curvePosition === 'top') {
+      return '14px 0 48px'
+    }
+    return '48px 0'
+  }
 
   return (
     <>
@@ -70,7 +77,7 @@ const PageSection: React.FC<PageSectionProps> = ({
           dividerComponent={dividerComponent}
         />
       )}
-      <BackgroundColor background={background} index={index} hasZeroMargin={hasZeroMargin} {...props}>
+      <BackgroundColor background={background} index={index} p={getPadding()} {...props}>
         <ChildrenWrapper>{children}</ChildrenWrapper>
       </BackgroundColor>
       {hasCurvedDivider && curvePosition === 'bottom' && (
diff --git a/src/components/PageSection/svg/CurvedSvg.tsx b/src/components/PageSection/svg/CurvedSvg.tsx
index 3af75b3ad3116..c101a4e784769 100644
--- a/src/components/PageSection/svg/CurvedSvg.tsx
+++ b/src/components/PageSection/svg/CurvedSvg.tsx
@@ -52,5 +52,6 @@ export const CurvedSvgTop = styled(CurvedSvg)<StyledSvgProps>`
 
 export const CurvedSvgBottom = styled(CurvedSvg)<StyledSvgProps>`
   ${sharedStyles}
+  margin-top: -2px;
   fill: ${({ svgFill, theme }) => svgFill || theme.colors.background};
 `
diff --git a/src/views/LotteryV2/components/TicketsNumberButton.tsx b/src/views/LotteryV2/components/TicketsNumberButton.tsx
new file mode 100644
index 0000000000000..c363cd42cd56b
--- /dev/null
+++ b/src/views/LotteryV2/components/TicketsNumberButton.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Button } from '@pancakeswap/uikit'
+
+interface TicketsNumberButtonProps {
+  onClick: () => void
+  disabled?: boolean
+}
+
+const StyledButton = styled(Button)`
+  flex-grow: 1;
+`
+
+const TicketsNumberButton: React.FC<TicketsNumberButtonProps> = ({ children, onClick, disabled = false }) => {
+  return (
+    <StyledButton disabled={disabled} scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={onClick}>
+      {children}
+    </StyledButton>
+  )
+}
+
+export default TicketsNumberButton
diff --git a/src/views/LotteryV2/pageSectionStyles.tsx b/src/views/LotteryV2/pageSectionStyles.tsx
new file mode 100644
index 0000000000000..d3fc2ecd755ce
--- /dev/null
+++ b/src/views/LotteryV2/pageSectionStyles.tsx
@@ -0,0 +1,4 @@
+export const TITLE_BG = 'linear-gradient(180deg, #7645D9 0%, #452A7A 100%)'
+export const GET_TICKETS_BG = 'linear-gradient(180deg, #7645D9 0%, #5121B1 100%)'
+export const FINISHED_ROUNDS_BG = 'linear-gradient(180deg, #CBD7EF 0%, #9A9FD0 100%)'
+export const FINISHED_ROUNDS_BG_DARK = 'linear-gradient(180deg, #434575 0%, #66578D 100%)'
diff --git a/src/views/LotteryV2/svgs/TicketPurchaseCard.tsx b/src/views/LotteryV2/svgs/TicketPurchaseCard.tsx
new file mode 100644
index 0000000000000..55077ee337b61
--- /dev/null
+++ b/src/views/LotteryV2/svgs/TicketPurchaseCard.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Svg, SvgProps } from '@pancakeswap/uikit'
+
+const TicketPurchaseCard: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 296 121" {...props}>
+      <g filter="url(#filter0_dd_ticket_purchase_card)">
+        <path d="M4 16C4 7.16344 11.1634 0 20 0H66V113H20C11.1634 113 4 105.837 4 97V16Z" fill="#FFB237" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M69.4931 2.94568C68.9511 1.38001 67.6569 0 66 0V10H90V0C88.3431 0 87.0489 1.38001 86.5069 2.94568C85.2868 6.4696 81.9389 9 78 9C74.0611 9 70.7132 6.4696 69.4931 2.94568Z"
+          fill="#FFB237"
+        />
+        <rect x="66" y="10" width="10" height="93" fill="#FFB237" />
+        <path d="M78 103V10" stroke="#FFB237" strokeWidth="4" strokeDasharray="4 4" />
+        <rect x="80" y="10" width="10" height="93" fill="#FFB237" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M69.4931 110.054C68.9511 111.62 67.6569 113 66 113V103H90V113C88.3431 113 87.0489 111.62 86.5069 110.054C85.2868 106.53 81.9389 104 78 104C74.0611 104 70.7132 106.53 69.4931 110.054Z"
+          fill="#FFB237"
+        />
+        <path d="M90 0H276C284.837 0 292 7.16344 292 16V97C292 105.837 284.837 113 276 113H90V0Z" fill="#FFB237" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_dd_ticket_purchase_card"
+          x="0"
+          y="0"
+          width="296"
+          height="121"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dx="2" dy="2" />
+          <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.686275 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_ticket_purchase_card" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend
+            mode="normal"
+            in2="effect1_dropShadow_ticket_purchase_card"
+            result="effect2_dropShadow_ticket_purchase_card"
+          />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_ticket_purchase_card" result="shape" />
+        </filter>
+      </defs>
+    </Svg>
+  )
+}
+
+export default TicketPurchaseCard
diff --git a/src/views/LotteryV2/svgs/index.tsx b/src/views/LotteryV2/svgs/index.tsx
new file mode 100644
index 0000000000000..f59885f90fe22
--- /dev/null
+++ b/src/views/LotteryV2/svgs/index.tsx
@@ -0,0 +1,3 @@
+// TODO: Remove with additional imports
+// eslint-disable-next-line import/prefer-default-export
+export { default as TicketPurchaseCard } from './TicketPurchaseCard'
diff --git a/src/views/TradingCompetition/index.tsx b/src/views/TradingCompetition/index.tsx
index ab3787873186e..cf672dba30f28 100644
--- a/src/views/TradingCompetition/index.tsx
+++ b/src/views/TradingCompetition/index.tsx
@@ -57,6 +57,20 @@ const BannerFlex = styled(Flex)`
   }
 `
 
+const BattleBannerSection = styled(PageSection)`
+  margin-top: -32px;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: -64px;
+  }
+`
+
+const YourScoreSection = styled(PageSection)`
+  margin-top: -32px;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-top: -64px;
+  }
+`
+
 const PrizesSection = styled(PageSection)`
   margin: -32px 0;
   ${({ theme }) => theme.mediaQueries.lg} {
@@ -215,7 +229,7 @@ const TradingCompetition = () => {
 
   return (
     <CompetitionPage>
-      <PageSection
+      <BattleBannerSection
         background={DARKBG}
         svgFill={DARKFILL}
         index={5}
@@ -242,8 +256,8 @@ const TradingCompetition = () => {
           <Countdown currentPhase={currentPhase} hasCompetitionEnded={hasCompetitionEnded} />
           <BattleBanner />
         </BannerFlex>
-      </PageSection>
-      <PageSection
+      </BattleBannerSection>
+      <YourScoreSection
         background={isDark ? MIDBLUEBG_DARK : MIDBLUEBG}
         svgFill={isDark ? MIDBLUEFILL_DARK : MIDBLUEFILL}
         index={4}
@@ -273,7 +287,7 @@ const TradingCompetition = () => {
             />
           )}
         </Box>
-      </PageSection>
+      </YourScoreSection>
       <PageSection
         index={3}
         dividerComponent={
@@ -310,7 +324,9 @@ const TradingCompetition = () => {
           </RibbonWithImage>
         }
       >
-        <Rules />
+        <Box mt="32px">
+          <Rules />
+        </Box>
       </PageSection>
       <PageSection background={DARKBG} svgFill={DARKFILL} index={4} curvePosition="top">
         <Flex alignItems="center">