Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Nuno Góis 2023-05-25 18:28:08 +01:00 committed by GitHub
parent 16209dabf4
commit 959ac33905
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 172 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
View File

@ -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}
>

149
frontend/src/component/demo/Demo.tsx
View File

@ -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
expanded={expanded}
setExpanded={setExpanded}
stepsCompletion={stepsCompletion}
currentTopic={topic}
setCurrentTopic={(topic: number) => {
setTopic(topic);
setStep(0);
<ConditionallyRender
condition={!isSmallScreen}
show={
<>
<DemoDialogWelcome
open={welcomeOpen}
onClose={() => {
setWelcomeOpen(false);
setWelcomeOpen(false);
setPlansOpen(false);
setExpanded(false);
trackEvent('demo-start-topic', {
props: {
topic: TOPICS[topic].title,
},
});
}}
topics={TOPICS}
onWelcome={() => {
closeGuide();
setPlansOpen(false);
trackEvent('demo-close', {
props: {
topic: 'welcome',
step: 'welcome',
},
});
}}
onStart={() => {
setWelcomeOpen(false);
setWelcomeOpen(true);
onStart();
trackEvent('demo-view-demo-link');
}}
/>
<DemoSteps
setExpanded={setExpanded}
step={step}
setStep={setStep}
stepsCompletion={stepsCompletion}
setStepsCompletion={setStepsCompletion}
topic={topic}
setTopic={setTopic}
topics={TOPICS}
onFinish={onFinish}
trackEvent('demo-start');
}}
/>
<DemoDialogFinish
open={finishOpen}
onClose={() => {
setFinishOpen(false);
setPlansOpen(true);
}}
onRestart={() => {
setFinishOpen(false);
onStart();
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}
/>
</>
}
/>
</>
);

44
frontend/src/component/demo/DemoBanner/DemoBanner.tsx
View File

@ -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
variant="outlined"
sx={{ ml: 1 }}
href="https://slack.unleash.run/"
target="_blank"
rel="noreferrer"
onClick={() => {
trackEvent('demo-ask-questions');
}}
>
Ask questions
</StyledQuestionsButton>
<StyledButton variant="contained" color="primary" onClick={onPlans}>
Get started
</StyledButton>
<StyledButtons>
<StyledQuestionsButton
variant="outlined"
sx={{ ml: 1 }}
href="https://slack.unleash.run/"
target="_blank"
rel="noreferrer"
onClick={() => {
trackEvent('demo-ask-questions');
}}
>
Ask questions
</StyledQuestionsButton>
<StyledButton
variant="contained"
color="primary"
onClick={onPlans}
>
Get started
</StyledButton>
</StyledButtons>
</StyledBanner>
);
};

1
frontend/src/component/demo/DemoDialog/DemoDialog.tsx
View File

@ -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 }) => ({

28
frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
View File

@ -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 }) => ({

38
frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
View File

@ -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
className={styles.drawerTitleLogo}
aria-label="Unleash logo"
<ThemeMode
darkmode={
<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 => (

1
frontend/src/component/menu/Header/Header.tsx
View File

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

4
frontend/src/themes/dark-theme.ts
View File

@ -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': {

4
frontend/src/themes/theme.ts
View File

@ -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': {