diff --git a/package.json b/package.json
index 54e1cbf1..7091e217 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index e7aaf016..ce734577 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -1,5 +1,6 @@
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';
@@ -9,16 +10,158 @@ const TooltipContent = styled.div`
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: 1px;
+ 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,
}) => (
- }
placement={placement}
overlay={{content}}
>
{children}
-
+
);
Tooltip.propTypes = {
diff --git a/src/index.js b/src/index.js
index d8bfec85..c6c4cbd6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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';
diff --git a/src/styles/colors.less b/src/styles/colors.less
deleted file mode 100644
index ab3a8d50..00000000
--- a/src/styles/colors.less
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/styles/index.less b/src/styles/index.less
deleted file mode 100644
index e1dab216..00000000
--- a/src/styles/index.less
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './colors.less';
-@import './rcTooltip.less';
\ No newline at end of file
diff --git a/src/styles/rcTooltip.less b/src/styles/rcTooltip.less
deleted file mode 100644
index 644287f9..00000000
--- a/src/styles/rcTooltip.less
+++ /dev/null
@@ -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%;
-}
diff --git a/webpack/dev.babel.js b/webpack/dev.babel.js
index 6a5dc96f..9848ddfe 100644
--- a/webpack/dev.babel.js
+++ b/webpack/dev.babel.js
@@ -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`,
diff --git a/webpack/local.babel.js b/webpack/local.babel.js
index 1c110791..142f6558 100644
--- a/webpack/local.babel.js
+++ b/webpack/local.babel.js
@@ -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`,
diff --git a/webpack/production.babel.js b/webpack/production.babel.js
index 1876b93e..39342d6b 100644
--- a/webpack/production.babel.js
+++ b/webpack/production.babel.js
@@ -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`,
diff --git a/yarn.lock b/yarn.lock
index b76059ec..61c6000a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"