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
gnosis · Jan 14, 2022 · bc85564 · bc85564
1 parent 704bbb8
commit bc85564
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 129 deletions.
diff --git a/src/custom/components/CowClaimButton/index.tsx 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
@@ -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>