From 838c6a8b6a170b83daa5a7c0d0cd504a38e276fa Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 6 Jan 2023 23:51:26 -0800 Subject: [PATCH] Adjust titlebar / window controls styling --- src/renderer/components/page-header/index.tsx | 2 +- .../window-controls/components/window-controls.tsx | 8 ++++---- src/renderer/router/titlebar-outlet.tsx | 3 +-- src/renderer/themes/default.scss | 1 + src/renderer/themes/light.scss | 3 ++- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/page-header/index.tsx b/src/renderer/components/page-header/index.tsx index d2ad2121..decda542 100644 --- a/src/renderer/components/page-header/index.tsx +++ b/src/renderer/components/page-header/index.tsx @@ -51,7 +51,7 @@ const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>` height: 100%; background: ${(props) => props.theme === 'light' - ? 'linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%))' + ? 'linear-gradient(rgba(255, 255, 255, 25%), rgba(255, 255, 255, 25%))' : 'linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))'}; `; diff --git a/src/renderer/features/window-controls/components/window-controls.tsx b/src/renderer/features/window-controls/components/window-controls.tsx index fcd12292..e200ca03 100644 --- a/src/renderer/features/window-controls/components/window-controls.tsx +++ b/src/renderer/features/window-controls/components/window-controls.tsx @@ -31,7 +31,7 @@ export const WindowsButton = styled.div<{ $exit?: boolean }>` } &:hover { - background: ${({ $exit }) => ($exit ? 'rgba(200, 50, 0, 30%)' : 'rgba(125, 125, 125, 30%)')}; + background: ${({ $exit }) => ($exit ? 'var(--danger-color)' : 'rgba(125, 125, 125, 30%)')}; } `; @@ -69,20 +69,20 @@ export const WindowControls = ({ style }: WindowControlsProps) => { role="button" onClick={handleMinimize} > - + - + - + )} diff --git a/src/renderer/router/titlebar-outlet.tsx b/src/renderer/router/titlebar-outlet.tsx index 30b7879a..a6b0b578 100644 --- a/src/renderer/router/titlebar-outlet.tsx +++ b/src/renderer/router/titlebar-outlet.tsx @@ -8,9 +8,8 @@ const TitlebarContainer = styled.header` right: 0; z-index: 5000; height: 2.5rem; - background: var(--titlebar-bg); + background: var(--titlebar-controls-bg); -webkit-app-region: drag; - opacity: 0.85; `; export const TitlebarOutlet = () => { diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss index 6ee96b7c..90695b55 100644 --- a/src/renderer/themes/default.scss +++ b/src/renderer/themes/default.scss @@ -15,6 +15,7 @@ --titlebar-fg: rgb(255, 255, 255); --titlebar-bg: rgb(7, 7, 7); + --titlebar-controls-bg: rgba(7, 7, 7, 0.4); --sidebar-bg: rgb(0, 0, 0); --sidebar-fg: rgb(210, 210, 210); diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss index 595f6988..b96f2914 100644 --- a/src/renderer/themes/light.scss +++ b/src/renderer/themes/light.scss @@ -6,7 +6,8 @@ body[data-theme='defaultLight'] { --main-fg-secondary: rgb(80, 80, 80); --titlebar-fg: rgb(25, 25, 25); - --titlebar-bg: rgb(227, 229, 232); + --titlebar-bg: rgb(240, 241, 242); + --titlebar-controls-bg: rgba(240, 240, 240, 0.2); --sidebar-bg: rgb(240, 241, 242); --sidebar-fg: rgb(0, 0, 0);