1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00

h2 refactored to component

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

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"
}

View File

@ -86,6 +86,10 @@
"jest": "^23.4.2", "jest": "^23.4.2",
"less": "^3.0.1", "less": "^3.0.1",
"less-loader": "4.1.0", "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-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4", "webpack-dev-server": "^3.1.4",
"yargs": "11.0.0" "yargs": "11.0.0"

View File

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

View File

@ -4,6 +4,7 @@
import React from 'react'; import React from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { H2 } from '~/js/components/common/Heading';
import * as LogActions from '~/js/actions/LogActions'; import * as LogActions from '~/js/actions/LogActions';
import type { State, Dispatch } from '~/flowtype'; import type { State, Dispatch } from '~/flowtype';
@ -25,7 +26,7 @@ const Log = (props: Props): ?React$Element<string> => {
return ( return (
<div className="log"> <div className="log">
<button className="log-close transparent" onClick={props.toggle} /> <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> <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 /> <textarea value={JSON.stringify(props.log.entries)} readOnly />
</div> </div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,14 +1,14 @@
/* @flow */ /* @flow */
import React from 'react'; import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
const Bootloader = () => ( const Bootloader = () => (
<section className="device-settings"> <section className="device-settings">
<div className="row"> <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> <p>Please re-connect it</p>
</div> </div>
</section> </section>

View File

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

View File

@ -1,14 +1,12 @@
/* @flow */
import React from 'react'; import React from 'react';
import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
export const DeviceSettings = () => ( export const DeviceSettings = () => (
<section className="device-settings"> <section className="device-settings">
<div className="row"> <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> <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> <a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
</div> </div>

View File

@ -1,6 +1,5 @@
/* @flow */ /* @flow */
import { H2 } from '~/js/components/common/Heading';
import React from 'react'; import React from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -8,7 +7,7 @@ import { connect } from 'react-redux';
const Initialize = () => ( const Initialize = () => (
<section className="device-settings"> <section className="device-settings">
<div className="row"> <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> <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> <a className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
</div> </div>

View File

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

790
yarn.lock

File diff suppressed because it is too large Load Diff