other: replace scss on css

Author: ChugunovRoman

config/webpack.config.renderer.js

@@ -3,7 +3,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 
 const rootFolder = process.cwd();
-const resolveExtensions = [".ts", ".tsx", ".js", ".jsx", ".json", ".scss"];
+const resolveExtensions = [".ts", ".tsx", ".js", ".jsx", ".json", ".css"];
 const resolveModules = ["node_modules", "react"];
 
 module.exports = config => {

package-lock.json

@@ -57,9 +57,7 @@
     "@types/node": "^12.12.13",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.0.10",
-    "@types/react-redux": "^5.0.15",
     "@types/react-router-dom": "^4.3.1",
-    "@types/redux": "^3.6.0",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.1.1",
     "@typescript-eslint/parser": "^4.1.1",
@@ -81,9 +79,7 @@
     "lint-staged": "^10.5.3",
     "native-ext-loader": "^2.3.0",
     "node-loader": "^1.0.2",
-    "node-sass": "^4.14.1",
     "prettier": "^1.19.1",
-    "sass-loader": "^10.0.2",
     "style-loader": "^1.2.1",
     "ts-loader": "^8.0.3",
     "typescript": "^3.7.5",

package.json

@@ -0,0 +1,20 @@
+root {
+  --white_1: #fff;
+
+  --black_1: #050505;
+  --black_2: #333333;
+  --black_3: #222222;
+
+  --llgray_1: #F2F2F2;
+  --lgray_1: #D1D1D1;
+  --lgray_2: #828282;
+  --gray_1: #2c2c2c;
+  --gray_2: #444444;
+
+  --blue_1: #30C2FF;
+  --blue_2: #d8f3ffff;
+
+  --red_1: #e81123;
+
+  --second_text_color: #B3B3B3;
+}

src/renderer/animations.scss src/renderer/animations.csssrc/renderer/animations.scss renamed to src/renderer/animations.css

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { Text, Button, Icon } from "Elements";
 
-import "./style.scss";
+import "./style.css";
 
 interface HeaderProps {
   text: string;

src/renderer/colors.css

@@ -0,0 +1,22 @@
+.header {
+  display: grid;
+  grid-template-columns: 1fr 50px 20px;
+  justify-content: space-between;
+  background-color: var(--bg-header);
+  padding: 10px 14px 10px 30px;
+  align-items: center;
+  height: 30px;
+}
+.header__text {
+  padding: 0;
+  margin: 0;
+  color: var(--fg-header);
+  fill: var(--fg-header);
+}
+.header__additional {
+  display: flex;
+}
+.header__close {
+  color: var(--fg-header-control);
+  fill: var(--fg-header-control);
+}

src/renderer/colors.scss

@@ -2,7 +2,7 @@ import * as E from "electron";
 import * as React from "react";
 import { observer, inject } from "mobx-react";
 
-import "./style.scss";
+import "./style.css";
 import { Text, Button, Icon } from "Elements";
 import Header from "../Header";
 import General from "./views/General";