Merge branch 'dev'

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.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",
@@ -69,7 +67,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.1.0",
     "css-loader": "^4.3.0",
-    "electron": "^13.6.3",
+    "electron": "^13.6.9",
     "electron-builder": "^22.10.4",
     "electron-rebuild": "^2.3.4",
     "electron-webpack": "^2.8.2",
@@ -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",

src/main/window/WindowManager.ts

@@ -48,6 +48,7 @@ class WindowManager {
   figmaUiScale: number;
   panelScale: number;
   closedTabsHistory: Array<string> = [];
+  tabsWereRestored: boolean;
   themes: Themes.Theme[] = [];
   currentTheme: Themes.Theme;
   creatorTheme: Themes.Theme;
@@ -64,6 +65,7 @@ class WindowManager {
     this.figmaUiScale = storage.get().ui.scaleFigmaUI;
     this.panelScale = storage.get().ui.scalePanel;
     this.figmaUserIDs = storage.get().authedUserIDs;
+    this.tabsWereRestored = false;
 
     const options: E.BrowserWindowConstructorOptions = {
       width: 1200,
@@ -151,12 +153,17 @@ class WindowManager {
       tabs.forEach((tab, i) => {
         setTimeout(() => {
           this.addTab("loadContent.js", tab.url, tab.title);
+          if (i === tabs.length - 1) {
+            this.tabsWereRestored = true;
+          }
         }, 500 * i);
       });
 
       storage.clearLastOpenedTabs();
 
       MenuState.updateInFileBrowserActionState();
+    } else {
+      this.tabsWereRestored = true;
     }
   };
 
@@ -670,12 +677,18 @@ class WindowManager {
     MenuState.updateActionState(Const.ACTIONTABSTATE);
 
     this.mainWindow.addBrowserView(tab.view);
-    this.mainWindow.setTopBrowserView(this.mainTab);
+    if (this.lastFocusedTab && this.tabsWereRestored && this.lastFocusedTab.id !== tab.view.webContents.id) {
+      this.focusTab(tab.view.webContents.id);
+    } else {
+      this.focusMainTab();
+    }
     this.mainWindow.webContents.send("didTabAdd", {
       id: tab.view.webContents.id,
       url,
       showBackBtn: true,
       title,
+      focused:
+        this.lastFocusedTab && this.tabsWereRestored ? this.lastFocusedTab.id === tab.view.webContents.id : false,
     });
 
     tab.view.webContents.session.setPermissionRequestHandler((webContents, permission, cb) => {

src/renderer/colors.css

@@ -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/components/Header/index.tsx

@@ -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/components/Header/style.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/components/Settings/index.tsx

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

src/renderer/components/Settings/style.css

@@ -0,0 +1,54 @@
+.settings {
+  padding: 5% 0px;
+  width: 70%;
+  margin: auto;
+  height: -webkit-fill-available;
+}
+.settings__header {
+  border-top: 1px solid var(--borders);
+  border-left: 1px solid var(--borders);
+  border-right: 1px solid var(--borders);
+}
+
+.settings__panel {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  background: var(--bg-toolbar);
+  color: var(--bg-panel);
+  padding: 14px 10px 14px 30px;
+  border-left: 1px solid var(--borders);
+  border-right: 1px solid var(--borders);
+}
+
+.settings__body {
+  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: overlay;
+  background: var(--bg-panel);
+  padding: 20px 30px;
+  height: 80%;
+  border-bottom: 1px solid var(--borders);
+  border-left: 1px solid var(--borders);
+  border-right: 1px solid var(--borders);
+
+}
+.settings__body::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+.settings__body::-webkit-scrollbar-thumb {
+  width: 0;
+  background: transparent;
+}
+
+.settings__tab {
+  padding: 10px 0px;
+  margin-right: 36px;
+  background: var(--bg-toolbar);
+  border: 0;
+}
+.settings__tab:hover {
+  cursor: pointer;
+  background: var(--bg-toolbar);
+}

src/renderer/components/Settings/views/General/index.css

@@ -0,0 +1,12 @@
+.general {
+  padding-bottom: 20px;
+}
+.general .add {
+  align-self: center;
+}
+.general .add:hover {
+  cursor: pointer;
+}
+.general .button:hover {
+  cursor: pointer;
+}

src/renderer/components/Settings/views/General/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { observer, inject } from "mobx-react";
 
-import "./index.scss";
+import "./index.css";
 import { Input, List, CheckBox, Text, Button, Icon } from "Elements";
 import { Settings } from "Store/Settings";
 import ListItems from "./listItems";

src/renderer/components/Settings/views/General/listItems.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import "./index.scss";
+import "./index.css";
 import { Icon } from "Elements";
 
 interface GeneralBodyProps {