💄 Smaller Titlebar Icons (aka. Topbar)

src/main/app.ts

@@ -64,8 +64,10 @@ export default class WaveCordApp {
 
     this.window = new BrowserWindow({
       show: false,
-      width: 1280,
-      height: 720,
+      width: 1250,
+      height: 697,
+      minWidth: 450,
+      minHeight: 250,
       icon: path.join(this.resourcesPath, 'icon.png'),
       frame: false,
       webPreferences: {

src/renderer/App.tsx

@@ -2,12 +2,12 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import LoadingPage from './pages/Loading';
 import './styles/global.css';
 import './styles/vars.css';
-import Topbar from './components/Topbar';
+import Titlebar from './components/Titlebar';
 
 export default function App() {
   return (
     <Router>
-      <Topbar />
+      <Titlebar />
       <Routes>
         <Route path="/" element={<LoadingPage />} />
       </Routes>

src/renderer/components/Titlebar/Titlebar.css

@@ -0,0 +1,28 @@
+.titlebar__bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--titlebar-height);
+  -webkit-app-region: drag;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: 6px;
+}
+
+.titlebar__button {
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  margin-right: 3px;
+  width: calc(var(--titlebar-height) - 7px);
+  filter: invert(78%) sepia(1%) saturate(0%) hue-rotate(288deg) brightness(95%)
+    contrast(91%);
+  transition: filter 0.11s ease;
+}
+
+.titlebar__button:hover {
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg)
+    brightness(104%) contrast(104%);
+}

src/renderer/components/Topbar/index.tsx → src/renderer/components/Titlebar/index.tsx

@@ -1,9 +1,9 @@
-import MinimizeIcon from '../../../../assets/app/icons/topbar/minimize.svg';
-import MaximizeIcon from '../../../../assets/app/icons/topbar/maximize.svg';
-import CloseIcon from '../../../../assets/app/icons/topbar/x.svg';
-import './Topbar.css';
+import MinimizeIcon from '../../../../assets/app/icons/titlebar/minimize.svg';
+import MaximizeIcon from '../../../../assets/app/icons/titlebar/maximize.svg';
+import CloseIcon from '../../../../assets/app/icons/titlebar/x.svg';
+import './Titlebar.css';
 
-export default function Topbar() {
+export default function Titlebar() {
   const handleMinimize = () => {
     window.electron.ipcRenderer.sendMessage('WINDOW_MINIMIZE');
   };
@@ -17,23 +17,23 @@ export default function Topbar() {
   };
 
   return (
-    <div className="topbar__bar">
+    <div className="titlebar__bar">
       <img
-        className="topbar__button"
+        className="titlebar__button"
         src={CloseIcon}
         alt="Close Button"
         onClick={handleClose}
         role="presentation"
       />
       <img
-        className="topbar__button"
+        className="titlebar__button"
         src={MaximizeIcon}
         alt="Maximize Button"
         onClick={handleMaximize}
         role="presentation"
       />
       <img
-        className="topbar__button"
+        className="titlebar__button"
         src={MinimizeIcon}
         alt="Minimize Button"
         onClick={handleMinimize}

src/renderer/styles/vars.css

@@ -12,5 +12,5 @@
   --secondary: #7c3045;
   --accent: #ba7d4b;
 
-  --topbar-height: 26px;
+  --titlebar-height: 26px;
 }