fix(style): tooltip & font size in navbar

acmucsd · May 9, 2024 · 7d2b2bd · 7d2b2bd
1 parent 4f0a15a
commit 7d2b2bd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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}`}