Added theme changes and Embedded changes

assets/css/sdkCssVars.css

@@ -1,23 +1,6 @@
 /* CSS Variables used in SDK components */
 :root {
 
-  --app-primary-color: #007bff; /* was #673ab7; */
-  --app-primary-dark-color: #0048cc; /* was #4527A0; */
-  --app-primary-light-color: #33aeff; /* was #B499FC; */
-  --app-secondary-color: #FFC400;
-  --app-neutral-color: grey;
-  --app-neutral-light-color: lightgrey;
-  --app-neutral-dark-color: #262626;
-  --app-error-color: #f44336;
-  --app-error-light-color: #e57373;
-  --app-error-dark-color: #d32f2f;
-  --app-warning-color: #ff9800;
-  --app-warning-color-light: #ffb74d;
-  --app-warning-color-dark: #f57c00;
-
-  --app-background-color: whitesmoke;
-  --app-form-color: white;
-
   /* svg filter colors that match above, go here to generate https://codepen.io/sosuke/pen/Pjoqqp */
   /* replaced 3 filters when the primary, primary-dark, and primary-light were updated above
   --app-primary-color-filter: invert(23%) sepia(23%) saturate(6785%) hue-rotate(250deg) brightness(93%) contrast(88%);
@@ -31,11 +14,9 @@
   --app-neutral-color-filter: invert(55%) sepia(25%) saturate(0%) hue-rotate(269deg) brightness(87%) contrast(91%);
   --app-neutral-light-color-filter: invert(69%) sepia(74%) saturate(0%) hue-rotate(205deg) brightness(102%) contrast(103%);
   --app-white-color-filter: invert(100%) sepia(99%) saturate(0%) hue-rotate(144deg) brightness(109%) contrast(101%);
-  
-  
+
+
   /* App Navigation */
-  --app-nav-bg: #262626;  /*!default*/
-  --app-nav-color: #d9d9d9; /* invert( var(--app-nav-bg)) !default */
   --app-nav-width: 13rem; /*!default*/
   /* $app-nav-width: 15.625rem !default; */
   --app-nav-width-expanded: 13rem /*!default*/;

sdk-config.json

@@ -2,7 +2,7 @@
   "comment_sdk_config": "This is the configuration file for the React SDK",
   "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings",
   "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html",
-  "theme": "light",
+  "theme": "dark",
   "authConfig": {
     "authService": "pega",
 
@@ -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"]

src/samples/Embedded/Header/index.tsx

@@ -1,29 +1,173 @@
-import { Typography } from '@mui/material';
+import { useState } from 'react';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(theme => ({
-  embeddedHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '64px',
-    padding: '0px 20px',
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText
+  header: {
+    backgroundColor: theme.headerNav.backgroundColor,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    padding: '1rem 0'
   },
   embedTopIcon: {
     width: '40px',
-    filter: 'invert(100%)'
+    filter: 'var(--svg-color)'
+  },
+  navContainer: {
+    width: '90%',
+    maxWidth: '1400px',
+    margin: '0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '1.5rem'
+  },
+  logo: {
+    '& img': {
+      height: '35px',
+      width: 'auto',
+      verticalAlign: 'middle'
+    }
+  },
+
+  navMenu: {
+    flexGrow: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+
+    '@media (max-width: 768px)': {
+      position: 'fixed',
+      top: 0,
+      right: '-100%',
+      width: '80%',
+      maxWidth: '320px',
+      height: '100vh',
+      backgroundColor: 'var(--utility-background-color)',
+      boxShadow: '-5px 0 15px rgba(0,0,0,0.2)',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      gap: '3rem',
+      transition: 'right 0.3s ease-in-out',
+      zIndex: 1000
+    }
+  },
+  navMenuActive: {
+    '@media (max-width: 768px)': {
+      right: 0
+    }
+  },
+  navList: {
+    display: 'flex',
+    gap: '1.5rem',
+    alignItems: 'center',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+    '& a': {
+      textDecoration: 'none',
+      color: theme.headerNav.navLinkColor,
+      transition: 'color 0.3s ease',
+      '&:hover': {
+        color: theme.headerNav.navLinkHoverColor
+      }
+    },
+    '@media (max-width: 768px)': {
+      display: 'none'
+    }
+  },
+  showNavListsOnMobile: {
+    '$navMenuActive &': {
+      '@media (max-width: 768px)': {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2rem',
+        width: '100%',
+        textAlign: 'center',
+        '& a': {
+          color: theme.palette.text.primary,
+          '&:hover': {
+            color: theme.palette.primary.main
+          }
+        }
+      }
+    }
+  },
+  profileAvatar: {
+    height: '32px',
+    width: '32px',
+    borderRadius: '50%'
+  },
+  menuToggle: {
+    display: 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    zIndex: 1001,
+    padding: 0,
+    color: theme.headerNav.menuToggleColor,
+    '@media (max-width: 768px)': {
+      display: 'block'
+    }
   }
 }));
-
 export default function Header() {
   const classes = useStyles();
+  const [isMenuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setMenuOpen(!isMenuOpen);
+  };
+
+  const navMenuClassName = `${classes.navMenu} ${isMenuOpen ? classes.navMenuActive : ''}`;
+  const navListClassName = `${classes.navList} ${isMenuOpen ? classes.showNavListsOnMobile : ''}`;
 
   return (
-    <div className={classes.embeddedHeader}>
-      <Typography variant='h4'>{PCore.getEnvironmentInfo().getApplicationLabel()}</Typography>
-      &nbsp;&nbsp;&nbsp;&nbsp;
-      <img src='./assets/img/antenna.svg' className={classes.embedTopIcon} />
-    </div>
+    <header className={classes.header}>
+      <nav className={classes.navContainer}>
+        <a href='/' className={classes.logo}>
+          <img src='./assets/img/MediaCoLogo.png' alt='MediaCo Logo' />
+        </a>
+
+        <div className={navMenuClassName}>
+          <ul className={navListClassName}>
+            <li>
+              <a href='/'>Mobile</a>
+            </li>
+            <li>
+              <a href='/'>Internet</a>
+            </li>
+            <li>
+              <a href='/'>Coverage</a>
+            </li>
+            <li>
+              <a href='/'>Deals</a>
+            </li>
+          </ul>
+
+          <ul className={navListClassName}>
+            <li>
+              <a href='/'>Find a store</a>
+            </li>
+            <li>
+              <a href='/'>Contact and support</a>
+            </li>
+            <li>
+              <a href='/' className='cart-link'>
+                Cart
+              </a>
+            </li>
+            <li>
+              <a href='/' className='profile-link' aria-label='User Profile'>
+                <img src='./assets/img/UserProfile.png' alt='User Profile' className={classes.profileAvatar} />
+              </a>
+            </li>
+          </ul>
+        </div>
+        <button type='button' className={classes.menuToggle} onClick={toggleMenu} aria-label='Open menu'>
+          <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <path d='M4 6H20M4 12H20M4 18H20' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          </svg>
+        </button>
+      </nav>
+    </header>
   );
 }