Page MenuHomePhabricator
Differential D10275 Diff 30359 web/cashtab/src/components/App.js

Changeset View

Standalone View

View Options

web/cashtab/src/components/App.js

Show All 29 Linesimport {
useHistory, useHistory,
} from 'react-router-dom'; } from 'react-router-dom';
// Easter egg imports not used in extension/src/components/App.js // Easter egg imports not used in extension/src/components/App.js
import TabCash from '@assets/tabcash.png'; import TabCash from '@assets/tabcash.png';
import ABC from '@assets/logo_topright.png'; import ABC from '@assets/logo_topright.png';
import { checkForTokenById } from '@utils/tokenMethods.js'; import { checkForTokenById } from '@utils/tokenMethods.js';
import { currency } from './Common/Ticker'; import { currency } from './Common/Ticker';
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button { .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {
border-radius: 8px; border-radius: 8px;
background-color: ${props => props.theme.modals.buttons.background}; background-color: ${props => props.theme.modals.buttons.background};
color: ${props => props.theme.wallet.text.secondary}; color: ${props => props.theme.wallet.text.secondary};
font-weight: bold; font-weight: bold;
} }
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover { .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover {
color: ${props => props.theme.primary}; color: ${props => props.theme.primary};
transition: color 0.3s; transition: color 0.3s;
background-color: ${props => props.theme.modals.buttons.background}; background-color: ${props => props.theme.modals.buttons.background};
} }
.selectedCurrencyOption { .selectedCurrencyOption {
text-align: left; text-align: left;
color: ${props => props.theme.wallet.text.secondary} !important; color: ${props => props.theme.wallet.text.secondary} !important;
background-color: ${props => props.theme.contrast} !important; background-color: ${props => props.theme.contrast} !important;
} }
.cashLoadingIcon { .cashLoadingIcon {
color: ${props => props.theme.primary} !important color: ${props => props.theme.primary} !important
font-size: 48px !important; font-size: 48px !important;
▲ Show 20 Lines • Show All 56 Lines • ▼ Show 20 Linesexport const NavButton = styled.button`
.anticon { .anticon {
display: block; display: block;
color: ${props => props.theme.footer.navIconInactive}; color: ${props => props.theme.footer.navIconInactive};
font-size: 24px; font-size: 24px;
margin-bottom: 6px; margin-bottom: 6px;
} }
${({ active, ...props }) => ${({ active, ...props }) =>
active && active &&
` `
color: ${props.theme.primary}; color: ${props.theme.primary};
.anticon { .anticon {
color: ${props.theme.primary}; color: ${props.theme.primary};
} }
`} `}
`; `;
export const WalletBody = styled.div` export const WalletBody = styled.div`
▲ Show 20 Lines • Show All 215 Lines • ▼ Show 20 Lines return (
Wallet Wallet
</NavButton> </NavButton>
<NavButton <NavButton
active={selectedKey === 'tokens'} active={selectedKey === 'tokens'}
onClick={() => history.push('/tokens')} onClick={() => history.push('/tokens')}
> >
<AppstoreAddOutlined /> <AppstoreAddOutlined />
Tokens eTokens
</NavButton> </NavButton>
<NavButton <NavButton
active={selectedKey === 'send'} active={selectedKey === 'send'}
onClick={() => history.push('/send')} onClick={() => history.push('/send')}
> >
<CaretRightOutlined /> <CaretRightOutlined />
Send Send
Show All 18 Lines