Cleaned up titlebar look

src/components/native/Titlebar.tsx

@@ -1,4 +1,3 @@
-import { X, Minus, Square } from "@styled-icons/boxicons-regular";
 import { Wrench } from "@styled-icons/boxicons-solid";
 import styled from "styled-components";
 
@@ -12,6 +11,7 @@ const TitlebarBase = styled.div`
     user-select: none;
     align-items: center;
     
+
     .title {
         flex-grow: 1;
         -webkit-app-region: drag;
@@ -20,15 +20,20 @@ const TitlebarBase = styled.div`
         font-weight: 600;
         margin-inline-start: 10px;
         margin-top: 4px;
-        gap: 8px;
+        gap: 6px;
         display: flex;
         align-items: center;
         justify-content: flex-start;
+        z-index: 90000;
+        color: var(--titlebar-logo-color);
 
         svg {
-            height: calc(var(--titlebar-height) / 3);
             margin-bottom: 4px;
         }
+
+        svg:first-child {
+            height: calc(var(--titlebar-height) / 3);
+        }
     }
 
     .actions {
@@ -73,7 +78,7 @@ export function Titlebar() {
                         stroke-width="1"
                     />
                 </svg>
-                {window.native.getConfig().build === "dev" && <Wrench />}
+                {window.native.getConfig().build === "dev" && <Wrench size="12.5"/>}
             </div>
             <UpdateIndicator style="titlebar" />
             <div class="actions">

src/pages/settings/Settings.module.scss

@@ -80,7 +80,7 @@
     background: var(--primary-background);
 
     .sidebar {
-        flex: 2;
+        flex: 1 0 218px;
         display: flex;
         flex-shrink: 0;
         overflow-y: scroll;
@@ -91,6 +91,9 @@
             width: 218px;
             padding: 60px 8px;
             height: fit-content;
+            display: flex;
+            gap: 2px;
+            flex-direction: column;
         }
 
         .divider {

src/pages/settings/panes/Native.tsx

@@ -24,6 +24,7 @@ export function Native(props: Props) {
 
     return (
         <div>
+            <h3>App Behavior</h3>
             <Checkbox
                 checked={autoStart ?? false}
                 disabled={typeof autoStart === "undefined"}