fix: misc UI fixes mostly responsiveness related (#3868)

Includes:
 - https://linear.app/unleash/issue/2-1050/ui-fixes
 - https://linear.app/unleash/issue/2-1088/mobile-ui
 - https://linear.app/unleash/issue/2-1090/tablet-table

Which include things like:
 - zIndex adjustments;
 - Make the plans dialog more responsive;
 - Hide interactive demo guide on small screens;
 - Improve demo banner responsiveness;
 - Fix console error on `ResponsiveButton`;
 - Adjust sidebar header to be more consistent;
 
 

![image](https://github.com/Unleash/unleash/assets/14320932/e1fce811-a05a-42e6-abca-94789c9f3e37)![image](https://github.com/Unleash/unleash/assets/14320932/c7ce6528-25a6-4592-8c8a-aee765464873)

Co-authored-by @nicolaesocaciu

frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx

@@ -27,6 +27,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
     permission,
     environmentId,
     projectId,
+    endIcon,
     ...rest
 }) => {
     const smallScreen = useMediaQuery(`(max-width:${maxWidth})`);
@@ -56,6 +57,7 @@ const ResponsiveButton: React.FC<IResponsiveButtonProps> = ({
                     variant="contained"
                     disabled={disabled}
                     environmentId={environmentId}
+                    endIcon={endIcon}
                     data-loading
                     {...rest}
                 >

frontend/src/component/demo/Demo.tsx

@@ -9,6 +9,9 @@ import { DemoDialogPlans } from './DemoDialog/DemoDialogPlans/DemoDialogPlans';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { DemoBanner } from './DemoBanner/DemoBanner';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { useMediaQuery } from '@mui/material';
+import theme from 'themes/theme';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const defaultProgress = {
     welcomeOpen: true,
@@ -24,6 +27,7 @@ interface IDemoProps {
 
 export const Demo = ({ children }: IDemoProps): JSX.Element => {
     const { uiConfig } = useUiConfig();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
     const { trackEvent } = usePlausibleTracker();
 
     const { value: storedProgress, setValue: setStoredProgress } =
@@ -91,83 +95,90 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 }}
             />
             {children}
-            <DemoDialogWelcome
-                open={welcomeOpen}
-                onClose={() => {
-                    setWelcomeOpen(false);
-
-                    setExpanded(false);
-
-                    trackEvent('demo-close', {
-                        props: {
-                            topic: 'welcome',
-                            step: 'welcome',
-                        },
-                    });
-                }}
-                onStart={() => {
-                    setWelcomeOpen(false);
-
-                    onStart();
-
-                    trackEvent('demo-start');
-                }}
-            />
-            <DemoDialogFinish
-                open={finishOpen}
-                onClose={() => {
-                    setFinishOpen(false);
-                    setPlansOpen(true);
-                }}
-                onRestart={() => {
-                    setFinishOpen(false);
-                    onStart();
-
-                    trackEvent('demo-restart');
-                }}
-            />
             <DemoDialogPlans
                 open={plansOpen}
                 onClose={() => setPlansOpen(false)}
             />
-            <DemoTopics
+            <ConditionallyRender
-                expanded={expanded}
+                condition={!isSmallScreen}
-                setExpanded={setExpanded}
+                show={
-                stepsCompletion={stepsCompletion}
+                    <>
-                currentTopic={topic}
+                        <DemoDialogWelcome
-                setCurrentTopic={(topic: number) => {
+                            open={welcomeOpen}
-                    setTopic(topic);
+                            onClose={() => {
-                    setStep(0);
+                                setWelcomeOpen(false);
 
-                    setWelcomeOpen(false);
+                                setExpanded(false);
-                    setPlansOpen(false);
 
-                    trackEvent('demo-start-topic', {
+                                trackEvent('demo-close', {
-                        props: {
+                                    props: {
-                            topic: TOPICS[topic].title,
+                                        topic: 'welcome',
-                        },
+                                        step: 'welcome',
-                    });
+                                    },
-                }}
+                                });
-                topics={TOPICS}
+                            }}
-                onWelcome={() => {
+                            onStart={() => {
-                    closeGuide();
+                                setWelcomeOpen(false);
-                    setPlansOpen(false);
 
-                    setWelcomeOpen(true);
+                                onStart();
 
-                    trackEvent('demo-view-demo-link');
+                                trackEvent('demo-start');
-                }}
+                            }}
-            />
+                        />
-            <DemoSteps
+                        <DemoDialogFinish
-                setExpanded={setExpanded}
+                            open={finishOpen}
-                step={step}
+                            onClose={() => {
-                setStep={setStep}
+                                setFinishOpen(false);
-                stepsCompletion={stepsCompletion}
+                                setPlansOpen(true);
-                setStepsCompletion={setStepsCompletion}
+                            }}
-                topic={topic}
+                            onRestart={() => {
-                setTopic={setTopic}
+                                setFinishOpen(false);
-                topics={TOPICS}
+                                onStart();
-                onFinish={onFinish}
+
+                                trackEvent('demo-restart');
+                            }}
+                        />
+                        <DemoTopics
+                            expanded={expanded}
+                            setExpanded={setExpanded}
+                            stepsCompletion={stepsCompletion}
+                            currentTopic={topic}
+                            setCurrentTopic={(topic: number) => {
+                                setTopic(topic);
+                                setStep(0);
+
+                                setWelcomeOpen(false);
+                                setPlansOpen(false);
+
+                                trackEvent('demo-start-topic', {
+                                    props: {
+                                        topic: TOPICS[topic].title,
+                                    },
+                                });
+                            }}
+                            topics={TOPICS}
+                            onWelcome={() => {
+                                closeGuide();
+                                setPlansOpen(false);
+
+                                setWelcomeOpen(true);
+
+                                trackEvent('demo-view-demo-link');
+                            }}
+                        />
+                        <DemoSteps
+                            setExpanded={setExpanded}
+                            step={step}
+                            setStep={setStep}
+                            stepsCompletion={stepsCompletion}
+                            setStepsCompletion={setStepsCompletion}
+                            topic={topic}
+                            setTopic={setTopic}
+                            topics={TOPICS}
+                            onFinish={onFinish}
+                        />
+                    </>
+                }
             />
         </>
     );

frontend/src/component/demo/DemoBanner/DemoBanner.tsx

@@ -12,6 +12,14 @@ const StyledBanner = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.web.main,
     color: theme.palette.web.contrastText,
     padding: theme.spacing(1),
+    [theme.breakpoints.down(768)]: {
+        flexDirection: 'column',
+    },
+}));
+
+const StyledButtons = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
 }));
 
 const StyledButton = styled(Button)(({ theme }) => ({
@@ -40,21 +48,27 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
                 This is a <strong>demo of Unleash</strong>. Play around as much
                 as you want. Reach out when you're ready.
             </span>
-            <StyledQuestionsButton
+            <StyledButtons>
-                variant="outlined"
+                <StyledQuestionsButton
-                sx={{ ml: 1 }}
+                    variant="outlined"
-                href="https://slack.unleash.run/"
+                    sx={{ ml: 1 }}
-                target="_blank"
+                    href="https://slack.unleash.run/"
-                rel="noreferrer"
+                    target="_blank"
-                onClick={() => {
+                    rel="noreferrer"
-                    trackEvent('demo-ask-questions');
+                    onClick={() => {
-                }}
+                        trackEvent('demo-ask-questions');
-            >
+                    }}
-                Ask questions
+                >
-            </StyledQuestionsButton>
+                    Ask questions
-            <StyledButton variant="contained" color="primary" onClick={onPlans}>
+                </StyledQuestionsButton>
-                Get started
+                <StyledButton
-            </StyledButton>
+                    variant="contained"
+                    color="primary"
+                    onClick={onPlans}
+                >
+                    Get started
+                </StyledButton>
+            </StyledButtons>
         </StyledBanner>
     );
 };

frontend/src/component/demo/DemoDialog/DemoDialog.tsx

@@ -14,6 +14,7 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
         padding: theme.spacing(7.5),
         textAlign: 'center',
     },
