Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/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 from 'styled-components'; | import styled from 'styled-components'; | ||||
| import { Tabs } from 'antd'; | |||||
| import { | import { | ||||
| FolderOpenFilled, | FolderOpenFilled, | ||||
| CaretRightOutlined, | CaretRightOutlined, | ||||
| SettingFilled, | SettingFilled, | ||||
| } from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
| import Wallet from '@components/Wallet/Wallet'; | import Wallet from '@components/Wallet/Wallet'; | ||||
| import Send from '@components/Send/Send'; | import Send from '@components/Send/Send'; | ||||
| import SendToken from '@components/Send/SendToken'; | import SendToken from '@components/Send/SendToken'; | ||||
| Show All 11 Lines | import { | ||||
| Redirect, | Redirect, | ||||
| Switch, | Switch, | ||||
| useLocation, | useLocation, | ||||
| useHistory, | useHistory, | ||||
| } from 'react-router-dom'; | } from 'react-router-dom'; | ||||
| import fbt from 'fbt'; | import fbt from 'fbt'; | ||||
| const { TabPane } = Tabs; | |||||
| const Footer = styled.div` | const Footer = styled.div` | ||||
| background-color: #fff; | background-color: #fff; | ||||
| 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%; | ||||
| } | } | ||||
| border-top: 1px solid #e2e2e2; | border-top: 1px solid #e2e2e2; | ||||
| .ant-tabs-nav-list { | `; | ||||
| } | |||||
| .ant-tabs-top > .ant-tabs-nav::before, | export const NavButton = styled.button` | ||||
| .ant-tabs-bottom > .ant-tabs-nav::before, | :focus, | ||||
| .ant-tabs-top > div > .ant-tabs-nav::before, | :active { | ||||
| .ant-tabs-bottom > div > .ant-tabs-nav::before { | outline: none; | ||||
| border-bottom: none; | |||||
| } | } | ||||
| .ant-tabs-tab { | cursor: pointer; | ||||
| padding: 24px 12px 12px 12px; | padding: 24px 12px 12px 12px; | ||||
| margin: 0 24px; | margin: 0 28px; | ||||
| @media (max-width: 360px) { | @media (max-width: 360px) { | ||||
| margin: 0 12px; | margin: 0 12px; | ||||
| } | } | ||||
| span { | background-color: #fff; | ||||
| border: none; | |||||
| font-size: 12px; | font-size: 12px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| } | |||||
| .anticon { | .anticon { | ||||
| display: block; | display: block; | ||||
| color: rgb(148, 148, 148); | color: rgb(148, 148, 148); | ||||
| font-size: 24px; | font-size: 24px; | ||||
| margin-left: 8px; | margin-bottom: 6px; | ||||
| margin-bottom: 3px; | |||||
| } | |||||
| } | |||||
| .ant-tabs-tab:hover { | |||||
| color: #ff8d00; | |||||
| .anticon { | |||||
| color: #ff8d00; | |||||
| } | |||||
| } | |||||
| .ant-tabs-tab-active > div > span { | |||||
| color: #ff8d00; | |||||
| } | } | ||||
| .ant-tabs-tab-active.ant-tabs-tab { | ${({ active }) => | ||||
| active && | |||||
| ` | |||||
| color: #ff8d00; | color: #ff8d00; | ||||
| .anticon { | .anticon { | ||||
| color: #ff8d00; | color: #ff8d00; | ||||
| } | } | ||||
| } | `} | ||||
| .ant-tabs-ink-bar { | |||||
| display: none !important; | |||||
| } | |||||
| .ant-tabs-nav { | |||||
| margin: -3.5px 0 0 0; | |||||
| } | |||||
| `; | `; | ||||
| export const WalletBody = styled.div` | export const WalletBody = styled.div` | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: center; | justify-content: center; | ||||
| width: 100%; | width: 100%; | ||||
| min-height: 100vh; | min-height: 100vh; | ||||
| ▲ Show 20 Lines • Show All 120 Lines • ▼ Show 20 Lines | return ( | ||||
| <Configure /> | <Configure /> | ||||
| </Route> | </Route> | ||||
| <Redirect exact from="/" to="/wallet" /> | <Redirect exact from="/" to="/wallet" /> | ||||
| <Route component={NotFound} /> | <Route component={NotFound} /> | ||||
| </Switch> | </Switch> | ||||
| </WalletCtn> | </WalletCtn> | ||||
| {wallet ? ( | {wallet ? ( | ||||
| <Footer> | <Footer> | ||||
| <Tabs | <NavButton | ||||
| activeKey={selectedKey} | active={selectedKey === 'wallet'} | ||||
| tabPosition="bottom" | |||||
| centered | |||||
| > | |||||
| <TabPane | |||||
| tab={ | |||||
| <span | |||||
| onClick={() => history.push('/wallet')} | onClick={() => history.push('/wallet')} | ||||
| > | > | ||||
| <FolderOpenFilled /> | <FolderOpenFilled /> | ||||
| <fbt desc="Wallet menu button"> | <fbt desc="Wallet menu button">Wallet</fbt> | ||||
| Wallet | </NavButton> | ||||
| </fbt> | |||||
| </span> | <NavButton | ||||
| } | active={selectedKey === 'send'} | ||||
| key="wallet" | onClick={() => history.push('/send')} | ||||
| /> | > | ||||
| <TabPane | |||||
| tab={ | |||||
| <span onClick={() => history.push('/send')}> | |||||
| <CaretRightOutlined /> | <CaretRightOutlined /> | ||||
| <fbt desc="Send menu button">Send</fbt> | <fbt desc="Send menu button">Send</fbt> | ||||
| </span> | </NavButton> | ||||
| } | <NavButton | ||||
| key="send" | active={selectedKey === 'configure'} | ||||
| disabled={!wallet} | onClick={() => history.push('/configure')} | ||||
| /> | |||||
| <TabPane | |||||
| tab={ | |||||
| <span | |||||
| onClick={() => | |||||
| history.push('/configure') | |||||
| } | |||||
| > | > | ||||
| <SettingFilled /> | <SettingFilled /> | ||||
| <fbt desc="Settings menu button"> | <fbt desc="Settings menu button">Settings</fbt> | ||||
| Settings | </NavButton> | ||||
| </fbt> | |||||
| </span> | |||||
| } | |||||
| key="configure" | |||||
| disabled={!wallet} | |||||
| /> | |||||
| </Tabs> | |||||
| </Footer> | </Footer> | ||||
| ) : null} | ) : null} | ||||
| </WalletBody> | </WalletBody> | ||||
| </div> | </div> | ||||
| ); | ); | ||||
| }; | }; | ||||
| export default App; | export default App; | ||||