arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00
Code Issues Releases Wiki Activity

h2 refactored to component

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-10 15:33:23 +02:00
parent 0802d7d654
commit 32b428809c
17 changed files with 830 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.stylelintrc Normal file
View File

@ -0,0 +1,10 @@
{
"processors": [
"stylelint-processor-styled-components"
],
"extends": [
"stylelint-config-standard",
"stylelint-config-styled-components"
],
"syntax": "scss"
}

4
package.json
View File

@ -86,6 +86,10 @@
"jest": "^23.4.2",
"less": "^3.0.1",
"less-loader": "4.1.0",
"stylelint": "^9.4.0",
"stylelint-config-standard": "^18.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.3.2",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"yargs": "11.0.0"

25
src/js/components/common/Heading.js
View File

@ -1,5 +1,3 @@
// @flow
import styled, { css } from 'styled-components';
import colors from '~/js/config/colors';
@ -11,30 +9,33 @@ const baseStyles = css`
`;
const H1 = styled.h1`
${baseStyles}
font-size: 16px;
${baseStyles}
font-size: 18px;
`;
const H2 = styled.h2`
${baseStyles};
font-size: 14px;
${baseStyles};
font-size: 16px;
${props => props.claim && css`
font-size: 36px;
padding-bottom: 24px;
`}
`;
const H3 = styled.h3`
${baseStyles};
font-size: 12px;
font-size: 14px;
`;
const H4 = styled.h4`
${baseStyles};
font-size: 10px;
font-size: 12px;
`;
const Heading = {
export {
H1,
H2,
H3,
H4,
};
module.exports = Heading;
};

3
src/js/components/common/Log.js
View File

