h2 refactored to component

.stylelintrc

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

package.json

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

src/js/components/common/Heading.js

@@ -1,5 +1,3 @@
-// @flow
-
 import styled, { css } from 'styled-components';
 import colors from '~/js/config/colors';
 
@@ -12,29 +10,32 @@ const baseStyles = css`
 
 const H1 = styled.h1`
     ${baseStyles}
-  font-size: 16px;
+    font-size: 18px;
 `;
 
 const H2 = styled.h2`
     ${baseStyles};
-  font-size: 14px;
+    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;

src/js/components/common/Log.js

@@ -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>

src/js/components/common/Notification.js

@@ -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>

src/js/components/landing/ConnectDevice.js

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

src/js/components/landing/LandingPage.js

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

src/js/components/wallet/account/send/PendingTransactions.js

@@ -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>
     );

src/js/components/wallet/account/send/SendForm.js

@@ -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

src/js/components/wallet/account/sign/SignVerify.js

@@ -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>

src/js/components/wallet/account/summary/Summary.js

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

src/js/components/wallet/pages/Bootloader.js

@@ -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>

src/js/components/wallet/pages/Dashboard.js

@@ -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>

src/js/components/wallet/pages/DeviceSettings.js

@@ -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>

src/js/components/wallet/pages/Initialize.js

@@ -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>

src/styles/acquire.less

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