Adjust titlebar / window controls styling

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%))'};
 `;
 

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}
               >
-                <RiSubtractLine size={20} />
+                <RiSubtractLine size={19} />
               </WindowsButton>
               <WindowsButton
                 role="button"
                 onClick={handleMaximize}
               >
-                <RiCheckboxBlankLine size={15} />
+                <RiCheckboxBlankLine size={13} />
               </WindowsButton>
               <WindowsButton
                 $exit
                 role="button"
                 onClick={handleClose}
               >
-                <RiCloseLine size={20} />
+                <RiCloseLine size={19} />
               </WindowsButton>
             </WindowsButtonGroup>
           )}

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 = () => {

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);

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);