fix(web): update language setting in extension based on client setting (

#99)
reearth · Nov 20, 2024 · b43ae3e · b43ae3e
1 parent 4a32f8d
commit b43ae3e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/web/src/components/pages/extensions/sharedProviders.tsx b/web/src/components/pages/extensions/sharedProviders.tsx
@@ -10,7 +10,7 @@ import "@marketplace/index.css";
 
 export default function SharedProviders({
   theme,
-  // lang,
+  lang,
   accessToken,
   children,
 }: {
@@ -26,7 +26,7 @@ export default function SharedProviders({
       theme={{
         algorithm: theme === "dark" ? ProviderTheme.darkAlgorithm : ProviderTheme.defaultAlgorithm,
       }}>
-      <I18nProvider>
+      <I18nProvider extensionSetLang={lang}>
         <GqlProvider accessToken={accessToken}>
           <ThemeProvider theme={theme}>{children}</ThemeProvider>
         </GqlProvider>

diff --git a/web/src/i18n/provider.tsx b/web/src/i18n/provider.tsx
@@ -16,7 +16,13 @@ const getBrowserLanguage = () => {
   }
 };
 
-export default function Provider({ children }: { children?: ReactNode }) {
+export default function Provider({
+  extensionSetLang,
+  children,
+}: {
+  extensionSetLang?: string;
+  children?: ReactNode;
+}) {
   const { isAuthenticated } = useAuth();
   const [currentLang, setLang] = useCurrentLang();
 
@@ -26,7 +32,8 @@ export default function Provider({ children }: { children?: ReactNode }) {
     },
     skip: !isAuthenticated,
   });
-  const locale = data?.me.lang ?? currentLang;
+
+  const locale = extensionSetLang ? extensionSetLang : data?.me.lang ?? currentLang;
 
   useEffect(() => {
     const lang = locale === "und" ? getBrowserLanguage() : locale;

diff --git a/web/src/index.css b/web/src/index.css
@@ -18,36 +18,34 @@ p {
   margin: 0;
 }
 
-.homepage-tabs {
-  .ant-tabs-ink-bar {
-    height: 5px;
-    color: #ffffff;
-  }
-
-  .ant-tabs .ant-tabs-tab {
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 16px !important;
-    line-height: 22px;
-    font-weight: 500;
-  }
-
-  .ant-tabs .ant-tabs-ink-bar {
-    background: #ffffff !important;
-  }
-
-  .ant-tabs-tab:hover {
-    color: #ffffff !important;
-  }
-
-  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-    color: #ffffff !important;
-  }
-
-  .ant-tabs-nav::before {
-    border-bottom: none !important;
-  }
-
-  .ant-tabs-nav {
-    margin-bottom: 2px !important;
-  }
+.homepage-tabs .ant-tabs-ink-bar {
+  height: 5px;
+  color: #ffffff;
+}
+
+.homepage-tabs .ant-tabs .ant-tabs-tab {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px !important;
+  line-height: 22px;
+  font-weight: 500;
+}
+
+.homepage-tabs .ant-tabs .ant-tabs-ink-bar {
+  background: #ffffff !important;
+}
+
+.homepage-tabs .ant-tabs-tab:hover {
+  color: #ffffff !important;
+}
+
+.homepage-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: #ffffff !important;
+}
+
+.homepage-tabs .ant-tabs-nav::before {
+  border-bottom: none !important;
+}
+
+.homepage-tabs .ant-tabs-nav {
+  margin-bottom: 2px !important;
 }