Page MenuHomePhabricator
Differential D8677 Diff 26385 web/cashtab/src/components/App.js

Changeset View

Standalone View

View Options

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 { Layout, Tabs, Icon } from 'antd'; import { Tabs } from 'antd';
import {
FolderOpenFilled,
CaretRightOutlined,
SettingFilled,
} from '@ant-design/icons';
import Wallet from './Wallet/Wallet'; import Wallet from './Wallet/Wallet';
import Send from './Send/Send'; import Send from './Send/Send';
import SendToken from './Send/SendToken'; import SendToken from './Send/SendToken';
import Configure from './Configure/Configure'; import Configure from './Configure/Configure';
import NotFound from './NotFound'; import NotFound from './NotFound';
import CashTab from '../assets/cashtab.png'; import CashTab from '../assets/cashtab.png';
import ABC from '../assets/bitcoinabclogo.png'; import ABC from '../assets/bitcoinabclogo.png';
import './App.css'; import './App.css';
import { WalletContext } from '../utils/context'; import { WalletContext } from '../utils/context';
import { import {
Route, Route,
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 { Footer } = Layout;
const { TabPane } = Tabs; const { TabPane } = Tabs;
const StyledTabsMenu = styled.div` const Footer = styled.div`
.ant-layout-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 0;
background-color: #fff; background-color: #fff;
left: 0;
border-radius: 20px; border-radius: 20px;
border-top: 1px solid #e2e2e2;
@media (max-width: 768px) {
position: fixed; position: fixed;
bottom: 0;
width: 500px;
@media (max-width: 768px) {
width: 100%;
} }
border-top: 1px solid #e2e2e2;
.ant-tabs-nav-list {
} }
.ant-tabs-nav .ant-tabs-tab { .ant-tabs-top > .ant-tabs-nav::before,
padding: 30px 0 20px 0; .ant-tabs-bottom > .ant-tabs-nav::before,
} .ant-tabs-top > div > .ant-tabs-nav::before,
.ant-tabs-bar.ant-tabs-bottom-bar { .ant-tabs-bottom > div > .ant-tabs-nav::before {
margin-top: 0; border-bottom: none;
border-top: none;
} }
.ant-tabs-tab { .ant-tabs-tab {
padding: 24px 12px 12px 12px;
margin: 0 24px;
@media (max-width: 360px) {
margin: 0 12px;
}
span { span {
font-size: 12px; font-size: 12px;
display: grid;
font-weight: bold; font-weight: bold;
} }
.anticon { .anticon {
display: block;
color: rgb(148, 148, 148); color: rgb(148, 148, 148);
font-size: 24px; font-size: 24px;
margin-left: 8px; margin-left: 8px;
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.ant-tabs-tab:hover { .ant-tabs-tab:hover {
color: #ff8d00 !important; color: #ff8d00;
.anticon { .anticon {
color: #ff8d00; color: #ff8d00;
} }
} }
.ant-tabs-tab-active.ant-tabs-tab { .ant-tabs-tab-active > div > span {
color: #ff8d00;
.anticon {
color: #ff8d00; color: #ff8d00;
} }
}
.ant-tabs-tab-active.ant-tabs-tab { .ant-tabs-tab-active.ant-tabs-tab {
color: #ff8d00; color: #ff8d00;
.anticon { .anticon {
color: #ff8d00; color: #ff8d00;
} }
} }
.ant-tabs-tab-active:active {
color: #ff8d00 !important;
}
.ant-tabs-ink-bar { .ant-tabs-ink-bar {
display: none !important; display: none !important;
} }
.ant-tabs-nav { .ant-tabs-nav {
margin: -3.5px 0 0 0; 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;
background: linear-gradient(270deg, #040c3c, #212c6e); background: linear-gradient(270deg, #040c3c, #212c6e);
`; `;
export const WalletCtn = styled.div` export const WalletCtn = styled.div`
position: relative; position: relative;
width: 500px; width: 500px;
background-color: #fff; background-color: #fff;
min-height: 100vh; min-height: 100vh;
padding-top: 30px; padding: 10px 30px 120px 30px;
padding: 10px 30px 100px 30px;
background: #fff; background: #fff;
-webkit-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); -webkit-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
▲ Show 20 Lines • Show All 78 Lines • ▼ Show 20 Lines return (
)} )}
/> />
<Route path="/configure"> <Route path="/configure">
<Configure /> <Configure />
</Route> </Route>
<Redirect exact from="/" to="/wallet" /> <Redirect exact from="/" to="/wallet" />
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
</WalletCtn>
{wallet ? ( {wallet ? (
<StyledTabsMenu>
<Footer> <Footer>
<Tabs <Tabs
activeKey={selectedKey} activeKey={selectedKey}
tabBarGutter={80}
tabPosition="bottom" tabPosition="bottom"
centered
> >
<TabPane <TabPane
tab={ tab={
<span <span
onClick={() => onClick={() => history.push('/wallet')}
history.push('/wallet')
}
> >
<Icon <FolderOpenFilled />
type="folder-open"
theme="filled"
/>
<fbt desc="Wallet menu button"> <fbt desc="Wallet menu button">
Wallet Wallet
</fbt> </fbt>
</span> </span>
} }
key="wallet" key="wallet"
/> />
<TabPane <TabPane
tab={ tab={
<span <span onClick={() => history.push('/send')}>
onClick={() => <CaretRightOutlined />
history.push('/send') <fbt desc="Send menu button">Send</fbt>
}
>
<Icon
type="caret-right"
theme="filled"
/>
<fbt desc="Send menu button">
Send
</fbt>
</span> </span>
} }
key="send" key="send"
disabled={!wallet} disabled={!wallet}
/> />
<TabPane <TabPane
tab={ tab={
<span <span
onClick={() => onClick={() =>
history.push('/configure') history.push('/configure')
} }
> >
<Icon <SettingFilled />
type="setting"
theme="filled"
/>
<fbt desc="Settings menu button"> <fbt desc="Settings menu button">
Settings Settings
</fbt> </fbt>
</span> </span>
} }
key="configure" key="configure"
disabled={!wallet} disabled={!wallet}
/> />
</Tabs> </Tabs>
</Footer> </Footer>
</StyledTabsMenu>
) : null} ) : null}
</WalletCtn>
</WalletBody> </WalletBody>
</div> </div>
); );
}; };
export default App; export default App;