From 11f62a8cdb63f70bc24c6a6ccb278b7b299fedc9 Mon Sep 17 00:00:00 2001
From: 22 <60903333+nini22P@users.noreply.github.com>
Date: Mon, 1 Jan 2024 18:46:02 +0800
Subject: [PATCH] fix some bugs

---
 src/hooks/graph/useUser.ts    | 3 ++-
 src/hooks/ui/useThemeColor.ts | 8 ++++++--
 src/locales/zh-CN.json        | 2 +-
 src/pages/NavBar.tsx          | 9 +++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/hooks/graph/useUser.ts b/src/hooks/graph/useUser.ts
index c0848e9..0149390 100644
--- a/src/hooks/graph/useUser.ts
+++ b/src/hooks/graph/useUser.ts
@@ -20,8 +20,9 @@ const useUser = () => {
     usePlayQueueStore.persist.clearStorage()
     useUiStore.persist.clearStorage()
     instance.logoutRedirect({
-      postLogoutRedirectUri: '/'
+      postLogoutRedirectUri: '/',
     })
+    location.reload()
   }
 
   const account: AccountInfo | null = accounts[0] || null
diff --git a/src/hooks/ui/useThemeColor.ts b/src/hooks/ui/useThemeColor.ts
index 73945c5..8e744dc 100644
--- a/src/hooks/ui/useThemeColor.ts
+++ b/src/hooks/ui/useThemeColor.ts
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import useUiStore from '../../store/useUiStore'
 import useTheme from './useTheme'
 import { blendHex } from '@/utils'
+import { useMediaQuery } from '@mui/material'
 const useThemeColor = () => {
 
   const [
@@ -20,6 +21,8 @@ const useThemeColor = () => {
 
   const theme = useTheme()
 
+  const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
+
   useEffect(
     () => {
       const themeColorLight = document.getElementById('themeColorLight') as HTMLMetaElement
@@ -35,13 +38,14 @@ const useThemeColor = () => {
           themeColorDark.content = '#1e1e1e'
         }
         else if (audioViewIsShow && audioViewTheme === 'modern') {
-          const color = blendHex(`${theme.palette.background.default}`, `${coverColor}33`)
+
+          const color = blendHex(`${theme.palette.background.default}`, windowControlsOverlayOpen ? `${coverColor}30` : `${coverColor}33`)
           themeColorLight.content = color
           themeColorDark.content = color
         }
       }
     },
-    [audioViewIsShow, audioViewTheme, coverColor, theme.palette.background.default, videoViewIsShow]
+    [audioViewIsShow, audioViewTheme, coverColor, theme.palette.background.default, videoViewIsShow, windowControlsOverlayOpen]
   )
 
 }
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index d97d737..9f5cab9 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -12,7 +12,7 @@
     "openSourceDependencies": "开源库"
   },
   "account": {
-    "account": "账号",
+    "account": "账户",
     "signIn": "登录",
     "signOut": "注销",
     "signInAlert": "请使用微软账户授权登录"
diff --git a/src/pages/NavBar.tsx b/src/pages/NavBar.tsx
index 8d60940..cca3215 100644
--- a/src/pages/NavBar.tsx
+++ b/src/pages/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, Container, IconButton } from '@mui/material'
+import { Box, Typography, Container, IconButton, useMediaQuery } from '@mui/material'
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded'
 import useUiStore from '../store/useUiStore'
 import useUser from '@/hooks/graph/useUser'
@@ -8,6 +8,7 @@ const NavBar = () => {
   const [mobileSideBarOpen, updateMobileSideBarOpen] = useUiStore(
     (state) => [state.mobileSideBarOpen, state.updateMobileSideBarOpen]
   )
+  const windowControlsOverlayOpen = useMediaQuery('(display-mode: window-controls-overlay)')
 
   return (
     <Box
@@ -28,7 +29,7 @@ const NavBar = () => {
           justifyContent: 'flex-start',
           alignItems: 'center',
           height: '100%',
-          px: { xs: '0.5rem', sm: 'calc(env(titlebar-area-height, 1.25rem) - env(titlebar-area-height, 0rem) + 0.25rem)' },
+          px: { xs: '0.5rem', sm: windowControlsOverlayOpen ? '0.25rem' : '1.5rem' },
           py: 'calc(env(titlebar-area-height, 0.5rem) - env(titlebar-area-height, 0rem) + 0.25rem)',
         }}
       >
@@ -47,12 +48,12 @@ const NavBar = () => {
           alt='logo'
           style={{
             height: '100%',
-            marginRight: 'calc(env(titlebar-area-height, 0.5rem) - env(titlebar-area-height, 0rem) + 0.125rem)',
+            marginRight: windowControlsOverlayOpen ? '0.125rem' : '0.6125rem',
           }}
         />
         <Typography
           component="div"
-          fontSize={'calc(env(titlebar-area-height, 0.25rem) - env(titlebar-area-height, 0rem) + 1rem)'}
+          fontSize={windowControlsOverlayOpen ? '1rem' : '1.25rem'}
         >
           OMP
         </Typography>