Merge branch 'develop' into bugfix/send-view-ux
This commit is contained in:
André Neves
GitHub
commit
91f65e554f
|
|
@ -30,6 +30,7 @@ describe('Transactions Actions', () => {
|
|||
const payload = {
|
||||
list: [],
|
||||
zecPrice: 0,
|
||||
hasNextPage: false,
|
||||
};
|
||||
|
||||
store.dispatch(loadTransactionsSuccess(payload));
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Button } from '../../app/components/button';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Clipboard } from '../../app/components/clipboard';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { ColumnComponent } from '../../app/components/column';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('<ColumnComponent />', () => {
|
||||
test('should render correctly', () => {
|
||||
// $FlowFixMe
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<ColumnComponent>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Divider } from '../../app/components/divider';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('<Divider />', () => {
|
||||
test('should render correctly', () => {
|
||||
// $FlowFixMe
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Divider opacity={0.3} />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import 'jest-dom/extend-expect';
|
|||
|
||||
import { DropdownComponent } from '../../app/components/dropdown';
|
||||
import { Button } from '../../app/components/button';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
@ -28,8 +28,8 @@ describe('<DropdownComponent />', () => {
|
|||
/>
|
||||
)}
|
||||
options={[
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -53,8 +53,8 @@ describe('<DropdownComponent />', () => {
|
|||
/>
|
||||
)}
|
||||
options={[
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { InputLabelComponent } from '../../app/components/input-label';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { InputComponent } from '../../app/components/input';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { LoadingScreen } from '../../app/components/loading-screen';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ describe('<LoadingScreen />', () => {
|
|||
test('should render status pill correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<LoadingScreen progress={83.0} />
|
||||
<LoadingScreen progress={83.0} message='ZEC Wallet Starting' />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ afterEach(cleanup);
|
|||
describe('<QRCode />', () => {
|
||||
test('should render qrcode component correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<QRCode value='https://z.cash.foundation' />,
|
||||
<QRCode value='https://znfd.org' />,
|
||||
);
|
||||
|
||||
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { RowComponent } from '../../app/components/row';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { SelectComponent } from '../../app/components/select';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ describe('<SelectComponent />', () => {
|
|||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<SelectComponent
|
||||
onChange={console.log}
|
||||
onChange={console.log} // eslint-disable-line
|
||||
value='asbh1yeasbdh23848asdasd'
|
||||
placeholder='Select a address'
|
||||
options={[
|
||||
|
|
@ -51,7 +51,7 @@ describe('<SelectComponent />', () => {
|
|||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<SelectComponent
|
||||
onChange={console.log}
|
||||
onChange={console.log} // eslint-disable-line
|
||||
value='asbh1yeasbdh23848asdasd'
|
||||
placeholder='Select a address'
|
||||
options={[
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { StatusPill } from '../../app/components/status-pill';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TextComponent } from '../../app/components/text';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TransactionItemComponent } from '../../app/components/transaction-item';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
@ -26,6 +26,7 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 1.7891,
|
||||
zecPrice: 1.345,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
},
|
||||
{
|
||||
type: 'send',
|
||||
|
|
@ -34,6 +35,7 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 0.8458,
|
||||
zecPrice: 1.344,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { WalletAddress } from '../../app/components/wallet-address';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
|||
12
app/app.js
12
app/app.js
|
|
@ -7,9 +7,9 @@ import { ThemeProvider } from 'styled-components';
|
|||
|
||||
import { configureStore, history } from './redux/create';
|
||||
import { Router } from './router/container';
|
||||
import theme, { GlobalStyle } from './theme';
|
||||
import { appTheme as theme, GlobalStyle } from './theme';
|
||||
import electronStore from '../config/electron-store';
|
||||
import { DARK } from './constants/themes';
|
||||
import { DARK, THEME_MODE } from './constants/themes';
|
||||
|
||||
import 'rc-tooltip/assets/bootstrap.css';
|
||||
|
||||
|
|
@ -22,15 +22,15 @@ type State = {
|
|||
|
||||
export class App extends Component<Props, State> {
|
||||
state = {
|
||||
themeMode: electronStore.get('THEME_MODE') || DARK,
|
||||
themeMode: electronStore.get(THEME_MODE) || DARK,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (!electronStore.has('THEME_MODE')) {
|
||||
electronStore.set('THEME_MODE', DARK);
|
||||
if (!electronStore.has(THEME_MODE)) {
|
||||
electronStore.set(THEME_MODE, DARK);
|
||||
}
|
||||
|
||||
electronStore.onDidChange('THEME_MODE', newValue => this.setState({ themeMode: newValue }));
|
||||
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 747 B After Width: | Height: | Size: 747 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 181 B After Width: | Height: | Size: 181 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
|
||||
|
After Width: | Height: | Size: 180 B |
|
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>
|
||||
|
After Width: | Height: | Size: 181 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#3b3b3f;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#fff;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#000;stroke:#000;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 537 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 537 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#3b3b3f;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
Before Width: | Height: | Size: 333 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#fff;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#000;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" ?>
|
||||
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
<svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<circle fill="#222" cx="57.6" cy="128" r="20"/>
|
||||
<circle fill="#222" cx="128" cy="128" r="20"/>
|
||||
<circle fill="#222" cx="198.4" cy="128" r="20"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 499 B |
|
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>
|
||||
|
After Width: | Height: | Size: 146 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 826 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#3b3b3f;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#fff;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#000;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#66BE54;}</style></defs><g transform="translate(34.55 55.562) rotate(180)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#FF6C6C;}</style></defs><g transform="translate(-16.208 -36.709)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -15,13 +15,13 @@ const DefaultButton = styled.button`
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.1s ${props => props.theme.transitionEase};
|
||||
`;
|
||||
|
||||
const Primary = styled(DefaultButton)`
|
||||
background-color: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
color: ${props => props.theme.colors.buttonPrimaryText};
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -29,23 +29,24 @@ const Primary = styled(DefaultButton)`
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: ${props => props.theme.colors.buttonBorderColor};
|
||||
background-color: ${props => props.theme.colors.buttonPrimaryDisabledBg};
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8;
|
||||
opacity: 0.45;
|
||||
}
|
||||
`;
|
||||
|
||||
const Secondary = styled(DefaultButton)`
|
||||
background-color: transparent;
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryBg};
|
||||
color: ${props => props.theme.colors.buttonSecondaryText};
|
||||
border: 1px solid ${props => props.theme.colors.buttonSecondaryBorder};
|
||||
|
||||
&:hover {
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||
border-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: Transparent;
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryDisabledBg};
|
||||
cursor: not-allowed;
|
||||
color: ${props => props.theme.colors.buttonBorderColor};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Element } from 'react';
|
||||
import React, { type Element } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
|
@ -17,7 +17,7 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
box-shadow: ${props => props.theme.colors.transactionDetailsShadow}
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
|
@ -42,6 +42,22 @@ const CloseIconImg = styled.img`
|
|||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const ButtonWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 20px 40px 10px;
|
||||
|
||||
& > :first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Btn = styled(Button)`
|
||||
width: 95%;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -91,7 +107,7 @@ export const ConfirmDialogComponent = ({
|
|||
<Divider opacity={0.3} />
|
||||
{children(handleClose(toggle))}
|
||||
{showButtons && (
|
||||
<Fragment>
|
||||
<ButtonWrapper>
|
||||
<Btn
|
||||
id='confirm-modal-button'
|
||||
label='Confirm'
|
||||
|
|
@ -104,7 +120,7 @@ export const ConfirmDialogComponent = ({
|
|||
variant='secondary'
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</Fragment>
|
||||
</ButtonWrapper>
|
||||
)}
|
||||
</Wrapper>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
type Props = {
|
||||
text: string,
|
||||
children: any,
|
||||
onCopy?: Function,
|
||||
options?: Object,
|
||||
}
|
||||
|
||||
export class CopyToClipboard extends PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
onCopy: () => {},
|
||||
options: {},
|
||||
};
|
||||
|
||||
|
||||
onClick = (event: Object) => {
|
||||
const {
|
||||
text,
|
||||
onCopy,
|
||||
children,
|
||||
options,
|
||||
} = this.props;
|
||||
|
||||
const elem = React.Children.only(children);
|
||||
|
||||
const result = copy(text, options);
|
||||
|
||||
if (onCopy) {
|
||||
onCopy(text, result);
|
||||
}
|
||||
|
||||
// Bypass onClick if it was present
|
||||
if (
|
||||
elem
|
||||
&& elem.props
|
||||
&& typeof elem.props.onClick === 'function'
|
||||
) {
|
||||
elem.props.onClick(event);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
text: _text,
|
||||
onCopy: _onCopy,
|
||||
options: _options,
|
||||
children,
|
||||
...props
|
||||
} = this.props;
|
||||
const elem = React.Children.only(children);
|
||||
|
||||
return React.cloneElement(
|
||||
elem,
|
||||
{ ...props, onClick: this.onClick },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ type Props = PropsWithTheme<{
|
|||
export const Divider = styled.div`
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: ${(props: Props) => props.color || props.theme.colors.text};
|
||||
background-color: ${(props: Props) => props.color || props.theme.colors.divider};
|
||||
opacity: ${(props: Props) => String(props.opacity || 1)};
|
||||
margin-bottom: ${(props: Props) => props.marginBottom || '0'};
|
||||
margin-top: ${(props: Props) => props.marginTop || '0'};
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const MenuWrapper = styled.div`
|
|||
margin-left: -10px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
border: 1px solid ${props => props.theme.colors.border}
|
||||
`;
|
||||
|
||||
const MenuItem = styled.button`
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import styled from 'styled-components';
|
|||
import { TextComponent } from './text';
|
||||
import { Button } from './button';
|
||||
|
||||
import ErrorIcon from '../assets/images/error_icon.png';
|
||||
import ErrorIcon from '../assets/images/error_icon_dark.png';
|
||||
|
||||
const ModalWrapper = styled.div`
|
||||
width: 100vw;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ const Title = styled(TextComponent)`
|
|||
text-transform: capitalize;
|
||||
letter-spacing: 0.25px;
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.headerTitle};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
@ -73,7 +74,7 @@ export const HeaderComponent = ({ title }: Props) => (
|
|||
<Title value={title} />
|
||||
<Status type='syncing' progress={0} />
|
||||
</TitleRow>
|
||||
<Divider opacity={0.1} />
|
||||
<Divider opacity={0.2} />
|
||||
</TitleWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import React, { type Element } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
type Props = {
|
||||
inputType?: 'input' | 'textarea',
|
||||
|
|
@ -28,17 +28,23 @@ type DefaultStylesProps = PropsWithTheme<{
|
|||
const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
|
||||
border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||
background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBg};
|
||||
color: ${(props: DefaultStylesProps) => props.theme.colors.text};
|
||||
padding: 15px;
|
||||
padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
||||
border: 1px solid ${(props: DefaultStylesProps) => props.theme.colors.inputBorder};
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: ${(props: DefaultStylesProps) => props.theme.colors.inputBorderActive};
|
||||
}
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
|
@ -104,5 +110,5 @@ InputComponent.defaultProps = {
|
|||
onChange: () => {},
|
||||
onFocus: () => {},
|
||||
step: 1,
|
||||
bgColor: theme.colors.inputBackground,
|
||||
bgColor: appTheme.colors.inputBg,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ const Layout = styled.div`
|
|||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||
overflow: auto;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -3,15 +3,13 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Transition, animated } from 'react-spring';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
import CircleProgressComponent from 'react-circle';
|
||||
import { TextComponent } from './text';
|
||||
|
||||
import zcashLogo from '../assets/images/zcash-simple-icon.svg';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100vw;
|
||||
|
|
@ -20,7 +18,19 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.loadingScreenBg};
|
||||
`;
|
||||
|
||||
const LoadingCard = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
padding: 60px;
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
const CircleWrapper = styled.div`
|
||||
|
|
@ -39,37 +49,33 @@ const Logo = styled.img`
|
|||
left: calc(50% - 25px);
|
||||
`;
|
||||
|
||||
const LoadingText = styled(TextComponent)`
|
||||
color: ${props => props.theme.colors.loadingScreenText};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
progress: number,
|
||||
message: string,
|
||||
};
|
||||
|
||||
type State = {
|
||||
start: boolean,
|
||||
message: string,
|
||||
};
|
||||
|
||||
const TIME_DELAY_ANIM = 100;
|
||||
|
||||
export class LoadingScreen extends PureComponent<Props, State> {
|
||||
state = { start: false, message: 'ZEC Wallet Starting' };
|
||||
state = { start: false };
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({ start: true }));
|
||||
}, TIME_DELAY_ANIM);
|
||||
|
||||
ipcRenderer.on('zcashd-params-download', (event: Object, message: string) => {
|
||||
this.setState(() => ({ message }));
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ipcRenderer.removeAllListeners('zcashd-log');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { start, message } = this.state;
|
||||
const { progress } = this.props;
|
||||
const { start } = this.state;
|
||||
const { progress, message } = this.props;
|
||||
|
||||
return (
|
||||
<Wrapper data-testid='LoadingScreen'>
|
||||
|
|
@ -96,18 +102,19 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
|||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<CircleWrapper>
|
||||
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||
<CircleProgressComponent
|
||||
progress={progress}
|
||||
s // TODO: check if this has any effect
|
||||
responsive
|
||||
showPercentage={false}
|
||||
progressColor={theme.colors.activeItem}
|
||||
bgColor={theme.colors.inactiveItem}
|
||||
/>
|
||||
</CircleWrapper>
|
||||
<TextComponent value={message} />
|
||||
<LoadingCard>
|
||||
<CircleWrapper>
|
||||
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||
<CircleProgressComponent
|
||||
progress={progress}
|
||||
responsive
|
||||
showPercentage={false}
|
||||
progressColor={appTheme.colors.activeItem}
|
||||
bgColor={appTheme.colors.inactiveItem}
|
||||
/>
|
||||
</CircleWrapper>
|
||||
<LoadingText value={message} />
|
||||
</LoadingCard>
|
||||
</animated.div>
|
||||
)}
|
||||
</Transition>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const ModalWrapper = styled.div`
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
`;
|
||||
|
||||
const ChildrenWrapper = styled.div`
|
||||
|
|
@ -103,7 +103,9 @@ export class ModalComponent extends PureComponent<Props, State> {
|
|||
) this.close();
|
||||
}}
|
||||
>
|
||||
<ChildrenWrapper>{children(toggleVisibility)}</ChildrenWrapper>
|
||||
<ChildrenWrapper>
|
||||
{children(toggleVisibility)}
|
||||
</ChildrenWrapper>
|
||||
</ModalWrapper>,
|
||||
this.element,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import { DARK, LIGHT } from '../constants/themes';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import ChevronUp from '../assets/images/chevron-up.svg';
|
||||
import ChevronDown from '../assets/images/chevron-down.svg';
|
||||
|
||||
import theme from '../theme';
|
||||
import ChevronUpLight from '../assets/images/chevron_up_icon_light.svg';
|
||||
import ChevronUpDark from '../assets/images/chevron_up_icon_dark.svg';
|
||||
import ChevronDownLight from '../assets/images/chevron_down_icon_light.svg';
|
||||
import ChevronDownDark from '../assets/images/chevron_down_icon_dark.svg';
|
||||
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
/* eslint-disable max-len */
|
||||
type SelectWrapperProps = PropsWithTheme<{
|
||||
|
|
@ -21,8 +26,8 @@ const SelectWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||
border: 1px solid ${(props: SelectWrapperProps) => props.theme.colors.inputBorder};
|
||||
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBg};
|
||||
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
|
@ -62,9 +67,14 @@ const SelectMenuButton = styled.button`
|
|||
padding: 3px 7px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid
|
||||
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
border: 1px solid
|
||||
${(props: PropsWithTheme<{ isOpen: boolean }>) => (
|
||||
props.isOpen
|
||||
? props.theme.colors.dropdownOpenedIconBorder
|
||||
: props.theme.colors.dropdownIconBorder
|
||||
)};
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
|
|
@ -76,24 +86,28 @@ const OptionsWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`};
|
||||
width: 100.5%;
|
||||
margin-left: -0.25%;
|
||||
border-radius: ${props => props.theme.colors.boxBorderRadius};
|
||||
border: 1px solid ${props => props.theme.colors.inputBorder};
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String(((props.optionsAmount || 0) * 40) + 10)}px`}`};
|
||||
overflow-y: auto;
|
||||
box-shadow: 1px 3px 20px rgba(16, 19, 20, 0.1);
|
||||
`;
|
||||
|
||||
const Option = styled.button`
|
||||
border: none;
|
||||
background: none;
|
||||
height: 40px;
|
||||
background-color: #5d5d5d;
|
||||
background-color: ${props => props.theme.colors.dropdownBg};
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
text-transform: ${(props: PropsWithTheme<{ capitalize: boolean }>) => (props.capitalize ? 'capitalize' : 'none')};
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #4e4b4b;
|
||||
border-bottom: 1px solid ${props => props.theme.colors.dropdownBorder};
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.dropdownHoveredBg};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -111,13 +125,14 @@ type Props = {
|
|||
placement?: 'top' | 'bottom',
|
||||
bgColor?: string,
|
||||
capitalize?: boolean,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
isOpen: boolean,
|
||||
};
|
||||
|
||||
export class SelectComponent extends PureComponent<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = {
|
||||
isOpen: false,
|
||||
};
|
||||
|
|
@ -125,7 +140,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
static defaultProps = {
|
||||
placeholder: '',
|
||||
placement: 'bottom',
|
||||
bgColor: theme.colors.inputBackground,
|
||||
bgColor: appTheme.colors.inputBg,
|
||||
capitalize: true,
|
||||
};
|
||||
|
||||
|
|
@ -151,14 +166,24 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
};
|
||||
|
||||
getSelectIcon = () => {
|
||||
const { placement } = this.props;
|
||||
const { placement, theme } = this.props;
|
||||
const { isOpen } = this.state;
|
||||
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUp : ChevronDown;
|
||||
if (theme.mode === DARK) {
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUpDark : ChevronDownDark;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDownDark : ChevronUpDark;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDown : ChevronUp;
|
||||
if (theme.mode === LIGHT) {
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUpLight : ChevronDownLight;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDownLight : ChevronUpLight;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -176,7 +201,10 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
||||
bgColor={bgColor}
|
||||
>
|
||||
<ValueWrapper hasValue={Boolean(value)} capitalize={capitalize}>
|
||||
<ValueWrapper
|
||||
hasValue={Boolean(value)}
|
||||
capitalize={capitalize}
|
||||
>
|
||||
{this.getSelectedLabel(value) || placeholder}
|
||||
</ValueWrapper>
|
||||
<SelectMenuButtonWrapper>
|
||||
|
|
@ -207,3 +235,5 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const SelectComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
|
||||
/* eslint-disable max-len */
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import type { Location, RouterHistory } from 'react-router-dom';
|
||||
|
||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
|
@ -13,6 +14,7 @@ const Wrapper = styled.div`
|
|||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
background-color: ${props => props.theme.colors.sidebarBg};
|
||||
border-right: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
padding-top: 15px;
|
||||
position: relative;
|
||||
`;
|
||||
|
|
@ -20,11 +22,17 @@ const Wrapper = styled.div`
|
|||
/* eslint-disable max-len */
|
||||
type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
|
||||
const StyledLink = styled.a`
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? props.theme.colors.sidebarItemActive
|
||||
: props.theme.colors.sidebarItem
|
||||
)};
|
||||
background-color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? props.theme.colors.sidebarItemHoveredBg
|
||||
: 'transparent'
|
||||
)};
|
||||
font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
|
||||
text-decoration: none;
|
||||
font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
|
||||
background-color: ${(props: StyledLinkProps) => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
||||
letter-spacing: 0.25px;
|
||||
padding: 25px 20px;
|
||||
height: 35px;
|
||||
|
|
@ -32,13 +40,19 @@ const StyledLink = styled.a`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive(props)}` : 'none')};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
|
||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarActiveItemBorder}` : 'none')};
|
||||
border-top: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
border-bottom: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
|
||||
&:hover {
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
|
||||
border-top: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
border-bottom: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarItemHoveredBg};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItemHovered)}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -47,24 +61,29 @@ const Icon = styled.img`
|
|||
height: 17px;
|
||||
margin-right: 13px;
|
||||
|
||||
opacity: ${(props: any) => (props.isActive ? '1' : '0.3')};
|
||||
|
||||
${StyledLink}:hover & {
|
||||
filter: ${(props: StyledLinkProps) => (props.isActive ? 'none' : 'brightness(300%)')};
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
type MenuItem = {
|
||||
route: string,
|
||||
label: string,
|
||||
icon: (isActive: boolean) => string,
|
||||
icon: (isActive: boolean, themeMode: string) => string,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
history: RouterHistory,
|
||||
options?: MenuItem[],
|
||||
location: Location,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||
export const Component = ({
|
||||
options, location, history, theme,
|
||||
}: Props) => (
|
||||
<Wrapper id='sidebar'>
|
||||
{(options || []).map((item) => {
|
||||
const isActive = location.pathname === item.route;
|
||||
|
|
@ -75,7 +94,11 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
key={item.route}
|
||||
onClick={() => (isActive ? {} : history.push(item.route))}
|
||||
>
|
||||
<Icon isActive={isActive} src={item.icon(isActive)} Alt={`${item.route}`} />
|
||||
<Icon
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive, theme.mode)}
|
||||
Alt={`${item.route}`}
|
||||
/>
|
||||
{item.label}
|
||||
</StyledLink>
|
||||
);
|
||||
|
|
@ -83,6 +106,8 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
</Wrapper>
|
||||
);
|
||||
|
||||
SidebarComponent.defaultProps = {
|
||||
Component.defaultProps = {
|
||||
options: MENU_OPTIONS,
|
||||
};
|
||||
|
||||
export const SidebarComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled, { keyframes, withTheme } from 'styled-components';
|
||||
import eres from 'eres';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
||||
import rpc from '../../services/api';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import readyIcon from '../assets/images/green_check.png';
|
||||
import syncIcon from '../assets/images/sync_icon.png';
|
||||
import errorIcon from '../assets/images/error_icon.png';
|
||||
import readyIconDark from '../assets/images/green_check_dark.png';
|
||||
import readyIconLight from '../assets/images/green_check_light.png';
|
||||
import syncIconDark from '../assets/images/sync_icon_dark.png';
|
||||
import syncIconLight from '../assets/images/sync_icon_light.png';
|
||||
import errorIconDark from '../assets/images/error_icon_dark.png';
|
||||
import errorIconLight from '../assets/images/error_icon_light.png';
|
||||
|
||||
const rotate = keyframes`
|
||||
from {
|
||||
|
|
@ -24,7 +28,8 @@ const rotate = keyframes`
|
|||
const Wrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
background: ${props => props.theme.colors.statusPillBg};
|
||||
border: 1px solid ${props => props.theme.colors.statusPillBorder}
|
||||
border-radius: 27px;
|
||||
padding: 8px 16px;
|
||||
`;
|
||||
|
|
@ -48,7 +53,9 @@ const StatusPillLabel = styled(TextComponent)`
|
|||
user-select: none;
|
||||
`;
|
||||
|
||||
type Props = {};
|
||||
type Props = {
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
type: string,
|
||||
|
|
@ -57,15 +64,25 @@ type State = {
|
|||
isSyncing: boolean,
|
||||
};
|
||||
|
||||
export class StatusPill extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
timer: ?IntervalID = null;
|
||||
|
||||
state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const { theme } = props;
|
||||
|
||||
const syncIcon = theme.mode === DARK
|
||||
? syncIconDark
|
||||
: syncIconLight;
|
||||
|
||||
this.state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.timer = setInterval(() => {
|
||||
|
|
@ -81,6 +98,15 @@ export class StatusPill extends Component<Props, State> {
|
|||
}
|
||||
|
||||
getBlockchainStatus = async () => {
|
||||
const { theme } = this.props;
|
||||
|
||||
const readyIcon = theme.mode === DARK
|
||||
? readyIconDark
|
||||
: readyIconLight;
|
||||
const errorIcon = theme.mode === DARK
|
||||
? errorIconDark
|
||||
: errorIconLight;
|
||||
|
||||
const [blockchainErr, blockchaininfo] = await eres(rpc.getblockchaininfo());
|
||||
|
||||
if (blockchainErr || !blockchaininfo) return;
|
||||
|
|
@ -99,7 +125,10 @@ export class StatusPill extends Component<Props, State> {
|
|||
});
|
||||
|
||||
if (blockchainErr) {
|
||||
this.setState(() => ({ type: 'error', icon: errorIcon }));
|
||||
this.setState(() => ({
|
||||
type: 'error',
|
||||
icon: errorIcon,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -118,3 +147,5 @@ export class StatusPill extends Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const StatusPill = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import type { ElementProps } from 'react';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
export type Props = {
|
||||
...ElementProps<'p'>,
|
||||
|
|
@ -15,6 +15,8 @@ export type Props = {
|
|||
className?: string,
|
||||
size?: string | number,
|
||||
align?: string,
|
||||
onClick?: Function,
|
||||
onDoubleClick?: Function,
|
||||
};
|
||||
|
||||
const Text = styled.p`
|
||||
|
|
@ -28,7 +30,8 @@ const Text = styled.p`
|
|||
`;
|
||||
|
||||
export const TextComponent = ({
|
||||
value, isBold, color, className, size, align, id,
|
||||
value, isBold, color, className, size,
|
||||
align, id, onClick, onDoubleClick,
|
||||
}: Props) => (
|
||||
<Text
|
||||
id={id}
|
||||
|
|
@ -37,6 +40,8 @@ export const TextComponent = ({
|
|||
color={color}
|
||||
size={`${String(size)}em`}
|
||||
align={align}
|
||||
onClick={onClick}
|
||||
onDoubleClick={onDoubleClick}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
|
|
@ -45,7 +50,9 @@ export const TextComponent = ({
|
|||
TextComponent.defaultProps = {
|
||||
className: '',
|
||||
isBold: false,
|
||||
color: theme.colors.text,
|
||||
size: theme.fontSize.regular,
|
||||
color: appTheme.colors.text,
|
||||
size: appTheme.fontSize.regular,
|
||||
align: 'left',
|
||||
onClick: () => {},
|
||||
onDoubleClick: () => {},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import styled from 'styled-components';
|
|||
|
||||
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
||||
import { TextComponent } from './text';
|
||||
import { Divider } from './divider';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin-top: 20px;
|
||||
|
|
@ -41,7 +40,7 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
<TransactionsWrapper>
|
||||
{transactions.map(({
|
||||
date, type, address, amount, transactionId,
|
||||
}, idx) => (
|
||||
}) => (
|
||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||
<TransactionItemComponent
|
||||
transactionId={transactionId}
|
||||
|
|
@ -51,7 +50,6 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
amount={amount}
|
||||
zecPrice={zecPrice}
|
||||
/>
|
||||
{idx < transactions.length - 1 && <Divider />}
|
||||
</Fragment>
|
||||
))}
|
||||
</TransactionsWrapper>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
|
||||
import { ZCASH_EXPLORER_BASE_URL } from '../constants/explorer';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
import CloseIcon from '../assets/images/close_icon.svg';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
|
@ -23,12 +26,12 @@ import { openExternal } from '../utils/open-external';
|
|||
|
||||
const Wrapper = styled.div`
|
||||
width: 460px;
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.transactionDetailsBg};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
box-shadow: ${props => props.theme.colors.transactionDetailsShadow};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
|
@ -71,7 +74,7 @@ const InfoRow = styled(RowComponent)`
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: #1d1d1d;
|
||||
background: ${props => props.theme.colors.transactionDetailsRowHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -85,14 +88,14 @@ const DetailsWrapper = styled.div`
|
|||
|
||||
const Divider = styled.div`
|
||||
width: 100%;
|
||||
background-color: #3a3a3a;
|
||||
background-color: ${props => props.theme.colors.transactionDetailsDivider};
|
||||
height: 1px;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
const Label = styled(TextComponent)`
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
color: ${props => props.theme.colors.transactionDetailsLabel};
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 0.25px;
|
||||
`;
|
||||
|
|
@ -127,9 +130,10 @@ type Props = {
|
|||
from: string,
|
||||
to: string,
|
||||
handleClose: () => void,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = ({
|
||||
const Component = ({
|
||||
amount,
|
||||
type,
|
||||
zecPrice,
|
||||
|
|
@ -138,19 +142,32 @@ export const TransactionDetailsComponent = ({
|
|||
from,
|
||||
to,
|
||||
handleClose,
|
||||
theme,
|
||||
}: Props) => {
|
||||
const isReceived = type === 'receive';
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||||
<CloseIconImg
|
||||
src={CloseIcon}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value='Transaction Details' align='center' />
|
||||
</TitleWrapper>
|
||||
<DetailsWrapper>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon
|
||||
src={isReceived ? receivedIcon : sentIcon}
|
||||
alt='Transaction Type Icon'
|
||||
/>
|
||||
<TextComponent
|
||||
isBold
|
||||
size={2.625}
|
||||
|
|
@ -158,7 +175,7 @@ export const TransactionDetailsComponent = ({
|
|||
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||
value: amount,
|
||||
})}
|
||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||
color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
|
||||
/>
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
|
|
@ -166,7 +183,7 @@ export const TransactionDetailsComponent = ({
|
|||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
})}
|
||||
size={1.5}
|
||||
color={theme.colors.transactionsDetailsLabel}
|
||||
color={appTheme.colors.transactionDetailsLabel}
|
||||
/>
|
||||
</DetailsWrapper>
|
||||
<InfoRow>
|
||||
|
|
@ -175,7 +192,7 @@ export const TransactionDetailsComponent = ({
|
|||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||
</ColumnComponent>
|
||||
<ColumnComponent>
|
||||
<TextComponent value='FEES' isBold color={theme.colors.transactionsDetailsLabel} />
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||
|
|
@ -188,7 +205,13 @@ export const TransactionDetailsComponent = ({
|
|||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TRANSACTION ID' />
|
||||
<TransactionId onClick={() => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)}>
|
||||
<TransactionId
|
||||
onClick={
|
||||
from !== '(Shielded)'
|
||||
? () => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)
|
||||
: () => {}
|
||||
}
|
||||
>
|
||||
<Ellipsis value={transactionId} />
|
||||
</TransactionId>
|
||||
</ColumnComponent>
|
||||
|
|
@ -197,16 +220,18 @@ export const TransactionDetailsComponent = ({
|
|||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='FROM' />
|
||||
<Ellipsis value={truncateAddress(from)} />
|
||||
<Ellipsis value={from} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TO' />
|
||||
<Ellipsis value={truncateAddress(to)} />
|
||||
<Ellipsis value={truncateAddress(to) || 'N/A'} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
|
@ -13,18 +17,22 @@ import { TextComponent } from './text';
|
|||
import { ModalComponent } from './modal';
|
||||
import { TransactionDetailsComponent } from './transaction-details';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
const Wrapper = styled(RowComponent)`
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.transactionItemBg};
|
||||
padding: 15px 17px;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
border-bottom: none;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0a0a0a;
|
||||
background-color: ${props => props.theme.colors.transactionItemHoverBg};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -41,10 +49,10 @@ const TransactionTypeLabel = styled(TextComponent)`
|
|||
/* eslint-enable max-len */
|
||||
|
||||
const TransactionAddress = styled(TextComponent)`
|
||||
color: #a7a7a7;
|
||||
color: ${props => props.theme.colors.transactionItemAddress};
|
||||
|
||||
${String(Wrapper)}:hover & {
|
||||
color: #fff;
|
||||
color: ${props => props.theme.colors.transactionItemAddressHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -65,15 +73,17 @@ export type Transaction = {
|
|||
amount: number,
|
||||
zecPrice: number,
|
||||
transactionId: string,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = ({
|
||||
const Component = ({
|
||||
type,
|
||||
date,
|
||||
address,
|
||||
amount,
|
||||
zecPrice,
|
||||
transactionId,
|
||||
theme,
|
||||
}: Transaction) => {
|
||||
const isReceived = type === 'receive';
|
||||
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
||||
|
|
@ -87,6 +97,13 @@ export const TransactionItemComponent = ({
|
|||
});
|
||||
const transactionAddress = truncateAddress(address);
|
||||
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
renderTrigger={toggleVisibility => (
|
||||
|
|
@ -98,7 +115,7 @@ export const TransactionItemComponent = ({
|
|||
>
|
||||
<RowComponent alignItems='center'>
|
||||
<RowComponent alignItems='center'>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TransactionColumn>
|
||||
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||
<TransactionTime value={transactionTime} />
|
||||
|
|
@ -110,7 +127,10 @@ export const TransactionItemComponent = ({
|
|||
<TextComponent
|
||||
isBold
|
||||
value={transactionValueInZec}
|
||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||
color={isReceived
|
||||
? theme.colors.transactionReceived
|
||||
: theme.colors.transactionSent
|
||||
}
|
||||
/>
|
||||
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||
</ColumnComponent>
|
||||
|
|
@ -132,3 +152,5 @@ export const TransactionItemComponent = ({
|
|||
</ModalComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -1,94 +1,193 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import { ColumnComponent } from './column';
|
||||
import { Button } from './button';
|
||||
import { TextComponent } from './text';
|
||||
import { QRCode } from './qrcode';
|
||||
import { CopyToClipboard } from './copy-to-clipboard';
|
||||
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
import eyeIcon from '../assets/images/eye.png';
|
||||
import CopyIconDark from '../assets/images/copy_icon_dark.svg';
|
||||
import CopyIconLight from '../assets/images/copy_icon_light.svg';
|
||||
import ScanIconDark from '../assets/images/scan_icon_dark.svg';
|
||||
import ScanIconLight from '../assets/images/scan_icon_light.svg';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
const AddressWrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
padding: 7px 13px;
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 0 13px 0 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background: ${props => props.theme.colors.walletAddressBg};
|
||||
border: 1px solid ${props => props.theme.colors.walletAddressBorder};
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
const Address = styled(TextComponent)`
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${props => props.theme.colors.inputBackground};
|
||||
color: ${props => props.theme.colors.text};
|
||||
background-color: ${props => props.theme.colors.inputBg};
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
width: 92%;
|
||||
outline: none;
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
font-size: 13px;
|
||||
color: ${props => props.theme.colors.walletAddressInput};
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
overflow-x: scroll;
|
||||
cursor: pointer;
|
||||
user-select: text;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* // todo: make this theme supported */
|
||||
${AddressWrapper}:hover & {
|
||||
color: ${props => props.theme.colors.walletAddressInputHovered};
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
`;
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
const QRCodeContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
background-color: ${props => props.theme.colors.qrCodeWrapperBg}
|
||||
border: 1px solid ${props => props.theme.colors.qrCodeWrapperBorder}
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
const IconButton = styled.button`
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
width: 28px;
|
||||
margin-left: 3px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const IconImage = styled.img`
|
||||
max-width: 23px;
|
||||
opacity: 0.4;
|
||||
|
||||
${IconButton}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const CopyTooltip = styled.div`
|
||||
background: ${props => props.theme.colors.walletAddressTooltipBg};
|
||||
position: absolute;
|
||||
top: -27px;
|
||||
left: -8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
const TooltipText = styled(TextComponent)`
|
||||
color: ${props => props.theme.colors.walletAddressTooltip};
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
address: string,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
isVisible: boolean,
|
||||
showCopiedTooltip: boolean,
|
||||
showQRCode: boolean,
|
||||
};
|
||||
|
||||
export class WalletAddress extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = {
|
||||
isVisible: false,
|
||||
showQRCode: false,
|
||||
showCopiedTooltip: false,
|
||||
};
|
||||
|
||||
show = () => this.setState(() => ({ isVisible: true }));
|
||||
showMoreInfo = () => this.setState(() => ({ showQRCode: true }));
|
||||
|
||||
hide = () => this.setState(() => ({ isVisible: false }));
|
||||
toggleMoreInfo = () => this.setState(prevState => ({
|
||||
showQRCode: !prevState.showQRCode,
|
||||
}));
|
||||
|
||||
hideTooltip = () => this.setState(() => ({ showCopiedTooltip: false }));
|
||||
|
||||
copyAddress = () => this.setState(
|
||||
() => ({ showCopiedTooltip: true }),
|
||||
() => setTimeout(() => this.hideTooltip(), 1500),
|
||||
);
|
||||
|
||||
render() {
|
||||
const { address } = this.props;
|
||||
const { isVisible } = this.state;
|
||||
const toggleVisibility = isVisible ? this.hide : this.show;
|
||||
const { address, theme } = this.props;
|
||||
const { showQRCode, showCopiedTooltip } = this.state;
|
||||
|
||||
const qrCodeIcon = theme.mode === DARK
|
||||
? ScanIconDark
|
||||
: ScanIconLight;
|
||||
|
||||
const copyIcon = theme.mode === DARK
|
||||
? CopyIconDark
|
||||
: CopyIconLight;
|
||||
|
||||
return (
|
||||
<ColumnComponent width='100%'>
|
||||
<AddressWrapper>
|
||||
<Input
|
||||
value={isVisible ? address : truncateAddress(address)}
|
||||
onChange={() => {}}
|
||||
onFocus={event => event.currentTarget.select()}
|
||||
/>
|
||||
<Button
|
||||
icon={eyeIcon}
|
||||
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
|
||||
onClick={toggleVisibility}
|
||||
variant='secondary'
|
||||
<Address
|
||||
value={address}
|
||||
onClick={this.toggleMoreInfo}
|
||||
onDoubleClick={this.showMoreInfo}
|
||||
/>
|
||||
<CopyToClipboard
|
||||
text={address}
|
||||
onCopy={this.copyAddress}
|
||||
>
|
||||
<IconButton onClick={() => {}}>
|
||||
{!showCopiedTooltip ? null : (
|
||||
<CopyTooltip>
|
||||
<TooltipText value='Copied!' />
|
||||
</CopyTooltip>
|
||||
)}
|
||||
<IconImage
|
||||
src={copyIcon}
|
||||
alt='Copy Address'
|
||||
/>
|
||||
</IconButton>
|
||||
</CopyToClipboard>
|
||||
<IconButton onClick={this.toggleMoreInfo}>
|
||||
<IconImage
|
||||
src={qrCodeIcon}
|
||||
alt='See QRCode'
|
||||
/>
|
||||
</IconButton>
|
||||
</AddressWrapper>
|
||||
{!isVisible ? null : (
|
||||
<QRCodeWrapper>
|
||||
<QRCode value={address} />
|
||||
</QRCodeWrapper>
|
||||
{!showQRCode ? null : (
|
||||
<QRCodeContainer>
|
||||
<QRCodeWrapper>
|
||||
<QRCode value={address} />
|
||||
</QRCodeWrapper>
|
||||
</QRCodeContainer>
|
||||
)}
|
||||
</ColumnComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const WalletAddress = withTheme(Component);
|
||||
|
|
|
|||
|
|
@ -8,12 +8,13 @@ import { RowComponent } from './row';
|
|||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.walletSummaryBg};
|
||||
border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 37px 45px;
|
||||
min-height: 250px;
|
||||
|
|
@ -60,31 +61,31 @@ export const WalletSummaryComponent = ({
|
|||
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||
<ValueBox>
|
||||
<TextComponent
|
||||
size={theme.fontSize.medium * 2.5}
|
||||
size={appTheme.fontSize.medium * 2.5}
|
||||
value={`ZEC ${formatNumber({ value: total })}`}
|
||||
isBold
|
||||
/>
|
||||
<USDValue
|
||||
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
||||
size={theme.fontSize.medium * 2}
|
||||
size={appTheme.fontSize.medium * 2}
|
||||
/>
|
||||
</ValueBox>
|
||||
<RowComponent>
|
||||
<ValueBox>
|
||||
<ShieldedValue value='● SHIELDED' isBold size={theme.fontSize.small} />
|
||||
<ShieldedValue value='● SHIELDED' isBold size={appTheme.fontSize.small} />
|
||||
<TextComponent
|
||||
value={`ZEC ${formatNumber({ value: shielded })}`}
|
||||
isBold
|
||||
size={theme.fontSize.medium}
|
||||
size={appTheme.fontSize.medium}
|
||||
/>
|
||||
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
||||
</ValueBox>
|
||||
<ValueBox>
|
||||
<Label value='● TRANSPARENT' isBold size={theme.fontSize.small} />
|
||||
<Label value='● TRANSPARENT' isBold size={appTheme.fontSize.small} />
|
||||
<TextComponent
|
||||
value={`ZEC ${formatNumber({ value: transparent })}`}
|
||||
isBold
|
||||
size={theme.fontSize.medium}
|
||||
size={appTheme.fontSize.medium}
|
||||
/>
|
||||
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
||||
</ValueBox>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ type Props = {};
|
|||
type State = {
|
||||
isRunning: boolean,
|
||||
progress: number,
|
||||
message: string,
|
||||
};
|
||||
|
||||
/* eslint-disable max-len */
|
||||
|
|
@ -22,6 +23,7 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
|||
state = {
|
||||
isRunning: false,
|
||||
progress: 0,
|
||||
message: 'ZEC Wallet Starting',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -53,21 +55,23 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
|||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
.catch((error) => {
|
||||
const statusMessage = error.message === 'Something went wrong' ? 'ZEC Wallet Starting' : error.message;
|
||||
|
||||
this.setState((state) => {
|
||||
const newProgress = state.progress > 70 ? state.progress + 2.5 : state.progress + 5;
|
||||
return { progress: newProgress > 95 ? 95 : newProgress };
|
||||
return { progress: newProgress > 95 ? 95 : newProgress, message: statusMessage };
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isRunning, progress } = this.state;
|
||||
const { isRunning, progress, message } = this.state;
|
||||
|
||||
if (isRunning) {
|
||||
return <WrappedComponent {...this.props} {...this.state} />;
|
||||
}
|
||||
|
||||
return <LoadingScreen progress={progress} />;
|
||||
return <LoadingScreen progress={progress} message={message} />;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
// @flow
|
||||
|
||||
import DashboardIcon from '../assets/images/dashboard_icon.svg';
|
||||
import DashboardIconDark from '../assets/images/dashboard_icon_dark.svg';
|
||||
import DashboardIconLight from '../assets/images/dashboard_icon_light.svg';
|
||||
import DashboardIconActive from '../assets/images/dashboard_icon_active.svg';
|
||||
import ConsoleIcon from '../assets/images/console_icon.svg';
|
||||
import ConsoleIconDark from '../assets/images/console_icon_dark.svg';
|
||||
import ConsoleIconLight from '../assets/images/console_icon_light.svg';
|
||||
import ConsoleIconActive from '../assets/images/console_icon_active.svg';
|
||||
import SendIcon from '../assets/images/send_icon.svg';
|
||||
import SendIconDark from '../assets/images/send_icon_dark.svg';
|
||||
import SendIconLight from '../assets/images/send_icon_light.svg';
|
||||
import SendIconActive from '../assets/images/send_icon_active.svg';
|
||||
import ReceiveIcon from '../assets/images/receive_icon.svg';
|
||||
import ReceiveIconDark from '../assets/images/receive_icon_dark.svg';
|
||||
import ReceiveIconLight from '../assets/images/receive_icon_light.svg';
|
||||
import ReceiveIconActive from '../assets/images/receive_icon_active.svg';
|
||||
import TransactionsIcon from '../assets/images/transactions_icon.svg';
|
||||
import TransactionsIconDark from '../assets/images/transactions_icon_dark.svg';
|
||||
import TransactionsIconLight from '../assets/images/transactions_icon_light.svg';
|
||||
import TransactionsIconActive from '../assets/images/transactions_icon_active.svg';
|
||||
import SettingsIcon from '../assets/images/settings_icon.svg';
|
||||
import SettingsIconDark from '../assets/images/settings_icon_dark.svg';
|
||||
import SettingsIconLight from '../assets/images/settings_icon_light.svg';
|
||||
import SettingsIconActive from '../assets/images/settings_icon_active.svg';
|
||||
|
||||
import {
|
||||
|
|
@ -21,36 +27,73 @@ import {
|
|||
CONSOLE_ROUTE,
|
||||
TRANSACTIONS_ROUTE,
|
||||
} from './routes';
|
||||
import { LIGHT } from './themes';
|
||||
|
||||
export const MENU_OPTIONS = [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
route: DASHBOARD_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? DashboardIconActive : DashboardIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return DashboardIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? DashboardIconActive : DashboardIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Send',
|
||||
route: SEND_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SendIconActive : SendIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SendIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SendIconActive : SendIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Receive',
|
||||
route: RECEIVE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ReceiveIconActive : ReceiveIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ReceiveIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ReceiveIconActive : ReceiveIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Transactions',
|
||||
route: TRANSACTIONS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? TransactionsIconActive : TransactionsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return TransactionsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? TransactionsIconActive : TransactionsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
route: SETTINGS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SettingsIconActive : SettingsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SettingsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SettingsIconActive : SettingsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Console',
|
||||
route: CONSOLE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ConsoleIconActive : ConsoleIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ConsoleIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ConsoleIconActive : ConsoleIconDark;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
// @flow
|
||||
|
||||
export const LIGHT = 'light';
|
||||
export const DARK = 'dark';
|
||||
// Theme Modifier
|
||||
export const THEME_MODE = 'THEME_MODE';
|
||||
|
||||
// Themes
|
||||
export const LIGHT = 'LIGHT';
|
||||
export const DARK = 'DARK';
|
||||
|
|
|
|||
|
|
@ -1,14 +1,46 @@
|
|||
// @flow
|
||||
|
||||
import eres from 'eres';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { SettingsView } from '../views/settings';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import { loadAddressesSuccess, loadAddressesError } from '../redux/modules/receive';
|
||||
|
||||
const mapStateToProps = ({ walletSummary }: AppState) => ({
|
||||
addresses: walletSummary.addresses,
|
||||
import rpc from '../../services/api';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import type { Dispatch } from '../types/redux';
|
||||
|
||||
export type MapStateToProps = {|
|
||||
addresses: string[],
|
||||
|};
|
||||
|
||||
const mapStateToProps = ({ receive }: AppState): MapStateToProps => ({
|
||||
addresses: receive.addresses,
|
||||
});
|
||||
|
||||
export type MapDispatchToProps = {|
|
||||
loadAddresses: () => Promise<void>,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
loadAddresses: async () => {
|
||||
const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
|
||||
|
||||
const [tAddressesErr, transparentAddresses] = await eres(rpc.getaddressesbyaccount(''));
|
||||
|
||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||
|
||||
dispatch(
|
||||
loadAddressesSuccess({
|
||||
addresses: [...zAddresses, ...transparentAddresses],
|
||||
}),
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// $FlowFixMe
|
||||
export const SettingsContainer = connect(mapStateToProps)(SettingsView);
|
||||
export const SettingsContainer = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(SettingsView);
|
||||
|
|
|
|||
|
|
@ -2,16 +2,15 @@
|
|||
|
||||
import eres from 'eres';
|
||||
import { connect } from 'react-redux';
|
||||
import flow from 'lodash.flow';
|
||||
import groupBy from 'lodash.groupby';
|
||||
import dateFns from 'date-fns';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
import uuidv4 from 'uuid/v4';
|
||||
|
||||
import { TransactionsView } from '../views/transactions';
|
||||
import {
|
||||
loadTransactions,
|
||||
loadTransactionsSuccess,
|
||||
loadTransactionsError,
|
||||
resetTransactionsList,
|
||||
} from '../redux/modules/transactions';
|
||||
import rpc from '../../services/api';
|
||||
import { listShieldedTransactions } from '../../services/shielded-transactions';
|
||||
|
|
@ -21,45 +20,64 @@ import { sortByDescend } from '../utils/sort-by-descend';
|
|||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import type { Dispatch } from '../types/redux';
|
||||
import type { Transaction } from '../components/transaction-item';
|
||||
|
||||
const mapStateToProps = ({ transactions }: AppState) => ({
|
||||
transactions: transactions.list,
|
||||
isLoading: transactions.isLoading,
|
||||
error: transactions.error,
|
||||
zecPrice: transactions.zecPrice,
|
||||
hasNextPage: transactions.hasNextPage,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||
getTransactions: async () => {
|
||||
export type MapStateToProps = {
|
||||
transactions: Transaction[],
|
||||
isLoading: boolean,
|
||||
error: string | null,
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
};
|
||||
|
||||
export type MapDispatchToProps = {|
|
||||
getTransactions: ({
|
||||
offset: number,
|
||||
count: number,
|
||||
shieldedTransactionsCount: number,
|
||||
}) => Promise<void>,
|
||||
resetTransactionsList: () => void,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
resetTransactionsList: () => dispatch(resetTransactionsList()),
|
||||
getTransactions: async ({ offset, count, shieldedTransactionsCount }) => {
|
||||
dispatch(loadTransactions());
|
||||
|
||||
const [transactionsErr, transactions = []] = await eres(rpc.listtransactions('', 200));
|
||||
const [transactionsErr, transactions = []] = await eres(
|
||||
rpc.listtransactions('', count, offset),
|
||||
);
|
||||
|
||||
if (transactionsErr) {
|
||||
return dispatch(loadTransactionsError({ error: transactionsErr.message }));
|
||||
}
|
||||
|
||||
const formattedTransactions = flow([
|
||||
arr => arr.map(transaction => ({
|
||||
transactionId: transaction.txid,
|
||||
const formattedTransactions = sortByDescend('date')(
|
||||
[
|
||||
...transactions,
|
||||
...listShieldedTransactions({ count, offset: shieldedTransactionsCount }),
|
||||
].map(transaction => ({
|
||||
transactionId: transaction.txid ? transaction.txid : uuidv4(),
|
||||
type: transaction.category,
|
||||
date: new Date(transaction.time * 1000).toISOString(),
|
||||
address: transaction.address,
|
||||
amount: new BigNumber(transaction.amount).absoluteValue().toNumber(),
|
||||
})),
|
||||
arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
|
||||
obj => Object.keys(obj).map(day => ({
|
||||
day,
|
||||
jsDay: new Date(day),
|
||||
list: sortByDescend('date')(obj[day]),
|
||||
})),
|
||||
sortByDescend('jsDay'),
|
||||
])([...transactions, ...listShieldedTransactions()]);
|
||||
);
|
||||
|
||||
dispatch(
|
||||
loadTransactionsSuccess({
|
||||
list: formattedTransactions,
|
||||
zecPrice: new BigNumber(store.get('ZEC_DOLLAR_PRICE')).toNumber(),
|
||||
hasNextPage: Boolean(formattedTransactions.length),
|
||||
}),
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// @flow
|
||||
|
||||
import uniqBy from 'lodash.uniqby';
|
||||
import type { Action } from '../../types/redux';
|
||||
import type { Transaction } from '../../components/transaction-item';
|
||||
|
||||
|
|
@ -7,6 +7,7 @@ import type { Transaction } from '../../components/transaction-item';
|
|||
export const LOAD_TRANSACTIONS = 'LOAD_TRANSACTIONS';
|
||||
export const LOAD_TRANSACTIONS_SUCCESS = 'LOAD_TRANSACTIONS_SUCCESS';
|
||||
export const LOAD_TRANSACTIONS_ERROR = 'LOAD_TRANSACTIONS_ERROR';
|
||||
export const RESET_TRANSACTIONS_LIST = 'RESET_TRANSACTIONS_LIST';
|
||||
|
||||
export type TransactionsList = { day: string, list: Transaction[] }[];
|
||||
|
||||
|
|
@ -18,14 +19,17 @@ export const loadTransactions = () => ({
|
|||
export const loadTransactionsSuccess = ({
|
||||
list,
|
||||
zecPrice,
|
||||
hasNextPage,
|
||||
}: {
|
||||
list: TransactionsList,
|
||||
list: Transaction[],
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
}) => ({
|
||||
type: LOAD_TRANSACTIONS_SUCCESS,
|
||||
payload: {
|
||||
list,
|
||||
zecPrice,
|
||||
hasNextPage,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -34,11 +38,17 @@ export const loadTransactionsError = ({ error }: { error: string }) => ({
|
|||
payload: { error },
|
||||
});
|
||||
|
||||
export const resetTransactionsList = () => ({
|
||||
type: RESET_TRANSACTIONS_LIST,
|
||||
payload: {},
|
||||
});
|
||||
|
||||
export type State = {
|
||||
isLoading: boolean,
|
||||
error: string | null,
|
||||
list: TransactionsList,
|
||||
list: Transaction[],
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
|
|
@ -46,6 +56,7 @@ const initialState = {
|
|||
list: [],
|
||||
error: null,
|
||||
isLoading: false,
|
||||
hasNextPage: true,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line
|
||||
|
|
@ -61,6 +72,7 @@ export default (state: State = initialState, action: Action) => {
|
|||
return {
|
||||
...state,
|
||||
...action.payload,
|
||||
list: uniqBy(state.list.concat(action.payload.list), tr => tr.transactionId + tr.type),
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
|
@ -70,6 +82,13 @@ export default (state: State = initialState, action: Action) => {
|
|||
isLoading: false,
|
||||
error: action.payload.error,
|
||||
};
|
||||
case RESET_TRANSACTIONS_LIST:
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
list: [],
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
176
app/theme.js
176
app/theme.js
|
|
@ -1,176 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Node } from 'react';
|
||||
import theme from 'styled-theming';
|
||||
import { ThemeProvider, createGlobalStyle } from 'styled-components';
|
||||
// $FlowFixMe
|
||||
import { normalize } from 'polished'; // eslint-disable-line
|
||||
|
||||
import { DARK } from './constants/themes';
|
||||
|
||||
const darkOne = '#F4B728';
|
||||
const blackTwo = '#171717';
|
||||
const lightOne = '#ffffff';
|
||||
const brandOne = '#000';
|
||||
const brandThree = '#5d5d65';
|
||||
const buttonBorderColor = '#3e3c42';
|
||||
const activeItem = '#F4B728';
|
||||
const text = '#FFF';
|
||||
const cardBackgroundColor = '#000';
|
||||
const sidebarLogoGradientBegin = '#F4B728';
|
||||
const sidebarLogoGradientEnd = '#FFE240';
|
||||
const sidebarHoveredItem = '#1C1C1C';
|
||||
const sidebarHoveredItemLabel = '#8e8e96';
|
||||
const background = '#212124';
|
||||
const transactionSent = '#FF6C6C';
|
||||
const transactionReceived = '#6AEAC0';
|
||||
const transactionsDate = '#777777';
|
||||
const transactionsItemHovered = '#222222';
|
||||
const selectButtonShadow = 'rgba(238,201,76,0.65)';
|
||||
const statusPillLabel = '#727272';
|
||||
const transactionsDetailsLabel = transactionsDate;
|
||||
|
||||
const appTheme: AppTheme = {
|
||||
mode: DARK,
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: {
|
||||
bold: 700,
|
||||
default: 400,
|
||||
light: 300,
|
||||
},
|
||||
fontSize: {
|
||||
large: 1.25,
|
||||
medium: 1.125,
|
||||
regular: 0.84375,
|
||||
small: 0.667,
|
||||
},
|
||||
colors: {
|
||||
primary: theme('mode', {
|
||||
light: lightOne,
|
||||
dark: darkOne,
|
||||
}),
|
||||
secondary: theme('mode', {
|
||||
light: darkOne,
|
||||
dark: lightOne,
|
||||
}),
|
||||
sidebarBg: theme('mode', {
|
||||
light: brandOne,
|
||||
dark: brandOne,
|
||||
}),
|
||||
sidebarItem: theme('mode', {
|
||||
light: brandThree,
|
||||
dark: brandThree,
|
||||
}),
|
||||
sidebarItemActive: theme('mode', {
|
||||
light: activeItem,
|
||||
dark: activeItem,
|
||||
}),
|
||||
sidebarHoveredItem: theme('mode', {
|
||||
light: sidebarHoveredItem,
|
||||
dark: sidebarHoveredItem,
|
||||
}),
|
||||
sidebarHoveredItemLabel: theme('mode', {
|
||||
light: sidebarHoveredItemLabel,
|
||||
dark: sidebarHoveredItemLabel,
|
||||
}),
|
||||
cardBackgroundColor: theme('mode', {
|
||||
light: cardBackgroundColor,
|
||||
dark: cardBackgroundColor,
|
||||
}),
|
||||
text: theme('mode', {
|
||||
light: '#000',
|
||||
dark: text,
|
||||
}),
|
||||
activeItem: theme('mode', {
|
||||
light: activeItem,
|
||||
dark: activeItem,
|
||||
}),
|
||||
inactiveItem: theme('mode', {
|
||||
light: brandThree,
|
||||
dark: brandThree,
|
||||
}),
|
||||
sidebarLogoGradientBegin: theme('mode', {
|
||||
light: sidebarLogoGradientBegin,
|
||||
dark: sidebarLogoGradientBegin,
|
||||
}),
|
||||
sidebarLogoGradientEnd: theme('mode', {
|
||||
light: sidebarLogoGradientEnd,
|
||||
dark: sidebarLogoGradientEnd,
|
||||
}),
|
||||
background: theme('mode', {
|
||||
light: '#FFF',
|
||||
dark: background,
|
||||
}),
|
||||
transactionSent: theme('mode', {
|
||||
light: transactionSent,
|
||||
dark: transactionSent,
|
||||
}),
|
||||
transactionReceived: theme('mode', {
|
||||
light: transactionReceived,
|
||||
dark: transactionReceived,
|
||||
}),
|
||||
transactionsDate: theme('mode', {
|
||||
light: transactionsDate,
|
||||
dark: transactionsDate,
|
||||
}),
|
||||
transactionsItemHovered: theme('mode', {
|
||||
light: transactionsItemHovered,
|
||||
dark: transactionsItemHovered,
|
||||
}),
|
||||
inputBackground: theme('mode', {
|
||||
light: brandOne,
|
||||
dark: brandOne,
|
||||
}),
|
||||
selectButtonShadow: theme('mode', {
|
||||
light: selectButtonShadow,
|
||||
dark: selectButtonShadow,
|
||||
}),
|
||||
transactionsDetailsLabel: theme('mode', {
|
||||
light: transactionsDetailsLabel,
|
||||
dark: transactionsDetailsLabel,
|
||||
}),
|
||||
statusPillLabel: theme('mode', {
|
||||
light: statusPillLabel,
|
||||
dark: statusPillLabel,
|
||||
}),
|
||||
modalItemLabel: theme('mode', {
|
||||
light: transactionsDate,
|
||||
dark: transactionsDate,
|
||||
}),
|
||||
blackTwo: theme('mode', {
|
||||
light: blackTwo,
|
||||
dark: blackTwo,
|
||||
}),
|
||||
buttonBorderColor: theme('mode', {
|
||||
light: buttonBorderColor,
|
||||
dark: buttonBorderColor,
|
||||
}),
|
||||
},
|
||||
sidebarWidth: '180px',
|
||||
headerHeight: '60px',
|
||||
layoutPaddingLeft: '35px',
|
||||
layoutPaddingRight: '35px',
|
||||
layoutContentPaddingTop: '20px',
|
||||
boxBorderRadius: '3px',
|
||||
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
};
|
||||
|
||||
export const GlobalStyle = createGlobalStyle`
|
||||
${normalize()}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Fragment>
|
||||
<GlobalStyle />
|
||||
{children()}
|
||||
</Fragment>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line
|
||||
export default appTheme;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
// @flow
|
||||
|
||||
const white = '#FFFFFF';
|
||||
const text = white;
|
||||
const brand = '#F4B728';
|
||||
const brand2 = '#FFE240';
|
||||
const black = '#000000';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#6AEAC0';
|
||||
const darkBrand = '#212124';
|
||||
const brandThree = '#5d5d65';
|
||||
|
||||
export const DARK_COLORS = {
|
||||
darkOne: brand,
|
||||
blackTwo: '#171717',
|
||||
lightOne: text,
|
||||
brandOne: black,
|
||||
brandThree: '#5d5d65',
|
||||
buttonBorderColor: '#3e3c42',
|
||||
activeItem: brand,
|
||||
text,
|
||||
background: '#212124',
|
||||
|
||||
// Dropdown
|
||||
dropdownBg: '#5d5d5d',
|
||||
dropdownHoveredBg: '#212124',
|
||||
dropdownBorder: '#4e4b4b',
|
||||
dropdownIconBorder: '#828282',
|
||||
dropdownOpenedIconBorder: '#ddd',
|
||||
|
||||
// Card
|
||||
cardBackgroundColor: black,
|
||||
sendCardBg: black,
|
||||
sendCardBorder: 'transparent',
|
||||
|
||||
// Buttons
|
||||
buttonPrimaryBg: brand,
|
||||
buttonPrimaryDisabledBg: brand,
|
||||
buttonPrimaryText: black,
|
||||
buttonSecondaryBg: '#ddd',
|
||||
buttonSecondaryDisabledBg: brand,
|
||||
buttonSecondaryText: black,
|
||||
buttonSecondaryBorder: '#ddd',
|
||||
buttonSecondaryHoveredBg: '#bbb',
|
||||
|
||||
// Transactions
|
||||
transactionSent: error,
|
||||
transactionReceived: success,
|
||||
transactionsDate: '#777777',
|
||||
transactionsItemHovered: '#222222',
|
||||
|
||||
transactionItemBg: black,
|
||||
transactionItemHoverBg: '#0A0A0A',
|
||||
transactionItemBorder: 'transparent',
|
||||
transactionItemAddress: '#A7A7A7',
|
||||
transactionItemAddressHover: white,
|
||||
|
||||
transactionDetailsShadow: `0px 0px 20px 0px ${black}`,
|
||||
transactionDetailsBg: darkBrand,
|
||||
transactionDetailsRowHover: '#1D1D1D',
|
||||
transactionDetailsDivider: '#3A3A3A',
|
||||
transactionDetailsLabel: '#777777',
|
||||
|
||||
// Status Pill
|
||||
statusPillLabel: '#727272',
|
||||
statusPillBg: black,
|
||||
statusPillBorder: black,
|
||||
|
||||
// Sidebar
|
||||
sidebarBg: black,
|
||||
sidebarBorderRight: black,
|
||||
sidebarLogoGradientBegin: brand,
|
||||
sidebarLogoGradientEnd: brand2,
|
||||
sidebarHoveredItemLabel: '#8e8e96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
sidebarItem: brandThree,
|
||||
sidebarItemActive: brand,
|
||||
sidebarItemHovered: '#FFF',
|
||||
sidebarItemHoveredBg: darkBrand,
|
||||
|
||||
// Misc
|
||||
divider: black,
|
||||
qrCodeWrapperBg: black,
|
||||
qrCodeWrapperBorder: black,
|
||||
headerTitle: text,
|
||||
selectButtonShadow: 'rgba(238,201,76,0.65)',
|
||||
|
||||
// Forms
|
||||
inputBg: black,
|
||||
inputBorder: 'transparent',
|
||||
inputBorderActive: '#222',
|
||||
|
||||
// Wallet Summary
|
||||
walletSummaryBg: black,
|
||||
walletSummaryBorder: black,
|
||||
|
||||
// Wallet Address
|
||||
walletAddressBg: black,
|
||||
walletAddressBorder: black,
|
||||
walletAddressInput: '#828282',
|
||||
walletAddressInputHovered: white,
|
||||
walletAddressTooltip: black,
|
||||
walletAddressTooltipBg: white,
|
||||
|
||||
// Console
|
||||
consoleBg: black,
|
||||
consoleBorder: 'transparent',
|
||||
|
||||
// Settings
|
||||
settingsCardBg: black,
|
||||
settingsLearnMore: '#AAAAAA',
|
||||
settingsLearnMoreHovered: '#fff',
|
||||
|
||||
// Loading
|
||||
loadingScreenBg: black,
|
||||
loadingScreenText: white,
|
||||
|
||||
// Misc
|
||||
sendAdditionalOptionsBg: black,
|
||||
sendAdditionalOptionsBorder: black,
|
||||
sendAdditionalInputBg: darkBrand,
|
||||
sendAdditionalInputText: white,
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
// @flow
|
||||
|
||||
export { DARK_COLORS } from './dark';
|
||||
export { LIGHT_COLORS } from './light';
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
// @flow
|
||||
|
||||
const white = '#FFFFFF';
|
||||
const whiteHover = '#F9FBFE';
|
||||
const offWhite = '#F9F9F9';
|
||||
const black = '#000000';
|
||||
const text = '#142533';
|
||||
const secondaryText = '#777777';
|
||||
const brand = '#5684EB';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#66BE54';
|
||||
const logo = '#F4B728';
|
||||
const logo2 = '#FFE240';
|
||||
const border = '#DDDDDD';
|
||||
|
||||
export const LIGHT_COLORS = {
|
||||
// General
|
||||
background: offWhite,
|
||||
text,
|
||||
darkOne: brand,
|
||||
blackTwo: '#171717',
|
||||
lightOne: white,
|
||||
brandOne: '#000',
|
||||
brandThree: '#5D5D65',
|
||||
buttonBorderColor: '#3E3C42',
|
||||
activeItem: brand,
|
||||
|
||||
// Dropdown
|
||||
dropdownBg: offWhite,
|
||||
dropdownHoveredBg: white,
|
||||
dropdownBorder: border,
|
||||
dropdownIconBorder: '#c1c1c1',
|
||||
dropdownOpenedIconBorder: '#828282',
|
||||
|
||||
// Buttons
|
||||
buttonPrimaryBg: brand,
|
||||
buttonPrimaryDisabledBg: brand,
|
||||
buttonPrimaryText: white,
|
||||
buttonSecondaryBg: '#989898',
|
||||
buttonSecondaryDisabledBg: brand,
|
||||
buttonSecondaryBorder: '#989898',
|
||||
buttonSecondaryText: white,
|
||||
buttonSecondaryHoveredBg: '#aaa',
|
||||
|
||||
// Card
|
||||
cardBackgroundColor: black,
|
||||
sendCardBg: white,
|
||||
sendCardBorder: border,
|
||||
|
||||
// Sidebar
|
||||
sidebarBg: white,
|
||||
sidebarBorderRight: border,
|
||||
sidebarLogoGradientBegin: logo,
|
||||
sidebarLogoGradientEnd: logo2,
|
||||
sidebarHoveredItemLabel: '#8E8E96',
|
||||
sidebarItem: '#aaa',
|
||||
sidebarItemActive: text,
|
||||
sidebarItemHovered: text,
|
||||
sidebarItemHoveredBg: offWhite,
|
||||
sidebarActiveItemLabel: '#8E8E96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
|
||||
// Transactions
|
||||
transactionSent: error,
|
||||
transactionReceived: success,
|
||||
transactionsDate: secondaryText,
|
||||
transactionsItemHovered: '#222222',
|
||||
|
||||
// Transaction Item
|
||||
transactionItemBg: white,
|
||||
transactionItemHoverBg: whiteHover,
|
||||
transactionItemBorder: border,
|
||||
transactionItemAddress: '#666666',
|
||||
transactionItemAddressHover: '#666666',
|
||||
|
||||
// Transaction Details
|
||||
transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
|
||||
transactionDetailsBg: white,
|
||||
transactionDetailsRowHover: whiteHover,
|
||||
transactionDetailsDivider: border,
|
||||
transactionDetailsLabel: '#999999',
|
||||
|
||||
// Select
|
||||
selectButtonShadow: 'rgba(238,201,76,0.65)',
|
||||
|
||||
// Status Pill
|
||||
statusPillLabel: text,
|
||||
statusPillBg: '#F9FBFE',
|
||||
statusPillBorder: border,
|
||||
|
||||
// QR Code
|
||||
qrCodeWrapperBg: white,
|
||||
qrCodeWrapperBorder: border,
|
||||
|
||||
// Header
|
||||
headerTitle: text,
|
||||
|
||||
// Wallet Summary
|
||||
walletSummaryBg: white,
|
||||
walletSummaryBorder: border,
|
||||
|
||||
// Wallet Address
|
||||
walletAddressBg: white,
|
||||
walletAddressBorder: border,
|
||||
walletAddressInput: '#666',
|
||||
walletAddressInputHovered: black,
|
||||
walletAddressTooltip: white,
|
||||
walletAddressTooltipBg: black,
|
||||
|
||||
// Forms
|
||||
inputBg: white,
|
||||
inputBorder: border,
|
||||
inputBorderActive: '#828282',
|
||||
|
||||
// Console
|
||||
consoleBg: white,
|
||||
consoleBorder: border,
|
||||
|
||||
// Misc
|
||||
divider: '#AAAAAA',
|
||||
|
||||
// Settings
|
||||
settingsCardBg: white,
|
||||
settingsLearnMore: '#a0a0a0',
|
||||
settingsLearnMoreHovered: '#000',
|
||||
|
||||
// Loading
|
||||
loadingScreenBg: offWhite,
|
||||
loadingScreenText: white,
|
||||
|
||||
// Additional Panes
|
||||
sendAdditionalOptionsBg: white,
|
||||
sendAdditionalOptionsBorder: border,
|
||||
sendAdditionalInputBg: offWhite,
|
||||
sendAdditionalInputText: white,
|
||||
};
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Node } from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { appTheme } from './theme';
|
||||
import { GlobalStyle } from './global';
|
||||
|
||||
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Fragment>
|
||||
<GlobalStyle />
|
||||
{children()}
|
||||
</Fragment>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// @flow
|
||||
|
||||
// $FlowFixMe
|
||||
import { normalize } from 'polished'; // eslint-disable-line
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
export const GlobalStyle = createGlobalStyle`
|
||||
${normalize()}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// @flow
|
||||
|
||||
export { appTheme } from './theme';
|
||||
export { DoczWrapper } from './docz';
|
||||
export { GlobalStyle } from './global';
|
||||
|
|
@ -0,0 +1,346 @@
|
|||
// @flow
|
||||
|
||||
import theme from 'styled-theming';
|
||||
|
||||
import { DARK, LIGHT } from '../constants/themes';
|
||||
import { typography } from './typography';
|
||||
import { DARK_COLORS, LIGHT_COLORS } from './colors';
|
||||
|
||||
export const appTheme: AppTheme = {
|
||||
// General
|
||||
mode: DARK,
|
||||
|
||||
// Typography
|
||||
...typography,
|
||||
|
||||
// Spacing
|
||||
sidebarWidth: '180px',
|
||||
headerHeight: '60px',
|
||||
layoutPaddingLeft: '35px',
|
||||
layoutPaddingRight: '35px',
|
||||
layoutContentPaddingTop: '20px',
|
||||
boxBorderRadius: '3px',
|
||||
|
||||
// Misc
|
||||
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
|
||||
// Colors
|
||||
colors: {
|
||||
primary: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.darkOne,
|
||||
[DARK]: DARK_COLORS.darkOne,
|
||||
}),
|
||||
secondary: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.darkOne,
|
||||
[DARK]: DARK_COLORS.darkOne,
|
||||
}),
|
||||
divider: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.divider,
|
||||
[DARK]: DARK_COLORS.divider,
|
||||
}),
|
||||
sidebarBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarBg,
|
||||
[DARK]: DARK_COLORS.sidebarBg,
|
||||
}),
|
||||
sidebarItem: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItem,
|
||||
[DARK]: DARK_COLORS.sidebarItem,
|
||||
}),
|
||||
sidebarItemActive: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemActive,
|
||||
[DARK]: DARK_COLORS.sidebarItemActive,
|
||||
}),
|
||||
sidebarItemHovered: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemHovered,
|
||||
[DARK]: DARK_COLORS.sidebarItemHovered,
|
||||
}),
|
||||
sidebarHoveredItemLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarHoveredItemLabel,
|
||||
[DARK]: DARK_COLORS.sidebarHoveredItemLabel,
|
||||
}),
|
||||
cardBackgroundColor: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.cardBackgroundColor,
|
||||
[DARK]: DARK_COLORS.cardBackgroundColor,
|
||||
}),
|
||||
text: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.text,
|
||||
[DARK]: DARK_COLORS.text,
|
||||
}),
|
||||
activeItem: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.activeItem,
|
||||
[DARK]: DARK_COLORS.activeItem,
|
||||
}),
|
||||
inactiveItem: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.brandThree,
|
||||
[DARK]: DARK_COLORS.brandThree,
|
||||
}),
|
||||
sidebarLogoGradientBegin: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarLogoGradientBegin,
|
||||
[DARK]: DARK_COLORS.sidebarLogoGradientBegin,
|
||||
}),
|
||||
sidebarLogoGradientEnd: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarLogoGradientEnd,
|
||||
[DARK]: DARK_COLORS.sidebarLogoGradientEnd,
|
||||
}),
|
||||
background: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.background,
|
||||
[DARK]: DARK_COLORS.background,
|
||||
}),
|
||||
transactionSent: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionSent,
|
||||
[DARK]: DARK_COLORS.transactionSent,
|
||||
}),
|
||||
transactionReceived: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionReceived,
|
||||
[DARK]: DARK_COLORS.transactionReceived,
|
||||
}),
|
||||
transactionsDate: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionsDate,
|
||||
[DARK]: DARK_COLORS.transactionsDate,
|
||||
}),
|
||||
transactionsItemHovered: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionsItemHovered,
|
||||
[DARK]: DARK_COLORS.transactionsItemHovered,
|
||||
}),
|
||||
inputBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.inputBg,
|
||||
[DARK]: DARK_COLORS.inputBg,
|
||||
}),
|
||||
selectButtonShadow: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.selectButtonShadow,
|
||||
[DARK]: DARK_COLORS.selectButtonShadow,
|
||||
}),
|
||||
transactionDetailsLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsLabel,
|
||||
[DARK]: DARK_COLORS.transactionDetailsLabel,
|
||||
}),
|
||||
statusPillLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.statusPillLabel,
|
||||
[DARK]: DARK_COLORS.statusPillLabel,
|
||||
}),
|
||||
modalItemLabel: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionsDate,
|
||||
[DARK]: DARK_COLORS.transactionsDate,
|
||||
}),
|
||||
blackTwo: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.blackTwo,
|
||||
[DARK]: DARK_COLORS.blackTwo,
|
||||
}),
|
||||
buttonBorderColor: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonBorderColor,
|
||||
[DARK]: DARK_COLORS.buttonBorderColor,
|
||||
}),
|
||||
headerTitle: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.headerTitle,
|
||||
[DARK]: DARK_COLORS.headerTitle,
|
||||
}),
|
||||
statusPillBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.statusPillBg,
|
||||
[DARK]: DARK_COLORS.statusPillBg,
|
||||
}),
|
||||
walletSummaryBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletSummaryBg,
|
||||
[DARK]: DARK_COLORS.walletSummaryBg,
|
||||
}),
|
||||
walletSummaryBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletSummaryBorder,
|
||||
[DARK]: DARK_COLORS.walletSummaryBorder,
|
||||
}),
|
||||
consoleBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.consoleBg,
|
||||
[DARK]: DARK_COLORS.consoleBg,
|
||||
}),
|
||||
sidebarBorderRight: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarBorderRight,
|
||||
[DARK]: DARK_COLORS.sidebarBorderRight,
|
||||
}),
|
||||
qrCodeWrapperBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBg,
|
||||
[DARK]: DARK_COLORS.qrCodeWrapperBg,
|
||||
}),
|
||||
statusPillBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.statusPillBorder,
|
||||
[DARK]: DARK_COLORS.statusPillBorder,
|
||||
}),
|
||||
sidebarActiveItemBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarActiveItemBorder,
|
||||
[DARK]: DARK_COLORS.sidebarActiveItemBorder,
|
||||
}),
|
||||
transactionItemBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemBg,
|
||||
[DARK]: DARK_COLORS.transactionItemBg,
|
||||
}),
|
||||
transactionItemHoverBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemHoverBg,
|
||||
[DARK]: DARK_COLORS.transactionItemHoverBg,
|
||||
}),
|
||||
transactionItemBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemBorder,
|
||||
[DARK]: DARK_COLORS.transactionItemBorder,
|
||||
}),
|
||||
transactionItemAddress: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemAddress,
|
||||
[DARK]: DARK_COLORS.transactionItemAddress,
|
||||
}),
|
||||
transactionItemAddressHover: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionItemAddressHover,
|
||||
[DARK]: DARK_COLORS.transactionItemAddressHover,
|
||||
}),
|
||||
transactionDetailsShadow: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsShadow,
|
||||
[DARK]: DARK_COLORS.transactionDetailsShadow,
|
||||
}),
|
||||
transactionDetailsBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsBg,
|
||||
[DARK]: DARK_COLORS.transactionDetailsBg,
|
||||
}),
|
||||
transactionDetailsRowHover: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsRowHover,
|
||||
[DARK]: DARK_COLORS.transactionDetailsRowHover,
|
||||
}),
|
||||
transactionDetailsDivider: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.transactionDetailsDivider,
|
||||
[DARK]: DARK_COLORS.transactionDetailsDivider,
|
||||
}),
|
||||
inputBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.inputBorder,
|
||||
[DARK]: DARK_COLORS.inputBorder,
|
||||
}),
|
||||
sidebarItemHoveredBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sidebarItemHoveredBg,
|
||||
[DARK]: DARK_COLORS.sidebarItemHoveredBg,
|
||||
}),
|
||||
consoleBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.consoleBorder,
|
||||
[DARK]: DARK_COLORS.consoleBorder,
|
||||
}),
|
||||
sendCardBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendCardBg,
|
||||
[DARK]: DARK_COLORS.sendCardBg,
|
||||
}),
|
||||
sendCardBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendCardBorder,
|
||||
[DARK]: DARK_COLORS.sendCardBorder,
|
||||
}),
|
||||
walletAddressBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressBg,
|
||||
[DARK]: DARK_COLORS.walletAddressBg,
|
||||
}),
|
||||
walletAddressBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressBorder,
|
||||
[DARK]: DARK_COLORS.walletAddressBorder,
|
||||
}),
|
||||
walletAddressInput: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressInput,
|
||||
[DARK]: DARK_COLORS.walletAddressInput,
|
||||
}),
|
||||
walletAddressInputHovered: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressInputHovered,
|
||||
[DARK]: DARK_COLORS.walletAddressInputHovered,
|
||||
}),
|
||||
dropdownBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.dropdownBg,
|
||||
[DARK]: DARK_COLORS.dropdownBg,
|
||||
}),
|
||||
dropdownHoveredBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.dropdownHoveredBg,
|
||||
[DARK]: DARK_COLORS.dropdownHoveredBg,
|
||||
}),
|
||||
dropdownBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.dropdownBorder,
|
||||
[DARK]: DARK_COLORS.dropdownBorder,
|
||||
}),
|
||||
settingsCardBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.settingsCardBg,
|
||||
[DARK]: DARK_COLORS.settingsCardBg,
|
||||
}),
|
||||
settingsLearnMore: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.settingsLearnMore,
|
||||
[DARK]: DARK_COLORS.settingsLearnMore,
|
||||
}),
|
||||
settingsLearnMoreHovered: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.settingsLearnMoreHovered,
|
||||
[DARK]: DARK_COLORS.settingsLearnMoreHovered,
|
||||
}),
|
||||
buttonPrimaryText: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonPrimaryText,
|
||||
[DARK]: DARK_COLORS.buttonPrimaryText,
|
||||
}),
|
||||
buttonSecondaryText: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonSecondaryText,
|
||||
[DARK]: DARK_COLORS.buttonSecondaryText,
|
||||
}),
|
||||
buttonPrimaryBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonPrimaryBg,
|
||||
[DARK]: DARK_COLORS.buttonPrimaryBg,
|
||||
}),
|
||||
buttonSecondaryBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonSecondaryBg,
|
||||
[DARK]: DARK_COLORS.buttonSecondaryBg,
|
||||
}),
|
||||
buttonPrimaryDisabledBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonPrimaryDisabledBg,
|
||||
[DARK]: DARK_COLORS.buttonPrimaryDisabledBg,
|
||||
}),
|
||||
buttonSecondaryDisabledBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonSecondaryDisabledBg,
|
||||
[DARK]: DARK_COLORS.buttonSecondaryDisabledBg,
|
||||
}),
|
||||
buttonSecondaryBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonSecondaryBorder,
|
||||
[DARK]: DARK_COLORS.buttonSecondaryBorder,
|
||||
}),
|
||||
buttonSecondaryHoveredBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.buttonSecondaryHoveredBg,
|
||||
[DARK]: DARK_COLORS.buttonSecondaryHoveredBg,
|
||||
}),
|
||||
dropdownIconBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.dropdownIconBorder,
|
||||
[DARK]: DARK_COLORS.dropdownIconBorder,
|
||||
}),
|
||||
dropdownOpenedIconBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.dropdownOpenedIconBorder,
|
||||
[DARK]: DARK_COLORS.dropdownOpenedIconBorder,
|
||||
}),
|
||||
inputBorderActive: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.inputBorderActive,
|
||||
[DARK]: DARK_COLORS.inputBorderActive,
|
||||
}),
|
||||
walletAddressTooltipBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressTooltipBg,
|
||||
[DARK]: DARK_COLORS.walletAddressTooltipBg,
|
||||
}),
|
||||
qrCodeWrapperBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBorder,
|
||||
[DARK]: DARK_COLORS.qrCodeWrapperBorder,
|
||||
}),
|
||||
walletAddressTooltip: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.walletAddressTooltip,
|
||||
[DARK]: DARK_COLORS.walletAddressTooltip,
|
||||
}),
|
||||
loadingScreenBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.loadingScreenBg,
|
||||
[DARK]: DARK_COLORS.loadingScreenBg,
|
||||
}),
|
||||
loadingScreenText: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.loadingScreenText,
|
||||
[DARK]: DARK_COLORS.loadingScreenText,
|
||||
}),
|
||||
sendAdditionalOptionsBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendAdditionalOptionsBg,
|
||||
[DARK]: DARK_COLORS.sendAdditionalOptionsBg,
|
||||
}),
|
||||
sendAdditionalOptionsBorder: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendAdditionalOptionsBorder,
|
||||
[DARK]: DARK_COLORS.sendAdditionalOptionsBorder,
|
||||
}),
|
||||
sendAdditionalInputBg: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendAdditionalInputBg,
|
||||
[DARK]: DARK_COLORS.sendAdditionalInputBg,
|
||||
}),
|
||||
sendAdditionalInputText: theme('mode', {
|
||||
[LIGHT]: LIGHT_COLORS.sendAdditionalInputText,
|
||||
[DARK]: DARK_COLORS.sendAdditionalInputText,
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// @flow
|
||||
|
||||
const FONT_FAMILY = 'Roboto';
|
||||
|
||||
export const typography = {
|
||||
fontFamily: FONT_FAMILY,
|
||||
fontWeight: {
|
||||
bold: 700,
|
||||
default: 400,
|
||||
light: 300,
|
||||
},
|
||||
fontSize: {
|
||||
large: 1.25,
|
||||
medium: 1.125,
|
||||
regular: 0.84375,
|
||||
small: 0.667,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,21 +1,25 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { ipcRenderer } from 'electron';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import uuid from 'uuid/v4';
|
||||
|
||||
import { TextComponent } from '../components/text';
|
||||
|
||||
import ConsoleSymbol from '../assets/images/console_zcash.png';
|
||||
import ConsoleSymbolDark from '../assets/images/console_zcash_dark.png';
|
||||
import ConsoleSymbolLight from '../assets/images/console_zcash_light.png';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.consoleBg};
|
||||
border: 1px solid ${props => props.theme.colors.consoleBorder};
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 38px 33.5px;
|
||||
padding: 30px;
|
||||
`;
|
||||
|
||||
const ConsoleText = styled(TextComponent)`
|
||||
|
|
@ -53,13 +57,15 @@ const defaultState = `
|
|||
|
||||
const breakpoints = [1, 4, 7, 10, 13];
|
||||
|
||||
type Props = {};
|
||||
type Props = {
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
log: string,
|
||||
};
|
||||
|
||||
export class ConsoleView extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = {
|
||||
log: defaultState,
|
||||
};
|
||||
|
|
@ -76,6 +82,11 @@ export class ConsoleView extends Component<Props, State> {
|
|||
|
||||
render() {
|
||||
const { log } = this.state;
|
||||
const { theme } = this.props;
|
||||
|
||||
const ConsoleSymbol = theme.mode === DARK
|
||||
? ConsoleSymbolDark
|
||||
: ConsoleSymbolLight;
|
||||
|
||||
return (
|
||||
<Wrapper id='console-wrapper'>
|
||||
|
|
@ -92,3 +103,5 @@ export class ConsoleView extends Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const ConsoleView = withTheme(Component);
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue