diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx index 02feb7e0630f5f9784b2aa55f63140980e77bc7f..d547194d3476d72605f43b9b37fa3ce611182374 100644 --- a/src/components/native/Titlebar.tsx +++ b/src/components/native/Titlebar.tsx @@ -1,4 +1,4 @@ -import { X, Minus, Square } from "@styled-icons/boxicons-regular"; +import { X, Minus, Square, CloudDownload } from "@styled-icons/boxicons-regular"; import { Wrench } from "@styled-icons/boxicons-solid"; import styled from "styled-components"; @@ -7,6 +7,7 @@ export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame; const TitlebarBase = styled.div` height: var(--titlebar-height); display: flex; + gap: 6px; user-select: none; align-items: center; @@ -29,6 +30,17 @@ const TitlebarBase = styled.div` } } + .update-bar { + background: var(--success); + margin: 16px; + font-size: 12px; + border-radius: 60px; + padding: 2px 10px; + display: flex; + align-items: center; + gap: 2px; + } + .actions { z-index: 100; display: flex; @@ -72,6 +84,15 @@ export function Titlebar() { </svg> {window.native.getConfig().build === "dev" && <Wrench />} </div> + {/*<div class="update-bar"> + <CloudDownload size={16} /> + New update available! + </div>*/} + <div class="actions"> + <div> + <CloudDownload size={22} color={`var(--success)`} /> + </div> + </div> <div class="actions"> <div onClick={window.native.min}> <Minus size={20} />