Skip to content
This repository was archived by the owner on Jun 24, 2022. It is now read-only.

Commit

Permalink
Re-structure claim button and mobile responsive. (#2137)
Browse files Browse the repository at this point in the history 
* Re-structure claim button and mobile responsive.

* Claim style improve 5 (#2146)

* Update

* Update

* Investing table styling start
  • Loading branch information
@fairlighteth
fairlighteth authored Jan 14, 2022
1 parent b814cda commit 54acd8f
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 137 deletions.
100 changes: 100 additions & 0 deletions src/custom/components/CowClaimButton/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
}
106 changes: 6 additions & 100 deletions src/custom/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -43,13 +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 { useToggleModal } from 'state/application/hooks'
import CowClaimButton from 'components/CowClaimButton'

export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
[ChainId.RINKEBY]: 'Rinkeby',
Expand Down Expand Up @@ -212,72 +207,6 @@ const VCowWrapper = styled(UNIWrapper)`
`}
`

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;
}
}
`

export default function Header() {
const location = useLocation()
const isClaimPage = location.pathname === '/claim'
Expand All @@ -291,21 +220,16 @@ 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()

const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false)
const closeOrdersPanel = () => setIsOrdersPanelOpen(false)
const openOrdersPanel = () => setIsOrdersPanelOpen(true)
const isMenuOpen = useModalOpen(ApplicationModal.MENU)
const close = useToggleModal(ApplicationModal.MENU)

const history = useHistory()
const handleOnClickClaim = () => {
close()
history.push('/claim')
}
const handleOnClickClaim = () => history.push('/claim')

// Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open.
// This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
Expand Down Expand Up @@ -335,21 +259,8 @@ export default function Header() {
<HeaderControls>
<NetworkCard />
<HeaderElement>
<VCowWrapper 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>
<VCowWrapper>
<CowClaimButton isClaimPage={isClaimPage} account={account} handleOnClickClaim={handleOnClickClaim} />
</VCowWrapper>

<AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
Expand All @@ -371,12 +282,7 @@ export default function Header() {
{darkMode ? <Moon size={20} /> : <Sun size={20} />}
</StyledMenuButton>
</HeaderElementWrap>
<Menu
handleOnClickClaim={handleOnClickClaim}
isClaimPage={isClaimPage}
darkMode={darkMode}
toggleDarkMode={toggleDarkMode}
/>
<Menu isClaimPage={isClaimPage} darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
</HeaderControls>
{isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
</HeaderModWrapper>
Expand Down
Loading

0 comments on commit 54acd8f

Please sign in to comment.