merge

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/LanguagesTable.tsx

@@ -1,7 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { percentFilter } from 'lib/filters';
 import { useIntl } from 'react-intl';
-import { useLocale } from 'components/hooks';
 import { useMessages } from 'components/hooks';
 
 export function LanguagesTable({
@@ -9,15 +8,10 @@ export function LanguagesTable({
   ...props
 }: { onDataLoad: (data: any) => void } & MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { locale } = useLocale();
   const intl = useIntl();
 
   const renderLabel = ({ x }) => {
-    return (
-      <div className={locale}>
-        {intl.formatDisplayName(x?.split('-')[0], { type: 'language' }) ?? x}
-      </div>
-    );
+    return intl.formatDisplayName(x?.split('-')[0], { type: 'language' }) ?? 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/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;
-}