Improve titlebar design.

src/components/native/Titlebar.tsx

@@ -1,13 +1,10 @@
-import { X, Minus, Square } from "@styled-icons/boxicons-regular";
+import { X, Minus, Square, Wrench } from "@styled-icons/boxicons-regular";
 import styled from "styled-components";
 
-import wideSVG from "../../assets/wide.svg";
-
-export const TITLEBAR_HEIGHT = "24px";
 export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame;
 
 const TitlebarBase = styled.div`
-    height: ${TITLEBAR_HEIGHT};
+    height: var(--titlebar-height);
 
     display: flex;
     user-select: none;
@@ -19,10 +16,15 @@ const TitlebarBase = styled.div`
 
         font-size: 16px;
         font-weight: 600;
-        margin-left: 4px;
+        margin-left: 8px;
 
-        img {
+        gap: 8px;
-            width: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        svg {
+            height: calc(var(--titlebar-height) / 2);
         }
     }
 
@@ -32,8 +34,10 @@ const TitlebarBase = styled.div`
         align-items: center;
 
         div {
-            width: 24px;
+            width: calc(
-            height: 24px;
+                var(--titlebar-height) + var(--titlebar-action-padding)
+            );
+            height: var(--titlebar-height);
 
             display: grid;
             place-items: center;
@@ -54,7 +58,18 @@ export function Titlebar() {
     return (
         <TitlebarBase>
             <span class="title">
-                <img src={wideSVG} />
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 193.733 37.438">
+                    <path
+                        d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z"
+                        transform="translate(1.586 11.18)"
+                        fill="var(--titlebar-logo-color)"
+                        stroke="var(--titlebar-logo-color)"
+                        stroke-width="1"
+                    />
+                </svg>
+                {window.native.getConfig().build === "dev" && <Wrench />}
             </span>
             <div class="actions">
                 <div onClick={window.native.min}>

src/pages/RevoltApp.tsx

@@ -10,7 +10,7 @@ import Notifications from "../context/revoltjs/Notifications";
 import StateMonitor from "../context/revoltjs/StateMonitor";
 import SyncManager from "../context/revoltjs/SyncManager";
 
-import { TITLEBAR_HEIGHT, USE_TITLEBAR } from "../components/native/Titlebar";
+import { USE_TITLEBAR } from "../components/native/Titlebar";
 import BottomNavigation from "../components/navigation/BottomNavigation";
 import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
@@ -48,7 +48,7 @@ export default function App() {
                 width="100vw"
                 height={
                     USE_TITLEBAR
-                        ? `calc(var(--app-height) - ${TITLEBAR_HEIGHT})`
+                        ? "calc(var(--app-height) - var(--titlebar-height))"
                         : "var(--app-height)"
                 }
                 leftPanel={

src/styles/_variables.scss

@@ -7,13 +7,20 @@
     --font: "Open Sans";
     --codeblock-font: "Fira Code";
     --sidebar-active: var(--secondary-background);
-    
+
+    /**
+     * Native
+     */
+    --titlebar-height: 29px;
+    --titlebar-action-padding: 8px;
+    --titlebar-logo-color: var(--secondary-foreground);
+
     /**
      * Layout
      */
     --app-height: 100vh;
     --border-radius: 6px;
-    
+
     --input-border-width: 2px;
     --textarea-padding: 16px;
     --textarea-line-height: 20px;
@@ -29,6 +36,13 @@
     /**
      * Experimental
      */
-    --background-rgb: (25,25,25); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
+    --background-rgb: (
-    --background-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
+        25,
+        25,
+        25
+    ); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
+    --background-rgba: rgba(
+        var(--background-rgb),
+        0.8
+    ); //make the opacity also customizable
 }