Fixed linux Top Bar

src/components/ui/menu.tsx

@@ -1,9 +1,19 @@
 import React, {useState} from "react";
 import { openSide, Side } from "../../renderer";
 import {blender, blenderCmd} from "../blender-controller";
+import { platform, Platform } from "../platform";
 
-const MainSideButtons = () => (
+const MainSideButtonsWin = () => (
-    <div id="settings-button" onClick={() => openSide(Side.Settings)}>
+    <div id="settings-button-win" onClick={() => openSide(Side.Settings)}>
+        <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="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" />
+        </svg>
+    </div>
+)
+const MainSideButtonsLinux = () => (
+    <div id="settings-button-linux" onClick={() => openSide(Side.Settings)}>
         <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
@@ -12,11 +22,18 @@ const MainSideButtons = () => (
     </div>
 )
 
-const SettingsSideButtons = () => (
+const SettingsSideButtonsWin = () => (
-    <button className="back-button" onClick={() => openSide(Side.Main)}>Back</button>
+    <button className="back-button-win" onClick={() => openSide(Side.Main)}>Back</button>
 )
-const RenderingSideButton = () => (
+const RenderingSideButtonWin = () => (
-    <button className="back-button" id="stopRender" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+    <button className="back-button-win" id="stopRender-win" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+)
+
+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 = () => (
@@ -32,6 +49,40 @@ const BlenderReadySVG = () => (
     </svg>
 )
 
+function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+    return (
+        <header id="winHeader">
+            <h4>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
+            <div id="blender-info-win">
+                <div id="blender-icon-linux">
+                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
+                </div>
+                <p>{blenderStatus}</p>
+            </div>
+            {(side == Side.Main)? <MainSideButtonsWin/> : null}
+            {(side == Side.Settings)? <SettingsSideButtonsWin/> : null}
+            {(side == Side.Rendering)? <RenderingSideButtonWin/> : null}
+        </header>
+    )
+}
+
+function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+    return (
+        <header id="linuxHeader">
+            <h1>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h1>
+            <div id="blender-info-linux">
+                <div id="blender-icon-linux">
+                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
+                </div>
+                <p>{blenderStatus}</p>
+            </div>
+            {(side == Side.Main)? <MainSideButtonsLinux/> : null}
+            {(side == Side.Settings)? <SettingsSideButtonsLinux/> : null}
+            {(side == Side.Rendering)? <RenderingSideButtonLinux/> : null}
+        </header>
+    )
+}
+
 let setBlenderLoading:React.Dispatch<React.SetStateAction<boolean>>;
 let setBlenderStatus:React.Dispatch<React.SetStateAction<string>>;
 
@@ -43,18 +94,10 @@ function Menu({side}:{side:Side}) {
     setBlenderStatus = setBlenderStatusInner;
     
     return (
-        <header>
+        <>
-            <h4 id="main-headline">{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
+            {(platform === Platform.Windows)? <WindowsMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
-            <div id="blender-info">
+            {(platform === Platform.Linux)? <LinuxMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
-                <div id="blender-icon">
+        </>
-                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
-                </div>
-                <p>{blenderStatus}</p>
-            </div>
-            {(side == Side.Main)? <MainSideButtons/> : null}
-            {(side == Side.Settings)? <SettingsSideButtons/> : null}
-            {(side == Side.Rendering)? <RenderingSideButton/> : null}
-        </header>
     )
 }
 

src/index.css

@@ -20,21 +20,33 @@ header {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    padding: 0px 5px;
-    padding-right: 142px;
     background-color: #0d131e;
-    height: 31px;
     color: #9DA8B9;
     margin-bottom: 25px;
+}
+#winHeader {
+    padding: 0px 5px;
+    padding-right: 142px;
+    height: 31px;
     -webkit-app-region: drag;
 }
+#linuxHeader {
+    padding: 20px 25px;
+    height: 20px;
+}
+
 header h4 {
     margin-right: auto;
     display: flex;
     width: auto;
 }
+header h1 {
+    margin-right: auto;
+    display: flex;
+    width: auto;
+}
 
-.back-button {
+.back-button-win {
     cursor: pointer;
     -webkit-app-region: no-drag;
     padding: 6px 10px;
@@ -45,16 +57,33 @@ header h4 {
     border-radius: 15px;
     font-size: large;
 }
+.back-button-linux {
+    cursor: pointer;
+    padding: 10px;
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    display: flex;
+    font-size: large;
+}
 
-.back-button:hover {
+.back-button-win:hover {
     background-color: #0b6ab9;
     transform: scale(1);
 }
+.back-button-linux:hover {
+    transform: scale(1.05);
+    text-decoration: none;
+}
 
-#stopRender {
+#stopRender-win {
     background-color: #e1334e;
 }
-#stopRender:hover {
+#stopRender-linux {
+    background-color: #e1334e;
+}
+#stopRender-win:hover {
     background-color: red;
 }
 
@@ -63,7 +92,7 @@ header h4 {
     padding-right: 25px;
 }
 
-#settings-button {
+#settings-button-win {
     cursor: pointer;
     -webkit-app-region: no-drag;
     background-color: #2196F3;
@@ -74,37 +103,80 @@ header h4 {
     border: none;
     outline: none;
 }
-#settings-button svg {
+#settings-button-win svg {
     height: 24px;
     fill: white;
     margin-left: 3px;
     margin-top: 3px;
 }
-#settings-button:hover {
+#settings-button-win:hover {
     background-color: #0b6ab9;
     transform: scale(1);
 }
 
-#blender-info {
+#settings-button-linux {
+    cursor: pointer;
+    background-color: #2196F3;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    align-items: center;
+    border: none;
+    outline: none;
+}
+#settings-button-linux svg {
+    height: 35px;
+    fill: white;
+    margin-left: 5px;
+    margin-top: 5px;
+}
+#settings-button-linux:hover {
+    transform: scale(1.05);
+}
+
+#blender-info-win {
     margin-right: auto;
     display: flex;
     align-items: center;
 }
-#blender-info p {
+#blender-info-win p {
     padding-left: 5px;
 }
-#blender-icon {
+
+#blender-info-linux {
+    margin-right: auto;
+}
+#blender-info-linux p {
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+#blender-icon-win {
     width: 20px;
     height: 20px;
     align-items: center;
     margin-left: auto;
     margin-right: auto;
 }
-#blender-icon svg {
+#blender-icon-linux {
+    width: 25px;
+    height: 25px;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#blender-icon-win svg {
     width: 20px;
     height: 20px;
     fill: white;
 }
+#blender-icon-linux svg {
+    width: 25px;
+    height: 25px;
+    fill: white;
+}
+
 #blender-loading-icon {
     animation: rotate-icon 1.2s linear infinite;
 }