arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 01:08:27 +00:00
Code Issues Releases Wiki Activity

Merge branch 'styled-components-refactor' of https://github.com/satoshilabs/trezor-wallet into styled-components-refactor

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-09-05 11:54:18 +02:00
commit 08659f70f4
11 changed files with 179 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -32,7 +32,6 @@
"ethereumjs-util": "^5.1.4",
"hdkey": "^0.8.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"npm-run-all": "^4.1.3",
"prop-types": "^15.6.2",
"raf": "^3.4.0",

179
src/components/Tooltip/index.js Normal file
View File

@ -0,0 +1,179 @@
import React from 'react';
import RcTooltip from 'rc-tooltip';
import colors from 'config/colors';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { FONT_SIZE } from 'config/variables';
const TooltipContent = styled.div`
width: ${props => (props.isAside ? '260px' : '320px')};
font-size: ${FONT_SIZE.SMALLEST};
`;
const StyledRcTooltip = styled(RcTooltip)`
.rc-tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
border: 1px solid ${colors.DIVIDER};
border-radius: 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.rc-tooltip-hidden {
display: none;
}
.rc-tooltip-inner {
padding: 8px 10px;
color: ${colors.TEXT_SECONDARY};
font-size: 12px;
line-height: 1.5;
text-align: left;
text-decoration: none;
background-color: ${colors.WHITE};
border-radius: 3px;
min-height: 34px;
border: 1px solid ${colors.WHITE};
}
.rc-tooltip-arrow,
.rc-tooltip-arrow-inner {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
bottom: -6px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.DIVIDER};
}
.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner {
bottom: 2px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: ${colors.WHITE};
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
left: 50%;
}
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
left: 15%;
}
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
right: 15%;
}
.rc-tooltip-placement-right .rc-tooltip-arrow,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
left: -5px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.DIVIDER};
}
.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner {
left: 1px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: ${colors.WHITE};
}
.rc-tooltip-placement-right .rc-tooltip-arrow {
top: 50%;
}
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
bottom: 15%;
}
.rc-tooltip-placement-left .rc-tooltip-arrow,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
right: -5px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.DIVIDER};
}
.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner {
right: 1px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: ${colors.WHITE};
}
.rc-tooltip-placement-left .rc-tooltip-arrow {
top: 50%;
}
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
bottom: 15%;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
top: -5px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.DIVIDER};
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner {
top: 1px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: ${colors.WHITE};
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
left: 50%;
}
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
left: 15%;
}
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
right: 15%;
}
`;
const Tooltip = ({
content, placement = 'bottomRight', children, className,
}) => (
<StyledRcTooltip
className={className}
arrowContent={<div className="rc-tooltip-arrow-inner" />}
placement={placement}
overlay={<TooltipContent>{content}</TooltipContent>}
>
{children}
</StyledRcTooltip>
);
Tooltip.propTypes = {
placement: PropTypes.string,
className: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string,
]),
content: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string,
]),
};
export default Tooltip;

