mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-14 01:16:17 +02:00
fix: feature toggle list and UI adjustments (#970)
* fix: add highlight and hover colors, fix them * misc ui adjustments * test isGrow prop in table cols * fix: revert typography changes, update snaps * Update src/themes/themeTypes.ts Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> * fix: misc ui adjustments * fix: backButton color * refactor: color not needed, can be inherited * fix: project roles case, new borderRadius values * fix: color green * fix: feature form link * update snaps * fix: formatting * update snap Co-authored-by: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
This commit is contained in:
parent
3f766995fb
commit
cdfb1f2452
81
frontend/src/component/App.styles.ts
Normal file
81
frontend/src/component/App.styles.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { makeStyles } from 'tss-react/mui';
|
||||||
|
|
||||||
|
export const useStyles = makeStyles()(theme => ({
|
||||||
|
container: {
|
||||||
|
height: '100%',
|
||||||
|
'& ul': {
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
primaryBreadcrumb: {
|
||||||
|
color: 'white',
|
||||||
|
},
|
||||||
|
headerTitleLink: {
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
|
contentWrapper: {
|
||||||
|
margin: '0 auto',
|
||||||
|
flex: 1,
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: theme.palette.grey[300],
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
width: '1250px',
|
||||||
|
margin: '16px auto',
|
||||||
|
[theme.breakpoints.down(1260)]: {
|
||||||
|
width: '1024px',
|
||||||
|
},
|
||||||
|
[theme.breakpoints.down(1024)]: {
|
||||||
|
width: '100%',
|
||||||
|
marginLeft: 0,
|
||||||
|
marginRight: 0,
|
||||||
|
},
|
||||||
|
[theme.breakpoints.down('sm')]: {
|
||||||
|
minWidth: '100%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
contentContainer: {
|
||||||
|
padding: '2rem 0',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
drawerTitle: {
|
||||||
|
lineHeight: '1 !important',
|
||||||
|
paddingTop: '16px',
|
||||||
|
paddingBottom: '16px',
|
||||||
|
paddingLeft: '24px !important',
|
||||||
|
[theme.breakpoints.down(1024)]: {
|
||||||
|
paddingTop: '12px',
|
||||||
|
paddingBottom: '12px',
|
||||||
|
paddingLeft: '16px !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
drawerTitleLogo: {
|
||||||
|
paddingRight: '16px',
|
||||||
|
},
|
||||||
|
drawerTitleText: {
|
||||||
|
display: 'inline-block',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
fontSize: theme.fontSizes.smallerBody,
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
padding: '8px 5px 8px 0 !important',
|
||||||
|
},
|
||||||
|
navigationLink: {
|
||||||
|
padding: '12px 20px !important',
|
||||||
|
borderRadius: '0 50px 50px 0',
|
||||||
|
textDecoration: 'none',
|
||||||
|
[theme.breakpoints.down(1024)]: {
|
||||||
|
padding: '12px 16px !important',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
navigationIcon: {
|
||||||
|
marginRight: '16px',
|
||||||
|
},
|
||||||
|
iconGitHub: {
|
||||||
|
width: '24px',
|
||||||
|
height: '24px',
|
||||||
|
background:
|
||||||
|
'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=)',
|
||||||
|
},
|
||||||
|
}));
|
@ -11,10 +11,11 @@ import { routes } from 'component/menu/routes';
|
|||||||
import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
|
import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
|
||||||
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
|
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
|
||||||
import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
|
import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
|
||||||
import styles from 'component/styles.module.scss';
|
import { useStyles } from './App.styles';
|
||||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
|
const { classes: styles } = useStyles();
|
||||||
const { authDetails } = useAuthDetails();
|
const { authDetails } = useAuthDetails();
|
||||||
const { user } = useAuthUser();
|
const { user } = useAuthUser();
|
||||||
const isLoggedIn = Boolean(user?.id);
|
const isLoggedIn = Boolean(user?.id);
|
||||||
|
@ -57,7 +57,7 @@ function AdminMenu() {
|
|||||||
to="/admin/roles"
|
to="/admin/roles"
|
||||||
style={createNavLinkStyle}
|
style={createNavLinkStyle}
|
||||||
>
|
>
|
||||||
<span>PROJECT ROLES</span>
|
<span>Project Roles</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
@ -27,9 +27,9 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
color: theme.palette.primary.light,
|
color: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
fill: theme.palette.primary.light,
|
fill: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
@ -195,7 +195,7 @@ const UsersList = ({ search }: IUsersListProps) => {
|
|||||||
sort={sort}
|
sort={sort}
|
||||||
setSort={setSort}
|
setSort={setSort}
|
||||||
>
|
>
|
||||||
Last seen
|
Last login
|
||||||
</TableCellSortable>
|
</TableCellSortable>
|
||||||
<TableCell align="center">
|
<TableCell align="center">
|
||||||
{hasAccess(ADMIN) ? 'Actions' : ''}
|
{hasAccess(ADMIN) ? 'Actions' : ''}
|
||||||
|
@ -2,9 +2,9 @@ import { makeStyles } from 'tss-react/mui';
|
|||||||
|
|
||||||
export const useStyles = makeStyles()(theme => ({
|
export const useStyles = makeStyles()(theme => ({
|
||||||
container: {
|
container: {
|
||||||
backgroundColor: theme.palette.primary.main,
|
backgroundColor: theme.palette.sidebarContainer,
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
borderRadius: theme.shape.borderRadius,
|
borderRadius: theme.shape.borderRadiusMedium,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
maxHeight: '500px',
|
maxHeight: '500px',
|
||||||
overflow: 'auto',
|
overflow: 'auto',
|
||||||
|
@ -56,7 +56,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
headerValues: {
|
headerValues: {
|
||||||
fontSize: theme.fontSizes.smallBody,
|
fontSize: theme.fontSizes.smallBody,
|
||||||
color: theme.palette.primary.light,
|
color: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
headerValuesExpand: {
|
headerValuesExpand: {
|
||||||
fontSize: theme.fontSizes.smallBody,
|
fontSize: theme.fontSizes.smallBody,
|
||||||
|
@ -20,7 +20,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
borderRadius: 0,
|
borderRadius: 0,
|
||||||
},
|
},
|
||||||
sidebar: {
|
sidebar: {
|
||||||
backgroundColor: theme.palette.primary.light,
|
backgroundColor: theme.palette.primary.main,
|
||||||
padding: '2rem',
|
padding: '2rem',
|
||||||
flexGrow: 0,
|
flexGrow: 0,
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
@ -32,6 +32,10 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
padding: '2rem 1rem',
|
padding: '2rem 1rem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
sidebarDivider: {
|
||||||
|
opacity: 0.3,
|
||||||
|
marginBottom: '8px',
|
||||||
|
},
|
||||||
title: {
|
title: {
|
||||||
marginBottom: '1.5rem',
|
marginBottom: '1.5rem',
|
||||||
fontWeight: 'normal',
|
fontWeight: 'normal',
|
||||||
@ -62,6 +66,9 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
documentationLink: {
|
documentationLink: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
formContent: {
|
formContent: {
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
|
@ -1,7 +1,13 @@
|
|||||||
import { useStyles } from './FormTemplate.styles';
|
import { useStyles } from './FormTemplate.styles';
|
||||||
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
import MenuBookIcon from '@mui/icons-material/MenuBook';
|
||||||
import Codebox from '../Codebox/Codebox';
|
import Codebox from '../Codebox/Codebox';
|
||||||
import { Collapse, IconButton, useMediaQuery, Tooltip } from '@mui/material';
|
import {
|
||||||
|
Collapse,
|
||||||
|
IconButton,
|
||||||
|
useMediaQuery,
|
||||||
|
Tooltip,
|
||||||
|
Divider,
|
||||||
|
} from '@mui/material';
|
||||||
import { FileCopy, Info } from '@mui/icons-material';
|
import { FileCopy, Info } from '@mui/icons-material';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import Loader from '../Loader/Loader';
|
import Loader from '../Loader/Loader';
|
||||||
@ -93,6 +99,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
|
|||||||
documentationLink={documentationLink}
|
documentationLink={documentationLink}
|
||||||
documentationLinkLabel={documentationLinkLabel}
|
documentationLinkLabel={documentationLinkLabel}
|
||||||
>
|
>
|
||||||
|
<Divider className={styles.sidebarDivider} />
|
||||||
<h2 className={styles.subtitle}>
|
<h2 className={styles.subtitle}>
|
||||||
API Command{' '}
|
API Command{' '}
|
||||||
<Tooltip title="Copy command" arrow>
|
<Tooltip title="Copy command" arrow>
|
||||||
|
@ -0,0 +1,9 @@
|
|||||||
|
import { makeStyles } from 'tss-react/mui';
|
||||||
|
|
||||||
|
export const useStyles = makeStyles()(theme => ({
|
||||||
|
highlighter: {
|
||||||
|
'&>mark': {
|
||||||
|
backgroundColor: theme.palette.highlight,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
@ -1,4 +1,5 @@
|
|||||||
import { VFC } from 'react';
|
import { VFC } from 'react';
|
||||||
|
import { useStyles } from './Highlighter.styles';
|
||||||
|
|
||||||
interface IHighlighterProps {
|
interface IHighlighterProps {
|
||||||
search?: string;
|
search?: string;
|
||||||
@ -13,6 +14,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
|
|||||||
children,
|
children,
|
||||||
caseSensitive,
|
caseSensitive,
|
||||||
}) => {
|
}) => {
|
||||||
|
const { classes } = useStyles();
|
||||||
if (!children) {
|
if (!children) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -25,6 +27,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
|
className={classes.highlighter}
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
|
__html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
|
||||||
}}
|
}}
|
||||||
|
@ -5,7 +5,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
padding: 0,
|
padding: 0,
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
'&:hover, &:focus': {
|
'&:hover, &:focus': {
|
||||||
backgroundColor: theme.palette.grey[400],
|
backgroundColor: theme.palette.tableHeaderHover,
|
||||||
'& svg': {
|
'& svg': {
|
||||||
color: 'inherit',
|
color: 'inherit',
|
||||||
},
|
},
|
||||||
|
@ -9,6 +9,7 @@ import { SortArrow } from './SortArrow/SortArrow';
|
|||||||
interface ICellSortableProps {
|
interface ICellSortableProps {
|
||||||
isSortable?: boolean;
|
isSortable?: boolean;
|
||||||
isSorted?: boolean;
|
isSorted?: boolean;
|
||||||
|
isGrow?: boolean;
|
||||||
isDescending?: boolean;
|
isDescending?: boolean;
|
||||||
ariaTitle?: string;
|
ariaTitle?: string;
|
||||||
onClick?: MouseEventHandler<HTMLButtonElement>;
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||||||
@ -18,6 +19,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
|
|||||||
children,
|
children,
|
||||||
isSortable = true,
|
isSortable = true,
|
||||||
isSorted = false,
|
isSorted = false,
|
||||||
|
isGrow = false,
|
||||||
isDescending,
|
isDescending,
|
||||||
ariaTitle,
|
ariaTitle,
|
||||||
onClick = () => {},
|
onClick = () => {},
|
||||||
@ -44,7 +46,10 @@ export const CellSortable: FC<ICellSortableProps> = ({
|
|||||||
<TableCell
|
<TableCell
|
||||||
component="th"
|
component="th"
|
||||||
aria-sort={ariaSort}
|
aria-sort={ariaSort}
|
||||||
className={classnames(styles.tableCellHeaderSortable)}
|
className={classnames(
|
||||||
|
styles.tableCellHeaderSortable,
|
||||||
|
isGrow && 'grow'
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={isSortable}
|
condition={isSortable}
|
||||||
|
@ -5,12 +5,16 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
'& > th': {
|
'& > th': {
|
||||||
border: 0,
|
border: 0,
|
||||||
'&:first-of-type': {
|
'&:first-of-type': {
|
||||||
borderTopLeftRadius: '8px',
|
borderTopLeftRadius: theme.shape.borderRadiusMedium,
|
||||||
borderBottomLeftRadius: '8px',
|
borderBottomLeftRadius: theme.shape.borderRadiusMedium,
|
||||||
},
|
},
|
||||||
'&:last-of-type': {
|
'&:last-of-type': {
|
||||||
borderTopRightRadius: '8px',
|
borderTopRightRadius: theme.shape.borderRadiusMedium,
|
||||||
borderBottomRightRadius: '8px',
|
borderBottomRightRadius: theme.shape.borderRadiusMedium,
|
||||||
|
},
|
||||||
|
':not(.grow)': {
|
||||||
|
width: '0.1%',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -4,6 +4,10 @@ import { HeaderGroup } from 'react-table';
|
|||||||
import { useStyles } from './SortableTableHeader.styles';
|
import { useStyles } from './SortableTableHeader.styles';
|
||||||
import { CellSortable } from './CellSortable/CellSortable';
|
import { CellSortable } from './CellSortable/CellSortable';
|
||||||
|
|
||||||
|
interface IHeaderGroupColumn extends HeaderGroup<object> {
|
||||||
|
isGrow?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
interface ISortableTableHeaderProps {
|
interface ISortableTableHeaderProps {
|
||||||
headerGroups: HeaderGroup<object>[];
|
headerGroups: HeaderGroup<object>[];
|
||||||
}
|
}
|
||||||
@ -19,7 +23,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
|
|||||||
{...headerGroup.getHeaderGroupProps()}
|
{...headerGroup.getHeaderGroupProps()}
|
||||||
className={styles.tableHeader}
|
className={styles.tableHeader}
|
||||||
>
|
>
|
||||||
{headerGroup.headers.map(column => {
|
{headerGroup.headers.map((column: IHeaderGroupColumn) => {
|
||||||
const content = column.render('Header');
|
const content = column.render('Header');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -35,6 +39,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
|
|||||||
isSortable={column.canSort}
|
isSortable={column.canSort}
|
||||||
isSorted={column.isSorted}
|
isSorted={column.isSorted}
|
||||||
isDescending={column.isSortedDesc}
|
isDescending={column.isSortedDesc}
|
||||||
|
isGrow={column.isGrow}
|
||||||
>
|
>
|
||||||
{content}
|
{content}
|
||||||
</CellSortable>
|
</CellSortable>
|
||||||
|
@ -17,9 +17,6 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
minWidth: '379px',
|
minWidth: '379px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
link: {
|
|
||||||
color: theme.palette.primary.light,
|
|
||||||
},
|
|
||||||
label: {
|
label: {
|
||||||
minWidth: '300px',
|
minWidth: '300px',
|
||||||
[theme.breakpoints.down(600)]: {
|
[theme.breakpoints.down(600)]: {
|
||||||
|
@ -153,7 +153,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
|
|||||||
your client SDKs will emit events you can listen for
|
your client SDKs will emit events you can listen for
|
||||||
every time this toggle gets triggered. Learn more in{' '}
|
every time this toggle gets triggered. Learn more in{' '}
|
||||||
<a
|
<a
|
||||||
className={styles.link}
|
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href="https://docs.getunleash.io/advanced/impression_data"
|
href="https://docs.getunleash.io/advanced/impression_data"
|
||||||
|
@ -7,7 +7,6 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
link: {
|
link: {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
margin: '1rem 0 0 0',
|
margin: '1rem 0 0 0',
|
||||||
color: 'inherit',
|
|
||||||
},
|
},
|
||||||
envName: {
|
envName: {
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
|
@ -20,15 +20,12 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
|
wordBreak: 'break-all',
|
||||||
},
|
},
|
||||||
description: {
|
description: {
|
||||||
color: theme.palette.grey[800],
|
color: theme.palette.grey[800],
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
fontSize: 'inherit',
|
fontSize: 'inherit',
|
||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
maxWidth: '250px',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
overflow: 'hidden',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
@ -71,6 +71,7 @@ const columns = [
|
|||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
sortType: 'alphanumeric',
|
sortType: 'alphanumeric',
|
||||||
|
isGrow: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Header: 'Created on',
|
Header: 'Created on',
|
||||||
|
@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
container: {
|
container: {
|
||||||
borderRadius: theme.shape.borderRadiusLarge,
|
borderRadius: theme.shape.borderRadiusLarge,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
backgroundColor: theme.palette.primary.light,
|
backgroundColor: theme.palette.primary.main,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
maxWidth: '350px',
|
maxWidth: '350px',
|
||||||
@ -40,6 +40,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
bodyItem: {
|
bodyItem: {
|
||||||
margin: '0.5rem 0',
|
margin: '0.5rem 0',
|
||||||
fontSize: theme.fontSizes.bodySize,
|
fontSize: theme.fontSizes.bodySize,
|
||||||
|
wordBreak: 'break-all',
|
||||||
},
|
},
|
||||||
headerIcon: {
|
headerIcon: {
|
||||||
marginRight: '1rem',
|
marginRight: '1rem',
|
||||||
|
@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
|
|||||||
export const useStyles = makeStyles()(theme => ({
|
export const useStyles = makeStyles()(theme => ({
|
||||||
container: {
|
container: {
|
||||||
borderRadius: theme.shape.borderRadiusLarge,
|
borderRadius: theme.shape.borderRadiusLarge,
|
||||||
backgroundColor: theme.palette.primary.light,
|
backgroundColor: theme.palette.primary.main,
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
marginRight: '1rem',
|
marginRight: '1rem',
|
||||||
|
@ -15,6 +15,9 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
|
toolbarContainer: {
|
||||||
|
flexShrink: 0,
|
||||||
|
},
|
||||||
innerContainer: {
|
innerContainer: {
|
||||||
padding: '1rem 2rem',
|
padding: '1rem 2rem',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
@ -30,7 +33,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
height: '1px',
|
height: '1px',
|
||||||
},
|
},
|
||||||
tabContainer: {
|
tabContainer: {
|
||||||
padding: '1rem 2rem',
|
padding: '0 2rem',
|
||||||
},
|
},
|
||||||
tabButton: {
|
tabButton: {
|
||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
@ -46,6 +49,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
fontWeight: 'normal',
|
fontWeight: 'normal',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
wordBreak: 'break-all',
|
||||||
},
|
},
|
||||||
statusContainer: {
|
statusContainer: {
|
||||||
marginLeft: '0.5rem',
|
marginLeft: '0.5rem',
|
||||||
|
@ -138,7 +138,7 @@ export const FeatureView = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className={styles.toolbarContainer}>
|
||||||
<PermissionIconButton
|
<PermissionIconButton
|
||||||
permission={CREATE_FEATURE}
|
permission={CREATE_FEATURE}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
|
@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
|
|||||||
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
|
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-rrmchf-MuiInputBase-root-MuiOutlinedInput-root"
|
class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-181wpo2-MuiInputBase-root-MuiOutlinedInput-root"
|
||||||
>
|
>
|
||||||
<textarea
|
<textarea
|
||||||
aria-invalid="false"
|
aria-invalid="false"
|
||||||
@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
|
|||||||
hidden=""
|
hidden=""
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
|
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
|
||||||
disabled=""
|
disabled=""
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
|
|||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { makeStyles } from 'tss-react/mui';
|
import { makeStyles } from 'tss-react/mui';
|
||||||
import { Grid } from '@mui/material';
|
import { Grid } from '@mui/material';
|
||||||
import styles from 'component/styles.module.scss';
|
import { useStyles as useAppStyles } from 'component/App.styles';
|
||||||
import Header from 'component/menu/Header/Header';
|
import Header from 'component/menu/Header/Header';
|
||||||
import Footer from 'component/menu/Footer/Footer';
|
import Footer from 'component/menu/Footer/Footer';
|
||||||
import Proclamation from 'component/common/Proclamation/Proclamation';
|
import Proclamation from 'component/common/Proclamation/Proclamation';
|
||||||
@ -34,6 +34,7 @@ interface IMainLayoutProps {
|
|||||||
|
|
||||||
export const MainLayout = ({ children }: IMainLayoutProps) => {
|
export const MainLayout = ({ children }: IMainLayoutProps) => {
|
||||||
const { classes } = useStyles();
|
const { classes } = useStyles();
|
||||||
|
const { classes: styles } = useAppStyles();
|
||||||
const { uiConfig } = useUiConfig();
|
const { uiConfig } = useUiConfig();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -25,7 +25,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
height: '1px',
|
height: '1px',
|
||||||
},
|
},
|
||||||
tabContainer: {
|
tabContainer: {
|
||||||
padding: '1rem 2rem',
|
padding: '0 2rem',
|
||||||
},
|
},
|
||||||
tabButton: {
|
tabButton: {
|
||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
|
@ -119,7 +119,7 @@ const Project = () => {
|
|||||||
<h2
|
<h2
|
||||||
data-loading
|
data-loading
|
||||||
className={styles.title}
|
className={styles.title}
|
||||||
style={{ margin: 0 }}
|
style={{ margin: 0, width: '100%' }}
|
||||||
>
|
>
|
||||||
<div className={styles.titleText}>{project?.name}</div>
|
<div className={styles.titleText}>{project?.name}</div>
|
||||||
<PermissionIconButton
|
<PermissionIconButton
|
||||||
|
@ -26,6 +26,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
|
wordBreak: 'break-all',
|
||||||
},
|
},
|
||||||
percentageContainer: {
|
percentageContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -23,7 +23,6 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
cancelButton: {
|
cancelButton: {
|
||||||
marginLeft: '1.5rem',
|
marginLeft: '1.5rem',
|
||||||
color: theme.palette.primary.light,
|
|
||||||
},
|
},
|
||||||
inputDescription: {
|
inputDescription: {
|
||||||
marginBottom: '0.5rem',
|
marginBottom: '0.5rem',
|
||||||
|
@ -31,7 +31,6 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
cancelButton: {
|
cancelButton: {
|
||||||
marginLeft: '1.5rem',
|
marginLeft: '1.5rem',
|
||||||
color: theme.palette.primary.light,
|
|
||||||
},
|
},
|
||||||
inputDescription: {
|
inputDescription: {
|
||||||
marginBottom: '1rem',
|
marginBottom: '1rem',
|
||||||
@ -61,7 +60,6 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
backButton: {
|
backButton: {
|
||||||
marginRight: 'auto',
|
marginRight: 'auto',
|
||||||
color: theme.palette.primary.light,
|
|
||||||
},
|
},
|
||||||
addContextContainer: {
|
addContextContainer: {
|
||||||
marginTop: '1rem',
|
marginTop: '1rem',
|
||||||
|
@ -101,7 +101,8 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
|
|||||||
</SidebarModal>
|
</SidebarModal>
|
||||||
<PermissionButton
|
<PermissionButton
|
||||||
permission={CREATE_CONTEXT_FIELD}
|
permission={CREATE_CONTEXT_FIELD}
|
||||||
className={styles.addContextButton}
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
startIcon={<Add />}
|
startIcon={<Add />}
|
||||||
onClick={() => setOpen(true)}
|
onClick={() => setOpen(true)}
|
||||||
>
|
>
|
||||||
|
@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
|
|||||||
[
|
[
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
|
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="tss-1yjkq3l-headerContainer"
|
className="tss-1yjkq3l-headerContainer"
|
||||||
@ -33,7 +33,7 @@ exports[`renders correctly 1`] = `
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-describedby="useId-0"
|
aria-describedby="useId-0"
|
||||||
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
|
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
|
||||||
data-testid="ADD_NEW_STRATEGY_ID"
|
data-testid="ADD_NEW_STRATEGY_ID"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
|
@ -1,107 +0,0 @@
|
|||||||
.container {
|
|
||||||
height: 100%;
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.primaryBreadbrumb {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerTitleLink {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contentWrapper {
|
|
||||||
margin: 0 auto;
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ecebeb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
width: 1250px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contentContainer {
|
|
||||||
padding: var(--page-padding);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1260px) {
|
|
||||||
.content {
|
|
||||||
width: 1024px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.headerTitleLink {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawerTitle {
|
|
||||||
line-height: 1 !important;
|
|
||||||
padding-top: 16px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
padding-left: 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.drawerTitle {
|
|
||||||
padding-top: 12px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
padding-left: 16px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.drawerTitleLogo {
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
.drawerTitleText {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
padding: 8px 5px 8px 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigationLink {
|
|
||||||
padding: 12px 20px !important;
|
|
||||||
border-radius: 0 50px 50px 0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.navigationLink {
|
|
||||||
padding: 12px 16px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigationIcon {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconGitHub {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDoyNHB4O2hlaWdodDoyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkMyLDE2LjQyIDQuODcsMjAuMTcgOC44NCwyMS41QzkuMzQsMjEuNTggOS41LDIxLjI3IDkuNSwyMUM5LjUsMjAuNzcgOS41LDIwLjE0IDkuNSwxOS4zMUM2LjczLDE5LjkxIDYuMTQsMTcuOTcgNi4xNCwxNy45N0M1LjY4LDE2LjgxIDUuMDMsMTYuNSA1LjAzLDE2LjVDNC4xMiwxNS44OCA1LjEsMTUuOSA1LjEsMTUuOUM2LjEsMTUuOTcgNi42MywxNi45MyA2LjYzLDE2LjkzQzcuNSwxOC40NSA4Ljk3LDE4IDkuNTQsMTcuNzZDOS42MywxNy4xMSA5Ljg5LDE2LjY3IDEwLjE3LDE2LjQyQzcuOTUsMTYuMTcgNS42MiwxNS4zMSA1LjYyLDExLjVDNS42MiwxMC4zOSA2LDkuNSA2LjY1LDguNzlDNi41NSw4LjU0IDYuMiw3LjUgNi43NSw2LjE1QzYuNzUsNi4xNSA3LjU5LDUuODggOS41LDcuMTdDMTAuMjksNi45NSAxMS4xNSw2Ljg0IDEyLDYuODRDMTIuODUsNi44NCAxMy43MSw2Ljk1IDE0LjUsNy4xN0MxNi40MSw1Ljg4IDE3LjI1LDYuMTUgMTcuMjUsNi4xNUMxNy44LDcuNSAxNy40NSw4LjU0IDE3LjM1LDguNzlDMTgsOS41IDE4LjM4LDEwLjM5IDE4LjM4LDExLjVDMTguMzgsMTUuMzIgMTYuMDQsMTYuMTYgMTMuODEsMTYuNDFDMTQuMTcsMTYuNzIgMTQuNSwxNy4zMyAxNC41LDE4LjI2QzE0LjUsMTkuNiAxNC41LDIwLjY4IDE0LjUsMjFDMTQuNSwyMS4yNyAxNC42NiwyMS41OSAxNS4xNywyMS41QzE5LjE0LDIwLjE2IDIyLDE2LjQyIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJaIiAvPgo8L3N2Zz4=);
|
|
||||||
}
|
|
@ -4,7 +4,7 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
[
|
[
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15amf7-container mui-45jkiv-MuiPaper-root"
|
className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 tss-15wj2kz-container mui-177gdp-MuiPaper-root"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="tss-1yjkq3l-headerContainer"
|
className="tss-1yjkq3l-headerContainer"
|
||||||
@ -29,7 +29,7 @@ exports[`renders an empty list correctly 1`] = `
|
|||||||
className="tss-1u1bjy8-headerActions"
|
className="tss-1u1bjy8-headerActions"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1lmzhxi-MuiButtonBase-root-MuiButton-root"
|
className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root mui-1aw3qf3-MuiButtonBase-root-MuiButton-root"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
onBlur={[Function]}
|
onBlur={[Function]}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
@ -9,9 +9,7 @@ export const useStyles = makeStyles()(theme => ({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
link: {
|
link: {
|
||||||
textDecoration: 'none',
|
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: theme.palette.primary.main,
|
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
},
|
},
|
||||||
text: { fontWeight: 'bold', marginBottom: '0.5rem' },
|
text: { fontWeight: 'bold', marginBottom: '0.5rem' },
|
||||||
|
@ -135,7 +135,11 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: #615bc2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
@ -56,9 +56,10 @@ export const colors = {
|
|||||||
900: '#305200',
|
900: '#305200',
|
||||||
800: '#3B6600',
|
800: '#3B6600',
|
||||||
700: '#4D8400',
|
700: '#4D8400',
|
||||||
500: '#68A611',
|
600: '#68A611',
|
||||||
400: '#7FB435',
|
500: '#7FB435',
|
||||||
300: '#99C35D',
|
400: '#99C35D',
|
||||||
|
300: '#B0D182',
|
||||||
200: '#CFE5AE',
|
200: '#CFE5AE',
|
||||||
100: '#E4F0D3',
|
100: '#E4F0D3',
|
||||||
50: '#F4FAEB',
|
50: '#F4FAEB',
|
||||||
|
@ -30,9 +30,10 @@ export default createTheme({
|
|||||||
bold: 700,
|
bold: 700,
|
||||||
},
|
},
|
||||||
shape: {
|
shape: {
|
||||||
borderRadius: '3px',
|
borderRadius: '4px',
|
||||||
borderRadiusLarge: '10px',
|
borderRadiusMedium: '8px',
|
||||||
borderRadiusExtraLarge: '25px',
|
borderRadiusLarge: '12px',
|
||||||
|
borderRadiusExtraLarge: '20px',
|
||||||
},
|
},
|
||||||
palette: {
|
palette: {
|
||||||
primary: {
|
primary: {
|
||||||
@ -46,27 +47,30 @@ export default createTheme({
|
|||||||
dark: colors.purple[900],
|
dark: colors.purple[900],
|
||||||
},
|
},
|
||||||
info: {
|
info: {
|
||||||
light: colors.blue[700],
|
light: colors.blue[50],
|
||||||
main: colors.blue[700],
|
main: colors.blue[500],
|
||||||
dark: colors.blue[800],
|
dark: colors.blue[700],
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
light: colors.green[700],
|
light: colors.green[50],
|
||||||
main: colors.green[700],
|
main: colors.green[500],
|
||||||
dark: colors.green[800],
|
dark: colors.green[800],
|
||||||
},
|
},
|
||||||
warning: {
|
warning: {
|
||||||
light: colors.orange[700],
|
light: colors.orange[100],
|
||||||
main: colors.orange[700],
|
main: colors.orange[800],
|
||||||
dark: colors.orange[800],
|
dark: colors.orange[900],
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
light: colors.red[700],
|
light: colors.red[50],
|
||||||
main: colors.red[700],
|
main: colors.red[700],
|
||||||
dark: colors.red[800],
|
dark: colors.red[800],
|
||||||
},
|
},
|
||||||
divider: colors.grey[300],
|
divider: colors.grey[300],
|
||||||
dividerAlternative: colors.grey[500],
|
dividerAlternative: colors.grey[500],
|
||||||
|
tableHeaderHover: colors.grey[400],
|
||||||
|
highlight: '#FFEACC',
|
||||||
|
sidebarContainer: 'rgba(32,32,33, 0.2)',
|
||||||
grey: colors.grey,
|
grey: colors.grey,
|
||||||
text: {
|
text: {
|
||||||
primary: colors.grey[900],
|
primary: colors.grey[900],
|
||||||
@ -93,14 +97,23 @@ export default createTheme({
|
|||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
color: colors.purple[900],
|
color: colors.purple[900],
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
MuiBreadcrumbs: {
|
MuiBreadcrumbs: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
|
color: colors.grey[900],
|
||||||
|
fontSize: '0.875rem',
|
||||||
'& a': {
|
'& a': {
|
||||||
color: colors.purple[900],
|
color: colors.purple[900],
|
||||||
|
textDecoration: 'underline',
|
||||||
|
'&:hover': {
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -128,5 +141,86 @@ export default createTheme({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
MuiAlert: {
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
borderRadius: '8px',
|
||||||
|
a: {
|
||||||
|
color: 'inherit',
|
||||||
|
},
|
||||||
|
'&.MuiAlert-standardInfo': {
|
||||||
|
backgroundColor: colors.blue[50],
|
||||||
|
color: colors.blue[700],
|
||||||
|
border: `1px solid ${colors.blue[200]}`,
|
||||||
|
'& .MuiAlert-icon': {
|
||||||
|
color: colors.blue[500],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&.MuiAlert-standardSuccess': {
|
||||||
|
backgroundColor: colors.green[50],
|
||||||
|
color: colors.green[800],
|
||||||
|
border: `1px solid ${colors.green[300]}`,
|
||||||
|
'& .MuiAlert-icon': {
|
||||||
|
color: colors.green[500],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&.MuiAlert-standardWarning': {
|
||||||
|
backgroundColor: colors.orange[100],
|
||||||
|
color: colors.orange[900],
|
||||||
|
border: `1px solid ${colors.orange[500]}`,
|
||||||
|
'& .MuiAlert-icon': {
|
||||||
|
color: colors.orange[800],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'&.MuiAlert-standardError': {
|
||||||
|
backgroundColor: colors.red[50],
|
||||||
|
color: colors.red[800],
|
||||||
|
border: `1px solid ${colors.red[300]}`,
|
||||||
|
'& .MuiAlert-icon': {
|
||||||
|
color: colors.red[700],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTabs: {
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
'& .MuiTabs-indicator': {
|
||||||
|
height: '4px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiTab: {
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
color: colors.grey[900],
|
||||||
|
fontSize: '1rem',
|
||||||
|
textTransform: 'none',
|
||||||
|
fontWeight: 400,
|
||||||
|
minHeight: '62px',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: colors.grey[200],
|
||||||
|
},
|
||||||
|
'&.Mui-selected': {
|
||||||
|
color: colors.grey[900],
|
||||||
|
fontWeight: 700,
|
||||||
|
},
|
||||||
|
'& > span': {
|
||||||
|
color: colors.purple[900],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
MuiAccordionSummary: {
|
||||||
|
styleOverrides: {
|
||||||
|
root: {
|
||||||
|
'& > .MuiAccordionSummary-content.Mui-expanded': {
|
||||||
|
margin: '12px 0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -29,7 +29,7 @@ declare module '@mui/material/styles' {
|
|||||||
|
|
||||||
interface CustomPalette {
|
interface CustomPalette {
|
||||||
/**
|
/**
|
||||||
* Colors for event log output
|
* Colors for event log output.
|
||||||
*/
|
*/
|
||||||
code: {
|
code: {
|
||||||
main: string;
|
main: string;
|
||||||
@ -40,7 +40,7 @@ declare module '@mui/material/styles' {
|
|||||||
background: string;
|
background: string;
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
* For 'Seen' column on feature toggles list
|
* For 'Seen' column on feature toggles list.
|
||||||
*/
|
*/
|
||||||
activityIndicators: {
|
activityIndicators: {
|
||||||
unknown: string;
|
unknown: string;
|
||||||
@ -49,6 +49,18 @@ declare module '@mui/material/styles' {
|
|||||||
abandoned: string;
|
abandoned: string;
|
||||||
};
|
};
|
||||||
dividerAlternative: string;
|
dividerAlternative: string;
|
||||||
|
/**
|
||||||
|
* For table header hover effect.
|
||||||
|
*/
|
||||||
|
tableHeaderHover: string;
|
||||||
|
/**
|
||||||
|
* Text highlight effect color. Used when filtering/searching over content.
|
||||||
|
*/
|
||||||
|
highlight: string;
|
||||||
|
/**
|
||||||
|
* For sidebar container background.
|
||||||
|
*/
|
||||||
|
sidebarContainer: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Theme extends CustomTheme {}
|
interface Theme extends CustomTheme {}
|
||||||
@ -60,6 +72,7 @@ declare module '@mui/material/styles' {
|
|||||||
|
|
||||||
declare module '@mui/system/createTheme/shape' {
|
declare module '@mui/system/createTheme/shape' {
|
||||||
interface Shape {
|
interface Shape {
|
||||||
|
borderRadiusMedium: string;
|
||||||
borderRadiusLarge: string;
|
borderRadiusLarge: string;
|
||||||
borderRadiusExtraLarge: string;
|
borderRadiusExtraLarge: string;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user