From 4ae0dc6935c9fd5ae92303c60b9117cccad38e38 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 1 Aug 2021 16:44:51 +0100
Subject: [PATCH] Improve titlebar design.
---
src/components/native/Titlebar.tsx | 37 +++++++++++++++++++++---------
src/pages/RevoltApp.tsx | 4 ++--
src/styles/_variables.scss | 22 ++++++++++++++----
3 files changed, 46 insertions(+), 17 deletions(-)
diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx
index 14a5c47..c4ec0a6 100644
--- a/src/components/native/Titlebar.tsx
+++ b/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;
+
+ gap: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
- img {
- width: 60px;
+ svg {
+ height: calc(var(--titlebar-height) / 2);
}
}
@@ -32,8 +34,10 @@ const TitlebarBase = styled.div`
align-items: center;
div {
- width: 24px;
- height: 24px;
+ width: calc(
+ 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}>
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 4af34db..019cb90 100644
--- a/src/pages/RevoltApp.tsx
+++ b/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={
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 4966a49..b6812a0 100644
--- a/src/styles/_variables.scss
+++ b/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-rgba: rgba(var(--background-rgb), .8); //make the opacity also customizable
+ --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-rgba: rgba(
+ var(--background-rgb),
+ 0.8
+ ); //make the opacity also customizable
}
--
GitLab