+    zIndex: theme.zIndex.snackbar,
 }));
 
 const StyledCloseButton = styled(IconButton)(({ theme }) => ({

frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx

@@ -7,6 +7,17 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
         maxWidth: theme.spacing(120),
+        [theme.breakpoints.down('md')]: {
+            padding: theme.spacing(3.75),
+            margin: theme.spacing(2.5),
+        },
+        [theme.breakpoints.down(768)]: {
+            padding: theme.spacing(6, 4, 4, 4),
+            margin: theme.spacing(2.5),
+            '& > p': {
+                fontSize: theme.typography.h1.fontSize,
+            },
+        },
     },
 }));
 
@@ -15,6 +26,14 @@ const StyledPlans = styled('div')(({ theme }) => ({
     gridTemplateColumns: 'auto auto auto',
     gap: theme.spacing(1),
     marginTop: theme.spacing(6),
+    justifyContent: 'center',
+    [theme.breakpoints.down('md')]: {
+        marginTop: theme.spacing(4.75),
+    },
+    [theme.breakpoints.down(768)]: {
+        gridTemplateColumns: 'auto',
+        marginTop: theme.spacing(3.5),
+    },
 }));
 
 const StyledPlan = styled('div')(({ theme }) => ({
@@ -26,9 +45,18 @@ const StyledPlan = styled('div')(({ theme }) => ({
     padding: theme.spacing(4, 3),
     '& > a': {
         whiteSpace: 'nowrap',
+        [theme.breakpoints.between(768, 'md')]: {
+            whiteSpace: 'normal',
+            height: theme.spacing(6.25),
+            lineHeight: 1.2,
+        },
     },
     height: theme.spacing(34),
     width: theme.spacing(34),
+    [theme.breakpoints.between(768, 'md')]: {
+        height: theme.spacing(36),
+        width: theme.spacing(27.5),
+    },
 }));
 
 const StyledCompareLink = styled('a')(({ theme }) => ({

frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx

@@ -1,16 +1,31 @@
-import React, { ReactNode, VFC } from 'react';
+import { ReactNode, VFC } from 'react';
 import { Link } from 'react-router-dom';
-import { Divider, Drawer, List } from '@mui/material';
+import { Divider, Drawer, List, styled } from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import ExitToApp from '@mui/icons-material/ExitToApp';
-import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
+import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
+import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
 import NavigationLink from '../NavigationLink/NavigationLink';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { basePath } from 'utils/formatPath';
 import { IFlags } from 'interfaces/uiConfig';
 import { INavigationMenuItem } from 'interfaces/route';
 import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
+import theme from 'themes/theme';
+import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+
+const StyledDrawerHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'start',
+    '& svg': {
+        width: '100%',
+        height: '100%',
+        maxHeight: theme.spacing(8),
+        padding: theme.spacing(0.5),
+    },
+}));
 
 interface IDrawerMenuProps {
     title?: string;
@@ -33,7 +48,6 @@ interface IDrawerMenuProps {
 
 export const DrawerMenu: VFC<IDrawerMenuProps> = ({
     links = [],
-    title = 'Unleash',
     flags = {},
     open = false,
     toggleDrawer,
@@ -70,22 +84,26 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
             open={open}
             anchor="left"
             onClose={toggleDrawer}
+            style={{ zIndex: theme.zIndex.snackbar + 1 }}
         >
             <nav id="header-drawer" className={styles.drawerContainer}>
-                <div>
+                <StyledDrawerHeader>
                     <Link
                         to="/"
                         className={styles.drawerTitle}
                         aria-label="Home"
                         onClick={() => toggleDrawer()}
                     >
-                        <LogoIcon
+                        <ThemeMode
-                            className={styles.drawerTitleLogo}
+                            darkmode={
-                            aria-label="Unleash logo"
+                                <UnleashLogoWhite aria-label="Unleash logo" />
+                            }
+                            lightmode={
+                                <UnleashLogo aria-label="Unleash logo" />
+                            }
                         />
-                        <span className={styles.drawerTitleText}>{title}</span>
                     </Link>
-                </div>
+                </StyledDrawerHeader>
                 <Divider />
                 <List className={styles.drawerList}>
                     {routes.mobileRoutes.map(item => (

frontend/src/component/menu/Header/Header.tsx

@@ -187,7 +187,6 @@ const Header: VFC = () => {
                         </IconButton>
                     </Tooltip>
                     <DrawerMenu
-                        title={uiConfig.name}
                         flags={uiConfig.flags}
                         links={uiConfig.links}
                         open={openDrawer}

frontend/src/themes/dark-theme.ts

@@ -73,7 +73,7 @@ const theme = {
         tableRowHeightDense: 48,
     },
     zIndex: {
-        sticky: 2000,
+        sticky: 1400,
     },
 
     palette: {
@@ -281,7 +281,7 @@ export default createTheme({
         MuiCssBaseline: {
             styleOverrides: {
                 '#react-joyride-portal ~ .MuiDialog-root': {
-                    zIndex: 1500,
+                    zIndex: 1399,
                 },
 
                 '.skeleton': {

frontend/src/themes/theme.ts

@@ -66,7 +66,7 @@ const theme = {
         tableRowHeightDense: 48,
     },
     zIndex: {
-        sticky: 2000,
+        sticky: 1400,
     },
 
     palette: {
@@ -267,7 +267,7 @@ export default createTheme({
         MuiCssBaseline: {
             styleOverrides: {
                 '#react-joyride-portal ~ .MuiDialog-root': {
-                    zIndex: 1500,
+                    zIndex: 1399,
                 },
 
                 '.skeleton': {