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>
     );