From e28452cc7b9be474a3f1833c3b9b9f4cb90a56c0 Mon Sep 17 00:00:00 2001
From: MystiPanda <mystipanda@proton.me>
Date: Tue, 9 Jan 2024 16:04:56 +0800
Subject: [PATCH] feat: Optimize control button style

---
 src/assets/styles/layout.scss            |  4 ++--
 src/components/layout/layout-control.tsx | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index 1fce0f2a..897b88cb 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -77,8 +77,8 @@
 
     .the-bar {
       position: absolute;
-      top: 2px;
-      right: 8px;
+      top: 0px;
+      right: 0px;
       height: 36px;
       display: flex;
       align-items: center;
diff --git a/src/components/layout/layout-control.tsx b/src/components/layout/layout-control.tsx
index 4cac8005..b622e643 100644
--- a/src/components/layout/layout-control.tsx
+++ b/src/components/layout/layout-control.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, ButtonGroup } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import {
   CloseRounded,
@@ -20,7 +20,16 @@ export const LayoutControl = () => {
   });
 
   return (
-    <>
+    <ButtonGroup
+      variant="text"
+      sx={{
+        height: "100%",
+        ".MuiButtonGroup-grouped": {
+          borderRadius: "0px",
+          borderRight: "0px",
+        },
+      }}
+    >
       <Button
         size="small"
         sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
@@ -66,11 +75,15 @@ export const LayoutControl = () => {
 
       <Button
         size="small"
-        sx={{ minWidth, svg: { transform: "scale(1.05)" } }}
+        sx={{
+          minWidth,
+          svg: { transform: "scale(1.05)" },
+          ":hover": { bgcolor: "#ff000090" },
+        }}
         onClick={() => appWindow.close()}
       >
         <CloseRounded fontSize="small" />
       </Button>
-    </>
+    </ButtonGroup>
   );
 };