Merge pull request #68 from andrerfneves/feature/theme-support
Theme Support
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { Button } from '../../app/components/button';
|
import { Button } from '../../app/components/button';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { Clipboard } from '../../app/components/clipboard';
|
import { Clipboard } from '../../app/components/clipboard';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { ColumnComponent } from '../../app/components/column';
|
import { ColumnComponent } from '../../app/components/column';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<ColumnComponent />', () => {
|
describe('<ColumnComponent />', () => {
|
||||||
test('should render correctly', () => {
|
test('should render correctly', () => {
|
||||||
// $FlowFixMe
|
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<ColumnComponent>
|
<ColumnComponent>
|
||||||
|
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { Divider } from '../../app/components/divider';
|
import { Divider } from '../../app/components/divider';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
describe('<Divider />', () => {
|
describe('<Divider />', () => {
|
||||||
test('should render correctly', () => {
|
test('should render correctly', () => {
|
||||||
// $FlowFixMe
|
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<Divider opacity={0.3} />
|
<Divider opacity={0.3} />
|
||||||
|
|
|
@ -7,7 +7,7 @@ import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { DropdownComponent } from '../../app/components/dropdown';
|
import { DropdownComponent } from '../../app/components/dropdown';
|
||||||
import { Button } from '../../app/components/button';
|
import { Button } from '../../app/components/button';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
@ -28,8 +28,8 @@ describe('<DropdownComponent />', () => {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
options={[
|
options={[
|
||||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,8 +53,8 @@ describe('<DropdownComponent />', () => {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
options={[
|
options={[
|
||||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
|
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { InputLabelComponent } from '../../app/components/input-label';
|
import { InputLabelComponent } from '../../app/components/input-label';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { InputComponent } from '../../app/components/input';
|
import { InputComponent } from '../../app/components/input';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { LoadingScreen } from '../../app/components/loading-screen';
|
import { LoadingScreen } from '../../app/components/loading-screen';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@ afterEach(cleanup);
|
||||||
describe('<QRCode />', () => {
|
describe('<QRCode />', () => {
|
||||||
test('should render qrcode component correctly', () => {
|
test('should render qrcode component correctly', () => {
|
||||||
const { queryByTestId } = render(
|
const { queryByTestId } = render(
|
||||||
<QRCode value='https://z.cash.foundation' />,
|
<QRCode value='https://znfd.org' />,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { RowComponent } from '../../app/components/row';
|
import { RowComponent } from '../../app/components/row';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { SelectComponent } from '../../app/components/select';
|
import { SelectComponent } from '../../app/components/select';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ describe('<SelectComponent />', () => {
|
||||||
const { queryByTestId } = render(
|
const { queryByTestId } = render(
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
onChange={console.log}
|
onChange={console.log} // eslint-disable-line
|
||||||
value='asbh1yeasbdh23848asdasd'
|
value='asbh1yeasbdh23848asdasd'
|
||||||
placeholder='Select a address'
|
placeholder='Select a address'
|
||||||
options={[
|
options={[
|
||||||
|
@ -51,7 +51,7 @@ describe('<SelectComponent />', () => {
|
||||||
const { container } = render(
|
const { container } = render(
|
||||||
<ThemeProvider theme={appTheme}>
|
<ThemeProvider theme={appTheme}>
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
onChange={console.log}
|
onChange={console.log} // eslint-disable-line
|
||||||
value='asbh1yeasbdh23848asdasd'
|
value='asbh1yeasbdh23848asdasd'
|
||||||
placeholder='Select a address'
|
placeholder='Select a address'
|
||||||
options={[
|
options={[
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { StatusPill } from '../../app/components/status-pill';
|
import { StatusPill } from '../../app/components/status-pill';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { TextComponent } from '../../app/components/text';
|
import { TextComponent } from '../../app/components/text';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { TransactionItemComponent } from '../../app/components/transaction-item';
|
import { TransactionItemComponent } from '../../app/components/transaction-item';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ describe('<TransactionDailyComponent />', () => {
|
||||||
amount: 1.7891,
|
amount: 1.7891,
|
||||||
zecPrice: 1.345,
|
zecPrice: 1.345,
|
||||||
date: new Date().toISOString(),
|
date: new Date().toISOString(),
|
||||||
|
theme: appTheme,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'send',
|
type: 'send',
|
||||||
|
@ -34,6 +35,7 @@ describe('<TransactionDailyComponent />', () => {
|
||||||
amount: 0.8458,
|
amount: 0.8458,
|
||||||
zecPrice: 1.344,
|
zecPrice: 1.344,
|
||||||
date: new Date().toISOString(),
|
date: new Date().toISOString(),
|
||||||
|
theme: appTheme,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
||||||
import 'jest-dom/extend-expect';
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
import { WalletAddress } from '../../app/components/wallet-address';
|
import { WalletAddress } from '../../app/components/wallet-address';
|
||||||
import appTheme from '../../app/theme';
|
import { appTheme } from '../../app/theme';
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
|
12
app/app.js
|
@ -7,9 +7,9 @@ import { ThemeProvider } from 'styled-components';
|
||||||
|
|
||||||
import { configureStore, history } from './redux/create';
|
import { configureStore, history } from './redux/create';
|
||||||
import { Router } from './router/container';
|
import { Router } from './router/container';
|
||||||
import theme, { GlobalStyle } from './theme';
|
import { appTheme as theme, GlobalStyle } from './theme';
|
||||||
import electronStore from '../config/electron-store';
|
import electronStore from '../config/electron-store';
|
||||||
import { DARK } from './constants/themes';
|
import { DARK, THEME_MODE } from './constants/themes';
|
||||||
|
|
||||||
const store = configureStore({});
|
const store = configureStore({});
|
||||||
|
|
||||||
|
@ -20,15 +20,15 @@ type State = {
|
||||||
|
|
||||||
export class App extends Component<Props, State> {
|
export class App extends Component<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
themeMode: electronStore.get('THEME_MODE') || DARK,
|
themeMode: electronStore.get(THEME_MODE) || DARK,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if (!electronStore.has('THEME_MODE')) {
|
if (!electronStore.has(THEME_MODE)) {
|
||||||
electronStore.set('THEME_MODE', DARK);
|
electronStore.set(THEME_MODE, DARK);
|
||||||
}
|
}
|
||||||
|
|
||||||
electronStore.onDidChange('THEME_MODE', newValue => this.setState({ themeMode: newValue }));
|
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
Before Width: | Height: | Size: 747 B After Width: | Height: | Size: 747 B |
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 |
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 |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
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 |
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;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
border-radius: 100px;
|
border-radius: 3px;
|
||||||
transition: background-color 0.1s ${props => props.theme.transitionEase};
|
transition: background-color 0.1s ${props => props.theme.transitionEase};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Primary = styled(DefaultButton)`
|
const Primary = styled(DefaultButton)`
|
||||||
background-color: ${props => props.theme.colors.primary};
|
background-color: ${props => props.theme.colors.primary};
|
||||||
color: ${props => props.theme.colors.secondary};
|
color: ${props => props.theme.colors.buttonPrimaryText};
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -29,23 +29,24 @@ const Primary = styled(DefaultButton)`
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: ${props => props.theme.colors.buttonBorderColor};
|
background-color: ${props => props.theme.colors.buttonPrimaryDisabledBg};
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.8;
|
opacity: 0.45;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Secondary = styled(DefaultButton)`
|
const Secondary = styled(DefaultButton)`
|
||||||
background-color: transparent;
|
background-color: ${props => props.theme.colors.buttonSecondaryBg};
|
||||||
color: ${props => props.theme.colors.secondary};
|
color: ${props => props.theme.colors.buttonSecondaryText};
|
||||||
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
|
border: 1px solid ${props => props.theme.colors.buttonSecondaryBorder};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: ${props => props.theme.colors.primary};
|
background-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||||
|
border-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background-color: Transparent;
|
background-color: ${props => props.theme.colors.buttonSecondaryDisabledBg};
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
color: ${props => props.theme.colors.buttonBorderColor};
|
color: ${props => props.theme.colors.buttonBorderColor};
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Fragment, type Element } from 'react';
|
import React, { type Element } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
@ -17,7 +17,7 @@ const Wrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0px 0px 30px 0px black;
|
box-shadow: ${props => props.theme.colors.transactionDetailsShadow}
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -42,6 +42,22 @@ const CloseIconImg = styled.img`
|
||||||
cursor: pointer;
|
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)`
|
const Btn = styled(Button)`
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
@ -91,7 +107,7 @@ export const ConfirmDialogComponent = ({
|
||||||
<Divider opacity={0.3} />
|
<Divider opacity={0.3} />
|
||||||
{children(handleClose(toggle))}
|
{children(handleClose(toggle))}
|
||||||
{showButtons && (
|
{showButtons && (
|
||||||
<Fragment>
|
<ButtonWrapper>
|
||||||
<Btn
|
<Btn
|
||||||
id='confirm-modal-button'
|
id='confirm-modal-button'
|
||||||
label='Confirm'
|
label='Confirm'
|
||||||
|
@ -104,7 +120,7 @@ export const ConfirmDialogComponent = ({
|
||||||
variant='secondary'
|
variant='secondary'
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
/>
|
/>
|
||||||
</Fragment>
|
</ButtonWrapper>
|
||||||
)}
|
)}
|
||||||
</Wrapper>
|
</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`
|
export const Divider = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
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)};
|
opacity: ${(props: Props) => String(props.opacity || 1)};
|
||||||
margin-bottom: ${(props: Props) => props.marginBottom || '0'};
|
margin-bottom: ${(props: Props) => props.marginBottom || '0'};
|
||||||
margin-top: ${(props: Props) => props.marginTop || '0'};
|
margin-top: ${(props: Props) => props.marginTop || '0'};
|
||||||
|
|
|
@ -21,6 +21,7 @@ const MenuWrapper = styled.div`
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 1px solid ${props => props.theme.colors.border}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const MenuItem = styled.button`
|
const MenuItem = styled.button`
|
||||||
|
|
|
@ -7,7 +7,7 @@ import styled from 'styled-components';
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
import { Button } from './button';
|
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`
|
const ModalWrapper = styled.div`
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
|
@ -55,6 +55,7 @@ const Title = styled(TextComponent)`
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||||
|
color: ${props => props.theme.colors.headerTitle};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -73,7 +74,7 @@ export const HeaderComponent = ({ title }: Props) => (
|
||||||
<Title value={title} />
|
<Title value={title} />
|
||||||
<Status type='syncing' progress={0} />
|
<Status type='syncing' progress={0} />
|
||||||
</TitleRow>
|
</TitleRow>
|
||||||
<Divider opacity={0.1} />
|
<Divider opacity={0.2} />
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import React, { type Element } from 'react';
|
import React, { type Element } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import theme from '../theme';
|
import { appTheme } from '../theme';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
inputType?: 'input' | 'textarea',
|
inputType?: 'input' | 'textarea',
|
||||||
|
@ -28,17 +28,23 @@ type DefaultStylesProps = PropsWithTheme<{
|
||||||
const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
|
const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
|
||||||
border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
|
border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
|
||||||
border: none;
|
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};
|
color: ${(props: DefaultStylesProps) => props.theme.colors.text};
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
|
padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
||||||
|
border: 1px solid ${(props: DefaultStylesProps) => props.theme.colors.inputBorder};
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
border-color: ${(props: DefaultStylesProps) => props.theme.colors.inputBorderActive};
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
|
@ -104,5 +110,5 @@ InputComponent.defaultProps = {
|
||||||
onChange: () => {},
|
onChange: () => {},
|
||||||
onFocus: () => {},
|
onFocus: () => {},
|
||||||
step: 1,
|
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-left: ${props => props.theme.layoutPaddingLeft};
|
||||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -9,7 +9,7 @@ import { TextComponent } from './text';
|
||||||
|
|
||||||
import zcashLogo from '../assets/images/zcash-simple-icon.svg';
|
import zcashLogo from '../assets/images/zcash-simple-icon.svg';
|
||||||
|
|
||||||
import theme from '../theme';
|
import { appTheme } from '../theme';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -18,7 +18,19 @@ const Wrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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`
|
const CircleWrapper = styled.div`
|
||||||
|
@ -37,6 +49,10 @@ const Logo = styled.img`
|
||||||
left: calc(50% - 25px);
|
left: calc(50% - 25px);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const LoadingText = styled(TextComponent)`
|
||||||
|
color: ${props => props.theme.colors.loadingScreenText};
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
progress: number,
|
progress: number,
|
||||||
message: string,
|
message: string,
|
||||||
|
@ -86,18 +102,19 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<LoadingCard>
|
||||||
<CircleWrapper>
|
<CircleWrapper>
|
||||||
<Logo src={zcashLogo} alt='Zcash Logo' />
|
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||||
<CircleProgressComponent
|
<CircleProgressComponent
|
||||||
progress={progress}
|
progress={progress}
|
||||||
s // TODO: check if this has any effect
|
|
||||||
responsive
|
responsive
|
||||||
showPercentage={false}
|
showPercentage={false}
|
||||||
progressColor={theme.colors.activeItem}
|
progressColor={appTheme.colors.activeItem}
|
||||||
bgColor={theme.colors.inactiveItem}
|
bgColor={appTheme.colors.inactiveItem}
|
||||||
/>
|
/>
|
||||||
</CircleWrapper>
|
</CircleWrapper>
|
||||||
<TextComponent value={message} />
|
<LoadingText value={message} />
|
||||||
|
</LoadingCard>
|
||||||
</animated.div>
|
</animated.div>
|
||||||
)}
|
)}
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
|
@ -14,7 +14,7 @@ const ModalWrapper = styled.div`
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ChildrenWrapper = styled.div`
|
const ChildrenWrapper = styled.div`
|
||||||
|
@ -103,7 +103,9 @@ export class ModalComponent extends PureComponent<Props, State> {
|
||||||
) this.close();
|
) this.close();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ChildrenWrapper>{children(toggleVisibility)}</ChildrenWrapper>
|
<ChildrenWrapper>
|
||||||
|
{children(toggleVisibility)}
|
||||||
|
</ChildrenWrapper>
|
||||||
</ModalWrapper>,
|
</ModalWrapper>,
|
||||||
this.element,
|
this.element,
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,13 +1,18 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { PureComponent } from 'react';
|
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 { 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 */
|
/* eslint-disable max-len */
|
||||||
type SelectWrapperProps = PropsWithTheme<{
|
type SelectWrapperProps = PropsWithTheme<{
|
||||||
|
@ -21,8 +26,8 @@ const SelectWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
|
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: 1px solid ${(props: SelectWrapperProps) => props.theme.colors.inputBorder};
|
||||||
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBackground};
|
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBg};
|
||||||
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
|
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -62,9 +67,14 @@ const SelectMenuButton = styled.button`
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 1px solid
|
|
||||||
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
|
||||||
border-radius: 100%;
|
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`
|
const Icon = styled.img`
|
||||||
|
@ -76,24 +86,28 @@ const OptionsWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100.5%;
|
||||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`};
|
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;
|
overflow-y: auto;
|
||||||
|
box-shadow: 1px 3px 20px rgba(16, 19, 20, 0.1);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Option = styled.button`
|
const Option = styled.button`
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: #5d5d5d;
|
background-color: ${props => props.theme.colors.dropdownBg};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
text-transform: ${(props: PropsWithTheme<{ capitalize: boolean }>) => (props.capitalize ? 'capitalize' : 'none')};
|
text-transform: ${(props: PropsWithTheme<{ capitalize: boolean }>) => (props.capitalize ? 'capitalize' : 'none')};
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-bottom: 1px solid #4e4b4b;
|
border-bottom: 1px solid ${props => props.theme.colors.dropdownBorder};
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${props => props.theme.colors.dropdownHoveredBg};
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
@ -111,13 +125,14 @@ type Props = {
|
||||||
placement?: 'top' | 'bottom',
|
placement?: 'top' | 'bottom',
|
||||||
bgColor?: string,
|
bgColor?: string,
|
||||||
capitalize?: boolean,
|
capitalize?: boolean,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
isOpen: boolean,
|
isOpen: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class SelectComponent extends PureComponent<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
};
|
};
|
||||||
|
@ -125,7 +140,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
placeholder: '',
|
placeholder: '',
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
bgColor: theme.colors.inputBackground,
|
bgColor: appTheme.colors.inputBg,
|
||||||
capitalize: true,
|
capitalize: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -151,14 +166,24 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
getSelectIcon = () => {
|
getSelectIcon = () => {
|
||||||
const { placement } = this.props;
|
const { placement, theme } = this.props;
|
||||||
const { isOpen } = this.state;
|
const { isOpen } = this.state;
|
||||||
|
|
||||||
|
if (theme.mode === DARK) {
|
||||||
if (placement === 'top') {
|
if (placement === 'top') {
|
||||||
return !isOpen ? ChevronUp : ChevronDown;
|
return !isOpen ? ChevronUpDark : ChevronDownDark;
|
||||||
}
|
}
|
||||||
|
|
||||||
return !isOpen ? ChevronDown : ChevronUp;
|
return !isOpen ? ChevronDownDark : ChevronUpDark;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (theme.mode === LIGHT) {
|
||||||
|
if (placement === 'top') {
|
||||||
|
return !isOpen ? ChevronUpLight : ChevronDownLight;
|
||||||
|
}
|
||||||
|
|
||||||
|
return !isOpen ? ChevronDownLight : ChevronUpLight;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -176,7 +201,10 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
||||||
bgColor={bgColor}
|
bgColor={bgColor}
|
||||||
>
|
>
|
||||||
<ValueWrapper hasValue={Boolean(value)} capitalize={capitalize}>
|
<ValueWrapper
|
||||||
|
hasValue={Boolean(value)}
|
||||||
|
capitalize={capitalize}
|
||||||
|
>
|
||||||
{this.getSelectedLabel(value) || placeholder}
|
{this.getSelectedLabel(value) || placeholder}
|
||||||
</ValueWrapper>
|
</ValueWrapper>
|
||||||
<SelectMenuButtonWrapper>
|
<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 */
|
/* eslint-disable max-len */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import type { Location, RouterHistory } from 'react-router-dom';
|
import type { Location, RouterHistory } from 'react-router-dom';
|
||||||
|
|
||||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
|
@ -13,6 +14,7 @@ const Wrapper = styled.div`
|
||||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
font-family: ${props => props.theme.fontFamily};
|
font-family: ${props => props.theme.fontFamily};
|
||||||
background-color: ${props => props.theme.colors.sidebarBg};
|
background-color: ${props => props.theme.colors.sidebarBg};
|
||||||
|
border-right: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
@ -20,11 +22,17 @@ const Wrapper = styled.div`
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
|
type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
|
||||||
const StyledLink = styled.a`
|
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`};
|
font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
|
font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
|
||||||
background-color: ${(props: StyledLinkProps) => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
padding: 25px 20px;
|
padding: 25px 20px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -32,13 +40,19 @@ const StyledLink = styled.a`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive(props)}` : 'none')};
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
|
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 {
|
&:hover {
|
||||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
border-top: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
|
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;
|
height: 17px;
|
||||||
margin-right: 13px;
|
margin-right: 13px;
|
||||||
|
|
||||||
|
opacity: ${(props: any) => (props.isActive ? '1' : '0.3')};
|
||||||
|
|
||||||
${StyledLink}:hover & {
|
${StyledLink}:hover & {
|
||||||
filter: ${(props: StyledLinkProps) => (props.isActive ? 'none' : 'brightness(300%)')};
|
opacity: 1;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type MenuItem = {
|
type MenuItem = {
|
||||||
route: string,
|
route: string,
|
||||||
label: string,
|
label: string,
|
||||||
icon: (isActive: boolean) => string,
|
icon: (isActive: boolean, themeMode: string) => string,
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
history: RouterHistory,
|
history: RouterHistory,
|
||||||
options?: MenuItem[],
|
options?: MenuItem[],
|
||||||
location: Location,
|
location: Location,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SidebarComponent = ({ options, location, history }: Props) => (
|
export const Component = ({
|
||||||
|
options, location, history, theme,
|
||||||
|
}: Props) => (
|
||||||
<Wrapper id='sidebar'>
|
<Wrapper id='sidebar'>
|
||||||
{(options || []).map((item) => {
|
{(options || []).map((item) => {
|
||||||
const isActive = location.pathname === item.route;
|
const isActive = location.pathname === item.route;
|
||||||
|
@ -75,7 +94,11 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||||
key={item.route}
|
key={item.route}
|
||||||
onClick={() => (isActive ? {} : history.push(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}
|
{item.label}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
);
|
);
|
||||||
|
@ -83,6 +106,8 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
SidebarComponent.defaultProps = {
|
Component.defaultProps = {
|
||||||
options: MENU_OPTIONS,
|
options: MENU_OPTIONS,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const SidebarComponent = withTheme(Component);
|
||||||
|
|
|
@ -1,16 +1,20 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import styled, { keyframes } from 'styled-components';
|
import styled, { keyframes, withTheme } from 'styled-components';
|
||||||
import eres from 'eres';
|
import eres from 'eres';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
|
import { DARK } from '../constants/themes';
|
||||||
|
|
||||||
import readyIcon from '../assets/images/green_check.png';
|
import readyIconDark from '../assets/images/green_check_dark.png';
|
||||||
import syncIcon from '../assets/images/sync_icon.png';
|
import readyIconLight from '../assets/images/green_check_light.png';
|
||||||
import errorIcon from '../assets/images/error_icon.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`
|
const rotate = keyframes`
|
||||||
from {
|
from {
|
||||||
|
@ -24,7 +28,8 @@ const rotate = keyframes`
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #000;
|
background: ${props => props.theme.colors.statusPillBg};
|
||||||
|
border: 1px solid ${props => props.theme.colors.statusPillBorder}
|
||||||
border-radius: 27px;
|
border-radius: 27px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
`;
|
`;
|
||||||
|
@ -48,7 +53,9 @@ const StatusPillLabel = styled(TextComponent)`
|
||||||
user-select: none;
|
user-select: none;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {};
|
type Props = {
|
||||||
|
theme: AppTheme,
|
||||||
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
type: string,
|
type: string,
|
||||||
|
@ -57,15 +64,25 @@ type State = {
|
||||||
isSyncing: boolean,
|
isSyncing: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class StatusPill extends Component<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
timer: ?IntervalID = null;
|
timer: ?IntervalID = null;
|
||||||
|
|
||||||
state = {
|
constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
const { theme } = props;
|
||||||
|
|
||||||
|
const syncIcon = theme.mode === DARK
|
||||||
|
? syncIconDark
|
||||||
|
: syncIconLight;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
type: 'syncing',
|
type: 'syncing',
|
||||||
icon: syncIcon,
|
icon: syncIcon,
|
||||||
progress: 0,
|
progress: 0,
|
||||||
isSyncing: true,
|
isSyncing: true,
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
|
@ -81,6 +98,15 @@ export class StatusPill extends Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
getBlockchainStatus = async () => {
|
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());
|
const [blockchainErr, blockchaininfo] = await eres(rpc.getblockchaininfo());
|
||||||
|
|
||||||
if (blockchainErr || !blockchaininfo) return;
|
if (blockchainErr || !blockchaininfo) return;
|
||||||
|
@ -99,7 +125,10 @@ export class StatusPill extends Component<Props, State> {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (blockchainErr) {
|
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 styled from 'styled-components';
|
||||||
import type { ElementProps } from 'react';
|
import type { ElementProps } from 'react';
|
||||||
|
|
||||||
import theme from '../theme';
|
import { appTheme } from '../theme';
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
...ElementProps<'p'>,
|
...ElementProps<'p'>,
|
||||||
|
@ -15,6 +15,8 @@ export type Props = {
|
||||||
className?: string,
|
className?: string,
|
||||||
size?: string | number,
|
size?: string | number,
|
||||||
align?: string,
|
align?: string,
|
||||||
|
onClick?: Function,
|
||||||
|
onDoubleClick?: Function,
|
||||||
};
|
};
|
||||||
|
|
||||||
const Text = styled.p`
|
const Text = styled.p`
|
||||||
|
@ -28,7 +30,8 @@ const Text = styled.p`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TextComponent = ({
|
export const TextComponent = ({
|
||||||
value, isBold, color, className, size, align, id,
|
value, isBold, color, className, size,
|
||||||
|
align, id, onClick, onDoubleClick,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Text
|
<Text
|
||||||
id={id}
|
id={id}
|
||||||
|
@ -37,6 +40,8 @@ export const TextComponent = ({
|
||||||
color={color}
|
color={color}
|
||||||
size={`${String(size)}em`}
|
size={`${String(size)}em`}
|
||||||
align={align}
|
align={align}
|
||||||
|
onClick={onClick}
|
||||||
|
onDoubleClick={onDoubleClick}
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -45,7 +50,9 @@ export const TextComponent = ({
|
||||||
TextComponent.defaultProps = {
|
TextComponent.defaultProps = {
|
||||||
className: '',
|
className: '',
|
||||||
isBold: false,
|
isBold: false,
|
||||||
color: theme.colors.text,
|
color: appTheme.colors.text,
|
||||||
size: theme.fontSize.regular,
|
size: appTheme.fontSize.regular,
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
onClick: () => {},
|
||||||
|
onDoubleClick: () => {},
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,7 +5,6 @@ import styled from 'styled-components';
|
||||||
|
|
||||||
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
import { Divider } from './divider';
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
@ -41,7 +40,7 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
||||||
<TransactionsWrapper>
|
<TransactionsWrapper>
|
||||||
{transactions.map(({
|
{transactions.map(({
|
||||||
date, type, address, amount, transactionId,
|
date, type, address, amount, transactionId,
|
||||||
}, idx) => (
|
}) => (
|
||||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||||
<TransactionItemComponent
|
<TransactionItemComponent
|
||||||
transactionId={transactionId}
|
transactionId={transactionId}
|
||||||
|
@ -51,7 +50,6 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
||||||
amount={amount}
|
amount={amount}
|
||||||
zecPrice={zecPrice}
|
zecPrice={zecPrice}
|
||||||
/>
|
/>
|
||||||
{idx < transactions.length - 1 && <Divider />}
|
|
||||||
</Fragment>
|
</Fragment>
|
||||||
))}
|
))}
|
||||||
</TransactionsWrapper>
|
</TransactionsWrapper>
|
||||||
|
|
|
@ -1,21 +1,24 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import dateFns from 'date-fns';
|
import dateFns from 'date-fns';
|
||||||
import { BigNumber } from 'bignumber.js';
|
import { BigNumber } from 'bignumber.js';
|
||||||
|
|
||||||
import { ZCASH_EXPLORER_BASE_URL } from '../constants/explorer';
|
import { ZCASH_EXPLORER_BASE_URL } from '../constants/explorer';
|
||||||
|
import { DARK } from '../constants/themes';
|
||||||
|
|
||||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||||
import ReceivedIcon from '../assets/images/transaction_received_icon.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 CloseIcon from '../assets/images/close_icon.svg';
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
import { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
import { ColumnComponent } from './column';
|
import { ColumnComponent } from './column';
|
||||||
|
|
||||||
import theme from '../theme';
|
import { appTheme } from '../theme';
|
||||||
|
|
||||||
import { formatNumber } from '../utils/format-number';
|
import { formatNumber } from '../utils/format-number';
|
||||||
import { truncateAddress } from '../utils/truncate-address';
|
import { truncateAddress } from '../utils/truncate-address';
|
||||||
|
@ -23,12 +26,12 @@ import { openExternal } from '../utils/open-external';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
width: 460px;
|
width: 460px;
|
||||||
background-color: ${props => props.theme.colors.background};
|
background-color: ${props => props.theme.colors.transactionDetailsBg};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0px 0px 30px 0px black;
|
box-shadow: ${props => props.theme.colors.transactionDetailsShadow};
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -71,7 +74,7 @@ const InfoRow = styled(RowComponent)`
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #1d1d1d;
|
background: ${props => props.theme.colors.transactionDetailsRowHover};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -85,14 +88,14 @@ const DetailsWrapper = styled.div`
|
||||||
|
|
||||||
const Divider = styled.div`
|
const Divider = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #3a3a3a;
|
background-color: ${props => props.theme.colors.transactionDetailsDivider};
|
||||||
height: 1px;
|
height: 1px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Label = styled(TextComponent)`
|
const Label = styled(TextComponent)`
|
||||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
color: ${props => props.theme.colors.transactionDetailsLabel};
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
letter-spacing: 0.25px;
|
letter-spacing: 0.25px;
|
||||||
`;
|
`;
|
||||||
|
@ -127,9 +130,10 @@ type Props = {
|
||||||
from: string,
|
from: string,
|
||||||
to: string,
|
to: string,
|
||||||
handleClose: () => void,
|
handleClose: () => void,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TransactionDetailsComponent = ({
|
const Component = ({
|
||||||
amount,
|
amount,
|
||||||
type,
|
type,
|
||||||
zecPrice,
|
zecPrice,
|
||||||
|
@ -138,19 +142,32 @@ export const TransactionDetailsComponent = ({
|
||||||
from,
|
from,
|
||||||
to,
|
to,
|
||||||
handleClose,
|
handleClose,
|
||||||
|
theme,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const isReceived = type === 'receive';
|
const isReceived = type === 'receive';
|
||||||
|
const receivedIcon = theme.mode === DARK
|
||||||
|
? ReceivedIconDark
|
||||||
|
: ReceivedIconLight;
|
||||||
|
const sentIcon = theme.mode === DARK
|
||||||
|
? SentIconDark
|
||||||
|
: SentIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<CloseIconWrapper>
|
<CloseIconWrapper>
|
||||||
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
<CloseIconImg
|
||||||
|
src={CloseIcon}
|
||||||
|
onClick={handleClose}
|
||||||
|
/>
|
||||||
</CloseIconWrapper>
|
</CloseIconWrapper>
|
||||||
<TitleWrapper>
|
<TitleWrapper>
|
||||||
<TextComponent value='Transaction Details' align='center' />
|
<TextComponent value='Transaction Details' align='center' />
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
<DetailsWrapper>
|
<DetailsWrapper>
|
||||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
<Icon
|
||||||
|
src={isReceived ? receivedIcon : sentIcon}
|
||||||
|
alt='Transaction Type Icon'
|
||||||
|
/>
|
||||||
<TextComponent
|
<TextComponent
|
||||||
isBold
|
isBold
|
||||||
size={2.625}
|
size={2.625}
|
||||||
|
@ -158,7 +175,7 @@ export const TransactionDetailsComponent = ({
|
||||||
append: `${isReceived ? '+' : '-'}ZEC `,
|
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||||
value: amount,
|
value: amount,
|
||||||
})}
|
})}
|
||||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
|
||||||
/>
|
/>
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={formatNumber({
|
value={formatNumber({
|
||||||
|
@ -166,7 +183,7 @@ export const TransactionDetailsComponent = ({
|
||||||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||||
})}
|
})}
|
||||||
size={1.5}
|
size={1.5}
|
||||||
color={theme.colors.transactionsDetailsLabel}
|
color={appTheme.colors.transactionDetailsLabel}
|
||||||
/>
|
/>
|
||||||
</DetailsWrapper>
|
</DetailsWrapper>
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
|
@ -175,7 +192,7 @@ export const TransactionDetailsComponent = ({
|
||||||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
<ColumnComponent>
|
<ColumnComponent>
|
||||||
<TextComponent value='FEES' isBold color={theme.colors.transactionsDetailsLabel} />
|
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={formatNumber({
|
value={formatNumber({
|
||||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||||
|
@ -203,16 +220,18 @@ export const TransactionDetailsComponent = ({
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<ColumnComponent width='100%'>
|
<ColumnComponent width='100%'>
|
||||||
<Label value='FROM' />
|
<Label value='FROM' />
|
||||||
<Ellipsis value={truncateAddress(from)} />
|
<Ellipsis value={from} />
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
<Divider />
|
<Divider />
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<ColumnComponent width='100%'>
|
<ColumnComponent width='100%'>
|
||||||
<Label value='TO' />
|
<Label value='TO' />
|
||||||
<Ellipsis value={truncateAddress(to)} />
|
<Ellipsis value={truncateAddress(to) || 'N/A'} />
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const TransactionDetailsComponent = withTheme(Component);
|
||||||
|
|
|
@ -1,11 +1,15 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import dateFns from 'date-fns';
|
import dateFns from 'date-fns';
|
||||||
|
|
||||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
import { DARK } from '../constants/themes';
|
||||||
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 { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
import { ColumnComponent } from './column';
|
import { ColumnComponent } from './column';
|
||||||
|
@ -13,18 +17,22 @@ import { TextComponent } from './text';
|
||||||
import { ModalComponent } from './modal';
|
import { ModalComponent } from './modal';
|
||||||
import { TransactionDetailsComponent } from './transaction-details';
|
import { TransactionDetailsComponent } from './transaction-details';
|
||||||
|
|
||||||
import theme from '../theme';
|
|
||||||
|
|
||||||
import { formatNumber } from '../utils/format-number';
|
import { formatNumber } from '../utils/format-number';
|
||||||
import { truncateAddress } from '../utils/truncate-address';
|
import { truncateAddress } from '../utils/truncate-address';
|
||||||
|
|
||||||
const Wrapper = styled(RowComponent)`
|
const Wrapper = styled(RowComponent)`
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${props => props.theme.colors.transactionItemBg};
|
||||||
padding: 15px 17px;
|
padding: 15px 17px;
|
||||||
cursor: pointer;
|
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 {
|
&:hover {
|
||||||
background-color: #0a0a0a;
|
background-color: ${props => props.theme.colors.transactionItemHoverBg};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -41,10 +49,10 @@ const TransactionTypeLabel = styled(TextComponent)`
|
||||||
/* eslint-enable max-len */
|
/* eslint-enable max-len */
|
||||||
|
|
||||||
const TransactionAddress = styled(TextComponent)`
|
const TransactionAddress = styled(TextComponent)`
|
||||||
color: #a7a7a7;
|
color: ${props => props.theme.colors.transactionItemAddress};
|
||||||
|
|
||||||
${String(Wrapper)}:hover & {
|
${String(Wrapper)}:hover & {
|
||||||
color: #fff;
|
color: ${props => props.theme.colors.transactionItemAddressHover};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -65,15 +73,17 @@ export type Transaction = {
|
||||||
amount: number,
|
amount: number,
|
||||||
zecPrice: number,
|
zecPrice: number,
|
||||||
transactionId: string,
|
transactionId: string,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TransactionItemComponent = ({
|
const Component = ({
|
||||||
type,
|
type,
|
||||||
date,
|
date,
|
||||||
address,
|
address,
|
||||||
amount,
|
amount,
|
||||||
zecPrice,
|
zecPrice,
|
||||||
transactionId,
|
transactionId,
|
||||||
|
theme,
|
||||||
}: Transaction) => {
|
}: Transaction) => {
|
||||||
const isReceived = type === 'receive';
|
const isReceived = type === 'receive';
|
||||||
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
||||||
|
@ -87,6 +97,13 @@ export const TransactionItemComponent = ({
|
||||||
});
|
});
|
||||||
const transactionAddress = truncateAddress(address);
|
const transactionAddress = truncateAddress(address);
|
||||||
|
|
||||||
|
const receivedIcon = theme.mode === DARK
|
||||||
|
? ReceivedIconDark
|
||||||
|
: ReceivedIconLight;
|
||||||
|
const sentIcon = theme.mode === DARK
|
||||||
|
? SentIconDark
|
||||||
|
: SentIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalComponent
|
<ModalComponent
|
||||||
renderTrigger={toggleVisibility => (
|
renderTrigger={toggleVisibility => (
|
||||||
|
@ -98,7 +115,7 @@ export const TransactionItemComponent = ({
|
||||||
>
|
>
|
||||||
<RowComponent alignItems='center'>
|
<RowComponent alignItems='center'>
|
||||||
<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>
|
<TransactionColumn>
|
||||||
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||||
<TransactionTime value={transactionTime} />
|
<TransactionTime value={transactionTime} />
|
||||||
|
@ -110,7 +127,10 @@ export const TransactionItemComponent = ({
|
||||||
<TextComponent
|
<TextComponent
|
||||||
isBold
|
isBold
|
||||||
value={transactionValueInZec}
|
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} />
|
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
|
@ -132,3 +152,5 @@ export const TransactionItemComponent = ({
|
||||||
</ModalComponent>
|
</ModalComponent>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const TransactionItemComponent = withTheme(Component);
|
||||||
|
|
|
@ -1,94 +1,193 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
|
|
||||||
import { ColumnComponent } from './column';
|
import { ColumnComponent } from './column';
|
||||||
import { Button } from './button';
|
import { TextComponent } from './text';
|
||||||
import { QRCode } from './qrcode';
|
import { QRCode } from './qrcode';
|
||||||
|
import { CopyToClipboard } from './copy-to-clipboard';
|
||||||
|
|
||||||
import { truncateAddress } from '../utils/truncate-address';
|
import CopyIconDark from '../assets/images/copy_icon_dark.svg';
|
||||||
|
import CopyIconLight from '../assets/images/copy_icon_light.svg';
|
||||||
import eyeIcon from '../assets/images/eye.png';
|
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`
|
const AddressWrapper = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #000;
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
border-radius: 6px;
|
padding: 0 13px 0 0;
|
||||||
padding: 7px 13px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
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-radius: ${props => props.theme.boxBorderRadius};
|
||||||
border: none;
|
border: none;
|
||||||
background-color: ${props => props.theme.colors.inputBackground};
|
background-color: ${props => props.theme.colors.inputBg};
|
||||||
color: ${props => props.theme.colors.text};
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
width: 100%;
|
width: 92%;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-family: ${props => props.theme.fontFamily};
|
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 {
|
::placeholder {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const QRCodeWrapper = styled.div`
|
const QRCodeContainer = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #000;
|
background-color: ${props => props.theme.colors.qrCodeWrapperBg}
|
||||||
border-radius: 6px;
|
border: 1px solid ${props => props.theme.colors.qrCodeWrapperBorder}
|
||||||
|
border-radius: 3px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
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 = {
|
type Props = {
|
||||||
address: string,
|
address: string,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
isVisible: boolean,
|
showCopiedTooltip: boolean,
|
||||||
|
showQRCode: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class WalletAddress extends Component<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
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() {
|
render() {
|
||||||
const { address } = this.props;
|
const { address, theme } = this.props;
|
||||||
const { isVisible } = this.state;
|
const { showQRCode, showCopiedTooltip } = this.state;
|
||||||
const toggleVisibility = isVisible ? this.hide : this.show;
|
|
||||||
|
const qrCodeIcon = theme.mode === DARK
|
||||||
|
? ScanIconDark
|
||||||
|
: ScanIconLight;
|
||||||
|
|
||||||
|
const copyIcon = theme.mode === DARK
|
||||||
|
? CopyIconDark
|
||||||
|
: CopyIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ColumnComponent width='100%'>
|
<ColumnComponent width='100%'>
|
||||||
<AddressWrapper>
|
<AddressWrapper>
|
||||||
<Input
|
<Address
|
||||||
value={isVisible ? address : truncateAddress(address)}
|
value={address}
|
||||||
onChange={() => {}}
|
onClick={this.toggleMoreInfo}
|
||||||
onFocus={event => event.currentTarget.select()}
|
onDoubleClick={this.showMoreInfo}
|
||||||
/>
|
/>
|
||||||
<Button
|
<CopyToClipboard
|
||||||
icon={eyeIcon}
|
text={address}
|
||||||
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
|
onCopy={this.copyAddress}
|
||||||
onClick={toggleVisibility}
|
>
|
||||||
variant='secondary'
|
<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>
|
</AddressWrapper>
|
||||||
{!isVisible ? null : (
|
{!showQRCode ? null : (
|
||||||
|
<QRCodeContainer>
|
||||||
<QRCodeWrapper>
|
<QRCodeWrapper>
|
||||||
<QRCode value={address} />
|
<QRCode value={address} />
|
||||||
</QRCodeWrapper>
|
</QRCodeWrapper>
|
||||||
|
</QRCodeContainer>
|
||||||
)}
|
)}
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const WalletAddress = withTheme(Component);
|
||||||
|
|
|
@ -8,12 +8,13 @@ import { RowComponent } from './row';
|
||||||
|
|
||||||
import { formatNumber } from '../utils/format-number';
|
import { formatNumber } from '../utils/format-number';
|
||||||
|
|
||||||
import theme from '../theme';
|
import { appTheme } from '../theme';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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};
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
padding: 37px 45px;
|
padding: 37px 45px;
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
|
@ -60,31 +61,31 @@ export const WalletSummaryComponent = ({
|
||||||
<AllAddresses value='ALL ADDRESSES' isBold />
|
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<TextComponent
|
<TextComponent
|
||||||
size={theme.fontSize.medium * 2.5}
|
size={appTheme.fontSize.medium * 2.5}
|
||||||
value={`ZEC ${formatNumber({ value: total })}`}
|
value={`ZEC ${formatNumber({ value: total })}`}
|
||||||
isBold
|
isBold
|
||||||
/>
|
/>
|
||||||
<USDValue
|
<USDValue
|
||||||
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
||||||
size={theme.fontSize.medium * 2}
|
size={appTheme.fontSize.medium * 2}
|
||||||
/>
|
/>
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<RowComponent>
|
<RowComponent>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<ShieldedValue value='● SHIELDED' isBold size={theme.fontSize.small} />
|
<ShieldedValue value='● SHIELDED' isBold size={appTheme.fontSize.small} />
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={`ZEC ${formatNumber({ value: shielded })}`}
|
value={`ZEC ${formatNumber({ value: shielded })}`}
|
||||||
isBold
|
isBold
|
||||||
size={theme.fontSize.medium}
|
size={appTheme.fontSize.medium}
|
||||||
/>
|
/>
|
||||||
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<Label value='● TRANSPARENT' isBold size={theme.fontSize.small} />
|
<Label value='● TRANSPARENT' isBold size={appTheme.fontSize.small} />
|
||||||
<TextComponent
|
<TextComponent
|
||||||
value={`ZEC ${formatNumber({ value: transparent })}`}
|
value={`ZEC ${formatNumber({ value: transparent })}`}
|
||||||
isBold
|
isBold
|
||||||
size={theme.fontSize.medium}
|
size={appTheme.fontSize.medium}
|
||||||
/>
|
/>
|
||||||
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
|
|
|
@ -1,16 +1,22 @@
|
||||||
// @flow
|
// @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 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 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 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 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 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 SettingsIconActive from '../assets/images/settings_icon_active.svg';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -21,36 +27,73 @@ import {
|
||||||
CONSOLE_ROUTE,
|
CONSOLE_ROUTE,
|
||||||
TRANSACTIONS_ROUTE,
|
TRANSACTIONS_ROUTE,
|
||||||
} from './routes';
|
} from './routes';
|
||||||
|
import { LIGHT } from './themes';
|
||||||
|
|
||||||
export const MENU_OPTIONS = [
|
export const MENU_OPTIONS = [
|
||||||
{
|
{
|
||||||
label: 'Dashboard',
|
label: 'Dashboard',
|
||||||
route: DASHBOARD_ROUTE,
|
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',
|
label: 'Send',
|
||||||
route: SEND_ROUTE,
|
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',
|
label: 'Receive',
|
||||||
route: RECEIVE_ROUTE,
|
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',
|
label: 'Transactions',
|
||||||
route: TRANSACTIONS_ROUTE,
|
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',
|
label: 'Settings',
|
||||||
route: SETTINGS_ROUTE,
|
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',
|
label: 'Console',
|
||||||
route: CONSOLE_ROUTE,
|
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
|
// @flow
|
||||||
|
|
||||||
export const LIGHT = 'light';
|
// Theme Modifier
|
||||||
export const DARK = 'dark';
|
export const THEME_MODE = 'THEME_MODE';
|
||||||
|
|
||||||
|
// Themes
|
||||||
|
export const LIGHT = 'LIGHT';
|
||||||
|
export const DARK = 'DARK';
|
||||||
|
|
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
|
// @flow
|
||||||
|
|
||||||
import React, { Component, Fragment } from 'react';
|
import React, { PureComponent, Fragment } from 'react';
|
||||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||||
import { ipcRenderer } from 'electron';
|
import { ipcRenderer } from 'electron';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import uuid from 'uuid/v4';
|
import uuid from 'uuid/v4';
|
||||||
|
|
||||||
import { TextComponent } from '../components/text';
|
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`
|
const Wrapper = styled.div`
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
overflow-y: auto;
|
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};
|
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
padding: 38px 33.5px;
|
padding: 30px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ConsoleText = styled(TextComponent)`
|
const ConsoleText = styled(TextComponent)`
|
||||||
|
@ -53,13 +57,15 @@ const defaultState = `
|
||||||
|
|
||||||
const breakpoints = [1, 4, 7, 10, 13];
|
const breakpoints = [1, 4, 7, 10, 13];
|
||||||
|
|
||||||
type Props = {};
|
type Props = {
|
||||||
|
theme: AppTheme,
|
||||||
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
log: string,
|
log: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class ConsoleView extends Component<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
log: defaultState,
|
log: defaultState,
|
||||||
};
|
};
|
||||||
|
@ -76,6 +82,11 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { log } = this.state;
|
const { log } = this.state;
|
||||||
|
const { theme } = this.props;
|
||||||
|
|
||||||
|
const ConsoleSymbol = theme.mode === DARK
|
||||||
|
? ConsoleSymbolDark
|
||||||
|
: ConsoleSymbolLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper id='console-wrapper'>
|
<Wrapper id='console-wrapper'>
|
||||||
|
@ -92,3 +103,5 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ConsoleView = withTheme(Component);
|
||||||
|
|
|
@ -1,16 +1,20 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled, { withTheme } from 'styled-components';
|
||||||
import { Transition, animated } from 'react-spring';
|
import { Transition, animated } from 'react-spring';
|
||||||
|
|
||||||
|
import { DARK } from '../constants/themes';
|
||||||
|
|
||||||
import { InputLabelComponent } from '../components/input-label';
|
import { InputLabelComponent } from '../components/input-label';
|
||||||
import { RowComponent } from '../components/row';
|
import { RowComponent } from '../components/row';
|
||||||
import { TextComponent } from '../components/text';
|
import { TextComponent } from '../components/text';
|
||||||
import { WalletAddress } from '../components/wallet-address';
|
import { WalletAddress } from '../components/wallet-address';
|
||||||
|
|
||||||
import MenuIcon from '../assets/images/menu_icon.svg';
|
import MenuIconDark from '../assets/images/menu_icon_dark.svg';
|
||||||
import PlusIcon from '../assets/images/plus_icon.svg';
|
import MenuIconLight from '../assets/images/menu_icon_light.svg';
|
||||||
|
import PlusIconDark from '../assets/images/plus_icon_dark.svg';
|
||||||
|
import PlusIconLight from '../assets/images/plus_icon_light.svg';
|
||||||
|
|
||||||
import type { addressType } from '../redux/modules/receive';
|
import type { addressType } from '../redux/modules/receive';
|
||||||
|
|
||||||
|
@ -35,21 +39,30 @@ const ActionButton = styled.button`
|
||||||
outline: none;
|
outline: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 30px;
|
margin: 15px 0;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ActionText = styled(TextComponent)`
|
||||||
|
white-space: nowrap;
|
||||||
|
`;
|
||||||
|
|
||||||
const ActionIcon = styled.img`
|
const ActionIcon = styled.img`
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
border: 1px solid ${props => props.theme.colors.text};
|
border: 1px solid ${props => props.theme.colors.text};
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
margin-right: 11.5px;
|
margin-right: 11.5px;
|
||||||
padding: 5px;
|
padding: 2px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const PlusIcon = styled(ActionIcon)`
|
||||||
|
padding: 6.5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const RevealsMain = styled.div`
|
const RevealsMain = styled.div`
|
||||||
|
@ -65,13 +78,14 @@ type Props = {
|
||||||
addresses: Array<string>,
|
addresses: Array<string>,
|
||||||
loadAddresses: () => void,
|
loadAddresses: () => void,
|
||||||
getNewAddress: ({ type: addressType }) => void,
|
getNewAddress: ({ type: addressType }) => void,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
showAdditionalOptions: boolean,
|
showAdditionalOptions: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class ReceiveView extends PureComponent<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
state = {
|
state = {
|
||||||
showAdditionalOptions: false,
|
showAdditionalOptions: false,
|
||||||
};
|
};
|
||||||
|
@ -93,31 +107,49 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { addresses } = this.props;
|
const { addresses, theme } = this.props;
|
||||||
const { showAdditionalOptions } = this.state;
|
const { showAdditionalOptions } = this.state;
|
||||||
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
const buttonText = `${showAdditionalOptions ? 'Hide' : 'Show'} Other Address Types`;
|
||||||
|
|
||||||
const shieldedAddresses = addresses.filter(addr => addr.startsWith('z'));
|
const shieldedAddresses = addresses.filter(addr => addr.startsWith('z'));
|
||||||
const transparentAddresses = addresses.filter(addr => addr.startsWith('t'));
|
const transparentAddresses = addresses.filter(addr => addr.startsWith('t'));
|
||||||
|
|
||||||
|
|
||||||
|
const seeMoreIcon = theme.mode === DARK
|
||||||
|
? MenuIconDark
|
||||||
|
: MenuIconLight;
|
||||||
|
|
||||||
|
const plusIcon = theme.mode === DARK
|
||||||
|
? PlusIconDark
|
||||||
|
: PlusIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Label value='Shielded Address' />
|
<Label value='Shielded Address' />
|
||||||
{shieldedAddresses.map(addr => (
|
{shieldedAddresses.map(addr => (
|
||||||
<WalletAddress key={addr} address={addr} />
|
<WalletAddress
|
||||||
|
key={addr}
|
||||||
|
address={addr}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
<Row>
|
<Row justifyContent='space-between'>
|
||||||
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
|
||||||
<ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
|
|
||||||
<TextComponent value={buttonText} />
|
|
||||||
</ActionButton>
|
|
||||||
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
||||||
<ActionIcon src={PlusIcon} alt='New Shielded Address' />
|
<PlusIcon
|
||||||
<TextComponent value='New Shielded Address' />
|
src={plusIcon}
|
||||||
|
alt='New Shielded Address'
|
||||||
|
/>
|
||||||
|
<ActionText value='New Shielded Address' />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
<ActionButton
|
||||||
<ActionIcon src={PlusIcon} alt='New Transparent Address' />
|
onClick={this.toggleAdditionalOptions}
|
||||||
<TextComponent value='New Transparent Address' />
|
isActive={showAdditionalOptions}
|
||||||
|
>
|
||||||
|
<ActionIcon
|
||||||
|
isActive={showAdditionalOptions}
|
||||||
|
src={seeMoreIcon}
|
||||||
|
alt='More Options'
|
||||||
|
/>
|
||||||
|
<ActionText value={buttonText} />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</Row>
|
</Row>
|
||||||
<RevealsMain>
|
<RevealsMain>
|
||||||
|
@ -146,6 +178,10 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
{transparentAddresses.map(addr => (
|
{transparentAddresses.map(addr => (
|
||||||
<WalletAddress key={addr} address={addr} />
|
<WalletAddress key={addr} address={addr} />
|
||||||
))}
|
))}
|
||||||
|
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
||||||
|
<PlusIcon src={plusIcon} alt='New Transparent Address' />
|
||||||
|
<ActionText value='New Transparent Address' />
|
||||||
|
</ActionButton>
|
||||||
</animated.div>
|
</animated.div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
@ -155,3 +191,5 @@ export class ReceiveView extends PureComponent<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ReceiveView = withTheme(Component);
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Fragment, PureComponent } from 'react';
|
import React, { Fragment, PureComponent } from 'react';
|
||||||
import styled, { keyframes } from 'styled-components';
|
import styled, { withTheme, keyframes } from 'styled-components';
|
||||||
import { BigNumber } from 'bignumber.js';
|
import { BigNumber } from 'bignumber.js';
|
||||||
import { Transition, animated } from 'react-spring';
|
import { Transition, animated } from 'react-spring';
|
||||||
|
|
||||||
import { FEES } from '../constants/fees';
|
import { FEES } from '../constants/fees';
|
||||||
|
import { DARK } from '../constants/themes';
|
||||||
|
|
||||||
import { InputLabelComponent } from '../components/input-label';
|
import { InputLabelComponent } from '../components/input-label';
|
||||||
import { InputComponent } from '../components/input';
|
import { InputComponent } from '../components/input';
|
||||||
|
@ -20,18 +21,18 @@ import { ConfirmDialogComponent } from '../components/confirm-dialog';
|
||||||
import { formatNumber } from '../utils/format-number';
|
import { formatNumber } from '../utils/format-number';
|
||||||
import { ascii2hex } from '../utils/ascii-to-hexadecimal';
|
import { ascii2hex } from '../utils/ascii-to-hexadecimal';
|
||||||
|
|
||||||
|
import SentIcon from '../assets/images/transaction_sent_icon_dark.svg';
|
||||||
|
import MenuIconDark from '../assets/images/menu_icon_dark.svg';
|
||||||
|
import MenuIconLight from '../assets/images/menu_icon_light.svg';
|
||||||
|
import ValidIcon from '../assets/images/green_check_dark.png';
|
||||||
|
import InvalidIcon from '../assets/images/error_icon_dark.png';
|
||||||
|
import LoadingIcon from '../assets/images/sync_icon_dark.png';
|
||||||
|
import ArrowUpIconDark from '../assets/images/arrow_up_dark.png';
|
||||||
|
import ArrowUpIconLight from '../assets/images/arrow_up_light.png';
|
||||||
|
|
||||||
import type { SendTransactionInput } from '../containers/send';
|
import type { SendTransactionInput } from '../containers/send';
|
||||||
import type { State as SendState } from '../redux/modules/send';
|
import type { State as SendState } from '../redux/modules/send';
|
||||||
|
|
||||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
|
||||||
import MenuIcon from '../assets/images/menu_icon.svg';
|
|
||||||
import ValidIcon from '../assets/images/green_check.png';
|
|
||||||
import InvalidIcon from '../assets/images/error_icon.png';
|
|
||||||
import LoadingIcon from '../assets/images/sync_icon.png';
|
|
||||||
import ArrowUpIcon from '../assets/images/arrow_up.png';
|
|
||||||
|
|
||||||
import theme from '../theme';
|
|
||||||
|
|
||||||
const rotate = keyframes`
|
const rotate = keyframes`
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
@ -51,13 +52,19 @@ const Loader = styled.img`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FormWrapper = styled.div`
|
const FormWrapper = styled.div`
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
|
||||||
width: 71%;
|
width: 71%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SendWrapper = styled(ColumnComponent)`
|
const SendWrapper = styled(ColumnComponent)`
|
||||||
width: 25%;
|
width: 25%;
|
||||||
margin-top: 60px;
|
margin-top: 42px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Label = styled(InputLabelComponent)`
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: ${props => props.theme.colors.transactionsDate};
|
||||||
|
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
||||||
|
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type AmountProps =
|
type AmountProps =
|
||||||
|
@ -96,7 +103,6 @@ const ShowFeeButton = styled.button`
|
||||||
outline: none;
|
outline: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 30px 0;
|
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -113,16 +119,19 @@ const SeeMoreIcon = styled.img`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const FeeWrapper = styled.div`
|
const FeeWrapper = styled.div`
|
||||||
background-color: #000;
|
background-color: ${props => props.theme.colors.sendAdditionalOptionsBg};
|
||||||
border-radius: 4px;
|
border: 1px solid ${props => props.theme.colors.sendAdditionalOptionsBorder};
|
||||||
padding: 13px 19px;
|
border-radius: 3px;
|
||||||
|
padding: 0 20px 15px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InfoCard = styled.div`
|
const InfoCard = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${props => props.theme.colors.sendCardBg};
|
||||||
|
border: 1px solid ${props => props.theme.colors.sendCardBorder}
|
||||||
border-radius: ${props => props.theme.boxBorderRadius};
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
|
margin-bottom: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InfoContent = styled.div`
|
const InfoContent = styled.div`
|
||||||
|
@ -141,7 +150,11 @@ const InfoCardUSD = styled(TextComponent)`
|
||||||
|
|
||||||
const FormButton = styled(Button)`
|
const FormButton = styled(Button)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 10px 0;
|
margin: 5px 0;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ModalContent = styled(ColumnComponent)`
|
const ModalContent = styled(ColumnComponent)`
|
||||||
|
@ -170,6 +183,10 @@ const ItemLabel = styled(TextComponent)`
|
||||||
margin-bottom: 3.5px;
|
margin-bottom: 3.5px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ValidateItemLabel = styled(ItemLabel)`
|
||||||
|
margin-bottom: -1px;
|
||||||
|
`;
|
||||||
|
|
||||||
const SendZECValue = styled(TextComponent)`
|
const SendZECValue = styled(TextComponent)`
|
||||||
color: ${props => props.theme.colors.transactionSent};
|
color: ${props => props.theme.colors.transactionSent};
|
||||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
font-size: ${props => `${props.theme.fontSize.large}em`};
|
||||||
|
@ -225,8 +242,12 @@ const MaxAvailableAmount = styled.button`
|
||||||
background: none;
|
background: none;
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-left: ${props => `1px solid ${props.theme.colors.background(props)}`};
|
border-left: 1px solid ${props => props.theme.colors.inputBorder};
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -238,6 +259,32 @@ const MaxAvailableAmountImg = styled.img`
|
||||||
height: 20px;
|
height: 20px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ValidateWrapper = styled(RowComponent)`
|
||||||
|
margin-top: 3px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
const ActionsWrapper = styled(RowComponent)`
|
||||||
|
padding: 30px 0;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HexadecimalWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
opacity: 0.7;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HexadecimalText = styled(TextComponent)`
|
||||||
|
white-space: nowrap;
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
...SendState,
|
...SendState,
|
||||||
balance: number,
|
balance: number,
|
||||||
|
@ -250,6 +297,7 @@ type Props = {
|
||||||
loadAddresses: () => void,
|
loadAddresses: () => void,
|
||||||
loadZECPrice: () => void,
|
loadZECPrice: () => void,
|
||||||
getAddressBalance: ({ address: string }) => void,
|
getAddressBalance: ({ address: string }) => void,
|
||||||
|
theme: AppTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -274,7 +322,7 @@ const initialState = {
|
||||||
isHexMemo: false,
|
isHexMemo: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class SendView extends PureComponent<Props, State> {
|
class Component extends PureComponent<Props, State> {
|
||||||
state = initialState;
|
state = initialState;
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -383,18 +431,24 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
renderValidationStatus = () => {
|
renderValidationStatus = () => {
|
||||||
const { isToAddressValid } = this.props;
|
const { isToAddressValid, theme } = this.props;
|
||||||
|
|
||||||
return isToAddressValid ? (
|
return isToAddressValid ? (
|
||||||
<RowComponent alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={ValidIcon} />
|
<ValidateStatusIcon src={ValidIcon} />
|
||||||
<ItemLabel value='VALID' color={theme.colors.transactionReceived} />
|
<ValidateItemLabel
|
||||||
</RowComponent>
|
value='VALID'
|
||||||
|
color={theme.colors.transactionReceived}
|
||||||
|
/>
|
||||||
|
</ValidateWrapper>
|
||||||
) : (
|
) : (
|
||||||
<RowComponent alignItems='center'>
|
<ValidateWrapper alignItems='center'>
|
||||||
<ValidateStatusIcon src={InvalidIcon} />
|
<ValidateStatusIcon src={InvalidIcon} />
|
||||||
<ItemLabel value='INVALID' color={theme.colors.transactionSent} />
|
<ValidateItemLabel
|
||||||
</RowComponent>
|
value='INVALID'
|
||||||
|
color={theme.colors.transactionSent}
|
||||||
|
/>
|
||||||
|
</ValidateWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -481,10 +535,10 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
addresses, balance, zecPrice, isSending, error, operationId,
|
addresses, balance, zecPrice, isSending, error, operationId, theme,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const {
|
const {
|
||||||
showFee, from, amount, to, memo, fee, feeType,
|
showFee, from, amount, to, memo, fee, feeType, isHexMemo,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const isEmpty = amount === '';
|
const isEmpty = amount === '';
|
||||||
|
@ -505,10 +559,18 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
append: 'USD $',
|
append: 'USD $',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const seeMoreIcon = theme.mode === DARK
|
||||||
|
? MenuIconDark
|
||||||
|
: MenuIconLight;
|
||||||
|
|
||||||
|
const arrowUpIcon = theme.mode === DARK
|
||||||
|
? ArrowUpIconDark
|
||||||
|
: ArrowUpIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RowComponent id='send-wrapper' justifyContent='space-between'>
|
<RowComponent id='send-wrapper' justifyContent='space-between'>
|
||||||
<FormWrapper>
|
<FormWrapper>
|
||||||
<InputLabelComponent value='From an address' />
|
<Label value='From an address' />
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
onChange={this.handleChange('from')}
|
onChange={this.handleChange('from')}
|
||||||
value={from}
|
value={from}
|
||||||
|
@ -516,7 +578,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
options={addresses.map(addr => ({ value: addr, label: addr }))}
|
options={addresses.map(addr => ({ value: addr, label: addr }))}
|
||||||
capitalize={false}
|
capitalize={false}
|
||||||
/>
|
/>
|
||||||
<InputLabelComponent value='Amount' />
|
<Label value='Amount' />
|
||||||
<AmountWrapper isEmpty={isEmpty}>
|
<AmountWrapper isEmpty={isEmpty}>
|
||||||
<AmountInput
|
<AmountInput
|
||||||
renderRight={() => (
|
renderRight={() => (
|
||||||
|
@ -524,7 +586,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
onClick={() => this.handleChange('amount')(balance)}
|
onClick={() => this.handleChange('amount')(balance)}
|
||||||
disabled={!from}
|
disabled={!from}
|
||||||
>
|
>
|
||||||
<MaxAvailableAmountImg src={ArrowUpIcon} />
|
<MaxAvailableAmountImg src={arrowUpIcon} />
|
||||||
</MaxAvailableAmount>
|
</MaxAvailableAmount>
|
||||||
)}
|
)}
|
||||||
isEmpty={isEmpty}
|
isEmpty={isEmpty}
|
||||||
|
@ -537,7 +599,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
disabled={!from}
|
disabled={!from}
|
||||||
/>
|
/>
|
||||||
</AmountWrapper>
|
</AmountWrapper>
|
||||||
<InputLabelComponent value='To' />
|
<Label value='To' />
|
||||||
<InputComponent
|
<InputComponent
|
||||||
onChange={this.handleChange('to')}
|
onChange={this.handleChange('to')}
|
||||||
value={to}
|
value={to}
|
||||||
|
@ -545,7 +607,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
renderRight={to ? this.renderValidationStatus : () => null}
|
renderRight={to ? this.renderValidationStatus : () => null}
|
||||||
name='to'
|
name='to'
|
||||||
/>
|
/>
|
||||||
<InputLabelComponent value='Memo' />
|
<Label value='Memo' />
|
||||||
<InputComponent
|
<InputComponent
|
||||||
onChange={this.handleChange('memo')}
|
onChange={this.handleChange('memo')}
|
||||||
value={memo}
|
value={memo}
|
||||||
|
@ -553,10 +615,7 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
placeholder='Enter a text here'
|
placeholder='Enter a text here'
|
||||||
name='memo'
|
name='memo'
|
||||||
/>
|
/>
|
||||||
<RowComponent justifyContent='flex-end'>
|
<ActionsWrapper>
|
||||||
<Checkbox onChange={event => this.setState({ isHexMemo: event.target.checked })} />
|
|
||||||
<TextComponent value='Hexadecimal memo' />
|
|
||||||
</RowComponent>
|
|
||||||
<ShowFeeButton
|
<ShowFeeButton
|
||||||
id='send-show-additional-options-button'
|
id='send-show-additional-options-button'
|
||||||
onClick={() => this.setState(state => ({
|
onClick={() => this.setState(state => ({
|
||||||
|
@ -564,9 +623,20 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<SeeMoreIcon src={MenuIcon} alt='Show more icon' />
|
<SeeMoreIcon src={seeMoreIcon} alt='Show more icon' />
|
||||||
<TextComponent value={`${showFee ? 'Hide' : 'Show'} Additional Options`} />
|
<TextComponent value={`${showFee ? 'Hide' : 'Show'} Additional Options`} />
|
||||||
</ShowFeeButton>
|
</ShowFeeButton>
|
||||||
|
<HexadecimalWrapper>
|
||||||
|
<Checkbox
|
||||||
|
onChange={event => this.setState({ isHexMemo: event.target.checked })}
|
||||||
|
checked={isHexMemo}
|
||||||
|
/>
|
||||||
|
<HexadecimalText
|
||||||
|
onClick={() => this.setState(prevState => ({ isHexMemo: !prevState.isHexMemo }))}
|
||||||
|
value='Hexadecimal Memo'
|
||||||
|
/>
|
||||||
|
</HexadecimalWrapper>
|
||||||
|
</ActionsWrapper>
|
||||||
<RevealsMain>
|
<RevealsMain>
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
|
@ -591,22 +661,23 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
<animated.div style={props}>
|
<animated.div style={props}>
|
||||||
<FeeWrapper id='send-fee-wrapper'>
|
<FeeWrapper id='send-fee-wrapper'>
|
||||||
<RowComponent alignItems='flex-end' justifyContent='space-between'>
|
<RowComponent alignItems='flex-end' justifyContent='space-between'>
|
||||||
<ColumnComponent width='74%'>
|
<ColumnComponent width='64%'>
|
||||||
<InputLabelComponent value='Fee' />
|
<Label value='Fee' />
|
||||||
<InputComponent
|
<InputComponent
|
||||||
type='number'
|
type='number'
|
||||||
onChange={this.handleChange('fee')}
|
onChange={this.handleChange('fee')}
|
||||||
value={String(fee)}
|
value={String(fee)}
|
||||||
disabled={feeType !== FEES.CUSTOM}
|
disabled={feeType !== FEES.CUSTOM}
|
||||||
bgColor={theme.colors.blackTwo}
|
bgColor={theme.colors.sendAdditionalInputBg}
|
||||||
|
color={theme.colors.sendAdditionalInputText}
|
||||||
name='fee'
|
name='fee'
|
||||||
/>
|
/>
|
||||||
</ColumnComponent>
|
</ColumnComponent>
|
||||||
<ColumnComponent width='25%'>
|
<ColumnComponent width='35%'>
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
placement='top'
|
placement='top'
|
||||||
value={String(feeType)}
|
value={String(feeType)}
|
||||||
bgColor={theme.colors.blackTwo}
|
bgColor={theme.colors.sendAdditionalInputBg}
|
||||||
onChange={this.handleChangeFeeType}
|
onChange={this.handleChangeFeeType}
|
||||||
options={Object.keys(FEES).map(cur => ({
|
options={Object.keys(FEES).map(cur => ({
|
||||||
label: cur.toLowerCase(),
|
label: cur.toLowerCase(),
|
||||||
|
@ -649,7 +720,6 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
onClick={() => this.showModal(toggle)}
|
onClick={() => this.showModal(toggle)}
|
||||||
id='send-submit-button'
|
id='send-submit-button'
|
||||||
label='Send'
|
label='Send'
|
||||||
variant='secondary'
|
|
||||||
focused
|
focused
|
||||||
isFluid
|
isFluid
|
||||||
disabled={!from || !amount || !to || !fee}
|
disabled={!from || !amount || !to || !fee}
|
||||||
|
@ -666,9 +736,11 @@ export class SendView extends PureComponent<Props, State> {
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
)}
|
)}
|
||||||
</ConfirmDialogComponent>
|
</ConfirmDialogComponent>
|
||||||
<FormButton label='Cancel' variant='secondary' />
|
<FormButton label='Clear Form' variant='secondary' />
|
||||||
</SendWrapper>
|
</SendWrapper>
|
||||||
</RowComponent>
|
</RowComponent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const SendView = withTheme(Component);
|
||||||
|
|
|
@ -20,18 +20,30 @@ import { Clipboard } from '../components/clipboard';
|
||||||
import { SelectComponent } from '../components/select';
|
import { SelectComponent } from '../components/select';
|
||||||
|
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
import { DARK, LIGHT } from '../constants/themes';
|
import { DARK, LIGHT, THEME_MODE } from '../constants/themes';
|
||||||
import electronStore from '../../config/electron-store';
|
import electronStore from '../../config/electron-store';
|
||||||
|
import { openExternal } from '../utils/open-external';
|
||||||
|
|
||||||
import type { MapDispatchToProps, MapStateToProps } from '../containers/settings';
|
import type { MapDispatchToProps, MapStateToProps } from '../containers/settings';
|
||||||
|
|
||||||
const HOME_DIR = electron.remote.app.getPath('home');
|
const HOME_DIR = electron.remote.app.getPath('home');
|
||||||
|
|
||||||
|
const EXPORT_VIEW_KEYS_TITLE = 'Export View Keys';
|
||||||
|
const EXPORT_VIEW_KEYS_CONTENT = 'Viewing keys for shielded addresses allow for the disclosure of all transaction information to a preffered party. Anyone who holds these keys can see all shielded transaction details, but cannot spend coins as it is not a private key.';
|
||||||
|
const EXPORT_VIEW_KEYS_LEARN_MORE = 'https://z.cash/blog/viewing-keys-selective-disclosure';
|
||||||
|
const IMPORT_PRIV_KEYS_TITLE = 'Import Private Keys';
|
||||||
|
const IMPORT_PRIV_KEYS_CONTENT = 'Importing private keys will add the spendable coins to this wallet.';
|
||||||
|
const EXPORT_PRIV_KEYS_TITLE = 'Export Private Keys';
|
||||||
|
const EXPORT_PRIV_KEYS_CONTENT = 'Beware: exporting your private keys will allow anyone controlling them to spend your coins. Only perform this action on a trusted machine.';
|
||||||
|
const BACKUP_WALLET_TITLE = 'Backup Wallet';
|
||||||
|
const BACKUP_WALLET_CONTENT = 'It is recommended that you backup your wallet often.';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ModalContent = styled.div`
|
const ModalContent = styled.div`
|
||||||
padding: 20px;
|
padding: 20px 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -53,9 +65,37 @@ const ClipboardButton = styled(Clipboard)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SettingsWrapper = styled.div`
|
const SettingsWrapper = styled.div`
|
||||||
margin-bottom: 45px;
|
margin-bottom: 20px;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
width: 37%;
|
width: 70%;
|
||||||
|
max-width: 600px;
|
||||||
|
min-width: 350px;
|
||||||
|
background: ${props => props.theme.colors.settingsCardBg};
|
||||||
|
padding: 20px 20px 10px 20px;
|
||||||
|
border: 1px solid ${props => props.theme.colors.inputBorder};
|
||||||
|
border-radius: ${props => props.theme.boxBorderRadius};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SettingsInnerWrapper = styled.div`
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LearnMore = styled.div`
|
||||||
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: ${props => props.theme.fontFamily};;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: ${props => props.theme.colors.settingsLearnMore};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${props => props.theme.colors.settingsLearnMoreHovered};;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SettingsTitle = styled(TextComponent)`
|
const SettingsTitle = styled(TextComponent)`
|
||||||
|
@ -67,12 +107,25 @@ const SettingsTitle = styled(TextComponent)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SettingsContent = styled(TextComponent)`
|
const SettingsContent = styled(TextComponent)`
|
||||||
margin-bottom: 20px;
|
margin-bottom: 30px;
|
||||||
margin-top: 10px;
|
margin-top: 15px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
line-height: 1.4;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ThemeSelectWrapper = styled.div`
|
const ThemeSelectWrapper = styled.div`
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
width: 70%;
|
||||||
|
max-width: 600px;
|
||||||
|
min-width: 350px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SettingsActionWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Key = {
|
type Key = {
|
||||||
|
@ -221,37 +274,38 @@ export class SettingsView extends PureComponent<Props, State> {
|
||||||
error,
|
error,
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
|
const themeOptions = [
|
||||||
|
{ label: 'Dark', value: DARK },
|
||||||
|
{ label: 'Light', value: LIGHT },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<ThemeSelectWrapper>
|
<ThemeSelectWrapper>
|
||||||
<SettingsTitle value='Theme' />
|
<SettingsTitle value='Theme' />
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
onChange={newMode => electronStore.set('THEME_MODE', newMode)}
|
onChange={newMode => electronStore.set(THEME_MODE, newMode)}
|
||||||
options={[
|
value={electronStore.get(THEME_MODE)}
|
||||||
{
|
options={themeOptions}
|
||||||
label: 'Dark',
|
|
||||||
value: DARK,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Light',
|
|
||||||
value: LIGHT,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
value={electronStore.get('THEME_MODE')}
|
|
||||||
/>
|
/>
|
||||||
</ThemeSelectWrapper>
|
</ThemeSelectWrapper>
|
||||||
<ConfirmDialogComponent
|
<ConfirmDialogComponent
|
||||||
title='Export view keys'
|
title={EXPORT_VIEW_KEYS_TITLE}
|
||||||
renderTrigger={toggleVisibility => (
|
renderTrigger={toggleVisibility => (
|
||||||
<SettingsWrapper>
|
<SettingsWrapper>
|
||||||
<SettingsTitle value='Export view keys' />
|
<SettingsTitle value={EXPORT_VIEW_KEYS_TITLE} />
|
||||||
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
|
<SettingsContent value={EXPORT_VIEW_KEYS_CONTENT} />
|
||||||
<Btn label='Export view keys' onClick={toggleVisibility} />
|
<SettingsActionWrapper>
|
||||||
|
<Btn label={EXPORT_VIEW_KEYS_TITLE} onClick={toggleVisibility} />
|
||||||
|
<LearnMore onClick={() => openExternal(EXPORT_VIEW_KEYS_LEARN_MORE)}>
|
||||||
|
Learn More
|
||||||
|
</LearnMore>
|
||||||
|
</SettingsActionWrapper>
|
||||||
</SettingsWrapper>
|
</SettingsWrapper>
|
||||||
)}
|
)}
|
||||||
onConfirm={this.exportViewKeys}
|
onConfirm={this.exportViewKeys}
|
||||||
showButtons={!successExportViewKeys}
|
showButtons={!successExportViewKeys}
|
||||||
width={750}
|
width={450}
|
||||||
>
|
>
|
||||||
{() => (
|
{() => (
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
|
@ -277,18 +331,19 @@ export class SettingsView extends PureComponent<Props, State> {
|
||||||
)}
|
)}
|
||||||
</ConfirmDialogComponent>
|
</ConfirmDialogComponent>
|
||||||
|
|
||||||
<ConfirmDialogComponent
|
|
||||||
title='Export private keys'
|
|
||||||
renderTrigger={toggleVisibility => (
|
|
||||||
<SettingsWrapper>
|
<SettingsWrapper>
|
||||||
<SettingsTitle value='Export private keys' />
|
<ConfirmDialogComponent
|
||||||
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
|
title={EXPORT_PRIV_KEYS_TITLE}
|
||||||
<Btn label='Export private keys' onClick={toggleVisibility} />
|
renderTrigger={toggleVisibility => (
|
||||||
</SettingsWrapper>
|
<SettingsInnerWrapper>
|
||||||
|
<SettingsTitle value={EXPORT_PRIV_KEYS_TITLE} />
|
||||||
|
<SettingsContent value={EXPORT_PRIV_KEYS_CONTENT} />
|
||||||
|
<Btn label={EXPORT_PRIV_KEYS_TITLE} onClick={toggleVisibility} />
|
||||||
|
</SettingsInnerWrapper>
|
||||||
)}
|
)}
|
||||||
onConfirm={this.exportPrivateKeys}
|
onConfirm={this.exportPrivateKeys}
|
||||||
showButtons={!successExportPrivateKeys}
|
showButtons={!successExportPrivateKeys}
|
||||||
width={750}
|
width={450}
|
||||||
>
|
>
|
||||||
{() => (
|
{() => (
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
|
@ -313,19 +368,18 @@ export class SettingsView extends PureComponent<Props, State> {
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
)}
|
)}
|
||||||
</ConfirmDialogComponent>
|
</ConfirmDialogComponent>
|
||||||
|
|
||||||
<ConfirmDialogComponent
|
<ConfirmDialogComponent
|
||||||
title='Import private keys'
|
title={IMPORT_PRIV_KEYS_TITLE}
|
||||||
renderTrigger={toggleVisibility => (
|
renderTrigger={toggleVisibility => (
|
||||||
<SettingsWrapper>
|
<SettingsInnerWrapper>
|
||||||
<SettingsTitle value='Import private keys' />
|
<SettingsTitle value={IMPORT_PRIV_KEYS_TITLE} />
|
||||||
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
|
<SettingsContent value={IMPORT_PRIV_KEYS_CONTENT} />
|
||||||
<Btn label='Import private keys' onClick={toggleVisibility} />
|
<Btn label={IMPORT_PRIV_KEYS_TITLE} onClick={toggleVisibility} />
|
||||||
</SettingsWrapper>
|
</SettingsInnerWrapper>
|
||||||
)}
|
)}
|
||||||
onConfirm={this.importPrivateKeys}
|
onConfirm={this.importPrivateKeys}
|
||||||
showButtons={!successImportPrivateKeys}
|
showButtons={!successImportPrivateKeys}
|
||||||
width={900}
|
width={450}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
>
|
>
|
||||||
{() => (
|
{() => (
|
||||||
|
@ -344,11 +398,12 @@ export class SettingsView extends PureComponent<Props, State> {
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
)}
|
)}
|
||||||
</ConfirmDialogComponent>
|
</ConfirmDialogComponent>
|
||||||
|
</SettingsWrapper>
|
||||||
|
|
||||||
<SettingsWrapper>
|
<SettingsWrapper>
|
||||||
<SettingsTitle value='Backup Wallet' />
|
<SettingsTitle value={BACKUP_WALLET_TITLE} />
|
||||||
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
|
<SettingsContent value={BACKUP_WALLET_CONTENT} />
|
||||||
<Btn label='Backup wallet.dat' onClick={this.backupWalletDat} />
|
<Btn label={BACKUP_WALLET_TITLE} onClick={this.backupWalletDat} />
|
||||||
</SettingsWrapper>
|
</SettingsWrapper>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -32,16 +32,29 @@ const RoundedTransactionWrapper = styled.div`
|
||||||
${props => (props.roundPosition === 'top'
|
${props => (props.roundPosition === 'top'
|
||||||
? `
|
? `
|
||||||
border-top-left-radius: ${props.theme.boxBorderRadius};
|
border-top-left-radius: ${props.theme.boxBorderRadius};
|
||||||
border-top-right-radius: ${props.theme.boxBorderRadius};`
|
border-top-right-radius: ${props.theme.boxBorderRadius};
|
||||||
: `border-bottom-left-radius: ${props.theme.boxBorderRadius};
|
`
|
||||||
border-bottom-right-radius: ${props.theme.boxBorderRadius};`)}
|
: `
|
||||||
|
border-bottom-left-radius: ${props.theme.boxBorderRadius};
|
||||||
|
border-bottom-right-radius: ${props.theme.boxBorderRadius};
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ListWrapper = styled.div`
|
||||||
|
margin-top: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export class TransactionsView extends PureComponent<Props> {
|
export class TransactionsView extends PureComponent<Props> {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { getTransactions, resetTransactionsList } = this.props;
|
const { getTransactions, resetTransactionsList } = this.props;
|
||||||
|
|
||||||
resetTransactionsList();
|
resetTransactionsList();
|
||||||
getTransactions({ count: PAGE_SIZE, offset: 0, shieldedTransactionsCount: 0 });
|
getTransactions({
|
||||||
|
count: PAGE_SIZE,
|
||||||
|
offset: 0,
|
||||||
|
shieldedTransactionsCount: 0,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
isRowLoaded = ({ index }: { index: number }) => {
|
isRowLoaded = ({ index }: { index: number }) => {
|
||||||
|
@ -122,9 +135,14 @@ export class TransactionsView extends PureComponent<Props> {
|
||||||
return transactionItem;
|
return transactionItem;
|
||||||
};
|
};
|
||||||
|
|
||||||
renderRow = ({ index, key, style }: { index: number, key: string, style: Object }) => (
|
renderRow = (
|
||||||
|
{ index, key, style }: { index: number, key: string, style: Object },
|
||||||
|
) => (
|
||||||
<div key={key} style={style}>
|
<div key={key} style={style}>
|
||||||
{this.isRowLoaded({ index }) ? this.renderTransactions({ index }) : 'Loading...'}
|
{this.isRowLoaded({ index })
|
||||||
|
? this.renderTransactions({ index })
|
||||||
|
: 'Loading...'
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -179,6 +197,7 @@ export class TransactionsView extends PureComponent<Props> {
|
||||||
{({ onRowsRendered, registerChild }) => (
|
{({ onRowsRendered, registerChild }) => (
|
||||||
<AutoSizer>
|
<AutoSizer>
|
||||||
{({ width, height }) => (
|
{({ width, height }) => (
|
||||||
|
<ListWrapper>
|
||||||
<List
|
<List
|
||||||
noRowsRenderer={EmptyTransactionsComponent}
|
noRowsRenderer={EmptyTransactionsComponent}
|
||||||
ref={registerChild}
|
ref={registerChild}
|
||||||
|
@ -189,6 +208,7 @@ export class TransactionsView extends PureComponent<Props> {
|
||||||
width={width}
|
width={width}
|
||||||
height={height - 20}
|
height={height - 20}
|
||||||
/>
|
/>
|
||||||
|
</ListWrapper>
|
||||||
)}
|
)}
|
||||||
</AutoSizer>
|
</AutoSizer>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,31 +1,126 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import { ThemeSet } from 'styled-theming';
|
import { ThemeSet } from 'styled-theming';
|
||||||
|
|
||||||
type Colors = {
|
type Colors = {
|
||||||
primary: ThemeSet,
|
primary: ThemeSet,
|
||||||
secondary: ThemeSet,
|
secondary: ThemeSet,
|
||||||
sidebarBg: ThemeSet,
|
sidebarBg: ThemeSet,
|
||||||
sidebarItem: ThemeSet,
|
|
||||||
sidebarItemActive: ThemeSet,
|
// Card
|
||||||
sidebarHoveredItem: ThemeSet,
|
|
||||||
sidebarHoveredItemLabel: ThemeSet,
|
|
||||||
cardBackgroundColor: ThemeSet,
|
cardBackgroundColor: ThemeSet,
|
||||||
|
sendCardBg: ThemeSet,
|
||||||
|
sendCardBorder: ThemeSet,
|
||||||
|
|
||||||
text: ThemeSet,
|
text: ThemeSet,
|
||||||
activeItem: ThemeSet,
|
activeItem: ThemeSet,
|
||||||
inactiveItem: ThemeSet,
|
inactiveItem: ThemeSet,
|
||||||
sidebarLogoGradientBegin: ThemeSet,
|
|
||||||
sidebarLogoGradientEnd: ThemeSet,
|
|
||||||
background: ThemeSet,
|
background: ThemeSet,
|
||||||
|
|
||||||
|
selectButtonShadow: ThemeSet,
|
||||||
|
|
||||||
|
modalItemLabel: ThemeSet,
|
||||||
|
blackTwo: ThemeSet,
|
||||||
|
buttonBorderColor: ThemeSet,
|
||||||
|
|
||||||
|
// Dropdown
|
||||||
|
dropdownBg: ThemeSet,
|
||||||
|
dropdownHoveredBg: ThemeSet,
|
||||||
|
dropdownBorder: ThemeSet,
|
||||||
|
dropdownIconBorder: ThemeSet,
|
||||||
|
dropdownOpenedIconBorder: ThemeSet,
|
||||||
|
|
||||||
|
// Divider
|
||||||
|
divider: ThemeSet,
|
||||||
|
|
||||||
|
// Header
|
||||||
|
headerTitle: ThemeSet,
|
||||||
|
|
||||||
|
// Status Pill
|
||||||
|
statusPillBg: ThemeSet,
|
||||||
|
statusPillLabel: ThemeSet,
|
||||||
|
statusPillBorder: ThemeSet,
|
||||||
|
|
||||||
|
// Wallet Summary
|
||||||
|
walletSummaryBg: ThemeSet,
|
||||||
|
walletSummaryBorder: ThemeSet,
|
||||||
|
|
||||||
|
// Wallet Address
|
||||||
|
walletAddressBg: ThemeSet,
|
||||||
|
walletAddressBorder: ThemeSet,
|
||||||
|
walletAddressInput: ThemeSet,
|
||||||
|
walletAddressInputHovered: ThemeSet,
|
||||||
|
walletAddressTooltip: ThemeSet,
|
||||||
|
walletAddressTooltipBg: ThemeSet,
|
||||||
|
|
||||||
|
// Console
|
||||||
|
consoleBg: ThemeSet,
|
||||||
|
consoleBorder: ThemeSet,
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
buttonPrimaryBg: ThemeSet,
|
||||||
|
buttonPrimaryText: ThemeSet,
|
||||||
|
buttonPrimaryDisabledBg: ThemeSet,
|
||||||
|
buttonSecondaryBg: ThemeSet,
|
||||||
|
buttonSecondaryText: ThemeSet,
|
||||||
|
buttonSecondaryDisabledBg: ThemeSet,
|
||||||
|
buttonSecondaryBorder: ThemeSet,
|
||||||
|
buttonSecondaryHoveredBg: ThemeSet,
|
||||||
|
|
||||||
|
// QR Code
|
||||||
|
qrCodeWrapperBg: ThemeSet,
|
||||||
|
qrCodeWrapperBorder: ThemeSet,
|
||||||
|
|
||||||
|
// Transactions
|
||||||
transactionSent: ThemeSet,
|
transactionSent: ThemeSet,
|
||||||
transactionReceived: ThemeSet,
|
transactionReceived: ThemeSet,
|
||||||
transactionsDate: ThemeSet,
|
transactionsDate: ThemeSet,
|
||||||
transactionsItemHovered: ThemeSet,
|
transactionsItemHovered: ThemeSet,
|
||||||
inputBackground: ThemeSet,
|
|
||||||
selectButtonShadow: ThemeSet,
|
// Transaction Item
|
||||||
transactionsDetailsLabel: ThemeSet,
|
transactionItemBg: ThemeSet,
|
||||||
statusPillLabel: ThemeSet,
|
transactionItemHoverBg: ThemeSet,
|
||||||
modalItemLabel: ThemeSet,
|
transactionItemAddress: ThemeSet,
|
||||||
blackTwo: ThemeSet,
|
transactionItemAddressHover: ThemeSet,
|
||||||
buttonBorderColor: ThemeSet,
|
|
||||||
|
// Transaction Details
|
||||||
|
transactionDetailsShadow: ThemeSet,
|
||||||
|
transactionDetailsBg: ThemeSet,
|
||||||
|
transactionDetailsRowHover: ThemeSet,
|
||||||
|
transactionDetailsDivider: ThemeSet,
|
||||||
|
transactionDetailsLabel: ThemeSet,
|
||||||
|
|
||||||
|
// Input
|
||||||
|
inputBg: ThemeSet,
|
||||||
|
inputBorder: ThemeSet,
|
||||||
|
inputBorderActive: ThemeSet,
|
||||||
|
|
||||||
|
// Sidebar
|
||||||
|
sidebarBg: ThemeSet,
|
||||||
|
sidebarItem: ThemeSet,
|
||||||
|
sidebarItemActive: ThemeSet,
|
||||||
|
sidebarActiveItemBorder: ThemeSet,
|
||||||
|
sidebarBorderRight: ThemeSet,
|
||||||
|
sidebarItemHovered: ThemeSet,
|
||||||
|
sidebarHoveredItemLabel: ThemeSet,
|
||||||
|
sidebarLogoGradientBegin: ThemeSet,
|
||||||
|
sidebarLogoGradientEnd: ThemeSet,
|
||||||
|
sidebarItemHoveredBg: ThemeSet,
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
settingsCardBg: ThemeSet,
|
||||||
|
settingsLearnMore: ThemeSet,
|
||||||
|
settingsLearnMoreHovered: ThemeSet,
|
||||||
|
|
||||||
|
// Loading
|
||||||
|
loadingScreenBg: ThemeSet,
|
||||||
|
loadingScreenText: ThemeSet,
|
||||||
|
|
||||||
|
// Misc
|
||||||
|
sendAdditionalOptionsBg: ThemeSet,
|
||||||
|
sendAdditionalOptionsBorder: ThemeSet,
|
||||||
|
sendAdditionalInputBg: ThemeSet,
|
||||||
|
sendAdditionalInputText: ThemeSet,
|
||||||
};
|
};
|
||||||
|
|
||||||
type FontSize = {
|
type FontSize = {
|
||||||
|
@ -42,17 +137,26 @@ type FontWeight = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type AppTheme = {
|
type AppTheme = {
|
||||||
|
// General
|
||||||
mode: string,
|
mode: string,
|
||||||
|
|
||||||
|
// Typography
|
||||||
fontFamily: string,
|
fontFamily: string,
|
||||||
fontWeight: FontWeight,
|
fontWeight: FontWeight,
|
||||||
fontSize: FontSize,
|
fontSize: FontSize,
|
||||||
|
|
||||||
|
// Colors
|
||||||
colors: Colors,
|
colors: Colors,
|
||||||
|
|
||||||
|
// Spacing
|
||||||
sidebarWidth: string,
|
sidebarWidth: string,
|
||||||
headerHeight: string,
|
headerHeight: string,
|
||||||
layoutPaddingLeft: string,
|
layoutPaddingLeft: string,
|
||||||
layoutPaddingRight: string,
|
layoutPaddingRight: string,
|
||||||
layoutContentPaddingTop: string,
|
layoutContentPaddingTop: string,
|
||||||
boxBorderRadius: string,
|
boxBorderRadius: string,
|
||||||
|
|
||||||
|
// Misc
|
||||||
transitionEase: string,
|
transitionEase: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|