Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Wallet/Wallet.js
Show All 30 Lines | export const TabLabel = styled.button` | ||||
cursor: pointer; | cursor: pointer; | ||||
@media (max-width: 400px) { | @media (max-width: 400px) { | ||||
font-size: 16px; | font-size: 16px; | ||||
} | } | ||||
${({ active, ...props }) => | ${({ active, ...props }) => | ||||
active && | active && | ||||
` | ` | ||||
color: ${props.theme.primary}; | color: ${props.theme.primary}; | ||||
`} | `} | ||||
`; | `; | ||||
export const TabLine = styled.div` | export const TabLine = styled.div` | ||||
margin: auto; | margin: auto; | ||||
transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s; | transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s; | ||||
height: 4px; | height: 4px; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
background-color: ${props => props.theme.primary}; | background-color: ${props => props.theme.primary}; | ||||
pointer-events: none; | pointer-events: none; | ||||
margin-left: 72%; | margin-left: 72%; | ||||
width: 28%; | width: 28%; | ||||
${({ left, ...props }) => | ${({ left, ...props }) => | ||||
left && | left && | ||||
` | ` | ||||
margin-left: 1% | margin-left: 1% | ||||
width: 69%; | width: 69%; | ||||
`} | `} | ||||
`; | `; | ||||
export const TabPane = styled.div` | export const TabPane = styled.div` | ||||
${({ active }) => | ${({ active }) => | ||||
!active && | !active && | ||||
` | ` | ||||
display: none; | display: none; | ||||
`} | `} | ||||
`; | `; | ||||
export const SwitchBtnCtn = styled.div` | export const SwitchBtnCtn = styled.div` | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines | return ( | ||||
onClick={() => setActiveTab('txHistory')} | onClick={() => setActiveTab('txHistory')} | ||||
> | > | ||||
Transaction History | Transaction History | ||||
</TabLabel> | </TabLabel> | ||||
<TabLabel | <TabLabel | ||||
active={activeTab === 'tokens'} | active={activeTab === 'tokens'} | ||||
onClick={() => setActiveTab('tokens')} | onClick={() => setActiveTab('tokens')} | ||||
> | > | ||||
Tokens | eTokens | ||||
</TabLabel> | </TabLabel> | ||||
<TabLine left={activeTab === 'txHistory'} /> | <TabLine left={activeTab === 'txHistory'} /> | ||||
</Tabs> | </Tabs> | ||||
<TabPane active={activeTab === 'txHistory'}> | <TabPane active={activeTab === 'txHistory'}> | ||||
<TxHistory | <TxHistory | ||||
txs={parsedTxHistory} | txs={parsedTxHistory} | ||||
fiatPrice={fiatPrice} | fiatPrice={fiatPrice} | ||||
▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines |