Better looking buttons on custom titlebar

Author: yungcomputerchair

app/components/TitleBar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { getCurrentWindow } from "@tauri-apps/api/window";
-import Button from "@/components/Button";
 import { useEffect, useState } from "react";
 import { Stack } from "react-bootstrap";
 import { getUseCustomTitlebar } from "@/app/util";
@@ -21,6 +20,14 @@ const onClickMaximize = async () => {
 
 const onClickMinimize = () => getCurrentWindow().minimize();
 
+function TitleBarButton({ icon, onClick }: { icon: string; onClick: () => Promise<void> }) {
+  return (
+    <div className="titlebar-button" onClick={onClick}>
+      <i className={"fa-solid fa-" + icon}></i>
+    </div>
+  )
+}
+
 export default function TitleBar() {
   const [show, setShow] = useState<boolean>(false);
   const [appName, setAppName] = useState<string>("");
@@ -39,22 +46,16 @@ export default function TitleBar() {
     <div className="titlebar">
       <span data-tauri-drag-region>{appName}</span>
       <Stack direction="horizontal" className="flex-row-reverse" gap={1}>
-        <Button
-          variant="danger"
+        <TitleBarButton
           icon="x"
-          iconStyle="solid"
           onClick={onClickClose}
         />
-        <Button
-          variant="primary"
+        <TitleBarButton
           icon="window-maximize"
-          iconStyle="solid"
           onClick={onClickMaximize}
         />
-        <Button
-          variant="primary"
+        <TitleBarButton
           icon="window-minimize"
-          iconStyle="solid"
           onClick={onClickMinimize}
         />
       </Stack>

app/css/openfusion-layout.scss

@@ -16,11 +16,14 @@ body {
   overflow-x: hidden;
 }
 
-.titlebar button {
+.titlebar-button {
   width: 30px;
   height: 30px;
   padding: 1px !important;
   z-index: 3001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .titlebar span {

app/css/openfusion-theming.scss

@@ -19,6 +19,10 @@ $title-bar-bg-opacity: 0.05;
     background-color: rgba($body-bg, $title-bar-bg-opacity)
   }
 
+  .titlebar-button:hover {
+    background-color: rgba($body-bg, $title-bar-bg-opacity * 2);
+  }
+
   .table-striped thead th {
     background-color: #34476e;
   }
@@ -171,6 +175,10 @@ $title-bar-bg-opacity: 0.05;
     background-color: rgba($body-bg-dark, $title-bar-bg-opacity)
   }
 
+  .titlebar-button:hover {
+    background-color: rgba($body-bg-dark, $title-bar-bg-opacity * 2);
+  }
+
   .table-striped thead th {
     background-color: #0099d8;
   }
@@ -318,6 +326,10 @@ $title-bar-bg-opacity: 0.05;
   background-color: $body-bg-dark;
 }
 
+.titlebar-button {
+  border-radius: 100%;
+}
+
 .btn {
   color: $light !important;
   font-size: 12pt;