From 7d2b2bdd44682b049d440648bcf92dd198b3e893 Mon Sep 17 00:00:00 2001
From: GZTime <Time.GZ@outlook.com>
Date: Fri, 10 May 2024 05:19:17 +0800
Subject: [PATCH] fix(style): tooltip & font size in navbar

---
 src/GZCTF/ClientApp/src/components/AppHeader.tsx |  3 ++-
 src/GZCTF/ClientApp/src/components/AppNavbar.tsx | 15 ++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/GZCTF/ClientApp/src/components/AppHeader.tsx b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
index 7191f701..cc67d484 100644
--- a/src/GZCTF/ClientApp/src/components/AppHeader.tsx
+++ b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
@@ -75,7 +75,7 @@ const AppHeader: FC = () => {
 
             <Menu.Dropdown>
               {supportedLanguages.map((lang: SupportedLanguages) => (
-                <Menu.Item key={lang} fw={500} fz="md" onClick={() => setLanguage(lang)}>
+                <Menu.Item key={lang} fw={500} onClick={() => setLanguage(lang)}>
                   {LanguageMap[lang] ?? lang}
                 </Menu.Item>
               ))}
@@ -140,6 +140,7 @@ const AppHeader: FC = () => {
                     <Icon path={mdiWeatherNight} size={1} />
                   )
                 }
+                fw={500}
                 onClick={() => toggleColorScheme()}
               >
                 {t('common.tab.theme.switch_to', {
diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
index d2765cff..9fe0292c 100644
--- a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
+++ b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -70,8 +70,9 @@ const useStyles = createStyles((theme, _, u) => {
       },
     },
 
-    tooltipBody: {
+    tooltip: {
       marginLeft: 20,
+      fontWeight: 500,
 
       [u.dark]: {
         backgroundColor: darken(theme.colors[theme.primaryColor][8], 0.45),
@@ -106,7 +107,7 @@ const NavbarLink: FC<NavbarLinkProps> = (props: NavbarLinkProps) => {
   const { t } = useTranslation()
 
   return (
-    <Tooltip label={t(props.label)} classNames={{ tooltip: classes.tooltipBody }} position="right">
+    <Tooltip label={t(props.label)} classNames={classes} position="right">
       <ActionIcon
         onClick={props.onClick}
         component={Link}
@@ -205,7 +206,7 @@ const AppNavbar: FC = () => {
 
             <Menu.Dropdown>
               {supportedLanguages.map((lang: SupportedLanguages) => (
-                <Menu.Item key={lang} fw={500} fz="md" onClick={() => setLanguage(lang)}>
+                <Menu.Item key={lang} fw={500} onClick={() => setLanguage(lang)}>
                   {LanguageMap[lang] ?? lang}
                 </Menu.Item>
               ))}
@@ -218,7 +219,7 @@ const AppNavbar: FC = () => {
               theme:
                 colorScheme === 'dark' ? t('common.tab.theme.light') : t('common.tab.theme.dark'),
             })}
-            classNames={{ tooltip: classes.tooltipBody }}
+            classNames={classes}
             position="right"
           >
             <ActionIcon onClick={() => toggleColorScheme()} className={classes.link}>
@@ -270,11 +271,7 @@ const AppNavbar: FC = () => {
               </Menu.Dropdown>
             </Menu>
           ) : (
-            <Tooltip
-              label={t('common.tab.account.login')}
-              classNames={{ tooltip: classes.tooltipBody }}
-              position="right"
-            >
+            <Tooltip label={t('common.tab.account.login')} classNames={classes} position="right">
               <ActionIcon
                 component={Link}
                 to={`/account/login?from=${location.pathname}`}