diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx index c3677c538a706a0626c15cf730b3394bf2fff79a..96c9cf831f9a6f6d221ec40ad495f814170dd97d 100644 --- a/src/components/native/Titlebar.tsx +++ b/src/components/native/Titlebar.tsx @@ -1,4 +1,4 @@ -import { Wrench } from "@styled-icons/boxicons-solid"; +import { Wrench, Microphone, VolumeFull } from "@styled-icons/boxicons-solid"; import styled from "styled-components"; import Tooltip from "../common/Tooltip"; @@ -10,16 +10,37 @@ const TitlebarBase = styled.div` gap: 6px; user-select: none; align-items: center; + + .drag { + flex-grow: 1; + -webkit-app-region: drag; + margin-top: 10px; + height: 100%; + } + .quick { + color: var(--secondary-foreground); + + > div, > div > div { + width: var(--titlebar-height) !important; + } + + &.disabled { + color: var(--error); + } + + &.unavailable { + background: var(--error); + } + } .title { - flex-grow: 1; -webkit-app-region: drag; - height: var(--titlebar-height); + /*height: var(--titlebar-height);*/ font-size: 16px; font-weight: 600; margin-inline-start: 10px; - margin-top: 4px; + margin-top: 10px; gap: 6px; display: flex; align-items: center; @@ -28,7 +49,7 @@ const TitlebarBase = styled.div` color: var(--titlebar-logo-color); svg { - margin-bottom: 4px; + margin-bottom: 10px; } svg:first-child { @@ -80,6 +101,23 @@ export function Titlebar() { </svg> {window.native.getConfig().build === "dev" && <Wrench size="12.5"/>} </div> + {/*<div class="actions quick"> + <Tooltip + content="Mute" + placement="bottom"> + <div onClick={window.native.min}> + <Microphone size={15}/> + </div> + </Tooltip> + <Tooltip + content="Deafen" + placement="bottom"> + <div onClick={window.native.min}> + <VolumeFull size={15}/> + </div> + </Tooltip> + </div>*/} + <div class="drag" /> <UpdateIndicator style="titlebar" /> <div class="actions"> <div onClick={window.native.min}>