Merge branch 'master' into header-component-update

Author: tumms2021389

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

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

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

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

packages/react-sdk-components/src/components/widget/ToDo/ToDo.tsx

@@ -82,20 +82,15 @@ function getID(assignment: any) {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
     paddingBottom: theme.spacing(1),
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light,
     borderRadius: 16
   },
   avatar: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light)
   },
   todoWrapper: {
-    borderLeft: '6px solid',
-    borderLeftColor: theme.palette.primary.light,
     padding: theme.spacing(1),
     margin: theme.spacing(1)
   },

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

@@ -89,7 +89,7 @@ const lightThemeColours = {
 };
 const darkThemeColours = {
   ':root': {
-    '--app-primary-color': '#f72585' /* accent pink */,
+    '--app-primary-color': '#C70BB5' /* accent pink */,
     '--app-primary-dark-color': '#c2185b' /* darker pink */,
     '--app-primary-light-color': '#ff5ca2' /* lighter pink */,
     '--app-secondary-color': '#c0c0c0' /* accent silver */,
@@ -252,8 +252,8 @@ const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#f72585', // accent pink
-      light: '#ff5ca2', // lighter shade of pink
+      main: '#C70BB5', // pink
+      light: '#C70BB5', // pink
       dark: '#c2185b', // darker shade
       contrastText: '#ffffff' // white text on pink buttons
     },
@@ -265,8 +265,8 @@ const darkTheme = createTheme({
     },
     info: {
       main: '#e91e63', // Pink
-      dark: '#ad1457', // Darker pink
-      light: '#f8bbd0', // Light pink for backgrounds
+      dark: '#E885D2', // Light pink
+      light: '#C70BB5', // Lighter pink for backgrounds
       contrastText: '#fff'
     },
     background: {