Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/extension/src/components/App.js
import React from 'react'; | import React from 'react'; | ||||
import 'antd/dist/antd.less'; | import 'antd/dist/antd.less'; | ||||
import '../index.css'; | import '../index.css'; | ||||
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; | import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; | ||||
import { theme } from '@assets/styles/theme'; | import { theme } from '@assets/styles/theme'; | ||||
import { | import { | ||||
FolderOpenFilled, | FolderOpenFilled, | ||||
CaretRightOutlined, | CaretRightOutlined, | ||||
SettingFilled, | SettingFilled, | ||||
AppstoreAddOutlined, | |||||
} from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
import Wallet from '@components/Wallet/Wallet'; | import Wallet from '@components/Wallet/Wallet'; | ||||
import Tokens from '@components/Tokens/Tokens'; | |||||
import Send from '@components/Send/Send'; | import Send from '@components/Send/Send'; | ||||
import SendToken from '@components/Send/SendToken'; | import SendToken from '@components/Send/SendToken'; | ||||
import Configure from '@components/Configure/Configure'; | import Configure from '@components/Configure/Configure'; | ||||
import NotFound from '@components/NotFound'; | import NotFound from '@components/NotFound'; | ||||
import CashTab from '@assets/cashtab.png'; | import CashTab from '@assets/cashtab.png'; | ||||
import PopOut from '@assets/popout.svg'; | import PopOut from '@assets/popout.svg'; | ||||
import './App.css'; | import './App.css'; | ||||
import { WalletContext } from '@utils/context'; | import { WalletContext } from '@utils/context'; | ||||
Show All 38 Lines | |||||
const CustomApp = styled.div` | const CustomApp = styled.div` | ||||
text-align: center; | text-align: center; | ||||
font-family: 'Gilroy', sans-serif; | font-family: 'Gilroy', sans-serif; | ||||
background-color: ${props => props.theme.app.background}; | background-color: ${props => props.theme.app.background}; | ||||
`; | `; | ||||
const Footer = styled.div` | const Footer = styled.div` | ||||
z-index: 2; | |||||
background-color: ${props => props.theme.footer.background}; | background-color: ${props => props.theme.footer.background}; | ||||
border-radius: 20px; | border-radius: 20px; | ||||
position: fixed; | position: fixed; | ||||
bottom: 0; | bottom: 0; | ||||
width: 500px; | width: 500px; | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
Show All 10 Lines | |||||
export const NavButton = styled.button` | export const NavButton = styled.button` | ||||
:focus, | :focus, | ||||
:active { | :active { | ||||
outline: none; | outline: none; | ||||
} | } | ||||
cursor: pointer; | cursor: pointer; | ||||
padding: 24px 12px 12px 12px; | padding: 24px 12px 12px 12px; | ||||
margin: 0 28px; | margin: 0 28px; | ||||
@media (max-width: 360px) { | @media (max-width: 475px) { | ||||
margin: 0 20px; | |||||
} | |||||
@media (max-width: 420px) { | |||||
margin: 0 12px; | margin: 0 12px; | ||||
} | } | ||||
@media (max-width: 350px) { | |||||
margin: 0 8px; | |||||
} | |||||
background-color: ${props => props.theme.footer.background}; | background-color: ${props => props.theme.footer.background}; | ||||
border: none; | border: none; | ||||
font-size: 12px; | font-size: 12px; | ||||
font-weight: bold; | font-weight: bold; | ||||
.anticon { | .anticon { | ||||
display: block; | display: block; | ||||
color: ${props => props.theme.footer.navIconInactive}; | color: ${props => props.theme.footer.navIconInactive}; | ||||
font-size: 24px; | font-size: 24px; | ||||
▲ Show 20 Lines • Show All 100 Lines • ▼ Show 20 Lines | return ( | ||||
<ExtTabImg src={PopOut} alt="Open in tab" /> | <ExtTabImg src={PopOut} alt="Open in tab" /> | ||||
</OpenInTabBtn> | </OpenInTabBtn> | ||||
</HeaderCtn> | </HeaderCtn> | ||||
<WalletLabel name={wallet.name}></WalletLabel> | <WalletLabel name={wallet.name}></WalletLabel> | ||||
<Switch> | <Switch> | ||||
<Route path="/wallet"> | <Route path="/wallet"> | ||||
<Wallet /> | <Wallet /> | ||||
</Route> | </Route> | ||||
<Route path="/tokens"> | |||||
<Tokens /> | |||||
</Route> | |||||
<Route path="/send"> | <Route path="/send"> | ||||
<Send /> | <Send /> | ||||
</Route> | </Route> | ||||
<Route | <Route | ||||
path="/send-token/:tokenId" | path="/send-token/:tokenId" | ||||
render={props => ( | render={props => ( | ||||
<SendToken | <SendToken | ||||
tokenId={props.match.params.tokenId} | tokenId={props.match.params.tokenId} | ||||
Show All 13 Lines | return ( | ||||
active={selectedKey === 'wallet'} | active={selectedKey === 'wallet'} | ||||
onClick={() => history.push('/wallet')} | onClick={() => history.push('/wallet')} | ||||
> | > | ||||
<FolderOpenFilled /> | <FolderOpenFilled /> | ||||
<fbt desc="Wallet menu button">Wallet</fbt> | <fbt desc="Wallet menu button">Wallet</fbt> | ||||
</NavButton> | </NavButton> | ||||
<NavButton | <NavButton | ||||
active={selectedKey === 'tokens'} | |||||
onClick={() => history.push('/tokens')} | |||||
> | |||||
<AppstoreAddOutlined /> | |||||
Tokens | |||||
</NavButton> | |||||
<NavButton | |||||
active={selectedKey === 'send'} | active={selectedKey === 'send'} | ||||
onClick={() => history.push('/send')} | onClick={() => history.push('/send')} | ||||
> | > | ||||
<CaretRightOutlined /> | <CaretRightOutlined /> | ||||
<fbt desc="Send menu button">Send</fbt> | <fbt desc="Send menu button">Send</fbt> | ||||
</NavButton> | </NavButton> | ||||
<NavButton | <NavButton | ||||
active={selectedKey === 'configure'} | active={selectedKey === 'configure'} | ||||
Show All 14 Lines |