26
src/components/TooltipContent/index.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
width: ${props => (props.isAside ? '260px' : '320px')};
font-size: ${FONT_SIZE.SMALLEST};
`;
const TooltipContent = ({
children, isAside = false,
}) => (
<Wrapper
isAside={isAside}
>
{children}
</Wrapper>
);
TooltipContent.propTypes = {
children: PropTypes.node,
isAside: PropTypes.bool,
};
export default TooltipContent;

1
src/index.js
View File

@ -3,7 +3,6 @@ import React from 'react';
import { render } from 'react-dom';
import baseStyles from 'support/BaseStyles';
import { onBeforeUnload } from 'actions/WalletActions';
import 'styles/index.less';
import App from 'views/index';
import store from 'store';

28
src/styles/colors.less
View File

@ -1,28 +0,0 @@
@color_white: #ffffff;
@color_header: #212121;
@color_body: #E3E3E3;
@color_main: #FBFBFB;
@color_landing: #F9F9F9;
@color_text_primary: #494949;
@color_text_secondary: #757575;
@color_gray_light: #F2F2F2; // hover menu
@color_divider: #E3E3E3; //#EBEBEB;
@color_green_primary: #01B757;
@color_green_secondary: #00AB51;
@color_green_tertiary: #009546;
@color_info_primary: #1E7FF0;
@color_info_secondary: #E1EFFF;
@color_warning_primary: #EB8A00;
@color_warning_secondary: #FFEFD9;
@color_success_primary: #01B757;
@color_success_secondary: #DFFFEE;
@color_error_primary: #ED1212;
@color_error_secondary: #FFE9E9;

2
src/styles/index.less
View File

@ -1,2 +0,0 @@
@import './colors.less';
@import './rcTooltip.less';

152
src/styles/rcTooltip.less
View File

@ -1,152 +0,0 @@
.tooltip-wrapper {
width: 320px;
font-size: 10px;
span {
color: @color_green_primary;
}
}
.aside-tooltip-wrapper {
width: 260px;
font-size: 10px;
}
.rc-tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
border: 1px solid @color_divider;
border-radius: 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.rc-tooltip-hidden {
display: none;
}
.rc-tooltip-inner {
padding: 8px 10px;
color: @color_text_secondary;
font-size: 12px;
line-height: 1.5;
text-align: left;
text-decoration: none;
background-color: @color_white;
border-radius: 3px;
min-height: 34px;
border: 1px solid @color_white;
}
.rc-tooltip-arrow,
.rc-tooltip-arrow-inner {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
bottom: -6px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: @color_divider;
}
.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner {
//bottom: 1px;
bottom: 2px;
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: @color_white;
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
left: 50%;
}
.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
left: 15%;
}
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
right: 15%;
}
.rc-tooltip-placement-right .rc-tooltip-arrow,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
left: -5px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: @color_divider;
}
.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner {
left: 1px;
margin-top: -6px;
border-width: 6px 6px 6px 0;
border-right-color: @color_white;
}
.rc-tooltip-placement-right .rc-tooltip-arrow {
top: 50%;
}
.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
bottom: 15%;
}
.rc-tooltip-placement-left .rc-tooltip-arrow,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
right: -5px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: @color_divider;
}
.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner,
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner {
right: 1px;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-left-color: @color_white;
}
.rc-tooltip-placement-left .rc-tooltip-arrow {
top: 50%;
}
.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
top: 15%;
margin-top: 0;
}
.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
bottom: 15%;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
top: -5px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: @color_divider;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner {
top: 1px;
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: @color_white;
}
.rc-tooltip-placement-bottom .rc-tooltip-arrow {
left: 50%;
}
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
left: 15%;
}
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
right: 15%;
}

17
webpack/dev.babel.js
View File

@ -1,6 +1,5 @@
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import {
SRC, BUILD, PORT, PUBLIC,
} from './constants';
@ -34,17 +33,6 @@ module.exports = {
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' },
},
'css-loader',
'less-loader',
],
},
{
test: /\.(png|gif|jpg)$/,
loader: 'file-loader?name=./images/[name].[ext]',
@ -83,11 +71,6 @@ module.exports = {
hints: false,
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
chunks: ['index'],
template: `${SRC}index.html`,

17
webpack/local.babel.js
View File

@ -1,7 +1,6 @@
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import {
TREZOR_CONNECT_ROOT,
TREZOR_CONNECT_HTML,
@ -48,17 +47,6 @@ module.exports = {
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' },
},
'css-loader',
'less-loader',
],
},
{
test: /\.(png|gif|jpg)$/,
loader: 'file-loader?name=./images/[name].[ext]',
@ -109,11 +97,6 @@ module.exports = {
hints: false,
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new HtmlWebpackPlugin({
chunks: ['index'],
template: `${SRC}index.html`,

25
webpack/production.babel.js
View File

@ -2,7 +2,6 @@
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import { SRC, BUILD, PUBLIC } from './constants';
module.exports = {
@ -22,27 +21,6 @@ module.exports = {
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' },
},
{
loader: 'css-loader',
options: {
minimize: false,
},
},
{
loader: 'less-loader',
options: {
minimize: false,
},
},
],
},
{
test: /\.(png|gif|jpg)$/,
exclude: /(node_modules)/,
@ -82,9 +60,6 @@ module.exports = {
hints: false,
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[hash].css',
}),
new HtmlWebpackPlugin({
chunks: ['index'],
template: `${SRC}index.html`,

19
yarn.lock
View File

@ -391,17 +391,6 @@
"@webassemblyjs/wast-parser" "1.5.13"
long "^3.2.0"
"@webpack-contrib/schema-utils@^1.0.0-beta.0":
version "1.0.0-beta.0"
resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65"
dependencies:
ajv "^6.1.0"
ajv-keywords "^3.1.0"
chalk "^2.3.2"
strip-ansi "^4.0.0"
text-table "^0.2.0"
webpack-log "^1.1.2"
abab@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@ -6430,14 +6419,6 @@ min-document@^2.19.0:
dependencies:
dom-walk "^0.1.0"
mini-css-extract-plugin@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz#d2bcf77bb2596b8e4bd9257e43d3f9164c2e86cb"
dependencies:
"@webpack-contrib/schema-utils" "^1.0.0-beta.0"
loader-utils "^1.1.0"
webpack-sources "^1.1.0"
minimalistic-assert@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"