Updated NavBar to support uploaded app logo and styling to match new design (#504)

* Updated NavBar to support uploaded app logo and styling to match new design

* added banner style based on design

---------

Co-authored-by: mohas22 <[email protected]>

Author: samhere06

packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx

@@ -38,7 +38,10 @@ export default function Banner(props: BannerProps) {
         </div>
       </div>
       <Grid2 container size={12} className='banner-layout' spacing={1}>
-        <Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1em', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
         </Grid2>
         <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>

packages/react-sdk-components/src/components/template/AppShell/AppShell.tsx

@@ -81,7 +81,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   const classes = useStyles();
   const actionsAPI = pConn.getActionsApi();
   const localeReference = pConn.getValue('.pyLocaleReference', ''); // 2nd arg empty string until typedef marked correctly
-  const [imageBlobUrl, setImageBlobUrl] = useState<string | null>(null);
+  const [imageBlobUrl, setImageBlobUrl] = useState<string | Blob | null>(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [appName, setAppName] = useState('');
@@ -133,8 +133,8 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     }
   }, []);
 
-  const [iconURL, setIconURL] = useState('');
-  const [fullIconURL, setFullIconURL] = useState('');
+  const [iconURL, setIconURL] = useState<string | Blob>('');
+  const [fullIconURL, setFullIconURL] = useState<string | Blob>('');
   useEffect(() => {
     // using the default icon then fetch it from the static folder (not auth involved)
     if (
@@ -150,8 +150,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     // not using default icon to fetch it using the way which uses authentication
     else {
       PCore.getAssetLoader()
-        .getSvcImage(portalLogo)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(portalLogo)
         .then(data => {
           setIconURL(data);
           setFullIconURL(data);
@@ -165,8 +164,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   useEffect(() => {
     if (imageKey && portalTemplate === 'wss') {
       PCore.getAssetLoader()
-        .getSvcImage(imageKey)
-        .then(blob => window.URL.createObjectURL(blob))
+        .getSvcImageUrl(imageKey)
         .then(imagePath => setImageBlobUrl(imagePath));
     }
   }, []);

packages/react-sdk-components/src/components/template/WssNavBar/WssNavBar.tsx

@@ -36,8 +36,8 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   appListLogo: {
-    width: '3.6rem',
-    filter: 'var(--svg-color)'
+    width: '100%',
+    height: '100%'
   },
   appName: {
     marginLeft: theme.spacing(2),
@@ -84,8 +84,8 @@ export default function WssNavBar(props: WssNavBarProps) {
 
   return (
     <div id='NavBar' className='nav-bar'>
-      <AppBar position='static' color='primary'>
-        <Container maxWidth='xl'>
+      <AppBar position='fixed' color='primary'>
+        <Container maxWidth={false}>
           <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />