Update header button and misc styling. (#2129)

* Update header button and misc styling.

* 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

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>
+  )
+}

src/custom/components/Header/index.tsx

@@ -1,10 +1,8 @@
-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 } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 
 import HeaderMod, {
   Title,
@@ -18,7 +16,6 @@ import HeaderMod, {
   StyledNavLink as StyledNavLinkUni,
   StyledMenuButton,
   HeaderFrame,
-  UNIAmount as UNIAmountMod,
   UNIWrapper,
 } from './HeaderMod'
 import Menu from 'components/Menu'
@@ -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,16 +201,16 @@ const UniIcon = styled.div`
   }
 `
 
-const VCowAmount = styled(UNIAmountMod)`
-  ${({ theme }) => theme.cowToken.background};
-  ${({ theme }) => theme.cowToken.boxShadow};
-  color: white;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
+const VCowWrapper = styled(UNIWrapper)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `}
 `
 
 export default function Header() {
+  const location = useLocation()
+  const isClaimPage = location.pathname === '/claim'
+
   const { account, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
 
@@ -224,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()
 
@@ -264,20 +259,10 @@ export default function Header() {
         <HeaderControls>
           <NetworkCard />
           <HeaderElement>
-            <UNIWrapper onClick={handleOnClickClaim}>
-              <VCowAmount active={!!account} style={{ pointerEvents: 'auto' }}>
-                {claimTxn && !claimTxn?.receipt ? (
-                  <Dots>
-                    <Trans>Claiming vCOW...</Trans>
-                  </Dots>
-                ) : (
-                  <>
-                    <CowProtocolLogo />
-                    <Trans>vCOW</Trans>
-                  </>
-                )}
-              </VCowAmount>
-            </UNIWrapper>
+            <VCowWrapper>
+              <CowClaimButton isClaimPage={isClaimPage} account={account} handleOnClickClaim={handleOnClickClaim} />
+            </VCowWrapper>
+
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance && (
                 <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr="0.5rem" fontWeight={500}>
@@ -297,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>