From 6e4a87fda83e2f6c3b34d62ac61c6ca08c3da2e2 Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Tue, 22 Oct 2024 21:31:42 +0800
Subject: [PATCH] fix style

---
 src/renderer/src/App.tsx                      |  3 +-
 .../src/components/updater/updater-button.tsx | 43 ++++++++++++++-----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 4a45e3b..39397d2 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -37,7 +37,6 @@ import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
 
 let navigate: NavigateFunction
-const narrowWidth = platform === 'darwin' ? 70 : 60
 
 const App: React.FC = () => {
   const { appConfig, patchAppConfig } = useAppConfig()
@@ -62,6 +61,7 @@ const App: React.FC = () => {
       'substore'
     ]
   } = appConfig || {}
+  const narrowWidth = platform === 'darwin' ? 70 : 60
   const [order, setOrder] = useState(siderOrder)
   const [siderWidthValue, setSiderWidthValue] = useState(siderWidth)
   const siderWidthValueRef = useRef(siderWidthValue)
@@ -200,6 +200,7 @@ const App: React.FC = () => {
             {platform !== 'darwin' && (
               <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-[1px]" />
             )}
+            <UpdaterButton iconOnly={true} />
           </div>
           <div className="h-[calc(100%-110px)] overflow-y-auto no-scrollbar">
             <div className="h-full w-full flex flex-col gap-2">
diff --git a/src/renderer/src/components/updater/updater-button.tsx b/src/renderer/src/components/updater/updater-button.tsx
index 104feaf..d3da9e0 100644
--- a/src/renderer/src/components/updater/updater-button.tsx
+++ b/src/renderer/src/components/updater/updater-button.tsx
@@ -5,9 +5,15 @@ import React, { useState } from 'react'
 import useSWR from 'swr'
 import UpdaterModal from './updater-modal'
 import { platform } from '@renderer/utils/init'
+import { MdNewReleases } from 'react-icons/md'
 
-const UpdaterButton: React.FC = () => {
+interface Props {
+  iconOnly?: boolean
+}
+
+const UpdaterButton: React.FC<Props> = (props) => {
   const { appConfig } = useAppConfig()
+  const { iconOnly } = props
   const { autoCheckUpdate, useWindowFrame = false } = appConfig || {}
   const [openModal, setOpenModal] = useState(false)
   const { data: latest } = useSWR(
@@ -30,16 +36,31 @@ const UpdaterButton: React.FC = () => {
           }}
         />
       )}
-      <Button
-        className={`fixed left-[85px] app-nodrag ${!useWindowFrame && platform === 'darwin' ? 'ml-[60px]' : ''}`}
-        color="danger"
-        size="sm"
-        onPress={() => {
-          setOpenModal(true)
-        }}
-      >
-        v{latest.version}
-      </Button>
+      {iconOnly ? (
+        <Button
+          isIconOnly
+          variant="flat"
+          className={`fixed rounded-full app-nodrag`}
+          color="danger"
+          size="md"
+          onPress={() => {
+            setOpenModal(true)
+          }}
+        >
+          <MdNewReleases className="text-[35px]" />
+        </Button>
+      ) : (
+        <Button
+          className={`fixed left-[85px] app-nodrag ${!useWindowFrame && platform === 'darwin' ? 'ml-[60px]' : ''}`}
+          color="danger"
+          size="sm"
+          onPress={() => {
+            setOpenModal(true)
+          }}
+        >
+          v{latest.version}
+        </Button>
+      )}
     </>
   )
 }