Merge pull request #2919 from quiple/fix-font-family

Remove `className={locale}` and add `lang` attribute to `LanguageButton()`

src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx

@@ -12,7 +12,7 @@ export function RealtimeCountries({ data }) {
 
   const renderCountryName = useCallback(
     ({ x: code }) => (
-      <span className={classNames(locale, styles.row)}>
+      <span className={classNames(styles.row)}>
         <TypeIcon type="country" value={code?.toLowerCase()} />
         {countryNames[code]}
       </span>

src/app/layout.tsx

@@ -4,7 +4,6 @@ import '@fontsource/inter/400.css';
 import '@fontsource/inter/700.css';
 import '@fontsource/inter/800.css';
 import 'react-basics/dist/styles.css';
-import 'styles/locale.css';
 import 'styles/index.css';
 import 'styles/variables.css';
 

src/components/input/LanguageButton.tsx

@@ -1,4 +1,4 @@
-import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
+import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
 import { useLocale } from 'components/hooks';
@@ -33,7 +33,7 @@ export function LanguageButton() {
                     className={classNames(styles.item, { [styles.selected]: value === locale })}
                     onClick={(e: any) => handleSelect(value, close, e)}
                   >
-                    <Text>{label}</Text>
+                    <span lang={value}>{label}</span>
                     {value === locale && (
                       <Icon className={styles.icon}>
                         <Icons.Check />

src/components/metrics/CountriesTable.tsx

@@ -12,12 +12,7 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
 
   const renderLink = ({ x: code }) => {
     return (
-      <FilterLink
-        id="country"
-        className={locale}
-        value={countryNames[code] && code}
-        label={formatCountry(code)}
-      >
+      <FilterLink id="country" value={countryNames[code] && code} label={formatCountry(code)}>
         <TypeIcon type="country" value={code?.toLowerCase()} />
       </FilterLink>
     );

src/components/metrics/LanguagesTable.tsx

@@ -13,7 +13,7 @@ export function LanguagesTable({
   const languageNames = useLanguageNames(locale);
 
   const renderLabel = ({ x }) => {
-    return <div className={locale}>{languageNames[x?.split('-')[0]] ?? x}</div>;
+    return languageNames[x?.split('-')[0]] ?? x;
   };
 
   return (

src/components/metrics/Legend.tsx

@@ -3,7 +3,6 @@ import { safeDecodeURIComponent } from 'next-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
 import { LegendItem } from 'chart.js/auto';
-import { useLocale } from 'components/hooks';
 import styles from './Legend.module.css';
 
 export function Legend({
@@ -13,8 +12,6 @@ export function Legend({
   items: any[];
   onClick: (index: LegendItem) => void;
 }) {
-  const { locale } = useLocale();
-
   if (!items.find(({ text }) => text)) {
     return null;
   }
@@ -32,7 +29,7 @@ export function Legend({
             onClick={() => onClick(item)}
           >
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <span className={locale}>{safeDecodeURIComponent(text)}</span>
+              {safeDecodeURIComponent(text)}
             </StatusLight>
           </div>
         );

src/components/metrics/RegionsTable.tsx

@@ -11,7 +11,7 @@ export function RegionsTable(props: MetricsTableProps) {
 
   const renderLink = ({ x: code, country }) => {
     return (
-      <FilterLink id="region" className={locale} value={code} label={getRegionName(code, country)}>
+      <FilterLink id="region" value={code} label={getRegionName(code, country)}>
         <TypeIcon type="country" value={country?.toLowerCase()} />
       </FilterLink>
     );

src/styles/locale.css

@@ -1,29 +0,0 @@
-.zh-CN {
-  font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
-    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
-}
-
-.zh-TW {
-  font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
-    'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
-}
-
-.ja-JP {
-  font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
-    'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
-}
-
-.ko-KR {
-  font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
-    'Noto Sans CJK KR', sans-serif !important;
-}
-
-.ar-SA {
-  font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
-    'Times New Roman', serif !important;
-}
-
-.he-IL {
-  font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
-    'Noto Sans Hebrew', sans-serif !important;
-}