From f00dfa95fd65a9e9b7c05352cb9173663a554c93 Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Mon, 7 Oct 2024 11:41:21 +0800
Subject: [PATCH] adjust floating window style

---
 src/main/resolve/floatingWindow.ts   |  4 ++--
 src/renderer/src/FloatingApp.tsx     | 22 ++++++++++------------
 src/renderer/src/assets/floating.css |  8 ++++++++
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/main/resolve/floatingWindow.ts b/src/main/resolve/floatingWindow.ts
index 1ad23a1..1d1978a 100644
--- a/src/main/resolve/floatingWindow.ts
+++ b/src/main/resolve/floatingWindow.ts
@@ -14,8 +14,8 @@ async function createFloatingWindow(): Promise<void> {
   })
   const { customTheme = 'default.css' } = await getAppConfig()
   floatingWindow = new BrowserWindow({
-    width: 126,
-    height: 50,
+    width: 120,
+    height: 42,
     x: floatingWindowState.x,
     y: floatingWindowState.y,
     show: false,
diff --git a/src/renderer/src/FloatingApp.tsx b/src/renderer/src/FloatingApp.tsx
index 9fb00c6..d70f33c 100644
--- a/src/renderer/src/FloatingApp.tsx
+++ b/src/renderer/src/FloatingApp.tsx
@@ -25,9 +25,9 @@ const FloatingApp: React.FC = () => {
     }
   }, [])
   return (
-    <div className="app-drag p-[4px] h-[100vh]">
-      <div className="floating-bg border-1 border-divider drop-shadow-md flex rounded-[calc(calc(100vh-8px)/2)] bg-content1 h-[calc(100vh-8px)] w-[calc(100vw-8px)]">
-        <div className="flex justify-center items-center h-full w-[calc(100vh-8px)]">
+    <div className="app-drag h-[100vh] w-[100vw]">
+      <div className="floating-bg border-1 border-divider flex rounded-full bg-content1 h-[calc(100%-2px)] w-[calc(100%-2px)]">
+        <div className="flex justify-center items-center h-[100%] aspect-square">
           <div
             onContextMenu={(e) => {
               e.preventDefault()
@@ -36,21 +36,19 @@ const FloatingApp: React.FC = () => {
             onClick={() => {
               triggerMainWindow()
             }}
-            className={`app-nodrag cursor-pointer floating-thumb ${tunEnabled ? 'bg-secondary' : sysProxyEnabled ? 'bg-primary' : 'bg-default'} hover:opacity-hover rounded-full h-[calc(100vh-14px)] w-[calc(100vh-14px)]`}
+            className={`app-nodrag cursor-pointer floating-thumb ${tunEnabled ? 'bg-secondary' : sysProxyEnabled ? 'bg-primary' : 'bg-default'} hover:opacity-hover rounded-full h-[calc(100%-4px)] aspect-square`}
           >
             <MihomoIcon className="floating-icon text-primary-foreground h-full leading-full text-[22px] mx-auto" />
           </div>
         </div>
-        <div className="flex flex-col justify-center w-[calc(100%-42px)]">
-          <div className="flex justify-end">
-            <div className="floating-text whitespace-nowrap overflow-hidden text-[12px] mr-[10px] font-bold">
+        <div className="w-full overflow-hidden">
+          <div className="flex flex-col justify-center h-full w-full">
+            <h2 className="text-end floating-text whitespace-nowrap text-[12px] mr-2 font-bold">
               {calcTraffic(upload)}/s
-            </div>
-          </div>
-          <div className="w-full flex justify-end">
-            <div className="floating-text whitespace-nowrap overflow-hidden text-[12px] mr-[10px] font-bold">
+            </h2>
+            <h2 className="text-end floating-text whitespace-nowrap text-[12px] mr-2 font-bold">
               {calcTraffic(download)}/s
-            </div>
+            </h2>
           </div>
         </div>
       </div>
diff --git a/src/renderer/src/assets/floating.css b/src/renderer/src/assets/floating.css
index c9f1c6d..ebed800 100644
--- a/src/renderer/src/assets/floating.css
+++ b/src/renderer/src/assets/floating.css
@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+.floating-text {
+  font-family:
+    'Microsoft YaHei',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont;
+}
+
 html {
   background: none !important;
   background-color: transparent !important;