fix: header theme changes in embedded sample (#510)

* Theme file change and header component update in embedded

---------

Co-authored-by: Siva Rama Krishna <[email protected]>
Co-authored-by: tumms2021389 <[email protected]>

Author: SambhuPega

packages/react-sdk-components/src/samples/Embedded/Header/index.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => ({
   header: {
-    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-nav-bg)' : theme.palette.background.paper,
+    backgroundColor: theme.headerNav.backgroundColor,
     borderBottom: `1px solid ${theme.palette.divider}`,
     padding: '1rem 0'
   },
@@ -64,10 +64,10 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
     '& a': {
       textDecoration: 'none',
-      color: theme.palette.mode === 'dark' ? 'var(--app-nav-color)' : theme.palette.text.primary,
+      color: theme.headerNav.navLinkColor,
       transition: 'color 0.3s ease',
       '&:hover': {
-        color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.primary.main
+        color: theme.headerNav.navLinkHoverColor
       }
     },
     '@media (max-width: 768px)': {
@@ -103,7 +103,7 @@ const useStyles = makeStyles(theme => ({
     cursor: 'pointer',
     zIndex: 1001,
     padding: 0,
-    color: theme.palette.mode === 'dark' ? theme.palette.primary.contrastText : theme.palette.text.primary,
+    color: theme.headerNav.menuToggleColor,
     '@media (max-width: 768px)': {
       display: 'block'
     }

packages/react-sdk-components/src/samples/Embedded/MainScreen/index.tsx

@@ -164,8 +164,7 @@ export default function MainScreen(props) {
     if (!mashupCaseType) {
       const caseTypes = PCore.getEnvironmentInfo()?.environmentInfoObject?.pyCaseTypeList;
       if (caseTypes && caseTypes.length > 0) {
-        //mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
-        mashupCaseType = 'DIXL-MediaCo-Work-PurchasePhone';
+        mashupCaseType = mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
       }
     }
     let selectedPhoneGUID = '';

packages/react-sdk-components/src/theme.ts

@@ -20,6 +20,12 @@ declare module '@mui/styles/defaultTheme' {
       backgroundColor: string;
       topColor: string;
     };
+    headerNav: {
+      backgroundColor: string;
+      navLinkColor: string;
+      navLinkHoverColor: string;
+      menuToggleColor: string;
+    };
     embedded: {
       resolutionTextColor: string;
     };
@@ -145,6 +151,12 @@ const lightTheme = createTheme({
       }
     }
   },
+  headerNav: {
+    backgroundColor: '#ffffff',
+    navLinkColor: 'rgba(0, 0, 0, 0.87)',
+    navLinkHoverColor: '#3f51b5',
+    menuToggleColor: 'rgba(0, 0, 0, 0.87)'
+  },
   actionButtons: {
     primary: {
       backgroundColor: '#cc0f60',
@@ -212,6 +224,12 @@ const darkTheme = createTheme({
       }
     }
   },
+  headerNav: {
+    backgroundColor: 'var(--app-nav-bg)',
+    navLinkColor: 'var(--app-nav-color)',
+    navLinkHoverColor: '#ffffff',
+    menuToggleColor: '#ffffff'
+  },
   actionButtons: {
     primary: {
       backgroundColor: '#C70BB5',

sdk-config.json

@@ -31,7 +31,7 @@
     "appPortal": "",
 
     "appMashupCaseType_comment": "If specified, uses this case type for mashup.  Otherwise, uses the first case type found for the app",
-    "appMashupCaseType": "",
+    "appMashupCaseType": "DIXL-MediaCo-Work-PurchasePhone",
 
     "excludePortals_comment": "Array of specific portals to avoid attempting to load with SDK",
     "excludePortals": ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"]