@ -4,6 +4,7 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { H2 } from '~/js/components/common/Heading';
import * as LogActions from '~/js/actions/LogActions';
import type { State, Dispatch } from '~/flowtype';
@ -25,7 +26,7 @@ const Log = (props: Props): ?React$Element<string> => {
return (
<div className="log">
<button className="log-close transparent" onClick={props.toggle} />
<h2>Log</h2>
<H2>Log</H2>
<p>Attention: The log contains your XPUBs. Anyone with your XPUBs can see your account history.</p>
<textarea value={JSON.stringify(props.log.entries)} readOnly />
</div>

6
src/js/components/common/Notification.js
View File

@ -2,6 +2,7 @@
import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
@ -42,7 +43,7 @@ export const Notification = (props: NProps): React$Element<string> => {
/>
) : null }
<div className="notification-body">
<h2>{ props.title }</h2>
<H2>{ props.title }</H2>
{ props.message ? (<p dangerouslySetInnerHTML={{ __html: props.message }} />) : null }
</div>
{ props.actions && props.actions.length > 0 ? (
@ -53,7 +54,8 @@ export const Notification = (props: NProps): React$Element<string> => {
{ props.loading ? (
<Loader
className="info"
size="50" />
size="50"
/>
) : null }
</div>

8
src/js/components/landing/ConnectDevice.js
View File

@ -1,8 +1,8 @@
/* @flow */
import React, { Component } from 'react';
import TrezorConnect from 'trezor-connect';
import { H2 } from '~/js/components/common/Heading';
import type { State, TrezorDevice } from '~/flowtype';
@ -15,7 +15,7 @@ const DisconnectDevice = (props: Props) => {
if (!props.disconnectRequest) return null;
return (
<main>
<h2 className="claim">The private bank in your hands.</h2>
<H2 claim>The private bank in your hands.</H2>
<p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
<p>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</p>
<div className="row">
@ -32,7 +32,7 @@ const DisconnectDevice = (props: Props) => {
const ConnectHIDDevice = (props: Props) => (
<main>
<h2 className="claim">The private bank in your hands.</h2>
<H2 claim>The private bank in your hands.</H2>
<p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
<p>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</p>
<div className="row">
@ -70,7 +70,7 @@ class ConnectWebUsbDevice extends Component<Props> {
render() {
return (
<main>
<h2 className="claim">The private bank in your hands.</h2>
<H2 claim>The private bank in your hands.</H2>
<p>TREZOR Wallet is an easy-to-use interface for your TREZOR.</p>
<p>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</p>
<div className="row webusb">

3
src/js/components/landing/LandingPage.js
View File

@ -3,6 +3,7 @@
import React from 'react';
import Preloader from './Preloader';
import { H2 } from '~/js/components/common/Heading';
import ConnectDevice from './ConnectDevice';
import InstallBridge from './InstallBridge';
import LocalStorageError from './LocalStorageError';
@ -16,7 +17,7 @@ import type { Props } from './index';
const BrowserNotSupported = (props: {}): React$Element<string> => (
<main>
<h2>Your browser is not supported</h2>
<H2>Your browser is not supported</H2>
<p>Please choose one of the supported browsers</p>
<div className="row">
<div className="chrome">

3
src/js/components/wallet/account/send/PendingTransactions.js
View File

@ -3,6 +3,7 @@
import React from 'react';
import ColorHash from 'color-hash';
import { H2 } from '~/js/components/common/Heading';
import ScaleText from 'react-scale-text';
import { findAccountTokens } from '~/js/reducers/TokensReducer';
@ -85,7 +86,7 @@ const PendingTransactions = (props: Props) => {
return (
<div className="pending-transactions">
<h2>Pending transactions</h2>
<H2>Pending transactions</H2>
{ pendingTxs }
</div>
);

3
src/js/components/wallet/account/send/SendForm.js
View File

@ -1,6 +1,5 @@
/* @flow */
import React, { Component } from 'react';
import Select from 'react-select';
import AdvancedForm from './AdvancedForm';
@ -117,7 +116,7 @@ const Send = (props: Props) => {
return (
<section className="send-form">
<h2>Send Ethereum or tokens</h2>
<H2>Send Ethereum or tokens</H2>
<div className="row address-input">
<label>Address</label>
<input

8
src/js/components/wallet/account/sign/SignVerify.js
View File

@ -1,14 +1,12 @@
/* @flow */
import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
const SignVerify = () => (
<section className="signverify">
<div className="sign">
<h2>Sign message</h2>
<H2>Sign message</H2>
<label>Message</label>
<textarea rows="4" maxLength="255" />
<label>Address</label>
@ -17,7 +15,7 @@ const SignVerify = () => (
<textarea rows="4" maxLength="255" readOnly="readonly" />
</div>
<div className="verify">
<h2>Verify message</h2>
<H2>Verify message</H2>
<label>Message</label>
<textarea rows="4" maxLength="255" />
<label>Address</label>

5
src/js/components/wallet/account/summary/Summary.js
View File

@ -2,6 +2,7 @@
import React, { Component } from 'react';
import { H2 } from '~/js/components/common/Heading';
import BigNumber from 'bignumber.js';
import { Async as AsyncSelect } from 'react-select';
import Tooltip from 'rc-tooltip';
@ -55,7 +56,7 @@ const Summary = (props: Props) => {
onToggle={props.onDetailsToggle}
/>
<h2>
<H2>
Tokens
<Tooltip
arrowContent={<div className="rc-tooltip-arrow-inner" />}
@ -64,7 +65,7 @@ const Summary = (props: Props) => {
>
<span className="what-is-it" />
</Tooltip>
</h2>
</H2>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
<div className="filter">

4
src/js/components/wallet/pages/Bootloader.js
View File

@ -1,14 +1,14 @@
/* @flow */
import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
const Bootloader = () => (
<section className="device-settings">
<div className="row">
<h2>Your device is in firmware update mode</h2>
<H2>Your device is in firmware update mode</H2>
<p>Please re-connect it</p>
</div>
</section>

6
src/js/components/wallet/pages/Dashboard.js
View File

@ -2,15 +2,15 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import { H2 } from '~/js/components/common/Heading';
import { connect } from 'react-redux';
import DashboardImg from '~/images/dashboard.png';
const Dashboard = () => (
<section className="dashboard">
<h2>Dashboard</h2>
<H2>Dashboard</H2>
<div className="row">
<h2>Please select your coin</h2>
<H2>Please select your coin</H2>
<p>You will gain access to recieving &amp; sending selected coin</p>
<img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
</div>

6
src/js/components/wallet/pages/DeviceSettings.js
View File

@ -1,14 +1,12 @@
/* @flow */
import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
export const DeviceSettings = () => (
<section className="device-settings">
<div className="row">
<h2>Device settings is under construction</h2>
<H2>Device settings is under construction</H2>
<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>

5
src/js/components/wallet/pages/Initialize.js
View File

@ -1,6 +1,5 @@
/* @flow */
import { H2 } from '~/js/components/common/Heading';
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
@ -8,7 +7,7 @@ import { connect } from 'react-redux';
const Initialize = () => (
<section className="device-settings">
<div className="row">
<h2>Your device is in not initialized</h2>
<H2>Your device is in not initialized</H2>
<p>Please use Bitcoin wallet interface to start initialization process</p>
<a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
</div>

9
src/styles/acquire.less
View File

@ -38,13 +38,4 @@
}
}
// h2 {
// line-height: 74px;
// padding-left: 50px;
// }
// p {
// padding-left: 50px;
// }
}

790
yarn.lock
View File

File diff suppressed because it is too large Load Diff