1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

Theme consistency updates (#960)

* fix: theme palette and shape

* fix: update snapshots

* fix: adjust after review
This commit is contained in:
Tymoteusz Czech 2022-05-09 12:01:12 +02:00 committed by GitHub
parent 78f06d3dcb
commit cd37624de4
48 changed files with 217 additions and 195 deletions

View File

@ -38,6 +38,9 @@ const UsersAdmin = () => {
}
/>
<Button
sx={{
ml: 1.5,
}}
variant="contained"
color="primary"
onClick={() =>

View File

@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
container: {
backgroundColor: theme.palette.primary.main,
padding: '1rem',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
position: 'relative',
maxHeight: '500px',
overflow: 'auto',

View File

@ -75,7 +75,7 @@ export const useStyles = makeStyles()(theme => ({
},
},
editingBadge: {
borderRadius: '25px',
borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '0.25rem 0.5rem',
backgroundColor: '#635DC5',
color: '#fff',

View File

@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
padding: '0.5rem 0.75rem',
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.grey[200],
lineHeight: 1.25,
},
@ -21,7 +21,7 @@ export const useStyles = makeStyles()(theme => ({
'& > span': {
display: 'inline-block',
padding: '0 0.25rem',
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
fontSize: theme.fontSizes.smallerBody,
backgroundColor: theme.palette.primary.light,
color: 'white',

View File

@ -10,8 +10,8 @@ export const useStyles = makeStyles()(theme => ({
wing: {
width: '80px',
height: '3px',
backgroundColor: theme.palette.division.main,
borderRadius: theme.borderRadius.main,
backgroundColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
},
text: {
textAlign: 'center',

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
headerContainer: {
padding: '1.8rem 2rem',
padding: theme.spacing(2, 4),
borderBottom: `1px solid ${theme.palette.grey[100]}`,
[theme.breakpoints.down('md')]: {
padding: '1.5rem 1rem',

View File

@ -19,7 +19,7 @@ export const useStyles = makeStyles()(theme => ({
backgroundColor: 'efefef',
margin: '0 0.2rem',
width: '31px',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
padding: '0.25rem 0.5rem',
},
paginationButtonActive: {
@ -29,7 +29,7 @@ export const useStyles = makeStyles()(theme => ({
},
idxBtn: {
border: 'none',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
background: 'transparent',
position: 'absolute',
height: '23px',

View File

@ -10,8 +10,8 @@ export const useStyles = makeStyles()(theme => ({
search: {
display: 'flex',
alignItems: 'center',
backgroundColor: theme.palette.searchField.main,
borderRadius: '25px',
backgroundColor: theme.palette.background.default,
borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '0.25rem 0.5rem',
maxWidth: '450px',
[theme.breakpoints.down('sm')]: {

View File

@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
textDecoration: 'none',
background: theme.palette.primary.dark,
color: theme.palette.primary.contrastText,
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
fontSize: theme.fontSizes.smallBody,
[theme.breakpoints.down(960)]: {

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
tabNav: {
backgroundColor: theme.palette.tabs.main,
backgroundColor: theme.palette.background.paper,
},
tab: {
[theme.breakpoints.up('lg')]: {

View File

@ -6,6 +6,9 @@ export const useStyles = makeStyles()(theme => ({
position: 'relative',
'&:hover, &:focus': {
backgroundColor: theme.palette.grey[400],
'& svg': {
color: 'inherit',
},
},
},
sortButton: {

View File

@ -80,10 +80,6 @@ export const TableActions: FC<ITableActionsProps> = ({
</>
}
/>
<ConditionallyRender
condition={Boolean(isSeparated)}
show={<div className={styles.verticalSeparator} />}
/>
{children}
</div>
);

View File

@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.grey[300]}`,
borderRadius: '25px',
borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '3px 5px 3px 12px',
maxWidth: '450px',
[theme.breakpoints.down('sm')]: {
@ -34,7 +34,8 @@ export const useStyles = makeStyles()(theme => ({
},
},
clearIcon: {
color: theme.palette.grey[600],
// color: theme.palette.grey[700],
color: 'red',
fontSize: '18px',
},
inputRoot: {

View File

@ -12,7 +12,7 @@ export const useStyles = makeStyles()(theme => ({
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.grey[300]}`,
borderRadius: '25px',
borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '3px 5px 3px 12px',
maxWidth: '450px',
[theme.breakpoints.down('sm')]: {
@ -34,7 +34,7 @@ export const useStyles = makeStyles()(theme => ({
},
},
clearIcon: {
color: theme.palette.grey[600],
color: theme.palette.grey[700],
fontSize: '18px',
},
inputRoot: {

View File

@ -19,7 +19,7 @@ export const useStyles = makeStyles()(theme => ({
},
verticalSeparator: {
height: '100%',
backgroundColor: theme.palette.grey[500],
borderColor: theme.palette.grey[500],
width: '1px',
display: 'inline-block',
marginLeft: theme.spacing(2),

View File

@ -1,6 +1,7 @@
import { FC, VFC } from 'react';
import { Box, Toolbar, Typography } from '@mui/material';
import { Divider, Box, Toolbar } from '@mui/material';
import { useStyles } from './TableToolbar.styles';
import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
interface ITableToolbarProps {
title: string;
@ -13,20 +14,24 @@ export const TableToolbarComponent: FC<ITableToolbarProps> & {
return (
<Toolbar className={styles.toolbar}>
<Typography variant="h1" data-loading>
{title}
</Typography>
<HeaderTitle title={title} data-loading />
<Box className={styles.actions}>{children}</Box>
</Toolbar>
);
};
const Divider: VFC = () => {
const ToolbarDivider: VFC = () => {
const { classes: styles } = useStyles();
return <Box className={styles.verticalSeparator} />;
return (
<Divider
orientation="vertical"
variant="middle"
className={styles.verticalSeparator}
/>
);
};
TableToolbarComponent.Divider = Divider;
TableToolbarComponent.Divider = ToolbarDivider;
export const TableToolbar = TableToolbarComponent;

View File

@ -10,7 +10,7 @@ export const useStyles = makeStyles()(theme => ({
gap: '0.5rem',
padding: '0.5rem',
background: theme.palette.grey[200],
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
wordBreak: 'break-word',
},
label: {

View File

@ -20,6 +20,6 @@ export const useStyles = makeStyles()(theme => ({
marginBlock: '0.2rem',
display: 'grid',
alignItems: 'center',
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
},
}));

View File

@ -1,7 +1,7 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
wrapper: {
paddingTop: theme.spacing(1.5),
paddingBottom: theme.spacing(1.5),
paddingLeft: theme.spacing(2),
@ -9,9 +9,21 @@ export const useStyles = makeStyles()(theme => ({
display: 'flex',
alignItems: 'center',
minHeight: '62px',
'&:hover, &:focus': {
textDecoration: 'none',
'& > div > span:first-of-type': {
textDecoration: 'underline',
},
},
},
container: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
description: {
color: theme.palette.grey[800],
textDecoration: 'none',
fontSize: 'inherit',
display: 'inline-block',
maxWidth: '250px',

View File

@ -25,18 +25,16 @@ export const FeatureLinkCell: FC<IFeatureLinkCellProps> = ({
component={RouterLink}
to={to}
underline="hover"
className={styles.container}
className={styles.wrapper}
>
<div>
<div className={styles.container}>
<span data-loading>
<Highlighter search={search}>{title}</Highlighter>
</span>
<ConditionallyRender
condition={Boolean(subtitle)}
show={
<>
<br />
<Typography
className={styles.description}
component="span"

View File

@ -31,21 +31,21 @@ const useFeatureColor = () => {
return (unit?: string): string => {
switch (unit) {
case 'second':
return theme.palette.success.light;
return theme.palette.activityIndicators.recent;
case 'minute':
return theme.palette.success.light;
return theme.palette.activityIndicators.recent;
case 'hour':
return theme.palette.success.light;
return theme.palette.activityIndicators.recent;
case 'day':
return theme.palette.success.light;
return theme.palette.activityIndicators.recent;
case 'week':
return theme.palette.warning.light;
return theme.palette.activityIndicators.inactive;
case 'month':
return theme.palette.error.light;
return theme.palette.activityIndicators.abandoned;
case 'year':
return theme.palette.error.light;
return theme.palette.activityIndicators.abandoned;
default:
return theme.palette.grey[100];
return theme.palette.activityIndicators.unknown;
}
};
};

View File

@ -182,7 +182,7 @@ export const FeatureToggleListTable: VFC<IExperimentProps> = ({
{rows.map(row => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
<TableRow hover {...row.getRowProps()}>
{row.cells.map(cell => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}

View File

@ -8,7 +8,6 @@ export const useStyles = makeStyles()(theme => ({
alignItems: 'center',
},
icon: {
marginTop: theme.spacing(0.5),
color: theme.palette.grey[600],
},
}));

View File

@ -18,6 +18,7 @@ export const useStyles = makeStyles()(theme => ({
},
tableCellHeaderSortable: {
cursor: 'pointer',
background: theme.palette.grey[50],
},
tableCellStatus: {
width: '60px',

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: '#fff',
display: 'flex',
flexDirection: 'column',

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
border: `1px solid ${theme.palette.grey[300]}`,
'& + &': {
marginTop: '1rem',

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
color: '#fff',
backgroundColor: theme.palette.primary.light,
display: 'flex',

View File

@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.primary.light,
display: 'flex',
flexDirection: 'column',

View File

@ -6,7 +6,7 @@ export const useStyles = makeStyles()(theme => ({
height: '42px',
fontSize: '0.7em',
background: 'gray',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
textAlign: 'center',
display: 'flex',
alignItems: 'center',

View File

@ -1,10 +1,14 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: { borderRadius: '10px', boxShadow: 'none', display: 'flex' },
container: {
borderRadius: theme.shape.borderRadiusLarge,
boxShadow: 'none',
display: 'flex',
},
header: {
backgroundColor: '#fff',
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
marginBottom: '1rem',
},
toggleInfoContainer: {

View File

@ -131,18 +131,18 @@ exports[`FeedbackCESForm 1`] = `
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-1rae96v-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-rrmchf-MuiInputBase-root-MuiOutlinedInput-root"
>
<textarea
aria-invalid="false"
class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1632cvv-MuiInputBase-input-MuiOutlinedInput-input"
id="mui-1"
rows="3"
style="height: 0px; overflow: hidden;"
/>
<textarea
aria-hidden="true"
class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1632cvv-MuiInputBase-input-MuiOutlinedInput-input"
readonly=""
style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding: 0px; width: 100%;"
tabindex="-1"
@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
hidden=""
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
disabled=""
tabindex="-1"
type="submit"

View File

@ -2,12 +2,12 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
blue: {
color: theme.code.edited,
color: theme.palette.code.edited,
},
negative: {
color: theme.code.diffSub,
color: theme.palette.code.diffSub,
},
positive: {
color: theme.code.diffAdd,
color: theme.palette.code.diffAdd,
},
}));

View File

@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
historyItem: {
padding: '5px',
'&:nth-of-type(odd)': {
backgroundColor: theme.code.background,
backgroundColor: theme.palette.code.background,
},
},
}));

View File

@ -5,7 +5,7 @@ export const useStyles = makeStyles()(theme => ({
border: `1px solid ${theme.palette.grey[100]}`,
padding: '1rem',
margin: '1rem 0',
borderRadius: theme.borderRadius.main,
borderRadius: theme.shape.borderRadius,
},
history: {
'& code': {
@ -13,16 +13,16 @@ export const useStyles = makeStyles()(theme => ({
whiteSpace: 'pre',
fontFamily: 'monospace',
lineHeight: '100%',
color: theme.code.main,
color: theme.palette.code.main,
},
'& code > .diff-N': {
color: theme.code.diffAdd,
color: theme.palette.code.diffAdd,
},
'& code > .diff-D': {
color: theme.code.diffSub,
color: theme.palette.code.diffSub,
},
'& code > .diff-A, .diff-E': {
color: theme.code.diffNeutral,
color: theme.palette.code.diffNeutral,
},
'& dl': {
padding: '0',

View File

@ -17,7 +17,7 @@ export const useStyles = makeStyles()(theme => ({
margin: 0,
'& a': {
textDecoration: 'none',
color: theme.palette.footer.main,
color: theme.palette.text.primary,
},
},
}));

View File

@ -53,7 +53,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -224,7 +224,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -334,7 +334,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -498,7 +498,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -669,7 +669,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -779,7 +779,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div
@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
</div>
</li>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-w8p5u6-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-3n5xsg-listItem mui-w8p5u6-MuiListItem-root"
disabled={false}
>
<div

View File

@ -11,7 +11,7 @@ export const useStyles = makeStyles()(theme => ({
projectToggles: { width: '100%', minHeight: '100%' },
header: {
backgroundColor: '#fff',
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
marginBottom: '1rem',
},
innerContainer: {

View File

@ -55,7 +55,7 @@ export const useStyles = makeStyles()(theme => ({
textAlign: 'center',
marginBottom: '1rem',
backgroundColor: '#fff',
borderRadius: '10px',
borderRadius: theme.shape.borderRadiusLarge,
width: '100%',
padding: '1.5rem 1rem 1.5rem 1rem',
[theme.breakpoints.down('md')]: {

View File

@ -3,7 +3,7 @@
exports[`renders correctly 1`] = `
[
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
style={
{
"borderRadius": "10px",
@ -12,7 +12,7 @@ exports[`renders correctly 1`] = `
}
>
<div
className="tss-8bhpw1-headerContainer"
className="tss-ee3n06-headerContainer"
>
<div
className="tss-14s7qul-headerTitleContainer"
@ -22,7 +22,7 @@ exports[`renders correctly 1`] = `
data-loading={true}
>
<h1
className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-ylrecv-MuiTypography-root"
className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
>
Strategies
</h1>
@ -35,7 +35,7 @@ exports[`renders correctly 1`] = `
>
<button
aria-describedby="useId-0"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
data-testid="ADD_NEW_STRATEGY_ID"
disabled={false}
onBlur={[Function]}
@ -112,7 +112,7 @@ exports[`renders correctly 1`] = `
</a>
</span>
<p
className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-1yab20-MuiTypography-root"
className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-of6c4k-MuiTypography-root"
>
Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
</p>

View File

@ -3,11 +3,6 @@
ul {
margin: 0;
}
hr {
margin: 0;
height: auto;
border-color: rgba(0, 0, 0, 0.12);
}
}
.primaryBreadbrumb {

View File

@ -3,7 +3,7 @@
exports[`renders an empty list correctly 1`] = `
[
<div
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-45jkiv-MuiPaper-root"
style={
{
"borderRadius": "10px",
@ -12,7 +12,7 @@ exports[`renders an empty list correctly 1`] = `
}
>
<div
className="tss-8bhpw1-headerContainer"
className="tss-ee3n06-headerContainer"
>
<div
className="tss-14s7qul-headerTitleContainer"
@ -22,7 +22,7 @@ exports[`renders an empty list correctly 1`] = `
data-loading={true}
>
<h1
className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-ylrecv-MuiTypography-root"
className="MuiTypography-root MuiTypography-h1 tss-7lbvh4-headerTitle mui-ylrecv-MuiTypography-root"
>
Tag Types
</h1>
@ -31,7 +31,7 @@ exports[`renders an empty list correctly 1`] = `
className="tss-ap2nhp-headerActions"
>
<button
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}

View File

@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
border: '1px solid #f1f1f1',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
position: 'relative',
maxWidth: '350px',
color: '#44606e',
@ -26,7 +26,7 @@ export const useStyles = makeStyles()(theme => ({
},
statusBar: {
width: '50px',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
backgroundColor: 'red',
height: '6px',
},

View File

@ -15,7 +15,7 @@ export const useStyles = makeStyles()(theme => ({
},
leftContainer: {
width: '40%',
borderRadius: '3px',
borderRadius: theme.shape.borderRadius,
[theme.breakpoints.down('md')]: {
borderRadius: '0',
width: '100%',

View File

@ -175,7 +175,7 @@ const compareNullableDates = (
a: Date | null | undefined,
b: Date | null | undefined
): number => {
return a && b ? a.getTime() - b.getTime() : a ? 1 : b ? -1 : 0;
return a && b ? a?.getTime?.() - b?.getTime?.() : a ? 1 : b ? -1 : 0;
};
const sortByExpired = (
features: Readonly<FeatureSchema[]>

View File

@ -32,6 +32,7 @@ export const colors = {
900: '#A6000E',
800: '#D11525',
700: '#D93644',
600: '#E04C59',
500: '#E04C59',
400: '#F0616D',
300: '#FEB0B7',

View File

@ -2,9 +2,6 @@ import { createTheme } from '@mui/material/styles';
import { colors } from './colors';
export default createTheme({
borderRadius: {
main: '3px',
},
boxShadows: {
main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
},
@ -20,7 +17,7 @@ export default createTheme({
},
},
fontSizes: {
mainHeader: '1.2rem',
mainHeader: '1.25rem',
subHeader: '1.1rem',
bodySize: '1rem',
smallBody: '0.9rem',
@ -32,13 +29,10 @@ export default createTheme({
semi: 700,
bold: 700,
},
code: {
main: '#0b8c8f',
diffAdd: 'green',
diffSub: 'red',
diffNeutral: 'black',
edited: 'blue',
background: '#efefef',
shape: {
borderRadius: '3px',
borderRadiusLarge: '10px',
borderRadiusExtraLarge: '25px',
},
palette: {
primary: {
@ -51,42 +45,47 @@ export default createTheme({
light: colors.purple[700],
dark: colors.purple[900],
},
info: {
light: colors.blue[700],
main: colors.blue[700],
dark: colors.blue[800],
},
success: {
light: colors.green[100],
light: colors.green[700],
main: colors.green[700],
dark: colors.green[800],
},
warning: {
light: colors.orange[200],
light: colors.orange[700],
main: colors.orange[700],
dark: colors.orange[800],
},
error: {
light: colors.red[200],
light: colors.red[700],
main: colors.red[700],
dark: colors.red[800],
},
divider: colors.grey[300],
dividerAlternative: colors.grey[500],
grey: colors.grey,
// neutral: {
// main: '#18243e',
// },
chips: {
main: '#b0bec5',
text: {
primary: colors.grey[900],
secondary: colors.grey[800],
disabled: colors.grey[600],
},
searchField: {
main: '#fff',
code: {
main: '#0b8c8f',
diffAdd: 'green',
diffSub: 'red',
diffNeutral: 'black',
edited: 'blue',
background: '#efefef',
},
iconButtons: {
main: '#fff',
},
tabs: {
main: '#efefef',
},
division: {
main: '#f1f1f1',
},
footer: {
main: '#000',
activityIndicators: {
unknown: colors.grey[100],
recent: colors.green[100],
inactive: colors.orange[200],
abandoned: colors.red[200],
},
},
components: {
@ -104,5 +103,23 @@ export default createTheme({
},
},
},
MuiBreadcrumbs: {
styleOverrides: {
root: {
'& a': {
color: colors.purple[900],
},
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
'&.MuiTableRow-hover:hover': {
background: colors.grey[100],
},
},
},
},
},
});

View File

@ -33,13 +33,13 @@ export const useThemeStyles = makeStyles()(theme => ({
},
divider: {
margin: '1rem 0',
backgroundColor: theme.palette.division.main,
backgroundColor: theme.palette.divider,
height: '3px',
width: '100%',
},
largeDivider: {
margin: '2rem 0',
backgroundColor: theme.palette.division.main,
backgroundColor: theme.palette.divider,
height: '3px',
width: '100%',
},

View File

@ -1,5 +1,3 @@
import { SimplePaletteColorOptions } from '@mui/material';
declare module '@mui/material/styles' {
interface CustomTheme {
/**
@ -24,6 +22,15 @@ declare module '@mui/material/styles' {
/**
* @deprecated
*/
boxShadows: {
main: string;
};
}
interface CustomPalette {
/**
* Colors for event log output
*/
code: {
main: string;
diffAdd: string;
@ -33,44 +40,15 @@ declare module '@mui/material/styles' {
background: string;
};
/**
* @deprecated
* For 'Seen' column on feature toggles list
*/
borderRadius: {
main: string;
activityIndicators: {
unknown: string;
recent: string;
inactive: string;
abandoned: string;
};
/**
* @deprecated
*/
boxShadows: {
main: string;
};
}
interface CustomPalette {
/**
* @deprecated
*/
chips: SimplePaletteColorOptions;
/**
* @deprecated
*/
searchField: SimplePaletteColorOptions;
/**
* @deprecated
*/
iconButtons: SimplePaletteColorOptions;
/**
* @deprecated
*/
tabs: SimplePaletteColorOptions;
/**
* @deprecated
*/
division: SimplePaletteColorOptions;
/**
* @deprecated
*/
footer: SimplePaletteColorOptions;
dividerAlternative: string;
}
interface Theme extends CustomTheme {}
@ -79,3 +57,12 @@ declare module '@mui/material/styles' {
interface Palette extends CustomPalette {}
interface PaletteOptions extends CustomPalette {}
}
declare module '@mui/system/createTheme/shape' {
interface Shape {
borderRadiusLarge: string;
borderRadiusExtraLarge: string;
}
}
export {};