fix: fix ui bug in naa (#14199)

Author: KennethBWSong

templates/vsc/js/sso-tab-naa/src/components/App.jsx

@@ -12,39 +12,42 @@ import Privacy from "./Privacy";
 import TermsOfUse from "./TermsOfUse";
 import Tab from "./Tab";
 import { useTeams } from "./sample/lib/useTeams";
+import { TeamsFxContext } from "./Context";
 
 /**
  * The main app which handles the initialization and routing
  * of the app.
  */
 export default function App() {
-  const { loading, themeString } = useTeams();
+  const [{ loading, themeString, theme }] = useTeams();
   return (
-    <FluentProvider
-      theme={
-        themeString === "dark"
-          ? teamsDarkTheme
-          : themeString === "contrast"
-          ? teamsHighContrastTheme
-          : {
-              ...teamsLightTheme,
-              colorNeutralBackground3: "#eeeeee",
-            }
-      }
-      style={{ background: tokens.colorNeutralBackground3 }}
-    >
-      <Router>
-        {loading ? (
-          <Spinner style={{ margin: 100 }} />
-        ) : (
-          <Routes>
-            <Route path="/privacy" element={<Privacy />} />
-            <Route path="/termsofuse" element={<TermsOfUse />} />
-            <Route path="/tab" element={<Tab />} />
-            <Route path="*" element={<Navigate to={"/tab"} />}></Route>
-          </Routes>
-        )}
-      </Router>
-    </FluentProvider>
+    <TeamsFxContext.Provider value={{ theme, themeString }}>
+      <FluentProvider
+        theme={
+          themeString === "dark"
+            ? teamsDarkTheme
+            : themeString === "contrast"
+            ? teamsHighContrastTheme
+            : {
+                ...teamsLightTheme,
+                colorNeutralBackground3: "#eeeeee",
+              }
+        }
+        style={{ background: tokens.colorNeutralBackground3 }}
+      >
+        <Router>
+          {loading ? (
+            <Spinner style={{ margin: 100 }} />
+          ) : (
+            <Routes>
+              <Route path="/privacy" element={<Privacy />} />
+              <Route path="/termsofuse" element={<TermsOfUse />} />
+              <Route path="/tab" element={<Tab />} />
+              <Route path="*" element={<Navigate to={"/tab"} />}></Route>
+            </Routes>
+          )}
+        </Router>
+      </FluentProvider>
+    </TeamsFxContext.Provider>
   );
 }

templates/vsc/ts/sso-tab-naa/src/components/App.tsx

@@ -12,39 +12,42 @@ import Privacy from "./Privacy";
 import TermsOfUse from "./TermsOfUse";
 import Tab from "./Tab";
 import { useTeams } from "./sample/lib/useTeams";
+import { TeamsFxContext } from "./Context";
 
 /**
  * The main app which handles the initialization and routing
  * of the app.
  */
 export default function App() {
-  const { loading, themeString } = useTeams();
+  const [{ loading, themeString, theme }] = useTeams();
   return (
-    <FluentProvider
-      theme={
-        themeString === "dark"
-          ? teamsDarkTheme
-          : themeString === "contrast"
-          ? teamsHighContrastTheme
-          : {
-              ...teamsLightTheme,
-              colorNeutralBackground3: "#eeeeee",
-            }
-      }
-      style={{ background: tokens.colorNeutralBackground3 }}
-    >
-      <Router>
-        {loading ? (
-          <Spinner style={{ margin: 100 }} />
-        ) : (
-          <Routes>
-            <Route path="/privacy" element={<Privacy />} />
-            <Route path="/termsofuse" element={<TermsOfUse />} />
-            <Route path="/tab" element={<Tab />} />
-            <Route path="*" element={<Navigate to={"/tab"} />}></Route>
-          </Routes>
-        )}
-      </Router>
-    </FluentProvider>
+    <TeamsFxContext.Provider value={{ theme, themeString }}>
+      <FluentProvider
+        theme={
+          themeString === "dark"
+            ? teamsDarkTheme
+            : themeString === "contrast"
+            ? teamsHighContrastTheme
+            : {
+                ...teamsLightTheme,
+                colorNeutralBackground3: "#eeeeee",
+              }
+        }
+        style={{ background: tokens.colorNeutralBackground3 }}
+      >
+        <Router>
+          {loading ? (
+            <Spinner style={{ margin: 100 }} />
+          ) : (
+            <Routes>
+              <Route path="/privacy" element={<Privacy />} />
+              <Route path="/termsofuse" element={<TermsOfUse />} />
+              <Route path="/tab" element={<Tab />} />
+              <Route path="*" element={<Navigate to={"/tab"} />}></Route>
+            </Routes>
+          )}
+        </Router>
+      </FluentProvider>
+    </TeamsFxContext.Provider>
   );
 }