mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
fix: UI improvements related to the increase of width (#5752)
https://linear.app/unleash/issue/UNL-309/1500px-width-ui-issues UI fixes, improvements and adjustments related to the recent increase in width on the UI. Tried to follow the feature flag logic wherever it made sense. ![image](https://github.com/Unleash/unleash/assets/14320932/b5b4f437-c232-4025-ab24-09070a036592) ![image](https://github.com/Unleash/unleash/assets/14320932/e9008e3b-db5c-4553-bd7d-58a01120433d) Co-authored-by: Nicolae <nicolae@getunleash.ai>
This commit is contained in:
parent
d779faf56d
commit
8736189b4f
@ -3,7 +3,7 @@ import { styled } from '@mui/material';
|
||||
export const StyledCardsGrid = styled('div')<{ small?: boolean }>(
|
||||
({ theme, small = false }) => ({
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(${
|
||||
small ? '250px' : '350px'
|
||||
small ? '280px' : '350px'
|
||||
}, 1fr))`,
|
||||
gridAutoRows: '1fr',
|
||||
gap: theme.spacing(2),
|
||||
|
@ -6,12 +6,13 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
|
||||
import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
|
||||
import { changesCount } from 'component/changeRequest/changesCount';
|
||||
import { Sticky } from 'component/common/Sticky/Sticky';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
|
||||
interface IDraftBannerProps {
|
||||
project: string;
|
||||
}
|
||||
|
||||
const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
|
||||
const StyledNormalDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(1, 0),
|
||||
@ -20,7 +21,13 @@ const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledBox = styled(Box)(({ theme }) => ({
|
||||
const StyledSpaciousDraftBannerContentWrapper = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: theme.spacing(1, 0),
|
||||
}));
|
||||
|
||||
const StyledNormalDraftBanner = styled(Box)(({ theme }) => ({
|
||||
width: '1250px',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
@ -37,6 +44,22 @@ const StyledBox = styled(Box)(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledSpaciousDraftBanner = styled(Box)(({ theme }) => ({
|
||||
maxWidth: '1512px',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
[theme.breakpoints.down(1024)]: {
|
||||
width: '100%',
|
||||
marginLeft: 0,
|
||||
marginRight: 0,
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
minWidth: '100%',
|
||||
},
|
||||
}));
|
||||
|
||||
const DraftBannerContent: FC<{
|
||||
changeRequests: IChangeRequest[];
|
||||
onClick: () => void;
|
||||
@ -58,9 +81,19 @@ const DraftBannerContent: FC<{
|
||||
}[changeRequests[0].state as 'Draft' | 'In review' | 'Approved']
|
||||
: '';
|
||||
|
||||
const increaseUnleashWidth = useUiFlag('increaseUnleashWidth');
|
||||
|
||||
const StyledDraftBanner = increaseUnleashWidth
|
||||
? StyledSpaciousDraftBanner
|
||||
: StyledNormalDraftBanner;
|
||||
|
||||
const StyledDraftBannerContentWrapper = increaseUnleashWidth
|
||||
? StyledSpaciousDraftBannerContentWrapper
|
||||
: StyledNormalDraftBannerContentWrapper;
|
||||
|
||||
return (
|
||||
<StyledBox>
|
||||
<DraftBannerContentWrapper>
|
||||
<StyledDraftBanner>
|
||||
<StyledDraftBannerContentWrapper>
|
||||
<Typography variant='body2' sx={{ mr: 4 }}>
|
||||
<strong>Change request mode</strong> – You have changes{' '}
|
||||
<ConditionallyRender
|
||||
@ -94,8 +127,8 @@ const DraftBannerContent: FC<{
|
||||
>
|
||||
View changes ({allChangesCount})
|
||||
</Button>
|
||||
</DraftBannerContentWrapper>
|
||||
</StyledBox>
|
||||
</StyledDraftBannerContentWrapper>
|
||||
</StyledDraftBanner>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -56,7 +56,7 @@ const MainLayoutContent = styled(Grid)(({ theme }) => ({
|
||||
|
||||
const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
|
||||
width: '100%',
|
||||
maxWidth: '1500px',
|
||||
maxWidth: '1512px',
|
||||
margin: '0 auto',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(2),
|
||||
|
@ -54,7 +54,7 @@ const StyledSpaciousHeader = styled(AppBar)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
position: 'relative',
|
||||
zIndex: 300,
|
||||
maxWidth: '1580px',
|
||||
maxWidth: '1512px',
|
||||
[theme.breakpoints.down('lg')]: {
|
||||
maxWidth: '1280px',
|
||||
paddingLeft: theme.spacing(1),
|
||||
|
Loading…
Reference in New Issue
Block a user