From bc85564b2fdd94e955c6c73666d1aa6640726910 Mon Sep 17 00:00:00 2001
From: Michel <31534717+biocom@users.noreply.github.com>
Date: Fri, 14 Jan 2022 10:26:46 +0100
Subject: [PATCH] Update header button mobile part 1. (#2132)

* Update header button mobile part 1.

* Re-structure claim button and mobile responsive. (#2137)

* Re-structure claim button and mobile responsive.

* Claim style improve 5 (#2146)

* Update

* Update

* Investing table styling start
---
 .../components/CowClaimButton/index.tsx       | 100 ++++++++++++++++++
 src/custom/components/Header/index.tsx        |  99 ++---------------
 src/custom/components/Menu/index.tsx          |  99 +++++++++++++----
 src/custom/pages/Claim/index.tsx              |  24 +++--
 src/custom/pages/Claim/styled.ts              |  45 ++++++--
 5 files changed, 238 insertions(+), 129 deletions(-)
 create mode 100644 src/custom/components/CowClaimButton/index.tsx

diff --git a/src/custom/components/CowClaimButton/index.tsx b/src/custom/components/CowClaimButton/index.tsx
new file mode 100644
index 000000000..5c8120e1b
--- /dev/null
+++ b/src/custom/components/CowClaimButton/index.tsx
@@ -0,0 +1,100 @@
+import { Trans } from '@lingui/macro'
+import { Dots } from 'components/swap/styleds'
+import styled, { css } from 'styled-components/macro'
+import CowProtocolLogo from 'components/CowProtocolLogo'
+import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
+
+export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
+  ${({ theme }) => theme.card.boxShadow};
+  color: ${({ theme }) => theme.text1};
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 12px;
+  pointer-events: auto;
+
+  > b {
+    margin: 0 0 0 5px;
+    color: inherit;
+    font-weight: inherit;
+    white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: -1px;
+    top: -1px;
+    background: ${({ theme }) =>
+      `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
+    background-size: 800%;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    z-index: -1;
+    animation: glow 50s linear infinite;
+    transition: background-position 0.3s ease-in-out;
+    border-radius: 12px;
+  }
+
+  &::after {
+    filter: blur(8px);
+  }
+
+  &:hover::before,
+  &:hover::after {
+    animation: glow 12s linear infinite;
+  }
+
+  // Stop glowing effect on claim page
+  ${({ isClaimPage }) =>
+    isClaimPage &&
+    css`
+      &::before,
+      &::after {
+        content: none;
+      }
+    `};
+
+  @keyframes glow {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 300% 0;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+`
+
+interface CowClaimButtonProps {
+  isClaimPage?: boolean | null | undefined
+  account?: string | null | undefined
+  handleOnClickClaim?: () => void
+}
+
+export default function CowClaimButton({ isClaimPage, account, handleOnClickClaim }: CowClaimButtonProps) {
+  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
+
+  return (
+    <Wrapper isClaimPage={isClaimPage} onClick={handleOnClickClaim}>
+      {claimTxn && !claimTxn?.receipt ? (
+        <Dots>
+          <Trans>Claiming vCOW...</Trans>
+        </Dots>
+      ) : (
+        <>
+          <CowProtocolLogo />
+          <b>
+            <Trans>vCOW</Trans>
+          </b>
+        </>
+      )}
+    </Wrapper>
+  )
+}
diff --git a/src/custom/components/Header/index.tsx b/src/custom/components/Header/index.tsx
index c0c2c8b7e..90379f4b7 100644
--- a/src/custom/components/Header/index.tsx
+++ b/src/custom/components/Header/index.tsx
@@ -1,7 +1,5 @@
-import { Trans } from '@lingui/macro'
 import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
-import { Dots } from 'components/swap/styleds'
 import Web3Status from 'components/Web3Status'
 import { ExternalLink } from 'theme'
 import { useHistory, useLocation } from 'react-router-dom'
@@ -18,12 +16,11 @@ import HeaderMod, {
   StyledNavLink as StyledNavLinkUni,
   StyledMenuButton,
   HeaderFrame,
-  UNIAmount as UNIAmountMod,
   UNIWrapper,
 } from './HeaderMod'
 import Menu from 'components/Menu'
 import { Moon, Sun } from 'react-feather'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useETHBalances } from 'state/wallet/hooks'
 import { AMOUNT_PRECISION } from 'constants/index'
@@ -43,12 +40,11 @@ import {
   // useToggleSelfClaimModal
 } from 'state/application/hooks'
 //import { useUserHasAvailableClaim } from 'state/claim/hooks'
-import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
 
 import Modal from 'components/Modal'
 // import ClaimModal from 'components/claim/ClaimModal'
 import UniBalanceContent from 'components/Header/UniBalanceContent'
-import CowProtocolLogo from 'components/CowProtocolLogo'
+import CowClaimButton from 'components/CowClaimButton'
 
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -205,71 +201,10 @@ const UniIcon = styled.div`
   }
 `
 
-const VCowAmount = styled(UNIAmountMod)<{ isClaimPage: boolean }>`
-  ${({ theme }) => theme.card.boxShadow};
-  color: ${({ theme }) => theme.text1};
-  padding: 0 12px;
-  font-size: 15px;
-  font-weight: 500;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  border-radius: 12px;
-
-  > b {
-    margin: 0 0 0 5px;
-    color: inherit;
-    font-weight: inherit;
-  }
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    left: -1px;
-    top: -1px;
-    background: ${({ theme }) =>
-      `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
-    background-size: 800%;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-    z-index: -1;
-    animation: glow 50s linear infinite;
-    transition: background-position 0.3s ease-in-out;
-    border-radius: 12px;
-  }
-
-  &::after {
-    filter: blur(8px);
-  }
-
-  &:hover::before,
-  &:hover::after {
-    animation: glow 12s linear infinite;
-  }
-
-  // Stop glowing effect on claim page
-  ${({ isClaimPage }) =>
-    isClaimPage &&
-    css`
-      &::before,
-      &::after {
-        content: none;
-      }
-    `};
-
-  @keyframes glow {
-    0% {
-      background-position: 0 0;
-    }
-    50% {
-      background-position: 300% 0;
-    }
-    100% {
-      background-position: 0 0;
-    }
-  }
+const VCowWrapper = styled(UNIWrapper)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `}
 `
 
 export default function Header() {
@@ -285,7 +220,6 @@ export default function Header() {
 
   // const toggleClaimModal = useToggleSelfClaimModal()
   // const availableClaim: boolean = useUserHasAvailableClaim(account)
-  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
   const [showUniBalanceModal, setShowUniBalanceModal] = useState(false)
   // const showClaimPopup = useShowClaimPopup()
 
@@ -325,22 +259,9 @@ export default function Header() {
         <HeaderControls>
           <NetworkCard />
           <HeaderElement>
-            <UNIWrapper onClick={handleOnClickClaim}>
-              <VCowAmount isClaimPage={isClaimPage} active={!!account} style={{ pointerEvents: 'auto' }}>
-                {claimTxn && !claimTxn?.receipt ? (
-                  <Dots>
-                    <Trans>Claiming vCOW...</Trans>
-                  </Dots>
-                ) : (
-                  <>
-                    <CowProtocolLogo />
-                    <b>
-                      <Trans>Claim vCOW</Trans>
-                    </b>
-                  </>
-                )}
-              </VCowAmount>
-            </UNIWrapper>
+            <VCowWrapper>
+              <CowClaimButton isClaimPage={isClaimPage} account={account} handleOnClickClaim={handleOnClickClaim} />
+            </VCowWrapper>
 
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance && (
@@ -361,7 +282,7 @@ export default function Header() {
               {darkMode ? <Moon size={20} /> : <Sun size={20} />}
             </StyledMenuButton>
           </HeaderElementWrap>
-          <Menu darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+          <Menu isClaimPage={isClaimPage} darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
         </HeaderControls>
         {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
       </HeaderModWrapper>
diff --git a/src/custom/components/Menu/index.tsx b/src/custom/components/Menu/index.tsx
index 3138df69b..d19266971 100644
--- a/src/custom/components/Menu/index.tsx
+++ b/src/custom/components/Menu/index.tsx
@@ -1,5 +1,4 @@
 import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather'
-import { Trans } from '@lingui/macro'
 
 import MenuMod, {
   MenuItem,
@@ -7,7 +6,6 @@ import MenuMod, {
   MenuFlyout as MenuFlyoutUni,
   MenuItemBase,
   StyledMenuButton,
-  UNIbutton,
 } from './MenuMod'
 import { useToggleModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
@@ -20,6 +18,8 @@ import ninjaCowImage from 'assets/cow-swap/ninja-cow.png'
 import { ApplicationModal } from 'state/application/actions'
 import { getExplorerAddressLink } from 'utils/explorer'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
+import { useHistory } from 'react-router-dom'
+import CowClaimButton, { Wrapper as ClaimButtonWrapper } from 'components/CowClaimButton'
 
 import twitterImage from 'assets/cow-swap/twitter.svg'
 import discordImage from 'assets/cow-swap/discord.svg'
@@ -31,7 +31,7 @@ const ResponsiveInternalMenuItem = styled(InternalMenuItem)`
   display: none;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-      display: flex;   
+      display: flex;
   `};
 `
 
@@ -57,7 +57,7 @@ const MenuItemResponsive = styled(MenuItemResponsiveBase)`
   }
 `
 
-export const StyledMenu = styled(MenuMod)`
+export const StyledMenu = styled(MenuMod)<{ isClaimPage: boolean }>`
   hr {
     margin: 15px 0;
   }
@@ -97,9 +97,58 @@ export const StyledMenu = styled(MenuMod)`
     padding: 0 6px 0 0;
   }
 
+  ${ClaimButtonWrapper} {
+    margin: 0 0 12px;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      margin: 0 12px 12px;
+      width: 100%;
+      height: 56px;
+      justify-content: center;
+      font-size: 19px;
+
+      > span {
+        height: 30px;
+        width: 30px;
+        border-radius: 30px;
+        margin: 0 5px 0 0;
+      }
+    `}
+  }
+
   ${StyledMenuButton} {
     height: 38px;
+    border-radius: 12px;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+          &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      background: ${({ theme }) =>
+        `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
+      background-size: 800%;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      z-index: -1;
+      animation: glow 50s linear infinite;
+      transition: background-position 0.3s ease-in-out;
+      border-radius: 12px;
+    }
+
+    &::after {
+      filter: blur(8px);
+    }
+
+    &:hover::before,
+    &:hover::after {
+      animation: glow 12s linear infinite;
+    }
   }
+
+  `};
 `
 
 const Policy = styled(InternalMenuItem).attrs((attrs) => ({
@@ -123,10 +172,9 @@ const MenuFlyout = styled(MenuFlyoutUni)`
     width: 100%;
     border-radius: 0;
     box-shadow: none;
-    padding: 0;
     overflow-y: auto;
     flex-flow: row wrap;
-    padding: 0 0 56px;
+    padding: 12px 0 100px;
     align-items: flex-start;
     align-content: flex-start;
   `};
@@ -193,14 +241,16 @@ export const CloseMenu = styled.button`
   border-radius: 6px;
   justify-content: center;
   padding: 0;
-  margin: 0 0 8px;
+  margin: 8px 0 0;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     height: 56px;
     border-radius: 0;
-    justify-content: flex-end;
     margin: 0;
     width: 100%;
+    position: fixed;
+    bottom: 0;
+    top: initial;
   `};
 
   &::after {
@@ -219,21 +269,26 @@ export const CloseMenu = styled.button`
 interface MenuProps {
   darkMode: boolean
   toggleDarkMode: () => void
+  isClaimPage: boolean
 }
 
-export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
-  const close = useToggleModal(ApplicationModal.MENU)
+export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) {
   const { account, chainId } = useActiveWeb3React()
   const hasOrders = useHasOrders(account)
   const showOrdersLink = account && hasOrders
-
-  const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
-  const showUNIClaimOption = Boolean(!!account && !!chainId)
+  /* const showVCOWClaimOption = Boolean(!!account && !!chainId) */
+  const close = useToggleModal(ApplicationModal.MENU)
+  const history = useHistory()
+  const handleOnClickClaim = () => {
+    close()
+    history.push('/claim')
+  }
 
   return (
-    <StyledMenu>
+    <StyledMenu isClaimPage={isClaimPage}>
       <MenuFlyout>
-        <CloseMenu onClick={close} />
+        <CowClaimButton isClaimPage={isClaimPage} handleOnClickClaim={handleOnClickClaim} />
+
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap
         </ResponsiveInternalMenuItem>
@@ -266,6 +321,9 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
             Code
           </span>
         </MenuItem>
+
+        <Separator />
+
         <MenuItem id="link" href={DISCORD_LINK}>
           <span aria-hidden="true" onClick={close} onKeyDown={close}>
             <SVG src={discordImage} description="Find CowSwap on Discord!" />
@@ -279,6 +337,8 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
           </span>
         </MenuItem>
 
+        <Separator />
+
         <InternalMenuItem to="/play/mev-slicer" onClick={close}>
           <span role="img" aria-label="Play CowGame">
             <img src={ninjaCowImage} alt="Play Cow MEV Slicer" />
@@ -313,8 +373,6 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
           )}
         </MenuItemResponsive>
 
-        <Separator />
-
         <Policy to="/terms-and-conditions" onClick={close} onKeyDown={close}>
           Terms and conditions
         </Policy>
@@ -322,11 +380,8 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
         <Policy to="/privacy-policy">Privacy policy</Policy>
         <Policy to="/cookie-policy">Cookie policy</Policy> 
         */}
-        {showUNIClaimOption && (
-          <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" $borderRadius="12px" mt="0.5rem">
-            <Trans>Claim vCOW</Trans>
-          </UNIbutton>
-        )}
+
+        <CloseMenu onClick={close} />
       </MenuFlyout>
     </StyledMenu>
   )
diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
index fe77558fb..5a73733d2 100644
--- a/src/custom/pages/Claim/index.tsx
+++ b/src/custom/pages/Claim/index.tsx
@@ -322,10 +322,7 @@ export default function Claim() {
                     </th>
                     <th>Type of Claim</th>
                     <th>Amount</th>
-                    <th>Price</th>
-                    <th>Cost</th>
-                    <th>Vesting</th>
-                    <th>Ends in</th>
+                    <th>Details</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -354,10 +351,21 @@ export default function Claim() {
                         <td width="150px">
                           <CowProtocolLogo size={16} /> {parsedAmount?.toFixed(0, { groupSeparator: ',' })} vCOW
                         </td>
-                        <td>{isFree ? '-' : `${vCowPrice} vCoW per ${currency}`}</td>
-                        <td>{isFree ? <span className="green">Free!</span> : `${cost} ${currency}`}</td>
-                        <td>{type === ClaimType.Airdrop ? 'No' : '4 years (linear)'}</td>
-                        <td>28 days, 10h, 50m</td>
+
+                        <td>
+                          <span>
+                            Price: <b>{isFree ? '-' : `${vCowPrice} vCoW per ${currency}`}</b>
+                          </span>
+                          <span>
+                            Cost: <b>{isFree ? <span className="green">Free!</span> : `${cost} ${currency}`}</b>
+                          </span>
+                          <span>
+                            Vesting: <b>{type === ClaimType.Airdrop ? 'No' : '4 years (linear)'}</b>
+                          </span>
+                          <span>
+                            Ends in: <b>28 days, 10h, 50m</b>
+                          </span>
+                        </td>
                       </tr>
                     )
                   })}
diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
index 961efc19c..0f9a34fb0 100644
--- a/src/custom/pages/Claim/styled.ts
+++ b/src/custom/pages/Claim/styled.ts
@@ -152,8 +152,8 @@ export const ClaimTable = styled.div`
     display: grid;
     border-collapse: collapse;
     min-width: 100%;
-    font-size: 14px;
-    grid-template-columns: repeat(7, auto);
+    font-size: 16px;
+    grid-template-columns: repeat(4, auto);
   }
 
   thead,
@@ -193,6 +193,28 @@ export const ClaimTable = styled.div`
     background: var(--color-container-bg);
     margin: 0 0 12px;
   }
+
+  /* 3rd row - amount */
+  tr > td:nth-of-type(3) {
+    font-size: 21px;
+    font-weight: 500;
+  }
+
+  tr > td:nth-of-type(4) {
+    font-size: 13px;
+    display: flex;
+    flex-flow: column wrap;
+  }
+
+  tr > td:first-of-type {
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+  }
+
+  tr > td:last-of-type {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
 `
 
 export const ClaimAccount = styled.div`
@@ -320,9 +342,10 @@ export const EligibleBanner = styled.div`
 
 export const InputField = styled.div`
   padding: 18px;
-  border-radius: 16px;
-  border: 1px solid rgba(151, 151, 151, 0.4);
-  background: rgba(151, 151, 151, 0.1);
+  border-radius: var(--border-radius);
+  ${({ theme }) => theme.currencyInput?.color};
+  color: ${({ theme }) => theme.text1};
+  background: ${({ theme }) => theme.currencyInput?.background};
   width: 100%;
   margin: 0 0 24px;
 
@@ -330,20 +353,21 @@ export const InputField = styled.div`
     background: transparent;
     border: 0;
     font-size: 24px;
-    color: ${({ theme }) => theme.text1};
+    color: inherit
     outline: 0;
+    color: ${({ theme }) => theme.text1};
     width: 100%;
   }
 
   > input::placeholder {
-    color: rgba(151, 151, 151, 0.4);
+    color: inherit;
+    opacity: 0.7;
   }
 
   > b {
     display: block;
     margin: 0 0 12px;
     font-weight: normal;
-    color: #979797;
   }
 
   > div {
@@ -375,7 +399,8 @@ export const InputFieldTitle = styled.div`
   align-items: center;
   margin: 0 0 12px;
   font-weight: normal;
-  color: #979797;
+  color: inherit;
+
   > b {
     margin-right: 10px;
   }
@@ -456,7 +481,7 @@ export const TopNav = styled.div`
 export const Demo = styled(ClaimTable)`
   background: #3e0c46;
   > table {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: min-content auto max-content auto;
   }
 
   > table tr td:first-of-type {