From 15fd9fe35f76adcb65aa53b4596769ef2dd5a463 Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Sat, 7 Sep 2024 11:03:34 +0800
Subject: [PATCH] add icon

---
 src/renderer/src/App.tsx                      | 14 ++--
 .../src/components/base/mihomo-icon.tsx       | 75 +++++++++++++++++++
 .../src/components/updater/updater-button.tsx |  5 +-
 3 files changed, 86 insertions(+), 8 deletions(-)
 create mode 100644 src/renderer/src/components/base/mihomo-icon.tsx

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index ac38428..d16a085 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -32,6 +32,7 @@ import { setNativeTheme, setTitleBarOverlay } from '@renderer/utils/ipc'
 import { platform } from '@renderer/utils/init'
 import { TitleBarOverlayOptions } from 'electron'
 import SubStoreCard from '@renderer/components/sider/substore-card'
+import MihomoIcon from './components/base/mihomo-icon'
 
 const App: React.FC = () => {
   const { appConfig, patchAppConfig } = useAppConfig()
@@ -153,12 +154,13 @@ const App: React.FC = () => {
     <div className="w-full h-[100vh] flex">
       <div className="side w-[250px] h-full overflow-y-auto no-scrollbar">
         <div className="app-drag sticky top-0 z-40 backdrop-blur bg-background/40 h-[49px]">
-          <div className="flex justify-between p-2">
-            <h3
-              className={`text-lg font-bold leading-[32px] ${!useWindowFrame && platform === 'darwin' ? 'invisible' : ''}`}
-            >
-              Mihomo Party
-            </h3>
+          <div
+            className={`flex justify-between p-2 ${!useWindowFrame && platform === 'darwin' ? 'ml-[60px]' : ''}`}
+          >
+            <div className="flex ml-1">
+              <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-[1px]" />
+              <h3 className="text-lg font-bold leading-[32px]">ihomo Party</h3>
+            </div>
             <UpdaterButton />
             <Button
               size="sm"
diff --git a/src/renderer/src/components/base/mihomo-icon.tsx b/src/renderer/src/components/base/mihomo-icon.tsx
new file mode 100644
index 0000000..0706dde
--- /dev/null
+++ b/src/renderer/src/components/base/mihomo-icon.tsx
@@ -0,0 +1,75 @@
+import { GenIcon } from 'react-icons'
+function MihomoIcon(props): JSX.Element {
+  return GenIcon({
+    tag: 'svg',
+    attr: { viewBox: '0 0 76.14 72.14' },
+    child: [
+      {
+        tag: 'path',
+        attr: {
+          d: 'm38.2,35.17c-2.73,0-5.58.46-8.54,1.4-.36.12-.75.03-1.04-.23l-11.79-10.76c-.66-.6-1.69-.55-2.29.11-.27.3-.42.69-.42,1.09v25.51c0,.95-.48,1.42-1.43,1.42-3.49,0-7.45-.69-11.89-2.06-.27-.09-.46-.34-.46-.63V1.45c0-.48.24-.74.72-.78L9.19,0c.23-.02.46.06.63.21l22.99,20.97c.37.33.87.48,1.35.39,1.55-.28,2.9-.42,4.05-.42s2.5.14,4.05.43c.49.09.99-.05,1.36-.39L66.64.26c.17-.15.4-.23.63-.21l8.13.68c.48.04.72.3.72.78l-.09,49.57c0,.29-.19.54-.46.63-4.44,1.36-8.4,2.04-11.89,2.04-.95,0-1.43-.47-1.43-1.42l.05-25.51c0-.89-.72-1.62-1.62-1.62-.4,0-.79.15-1.09.42l-11.81,10.74c-.29.26-.68.34-1.04.22-2.96-.94-5.81-1.41-8.54-1.41Z'
+        },
+        child: []
+      },
+      {
+        tag: 'path',
+        attr: {
+          d: 'm38.6,54.9c.94.02,1.42.03,1.43.03.73.04,1.3.66,1.27,1.38,0,.19-.06.37-.15.54-.57,1.07-1.11,2.04-1.64,2.91-.11.18-.25.3-.42.37s-.38.1-.61.09c-.23,0-.43-.04-.6-.12-.17-.07-.3-.2-.4-.38-.49-.89-1-1.88-1.52-2.98-.31-.65-.02-1.44.65-1.74.17-.08.36-.12.55-.13.01,0,.49.01,1.44.03Z'
+        },
+        child: []
+      },
+      {
+        tag: 'rect',
+        attr: {
+          x: '0',
+          y: '57',
+          width: '21.12',
+          height: '2.7',
+          rx: '.9',
+          ry: '.9'
+        },
+        child: []
+      },
+      {
+        tag: 'rect',
+        attr: {
+          x: '55.81',
+          y: '57',
+          width: '20.28',
+          height: '2.7',
+          rx: '.9',
+          ry: '.9'
+        },
+        child: []
+      },
+      {
+        tag: 'rect',
+        attr: {
+          x: '-.29',
+          y: '66.23',
+          width: '21.96',
+          height: '2.8',
+          rx: '.9',
+          ry: '.9',
+          transform: 'translate(-21.33 7.11) rotate(-18.9)'
+        },
+        child: []
+      },
+      {
+        tag: 'rect',
+        attr: {
+          x: '64.5',
+          y: '56.89',
+          width: '2.82',
+          height: '21.4',
+          rx: '.9',
+          ry: '.9',
+          transform: 'translate(-19.39 108.06) rotate(-71.1)'
+        },
+        child: []
+      }
+    ]
+  })(props)
+}
+
+export default MihomoIcon
diff --git a/src/renderer/src/components/updater/updater-button.tsx b/src/renderer/src/components/updater/updater-button.tsx
index f009186..104feaf 100644
--- a/src/renderer/src/components/updater/updater-button.tsx
+++ b/src/renderer/src/components/updater/updater-button.tsx
@@ -4,10 +4,11 @@ import { checkUpdate } from '@renderer/utils/ipc'
 import React, { useState } from 'react'
 import useSWR from 'swr'
 import UpdaterModal from './updater-modal'
+import { platform } from '@renderer/utils/init'
 
 const UpdaterButton: React.FC = () => {
   const { appConfig } = useAppConfig()
-  const { autoCheckUpdate } = appConfig || {}
+  const { autoCheckUpdate, useWindowFrame = false } = appConfig || {}
   const [openModal, setOpenModal] = useState(false)
   const { data: latest } = useSWR(
     autoCheckUpdate ? 'checkUpdate' : undefined,
@@ -30,7 +31,7 @@ const UpdaterButton: React.FC = () => {
         />
       )}
       <Button
-        className="fixed left-[90px] app-nodrag"
+        className={`fixed left-[85px] app-nodrag ${!useWindowFrame && platform === 'darwin' ? 'ml-[60px]' : ''}`}
         color="danger"
         size="sm"
         onPress={() => {