Removed less loaders

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

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,
 }) => (
-    <RcTooltip
+    <StyledRcTooltip
         arrowContent={<div className="rc-tooltip-arrow-inner" />}
         placement={placement}
         overlay={<TooltipContent>{content}</TooltipContent>}
     >
         {children}
-    </RcTooltip>
+    </StyledRcTooltip>
 );
 
 Tooltip.propTypes = {

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';
 

src/styles/colors.less

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

src/styles/index.less

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

src/styles/rcTooltip.less

@@ -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%;
-}

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`,

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`,

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`,

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"