mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 16:38:08 +00:00
Added support for icons and styled components
This commit is contained in:
parent
cd25b3f459
commit
e226847ccc
9
.babelrc
9
.babelrc
@ -17,14 +17,7 @@
|
||||
}],
|
||||
["babel-plugin-root-import", {
|
||||
"rootPathSuffix": "./src",
|
||||
"rootPathPrefix": "~",
|
||||
"alias": {
|
||||
"components": "./src/js/components",
|
||||
"config": "./src/js/config",
|
||||
"reducers": "./src/js/reducers",
|
||||
"actions": "./src/js/actions",
|
||||
"services": "./src/js/services"
|
||||
}
|
||||
"rootPathPrefix": "~"
|
||||
}],
|
||||
"babel-plugin-styled-components"
|
||||
],
|
||||
|
@ -10,6 +10,7 @@
|
||||
"jest": true
|
||||
},
|
||||
"rules": {
|
||||
"react/destructuring-assignment": 0,
|
||||
"react/jsx-one-expression-per-line": 0,
|
||||
"react/jsx-indent": [2, 4],
|
||||
"react/jsx-indent-props": [2, 4],
|
||||
|
@ -16,6 +16,8 @@ const Wrapper = styled.header`
|
||||
}
|
||||
`;
|
||||
|
||||
const LinkWrapper = styled.div``;
|
||||
|
||||
const LayoutWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -57,12 +59,12 @@ const Header = (): React$Element<string> => (
|
||||
<path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" />
|
||||
<polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
|
||||
</svg>
|
||||
<div>
|
||||
<LinkWrapper>
|
||||
<A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</A>
|
||||
<A href="https://doc.satoshilabs.com/trezor-user/" target="_blank" rel="noreferrer noopener">Docs</A>
|
||||
<A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
|
||||
<A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
|
||||
</div>
|
||||
</LinkWrapper>
|
||||
</LayoutWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
|
42
src/js/components/common/Icon.js
Normal file
42
src/js/components/common/Icon.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Icon = (props) => {
|
||||
const styles = {
|
||||
svg: {
|
||||
display: 'inline-block',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
path: {
|
||||
fill: props.color,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
style={styles.svg}
|
||||
width={`${props.size}`}
|
||||
height={`${props.size}`}
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
style={styles.path}
|
||||
d={props.icon}
|
||||
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
Icon.propTypes = {
|
||||
icon: PropTypes.string.isRequired,
|
||||
size: PropTypes.number,
|
||||
color: PropTypes.string,
|
||||
};
|
||||
|
||||
Icon.defaultProps = {
|
||||
size: 30,
|
||||
color: 'black',
|
||||
};
|
||||
|
||||
export default Icon;
|
@ -1,6 +1,5 @@
|
||||
/* @flow */
|
||||
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
|
||||
@ -11,7 +10,7 @@ export default (props: { size: string, label?: string, className?: string }): Re
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ className } style={style}>
|
||||
<div className={className} style={style}>
|
||||
<p>{ props.label }</p>
|
||||
<svg className="circular" viewBox="25 25 50 50">
|
||||
<circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />
|
||||
|
@ -1,6 +1,6 @@
|
||||
/* @flow */
|
||||
|
||||
|
||||
import installers from '~/js/constants/bridge';
|
||||
import React, { Component } from 'react';
|
||||
import Select from 'react-select';
|
||||
import Preloader from './Preloader';
|
||||
@ -17,15 +17,6 @@ type InstallTarget = {
|
||||
label: string;
|
||||
}
|
||||
|
||||
const installers: Array<InstallTarget> = [
|
||||
{ id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
|
||||
{ id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
|
||||
{ id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
|
||||
{ id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
|
||||
{ id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
|
||||
{ id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
|
||||
];
|
||||
|
||||
// import type { Props } from './index';
|
||||
|
||||
type Props = {
|
||||
|
@ -1,15 +1,45 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { H2 } from '~/js/components/common/Heading';
|
||||
import Icon from '~/js/components/common/Icon';
|
||||
import colors from '~/js/config/colors';
|
||||
import ICONS from '~/js/constants/icons';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const Section = styled.section`
|
||||
`;
|
||||
|
||||
const P = styled.p`
|
||||
padding: 12px 0px 24px 0px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding-top: 15px;
|
||||
`;
|
||||
|
||||
const Row = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 48px;
|
||||
padding-bottom: 98px;
|
||||
`;
|
||||
|
||||
export const DeviceSettings = () => (
|
||||
<section className="device-settings">
|
||||
<div className="row">
|
||||
<H2>Device settings is under construction</H2>
|
||||
<p>Please use Bitcoin wallet interface to change your device settings</p>
|
||||
<Section>
|
||||
<Row>
|
||||
<Icon
|
||||
color={colors.WARNING_PRIMARY}
|
||||
icon={ICONS.WARNING}
|
||||
/>
|
||||
<StyledH2>Device settings is under construction</StyledH2>
|
||||
<P>Please use Bitcoin wallet interface to change your device settings</P>
|
||||
<a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
|
||||
</div>
|
||||
</section>
|
||||
</Row>
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default connect(null, null)(DeviceSettings);
|
||||
|
8
src/js/constants/bridge.js
Normal file
8
src/js/constants/bridge.js
Normal file
@ -0,0 +1,8 @@
|
||||
export default [
|
||||
{ id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
|
||||
{ id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
|
||||
{ id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
|
||||
{ id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
|
||||
{ id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
|
||||
{ id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
|
||||
];
|
3
src/js/constants/icons.js
Normal file
3
src/js/constants/icons.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
WARNING: 'M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z',
|
||||
};
|
@ -10,9 +10,9 @@ export const httpRequest = async (url: string, type: string = 'text'): any => {
|
||||
const txt: string = await response.text();
|
||||
return JSON.parse(txt);
|
||||
} if (type === 'binary') {
|
||||
return await response.arrayBuffer();
|
||||
await response.arrayBuffer();
|
||||
}
|
||||
return await response.text();
|
||||
await response.text();
|
||||
}
|
||||
throw new Error(`${url} ${response.statusText}`);
|
||||
|
||||
|
@ -60,12 +60,6 @@ article {
|
||||
flex-direction: column;
|
||||
background: @color_white;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 24px 48px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0px 48px;
|
||||
color: @color_text_secondary;
|
||||
|
@ -1,32 +0,0 @@
|
||||
.device-settings {
|
||||
.row {
|
||||
flex: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 48px;
|
||||
padding-bottom: 98px;
|
||||
|
||||
h2 {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&:before {
|
||||
.icomoon-warning;
|
||||
position: absolute;
|
||||
color: @color_warning_primary;
|
||||
font-size: 48px;
|
||||
top: -48px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 12px 0px 24px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
@ -14,7 +14,6 @@
|
||||
@import './send.less';
|
||||
@import './receive.less';
|
||||
@import './summary.less';
|
||||
@import './deviceSettings.less';
|
||||
|
||||
@import './landingPage.less';
|
||||
|
||||
|
@ -169,11 +169,6 @@
|
||||
|
||||
main {
|
||||
|
||||
h2.claim {
|
||||
font-size: 36px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
Loading…
Reference in New Issue
Block a user