From ff86051e0aa74883e7f6008b60cfb02398971254 Mon Sep 17 00:00:00 2001
From: Siva Rama Krishna <sivaramakrishna.tumma@in.pega.com>
Date: Fri, 25 Oct 2024 15:17:15 +0530
Subject: [PATCH] fix: MUI style provider issue in Embedded mode

---
 .../Embedded/EmbeddedTopLevel/index.tsx       | 19 ++++++++-----------
 src/samples/FullPortal/index.tsx              |  9 +--------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/samples/Embedded/EmbeddedTopLevel/index.tsx b/src/samples/Embedded/EmbeddedTopLevel/index.tsx
index 3f092c5e..df13fe99 100644
--- a/src/samples/Embedded/EmbeddedTopLevel/index.tsx
+++ b/src/samples/Embedded/EmbeddedTopLevel/index.tsx
@@ -18,8 +18,7 @@ import { theme } from '../../../theme';
 
 declare const myLoadMashup: any;
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
   embedTopRibbon: {
     display: 'none',
     alignItems: 'center',
@@ -286,14 +285,7 @@ export default function EmbeddedTopLevel() {
     //  be done in a future sprint.
     return (
       // eslint-disable-next-line react/jsx-no-constructed-context-values
-      <StoreContext.Provider value={{ store: PCore.getStore(), displayOnlyFA: true }}>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            {thePConnObj}
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </StoreContext.Provider>
+      <StoreContext.Provider value={{ store: PCore.getStore(), displayOnlyFA: true }}>{thePConnObj}</StoreContext.Provider>
     );
   }
 
@@ -467,7 +459,12 @@ export default function EmbeddedTopLevel() {
 
     const theOptions = shoppingOptions.map((option, index) => {
       return (
-        <EmbeddedSwatch key={shoppingOptions[index].level} pcore={bShowAppName ? PCore : null} {...shoppingOptions[index]} onClick={onShopNow} />
+        <StyledEngineProvider injectFirst>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <EmbeddedSwatch key={shoppingOptions[index].level} pcore={bShowAppName ? PCore : null} {...shoppingOptions[index]} onClick={onShopNow} />
+          </ThemeProvider>
+        </StyledEngineProvider>
       );
     });
 
diff --git a/src/samples/FullPortal/index.tsx b/src/samples/FullPortal/index.tsx
index 5e9ef4b4..302fd85e 100644
--- a/src/samples/FullPortal/index.tsx
+++ b/src/samples/FullPortal/index.tsx
@@ -59,14 +59,7 @@ export default function FullPortal() {
 
     return (
       // eslint-disable-next-line react/jsx-no-constructed-context-values
-      <StoreContext.Provider value={{ store: PCore.getStore() }}>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            {thePConnObj}
-          </ThemeProvider>
-        </StyledEngineProvider>
-      </StoreContext.Provider>
+      <StoreContext.Provider value={{ store: PCore.getStore() }}>{thePConnObj}</StoreContext.Provider>
     );
   }