Improved Top Bar design

src/components/ui/menu.tsx

@@ -1,7 +1,24 @@
 import React, {useState} from "react";
 import { openSide, Side } from "../../renderer";
-import {blender, blenderCmd} from "../blender-controller";
 import { platform, Platform } from "../platform";
+import { ipcRenderer } from "electron";
+
+const WinButtons = () => (
+    <>
+        <div className="winMenuButtons" id="winMinimize" onClick={() => ipcRenderer.send('minimize')}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+                <path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/>
+            </svg>
+        </div>
+        <div className="winMenuButtons" id="winClose" onClick={() => ipcRenderer.send('closeApp')}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+                <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+            </svg>
+        </div>
+    </>
+)
 
 const MainSideButtonsWin = () => (
     <div id="settings-button-win" onClick={() => openSide(Side.Settings)}>
@@ -23,18 +40,17 @@ const MainSideButtonsLinux = () => (
 )
 
 const SettingsSideButtonsWin = () => (
-    <button className="back-button-win" onClick={() => openSide(Side.Main)}>Back</button>
-)
-const RenderingSideButtonWin = () => (
-    <button className="back-button-win" id="stopRender-win" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+    <div id="backButton-win" onClick={() => openSide(Side.Main)}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+            <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM310.6 345.4c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-112-112C147.1 272.4 144 264.2 144 256s3.125-16.38 9.375-22.62l112-112c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L221.3 256L310.6 345.4z"/>
+        </svg>
+    </div>
 )
 
 const SettingsSideButtonsLinux = () => (
     <button className="back-button-linux" onClick={() => openSide(Side.Main)}>Back</button>
 )
-const RenderingSideButtonLinux = () => (
-    <button className="back-button-linux" id="stopRender-linux" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
-)
 
 const BlenderLoadingSVG = () => (
     <svg id="blender-loading-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -52,16 +68,20 @@ const BlenderReadySVG = () => (
 function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
     return (
         <header id="winHeader">
-            <h4>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
+            <h4>
+                {(side == Side.Main)? "StickExporterTX" : null}
+                {(side == Side.Settings)? "Settings" : null}
+                {(side == Side.Rendering)? "Rendering" : null}
+            </h4>
             <div id="blender-info-win">
-                <div id="blender-icon-linux">
+                <div id="blender-icon-win">
                     {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
                 </div>
                 <p>{blenderStatus}</p>
             </div>
             {(side == Side.Main)? <MainSideButtonsWin/> : null}
             {(side == Side.Settings)? <SettingsSideButtonsWin/> : null}
-            {(side == Side.Rendering)? <RenderingSideButtonWin/> : null}
+            <WinButtons/>
         </header>
     )
 }
@@ -78,7 +98,6 @@ function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoad
             </div>
             {(side == Side.Main)? <MainSideButtonsLinux/> : null}
             {(side == Side.Settings)? <SettingsSideButtonsLinux/> : null}
-            {(side == Side.Rendering)? <RenderingSideButtonLinux/> : null}
         </header>
     )
 }

src/components/ui/renderingSide.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import { settingList } from "../settings";
 import openFolder from "../openFolder";
+import { blenderCmd, blender } from "../blender-controller";
 
 let setLogNumber:React.Dispatch<React.SetStateAction<string>>;
 let setStatus:React.Dispatch<React.SetStateAction<string>>;
@@ -15,6 +16,7 @@ function RenderingSide() {
         <div id="content">
             <p>{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}</p>
             <p>{status}</p>
+            <button id="stopRenderButton" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
             <button onClick={() => openFolder(settingList.output)}>Open Output Folder</button>
         </div>
     )