Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-07 01:16:28 +02:00
Code Issues Projects Releases Wiki Activity

feat: dark theme v1 (#3298)

Browse Source 
## About the changes

Creating the first version of the Dark theme

Refactor: colors variables
Refactor: use theme variable instead 
- this change will help us to use MuiCssBaseline, and we can use classes
directly for easy customization when we can't identify MUI classes

Refactor: adjusting some files components
- i’ve touched also the structure of some files, not only the colors
variables (but only to adjust the style, not functionality)

Fix: dark mode persistence on refresh (by Nuno)

Feat: dark mode sees light logos, and light mode sees dark logos (by
Nuno)

---------

Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
NicolaeUnleash 2023-03-22 16:37:40 +02:00 committed by GitHub
parent 5585a9bed0
commit 705462f0cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
95 changed files with 827 additions and 889 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/icons/pro-enterprise-feature-badge-light.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.739.811a1 1 0 0 0-1.479 0L9.947 2.253a1 1 0 0 1-1.043.28L7.045 1.94a1 1 0 0 0-1.28.739l-.417 1.906a1 1 0 0 1-.763.763l-1.906.417a1 1 0 0 0-.739 1.28l.592 1.859a1 1 0 0 1-.28 1.042L.812 11.261a1 1 0 0 0 0 1.478l1.442 1.314a1 1 0 0 1 .28 1.043l-.593 1.858a1 1 0 0 0 .74 1.28l1.905.417a1 1 0 0 1 .763.764l.417 1.905a1 1 0 0 0 1.28.74l1.859-.592a1 1 0 0 1 1.043.279l1.313 1.442a1 1 0 0 0 1.479 0l1.313-1.442a1 1 0 0 1 1.043-.28l1.859.592a1 1 0 0 0 1.28-.739l.417-1.905a1 1 0 0 1 .763-.764l1.906-.416a1 1 0 0 0 .739-1.28l-.592-1.86a1 1 0 0 1 .28-1.042l1.441-1.314a1 1 0 0 0 0-1.478l-1.442-1.314a1 1 0 0 1-.279-1.042l.592-1.86a1 1 0 0 0-.74-1.28l-1.905-.416a1 1 0 0 1-.763-.763l-.417-1.906a1 1 0 0 0-1.28-.74l-1.859.593a1 1 0 0 1-1.043-.28L12.74.811ZM7 7h3.434v6.565h3.13V7h3.436v10H7V7Z" fill="#E2E1F5"/><path d="M13.565 13.565H17V17h-3.435v-3.435Z" fill="#817AFE"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

19
frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
View File

@ -1,4 +1,4 @@
import { IconButton, Tooltip } from '@mui/material';
import { Box, IconButton, Tooltip } from '@mui/material';
import CopyIcon from '@mui/icons-material/FileCopy';
import copy from 'copy-to-clipboard';
import useToast from 'hooks/useToast';
@ -24,18 +24,17 @@ export const UserToken = ({ token }: IUserTokenProps) => {
};
return (
<div
style={{
backgroundColor: '#efefef',
padding: '2rem',
borderRadius: '3px',
margin: '0',
marginTop: '1rem',
<Box
sx={theme => ({
backgroundColor: theme.palette.background.elevation2,
padding: theme.spacing(4),
borderRadius: `${theme.shape.borderRadius}px`,
marginTop: theme.spacing(2),
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
wordBreak: 'break-all',
}}
})}
>
{token}
<Tooltip title="Copy token" arrow>
@ -43,6 +42,6 @@ export const UserToken = ({ token }: IUserTokenProps) => {
<CopyIcon />
</IconButton>
</Tooltip>
</div>
</Box>
);
};

3
frontend/src/component/admin/apiToken/ProjectsList/ProjectsList.tsx
View File

@ -5,8 +5,9 @@ import { useSearchHighlightContext } from 'component/common/Table/SearchHighligh
import { Fragment, VFC } from 'react';
import { Link } from 'react-router-dom';
const StyledLink = styled(Link)(() => ({
const StyledLink = styled(Link)(({ theme }) => ({
textDecoration: 'none',
color: theme.palette.links,
'&:hover, &:focus': {
textDecoration: 'underline',
},

2
frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
View File

@ -240,7 +240,7 @@ export const GoogleAuth = () => {
Save
</Button>{' '}
<p>
<small style={{ color: 'red' }}>
<small style={{ color: 'error.dark' }}>
{errors?.message}
</small>
</p>

4
frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
View File

@ -57,6 +57,10 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
borderRadius: theme.shape.borderRadiusMedium,
marginBottom: theme.spacing(2),
a: {
color: theme.palette.links,
},
}));
interface IGroupForm {

2
frontend/src/component/admin/groups/GroupsList/GroupEmpty/GroupEmpty.tsx
View File

@ -26,7 +26,7 @@ export const GroupEmpty = () => {
to="/admin/groups/create-group"
component={Link}
variant="outlined"
color="secondary"
color="primary"
>
Create your first group
</Button>

2
frontend/src/component/admin/invoice/InvoiceList.tsx
View File

@ -69,7 +69,7 @@ const InvoiceList = () => {
style={{
backgroundColor:
item.status === 'past-due'
? '#ff9194'
? 'error.dark'
: 'inherit',
}}
>

12
frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
View File

@ -35,7 +35,7 @@ export const InviteLinkBar: VFC = () => {
<Typography
component="span"
variant="body2"
color={willExpireSoon ? 'warning.main' : 'inherit'}
color={willExpireSoon ? 'warning.dark' : 'inherit'}
fontWeight="bold"
>
{expiresIn}
@ -56,17 +56,17 @@ export const InviteLinkBar: VFC = () => {
return (
<Box
sx={{
backgroundColor: 'background.paper',
sx={theme => ({
backgroundColor: theme.palette.background.paper,
py: 2,
px: 4,
mb: 2,
borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
border: '2px solid',
borderColor: 'primary.main',
}}
borderColor: theme.palette.background.alternative,
})}
ref={ref}
>
<Box

6
frontend/src/component/application/ApplicationList/ApplicationList.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { CircularProgress } from '@mui/material';
import { CircularProgress, Link } from '@mui/material';
import { Warning } from '@mui/icons-material';
import { AppsLinkList, styles as themeStyles } from 'component/common';
import { PageContent } from 'component/common/PageContent/PageContent';
@ -49,9 +49,9 @@ export const ApplicationList = () => {
<br />
You can read more about how to use Unleash in your application
in the{' '}
<a href="https://docs.getunleash.io/docs/sdks/">
<Link href="https://docs.getunleash.io/docs/sdks/">
documentation.
</a>
</Link>
</section>
</>
);

2
frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
View File

@ -108,7 +108,7 @@ export const ReviewButton: FC<{ disabled: boolean }> = ({ disabled }) => {
: 'center bottom',
}}
>
<Paper>
<Paper className="dropdown-outline">
<ClickAwayListener onClickAway={onClose}>
<MenuList
id="review-options-menu"

13
frontend/src/component/common/ApiTokenTable/ApiTokenTable.tsx
View File

@ -11,7 +11,14 @@ import {
TableCell,
TablePlaceholder,
} from 'component/common/Table';
import { Box, Table, TableBody, TableRow, useMediaQuery } from '@mui/material';
import {
Box,
Table,
TableBody,
TableRow,
useMediaQuery,
Link,
} from '@mui/material';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { ApiTokenDocs } from 'component/admin/apiToken/ApiTokenDocs/ApiTokenDocs';
@ -117,13 +124,13 @@ export const ApiTokenTable = ({
<TablePlaceholder>
<span>
{'No tokens available. Read '}
<a
<Link
href="https://docs.getunleash.io/how-to/api"
target="_blank"
rel="noreferrer"
>
API How-to guides
</a>{' '}
</Link>{' '}
{' to learn more.'}
</span>
</TablePlaceholder>

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

@ -37,7 +37,7 @@ const StyledBadge = styled('div')<IBadgeProps>(
fontWeight: theme.fontWeight.bold,
lineHeight: 1,
backgroundColor: theme.palette[color].light,
color: theme.palette[color].dark,
color: theme.palette[color].contrastText,
border: `1px solid ${theme.palette[color].border}`,
})
);

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

@ -36,7 +36,7 @@ const StyledBar = styled(Paper)(({ theme }) => ({
const StyledCount = styled('span')(({ theme }) => ({
background: theme.palette.secondary.main,
color: theme.palette.background.paper,
color: theme.palette.common.white,
padding: theme.spacing(0.5, 1),
borderRadius: theme.shape.borderRadius,
}));

6
frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
View File

@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps {
}
const StyledBatch = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.alternative,
width: '75px',
height: '75px',
borderRadius: '50px',
@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({
}));
const StyledClose = styled(Close)(({ theme }) => ({
color: theme.palette.background.paper,
color: theme.palette.common.white,
width: '35px',
height: '35px',
}));
const StyledCheck = styled(Check)(({ theme }) => ({
color: theme.palette.background.paper,
color: theme.palette.common.white,
width: '35px',
height: '35px',
}));

1
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
View File

@ -19,7 +19,6 @@ interface IConstraintAccordionBody {
const StyledInputContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(2),
backgroundColor: theme.palette.neutral.light,
}));
const StyledButtonContainer = styled('div')(({ theme }) => ({

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
View File

@ -111,7 +111,7 @@ export const FreeTextInput = ({
<Button
className={styles.button}
variant="outlined"
color="secondary"
color="primary"
onClick={() => addValues()}
>
Add values

1
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx
View File

@ -39,6 +39,7 @@ export const CaseSensitiveButton = ({
}
elseShow={
<StyledToggleButtonOn
className="operator-is-active"
onClick={setCaseInsensitive}
disableRipple
>

90
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx
View File

@ -7,7 +7,6 @@ import {
StyledToggleButtonOn,
} from '../StyledToggleButton';
import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
interface InvertedOperatorButtonProps {
localConstraint: IConstraint;
@ -17,59 +16,36 @@ interface InvertedOperatorButtonProps {
export const InvertedOperatorButton = ({
localConstraint,
setInvertedOperator,
}: InvertedOperatorButtonProps) => {
const theme = useTheme();
return (
<Tooltip
title={
Boolean(localConstraint.inverted)
? 'Remove negation'
: 'Negate operator'
}
arrow
>
<Box sx={{ display: 'flex', alignItems: 'stretch' }}>
<ConditionallyRender
condition={Boolean(localConstraint.inverted)}
show={
<StyledToggleButtonOn
onClick={setInvertedOperator}
disableRipple
>
<ThemeMode
darkmode={
<NegatedIcon
style={{
fill: theme.palette.background
.paper,
}}
/>
}
lightmode={<NegatedIcon />}
/>
</StyledToggleButtonOn>
}
elseShow={
<StyledToggleButtonOff
onClick={setInvertedOperator}
disableRipple
>
<ThemeMode
darkmode={
<NegatedIconOff
style={{
fill: theme.palette.background
.paper,
}}
/>
}
lightmode={<NegatedIconOff />}
/>
</StyledToggleButtonOff>
}
/>
</Box>
</Tooltip>
);
};
}: InvertedOperatorButtonProps) => (
<Tooltip
title={
Boolean(localConstraint.inverted)
? 'Remove negation'
: 'Negate operator'
}
arrow
>
<Box sx={{ display: 'flex', alignItems: 'stretch' }}>
<ConditionallyRender
condition={Boolean(localConstraint.inverted)}
show={
<StyledToggleButtonOn
className="operator-is-active"
onClick={setInvertedOperator}
disableRipple
>
<NegatedIcon />
</StyledToggleButtonOn>
}
elseShow={
<StyledToggleButtonOff
onClick={setInvertedOperator}
disableRipple
>
<NegatedIconOff />
</StyledToggleButtonOff>
}
/>
</Box>
</Tooltip>
);

7
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
View File

@ -170,7 +170,10 @@ export const ConstraintAccordionList = forwardRef<
<div>
<StyledAddCustomLabel>
<p>Add any number of constraints</p>
<StyledHelpWrapper title="Help" arrow>
<StyledHelpWrapper
title="View constraints documentation"
arrow
>
<a
href={
'https://docs.getunleash.io/reference/strategy-constraints'
@ -186,7 +189,7 @@ export const ConstraintAccordionList = forwardRef<
type="button"
onClick={onAdd}
variant="outlined"
color="secondary"
color="primary"
>
Add constraint
</Button>

7
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
View File

@ -32,11 +32,8 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
boxShadow: 'none',
margin: 0,
'& .root': {
'&:before': {
opacity: '0 !important',
},
'&:before': {
opacity: '0',
},
}));

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx
View File

@ -44,7 +44,7 @@ const StyledHeaderValuesContainer = styled('div')(({ theme }) => ({
const StyledHeaderValuesExpand = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
marginTop: theme.spacing(0.5),
color: theme.palette.primary.dark,
color: theme.palette.links,
[theme.breakpoints.down('sm')]: {
textAlign: 'center',
},

10
frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
View File

@ -18,12 +18,12 @@ export const ConstraintIcon: VFC<IConstraintIconProps> = ({ compact }) => (
}}
>
<TrackChanges
sx={{
fill: 'white',
sx={theme => ({
fill: theme.palette.common.white,
display: 'block',
width: compact ? '16px' : '20px',
height: compact ? '16px' : '20px',
}}
width: compact ? theme.spacing(2) : theme.spacing(2.5),
height: compact ? theme.spacing(2) : theme.spacing(2.5),
})}
/>
</Box>
);

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

@ -20,7 +20,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
}));
const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.alternative,
color: theme.palette.primary.contrastText,
padding: theme.spacing(3.5, 6),
fontWeight: theme.fontWeight.medium,

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

@ -26,7 +26,7 @@ const EnvironmentIcon = ({ enabled, className }: IEnvironmentIcon) => {
};
const icon = {
fill: '#fff',
fill: theme.palette.common.white,
width: '16px',
height: '16px',
};

1
frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx
View File

@ -37,6 +37,7 @@ export const FavoriteIconButton: VFC<IFavoriteIconButtonProps> = ({
}
elseShow={
<StarBorderIcon
color="primary"
sx={{
fontSize: theme =>
size === 'medium'

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

@ -20,7 +20,7 @@ export const FeatureStatusChip = ({
return (
<div data-loading style={{ marginLeft: '8px' }}>
<Badge color={stale ? 'neutral' : 'secondary'} title={title}>
<Badge color={stale ? 'error' : 'success'} title={title}>
{value}
</Badge>
</div>

10
frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx
View File

@ -5,7 +5,7 @@ const StyledIndicator = styled('div')(({ style, theme }) => ({
width: '25px',
height: '25px',
borderRadius: '50%',
color: theme.palette.primary.contrastText,
color: theme.palette.common.white,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -27,9 +27,13 @@ export const GuidanceIndicator: FC<IGuidanceIndicatorProps> = ({
}) => {
const theme = useTheme();
const defaults = { backgroundColor: theme.palette.primary.main };
const defaults = {
backgroundColor: theme.palette.background.alternative,
color: theme.palette.common.white,
};
if (type === 'secondary') {
defaults.backgroundColor = theme.palette.text.disabled;
defaults.backgroundColor = theme.palette.background.paper;
defaults.color = theme.palette.text.secondary;
}
return (

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

@ -16,7 +16,7 @@ const StyledContainer = styled('span')(({ theme }) => ({
},
'& svg': {
fontSize: theme.fontSizes.mainHeader,
color: theme.palette.neutral.main,
color: theme.palette.action.active,
marginLeft: theme.spacing(0.5),
},
}));

10
frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`InstanceStatusBar should warn when the trial has churned 1`] = `
<aside
class="css-jmsogz"
class="css-163g6kh"
data-testid="INSTANCE_STATUS_BAR_ID"
>
<svg
@ -42,7 +42,7 @@ exports[`InstanceStatusBar should warn when the trial has churned 1`] = `
exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
<aside
class="css-jmsogz"
class="css-163g6kh"
data-testid="INSTANCE_STATUS_BAR_ID"
>
<svg
@ -82,7 +82,7 @@ exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
<aside
class="css-yx2rkt"
class="css-f22srx"
data-testid="INSTANCE_STATUS_BAR_ID"
>
<svg
@ -117,7 +117,7 @@ exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
exports[`InstanceStatusBar should warn when the trial is far from expired 1`] = `
<aside
class="css-yx2rkt"
class="css-f22srx"
data-testid="INSTANCE_STATUS_BAR_ID"
>
<svg
@ -147,7 +147,7 @@ exports[`InstanceStatusBar should warn when the trial is far from expired 1`] =
exports[`InstanceStatusBar should warn when trialExpiry has passed 1`] = `
<aside
class="css-jmsogz"
class="css-163g6kh"
data-testid="INSTANCE_STATUS_BAR_ID"
>
<svg

25
frontend/src/component/common/Notifications/Notification.tsx
View File

@ -19,6 +19,7 @@ const StyledContainerBox = styled(Box, {
shouldForwardProp: prop => prop !== 'readAt',
})<{ readAt: boolean }>(({ theme, readAt }) => ({
padding: theme.spacing(0.5),
marginRight: theme.spacing(1.5),
backgroundColor: readAt
? theme.palette.neutral.light
: theme.palette.secondary.light,
@ -28,7 +29,6 @@ const StyledContainerBox = styled(Box, {
justifyContent: 'center',
alignItems: 'center',
borderRadius: `${theme.shape.borderRadius}px`,
position: 'absolute',
top: 3,
left: 7,
}));
@ -36,15 +36,20 @@ const StyledContainerBox = styled(Box, {
const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
position: 'relative',
cursor: 'pointer',
margin: theme.spacing(2, 0),
'&:not(:last-child)': {
borderBottom: `2px solid ${theme.palette.divider}`,
},
padding: theme.spacing(2.5, 2, 3, 2),
borderRadius: theme.shape.borderRadiusMedium,
width: '100%',
'&:after': {
content: '""',
width: `calc(100% - ${theme.spacing(4)})`,
height: '1px',
position: 'absolute',
bottom: 0,
backgroundColor: theme.palette.divider,
},
}));
const StyledNotificationMessageBox = styled(Box)(({ theme }) => ({
marginLeft: theme.spacing(4),
display: 'flex',
flexDirection: 'column',
width: '100%',
@ -54,12 +59,14 @@ const StyledSecondaryInfoBox = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
margin: theme.spacing(1.5, 0, 1.5, 0),
margin: theme.spacing(1, 0, 0, 5.25),
}));
const StyledMessageTypography = styled(Typography, {
shouldForwardProp: prop => prop !== 'readAt',
})<{ readAt: boolean }>(({ theme, readAt }) => ({
display: 'flex',
alignItems: 'center',
fontSize: theme.fontSizes.smallBody,
fontWeight: readAt ? 'normal' : 'bold',
textDecoration: 'none',
@ -81,7 +88,7 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
}));
const StyledCreatedBy = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
fontSize: theme.fontSizes.smallBody,
color: theme.palette.neutral.main,
marginLeft: theme.spacing(1),
}));
@ -133,9 +140,9 @@ export const Notification = ({
return (
<StyledListItemButton onClick={() => onNotificationClick(notification)}>
{resolveIcon(notification.notificationType)}{' '}
<StyledNotificationMessageBox>
<StyledMessageTypography readAt={Boolean(readAt)}>
{resolveIcon(notification.notificationType)}{' '}
{notification.message}
</StyledMessageTypography>
<StyledSecondaryInfoBox>

8
frontend/src/component/common/Notifications/Notifications.tsx
View File

@ -29,8 +29,7 @@ const StyledPrimaryContainerBox = styled(Box)(() => ({
}));
const StyledInnerContainerBox = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.neutral.light,
padding: theme.spacing(1, 3),
backgroundColor: theme.palette.background.elevation1,
display: 'flex',
justifyContent: 'center',
}));
@ -43,7 +42,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
}));
const StyledPaper = styled(Paper)(({ theme }) => ({
width: '400px',
width: '420px',
boxShadow: theme.boxShadows.popup,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
position: 'absolute',
@ -68,7 +67,7 @@ const StyledHeaderBox = styled(Box)(() => ({
}));
const StyledHeaderTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
fontSize: theme.fontSizes.smallBody,
}));
const StyledIconButton = styled(IconButton)(({ theme }) => ({
@ -190,6 +189,7 @@ export const Notifications = () => {
onClickAway={() => setShowNotifications(false)}
>
<StyledPaper
className="dropdown-outline"
onKeyDown={onKeyDown}
data-testid="NOTIFICATIONS_MODAL"
>

10
frontend/src/component/common/Notifications/NotificationsHeader.tsx
View File

@ -2,16 +2,12 @@ import { Typography, styled, Box } from '@mui/material';
import { FC } from 'react';
const StyledOuterContainerBox = styled(Box)(({ theme }) => ({
padding: theme.spacing(1.5, 3, 0.5, 3),
padding: theme.spacing(1, 1.5, 1, 3),
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}));
const StyledInnerBox = styled(Box)(({ theme }) => ({
position: 'relative',
boxShadow: theme.boxShadows.separator,
width: '100%',
height: '4px',
}));
export const NotificationsHeader: FC = ({ children }) => {
@ -21,8 +17,6 @@ export const NotificationsHeader: FC = ({ children }) => {
<Typography fontWeight="bold">Notifications</Typography>
{children}
</StyledOuterContainerBox>
<StyledInnerBox />
</>
);
};

2
frontend/src/component/common/Notifications/NotificationsList.tsx
View File

@ -2,7 +2,7 @@ import { List, styled } from '@mui/material';
import { FC } from 'react';
const StyledListContainer = styled(List)(({ theme }) => ({
padding: theme.spacing(2, 3),
padding: theme.spacing(1, 1, 3, 1),
}));
export const NotificationsList: FC = ({ children }) => {

1
frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
View File

@ -15,7 +15,6 @@ const OperatorDocsLink = () => {
href="https://docs.getunleash.io/reference/strategy-constraints#strategy-constraint-operators"
target="_blank"
rel="noreferrer"
style={{ color: 'inherit' }}
>
Read more
</a>

7
frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
View File

@ -1,7 +1,9 @@
import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
import { Box, Button, Link, styled, Typography } from '@mui/material';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
import { ThemeMode } from '../ThemeMode/ThemeMode';
const PremiumFeatureWrapper = styled(Box, {
shouldForwardProp: prop => prop !== 'tooltip',
@ -111,7 +113,10 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
return (
<PremiumFeatureWrapper tooltip={tooltip}>
<StyledTitle>
<ProPlanIcon />
<ThemeMode
darkmode={<ProPlanIconLight />}
lightmode={<ProPlanIcon />}
/>
{`${plan} feature`}
</StyledTitle>
<ConditionallyRender

5
frontend/src/component/common/Search/Search.tsx
View File

@ -35,20 +35,21 @@ const StyledContainer = styled('div')(({ theme }) => ({
const StyledSearch = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.background.elevation1,
border: `1px solid ${theme.palette.neutral.border}`,
borderRadius: theme.shape.borderRadiusExtraLarge,
padding: '3px 5px 3px 12px',
width: '100%',
zIndex: 3,
'&:focus-within': {
borderColor: theme.palette.primary.light,
borderColor: theme.palette.primary.main,
boxShadow: theme.boxShadows.main,
},
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
width: '100%',
backgroundColor: theme.palette.background.elevation1,
}));
const StyledClose = styled(Close)(({ theme }) => ({

2
frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
View File

@ -102,7 +102,7 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
: 'example-search-text';
return (
<StyledPaper>
<StyledPaper className="dropdown-outline">
<StyledBox>
<StyledFilterList />
<Box>

3
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
View File

@ -1,4 +1,5 @@
import { styled, TableCell } from '@mui/material';
import { focusable } from 'themes/themeStyles';
export const StyledTableCell = styled(TableCell, {
shouldForwardProp: prop =>
@ -36,13 +37,13 @@ export const StyledTableCell = styled(TableCell, {
export const StyledButton = styled('button', {
shouldForwardProp: prop => prop !== 'isSorted',
})<{ isSorted?: boolean }>(({ theme, isSorted }) => ({
...focusable(theme),
all: 'unset',
whiteSpace: 'nowrap',
width: '100%',
position: 'relative',
zIndex: 1,
':hover, :focus, &:focus-visible, &:active': {
outline: 'revert',
'.hover-only': {
display: 'inline-block',
},

3
frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
View File

@ -17,7 +17,6 @@ interface ISortArrowProps {
const iconStyle = (theme: Theme) => ({
marginLeft: theme.spacing(0.25),
marginRight: theme.spacing(-0.5),
color: theme.palette.neutral.main,
fontSize: theme.fontSizes.mainHeader,
verticalAlign: 'middle',
});
@ -36,7 +35,6 @@ export const SortArrow: VFC<ISortArrowProps> = ({
<KeyboardArrowDown
sx={theme => ({
...iconStyle(theme),
color: theme.palette.table.headerColor,
})}
className={className}
fontSize="inherit"
@ -46,7 +44,6 @@ export const SortArrow: VFC<ISortArrowProps> = ({
<KeyboardArrowUp
sx={theme => ({
...iconStyle(theme),
color: theme.palette.table.headerColor,
})}
className={className}
fontSize="inherit"

4
frontend/src/component/common/Table/TablePlaceholder/TablePlaceholder.tsx
View File

@ -4,8 +4,8 @@ import { Box } from '@mui/material';
export const TablePlaceholder: FC = ({ children }) => (
<Box
sx={{
border: theme => `2px dashed ${theme.palette.neutral.light}`,
p: 1.6,
border: theme => `2px dashed ${theme.palette.divider}`,
p: 8,
textAlign: 'center',
display: 'flex',
justifyContent: 'center',

2
frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
View File

@ -4,7 +4,7 @@ export const useStyles = makeStyles()(theme => ({
container: {
maxWidth: '450px',
background: theme.palette.background.paper,
boxShadow: '2px 2px 4px rgba(0,0,0,0.4)',
boxShadow: theme.boxShadows.popup,
zIndex: 500,
margin: '0 0.8rem',
borderRadius: '12.5px',

2
frontend/src/component/common/VerticalTabs/VerticalTab/VerticalTab.tsx
View File

@ -10,7 +10,7 @@ const StyledTab = styled(Button)<{ selected: boolean }>(
? theme.palette.background.paper
: 'transparent',
borderLeft: `${theme.spacing(1)} solid ${
selected ? theme.palette.primary.main : 'transparent'
selected ? theme.palette.background.alternative : 'transparent'
}`,
borderRadius: theme.shape.borderRadiusMedium,
justifyContent: 'start',

5
frontend/src/component/context/ContextForm/ContextForm.tsx
View File

@ -6,6 +6,7 @@ import {
Typography,
styled,
Theme,
Link,
} from '@mui/material';
import React, { useState, useEffect } from 'react';
import { Add } from '@mui/icons-material';
@ -246,13 +247,13 @@ export const ContextForm: React.FC<IContextForm> = ({
guarantee a consistent behavior for specific values of this
context field. PS! Not all client SDK's support this feature
yet!{' '}
<a
<Link
href="https://docs.getunleash.io/reference/stickiness"
target="_blank"
rel="noreferrer"
>
Read more
</a>
</Link>
</p>
<StyledSwitchContainer>
<Switch

6
frontend/src/component/events/EventCard/EventCard.tsx
View File

@ -38,10 +38,14 @@ const StyledContainerListItem = styled('li')(({ theme }) => ({
padding: theme.spacing(4),
},
},
a: {
color: theme.palette.links,
},
}));
export const StyledCodeSection = styled('div')(({ theme }) => ({
backgroundColor: 'white',
backgroundColor: theme.palette.background.paper,
overflowX: 'auto',
padding: theme.spacing(2),
borderBottomLeftRadius: theme.shape.borderRadiusLarge,

65
frontend/src/component/feature/CopyFeature/CopyFeature.tsx
View File

@ -7,11 +7,11 @@ import {
Paper,
FormControlLabel,
Alert,
styled,
} from '@mui/material';
import { FileCopy } from '@mui/icons-material';
import { styles as themeStyles } from 'component/common';
import { formatUnknownError } from 'utils/formatUnknownError';
import styles from './CopyFeature.module.scss';
import { trim } from 'component/common/util';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { getTogglePath } from 'utils/routePathHelpers';
@ -19,6 +19,42 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
const StyledPage = styled(Paper)(({ theme }) => ({
overflow: 'visible',
borderRadius: theme.shape.borderRadiusLarge,
}));
const StyledHeader = styled('div')(({ theme }) => ({
padding: theme.spacing(3, 4),
borderBottom: `1px solid ${theme.palette.divider}`,
}));
const StyledTitle = styled('h1')(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
fontWeight: theme.fontWeight.medium,
}));
const StyledSection = styled('section')(({ theme }) => ({
padding: theme.spacing(4),
}));
const StyledDescription = styled('p')(({ theme }) => ({
marginTop: 0,
marginBottom: theme.spacing(4),
}));
const StyledForm = styled('form')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
marginBottom: theme.spacing(3),
maxWidth: theme.spacing(50),
}));
const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(4),
}));
export const CopyFeatureToggle = () => {
const [replaceGroupId, setReplaceGroupId] = useState(true);
const [apiError, setApiError] = useState('');
@ -73,19 +109,16 @@ export const CopyFeatureToggle = () => {
if (!feature || !feature.name) return <span>Toggle not found</span>;
return (
<Paper
className={themeStyles.fullwidth}
style={{ overflow: 'visible' }}
>
<div className={styles.header}>
<h1>Copy&nbsp;{featureId}</h1>
</div>
<StyledPage className={themeStyles.fullwidth}>
<StyledHeader>
<StyledTitle>Copy&nbsp;{featureId}</StyledTitle>
</StyledHeader>
<ConditionallyRender
condition={Boolean(apiError)}
show={<Alert severity="error">{apiError}</Alert>}
/>
<section className={styles.content}>
<p className={styles.text}>
<StyledSection>
<StyledDescription>
You are about to create a new feature toggle by cloning the
configuration of feature toggle&nbsp;
<Link to={getTogglePath(projectId, featureId)}>
@ -93,8 +126,8 @@ export const CopyFeatureToggle = () => {
</Link>
. You must give the new feature toggle a unique name before
you can proceed.
</p>
<form onSubmit={onSubmit}>
</StyledDescription>
<StyledForm onSubmit={onSubmit}>
<TextField
label="Name"
name="name"
@ -108,7 +141,7 @@ export const CopyFeatureToggle = () => {
aria-required
autoFocus
/>
<FormControlLabel
<StyledFormControlLabel
control={
<Switch
value={replaceGroupId}
@ -123,8 +156,8 @@ export const CopyFeatureToggle = () => {
<FileCopy />
&nbsp;&nbsp;&nbsp; Create from copy
</Button>
</form>
</section>
</Paper>
</StyledForm>
</StyledSection>
</StyledPage>
);
};

6
frontend/src/component/feature/FeatureForm/FeatureForm.tsx
View File

@ -6,6 +6,7 @@ import {
Switch,
Theme,
Typography,
Link,
} from '@mui/material';
import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'utils/testIds';
@ -52,7 +53,6 @@ const StyledContainer = styled('div')({
const StyledInputDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1),
color: theme.palette.text.secondary,
}));
const StyledInput = styled(Input)(({ theme }) => ({
@ -210,13 +210,13 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
When you enable impression data for a feature toggle,
your client SDKs will emit events you can listen for
every time this toggle gets triggered. Learn more in{' '}
<a
<Link
target="_blank"
rel="noopener noreferrer"
href="https://docs.getunleash.io/advanced/impression_data"
>
the impression data documentation
</a>
</Link>
</p>
<StyledRow>
<FormControlLabel

4
frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
View File

@ -42,6 +42,10 @@ const StyledDescription = styled('p')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
textAlign: 'center',
marginBottom: theme.spacing(3),
a: {
color: theme.palette.links,
},
}));
export const FeatureStrategyEmpty = ({

4
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
View File

@ -22,9 +22,7 @@ export const FeatureStrategyEnabled: FC<IFeatureStrategyEnabledProps> = ({
const { feature } = useFeature(projectId, featureId);
const featurePageLink = (
<Link to={featurePagePath} style={{ color: 'inherit' }}>
feature toggle page
</Link>
<Link to={featurePagePath}>feature toggle page</Link>
);
return (

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
View File

@ -254,7 +254,7 @@ export const FeatureStrategyForm = ({
</PermissionButton>
<Button
type="button"
color="secondary"
color="primary"
onClick={onCancel}
disabled={loading}
>

3
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -36,6 +36,7 @@ import FileDownload from '@mui/icons-material/FileDownload';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import { ExportDialog } from './ExportDialog';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { focusable } from 'themes/themeStyles';
export const featuresPlaceholder: FeatureSchema[] = Array(15).fill({
name: 'Name of the feature',
@ -306,7 +307,7 @@ export const FeatureToggleListTable: VFC = () => {
component={RouterLink}
to="/archive"
underline="always"
sx={{ marginRight: 2 }}
sx={{ marginRight: 2, ...focusable(theme) }}
>
View archive
</Link>

4
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
View File

@ -20,9 +20,9 @@ export const createChartOptions = (
},
plugins: {
tooltip: {
backgroundColor: 'white',
backgroundColor: theme.palette.background.paper,
bodyColor: theme.palette.text.primary,
titleColor: theme.palette.action.active,
titleColor: theme.palette.text.secondary,
borderColor: theme.palette.primary.main,
borderWidth: 1,
padding: 10,

2
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
View File

@ -28,7 +28,7 @@ const StyledList = styled('ul')(({ theme }) => ({
const StyledItem = styled('li')(({ theme }) => ({
'& > [aria-pressed=true]': {
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.alternative,
color: theme.palette.primary.contrastText,
},
'& > [aria-pressed=true]:hover': {

16
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
View File

@ -32,10 +32,9 @@ const StyledFeatureOverviewEnvironment = styled('div', {
})<{ enabled: boolean }>(({ theme, enabled }) => ({
borderRadius: theme.shape.borderRadiusLarge,
marginBottom: theme.spacing(2),
backgroundColor: theme.palette.background.paper,
background: enabled
backgroundColor: enabled
? theme.palette.background.paper
: theme.palette.neutral.light,
: theme.palette.envAccordion.disabled,
}));
const StyledAccordion = styled(Accordion)({
@ -53,14 +52,12 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
const StyledAccordionDetails = styled(AccordionDetails, {
shouldForwardProp: prop => prop !== 'enabled',
})<{ enabled: boolean }>(({ theme, enabled }) => ({
})<{ enabled: boolean }>(({ theme }) => ({
padding: theme.spacing(3),
background: theme.palette.background.elevation2,
background: theme.palette.envAccordion.expanded,
borderBottomLeftRadius: theme.shape.borderRadiusLarge,
borderBottomRightRadius: theme.shape.borderRadiusLarge,
borderBottom: `4px solid ${
enabled ? theme.palette.primary.light : theme.palette.neutral.border
}`,
boxShadow: 'inset 0px 2px 4px rgba(32, 32, 33, 0.05)', // replace this with variable
[theme.breakpoints.down('md')]: {
padding: theme.spacing(2, 1),
@ -143,6 +140,9 @@ const FeatureOverviewEnvironment = ({
<StyledFeatureOverviewEnvironment enabled={env.enabled}>
<StyledAccordion
data-testid={`${FEATURE_ENVIRONMENT_ACCORDION}_${env.name}`}
className={`environment-accordion ${
env.enabled ? '' : 'accordion-disabled'
}`}
>
<StyledAccordionSummary
expandIcon={<ExpandMore titleAccess="Toggle" />}

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
View File

@ -40,7 +40,7 @@ const StyledInfoParagraph = styled('p')(({ theme }) => ({
}));
const StyledIcon = styled(FiberManualRecord)(({ theme }) => ({
fill: theme.palette.background.application,
fill: theme.palette.background.elevation2,
height: '75px',
width: '75px',
[theme.breakpoints.down(500)]: {

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
View File

@ -22,7 +22,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.bodySize,
textAlign: 'center',
padding: '0 1rem',
background: theme.palette.background.elevation2,
background: theme.palette.envAccordion.expanded,
position: 'relative',
maxWidth: '80%',
color: theme.palette.text.primary,

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

@ -11,7 +11,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.background.sidebar,
backgroundColor: theme.palette.background.alternative,
display: 'flex',
flexDirection: 'column',
maxWidth: '350px',

6
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
View File

@ -8,9 +8,11 @@ const StyledVisibilityToggle = styled(IconButton, {
})<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
marginLeft: 'auto',
marginRight: theme.spacing(-1),
color: visibilityOff ? theme.palette.neutral.main : theme.palette.divider,
color: visibilityOff
? theme.palette.action.active
: theme.palette.action.focus,
'&:hover': {
color: theme.palette.neutral.main,
color: theme.palette.action.active,
},
}));

6
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
View File

@ -1,5 +1,5 @@
import { CloudCircle } from '@mui/icons-material';
import { styled } from '@mui/material';
import { styled, Link } from '@mui/material';
import { IFeatureEnvironment } from 'interfaces/featureToggle';
import { EnvironmentVariantsTable } from './EnvironmentVariantsTable/EnvironmentVariantsTable';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -107,13 +107,13 @@ export const EnvironmentVariantsCard = ({
control which parameter is used to
ensure consistent traffic allocation
across variants.{' '}
<a
<Link
href="https://docs.getunleash.io/reference/feature-toggle-variants"
target="_blank"
rel="noreferrer"
>
Read more
</a>
</Link>
</StyledDescription>
</>
}

6
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/EnvironmentVariantsModal.tsx
View File

@ -1,4 +1,4 @@
import { Alert, Button, Divider, styled } from '@mui/material';
import { Alert, Button, Divider, Link, styled } from '@mui/material';
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@ -406,13 +406,13 @@ export const EnvironmentVariantsModal = ({
By overriding the stickiness you can control
which parameter is used to ensure consistent
traffic allocation across variants.{' '}
<a
<Link
href="https://docs.getunleash.io/reference/feature-toggle-variants"
target="_blank"
rel="noreferrer"
>
Read more
</a>
</Link>
</StyledDescription>
<div>
<StyledStickinessSelect

2
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -68,7 +68,7 @@ const StyledToolbarContainer = styled('div')({
const StyledSeparator = styled('div')(({ theme }) => ({
width: '100%',
backgroundColor: theme.palette.background.elevation2,
backgroundColor: theme.palette.divider,
height: '1px',
}));

2
frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
View File

@ -10,7 +10,7 @@ const StyledSlider = withStyles(Slider, theme => ({
thumb: {
height: 24,
width: 24,
backgroundColor: '#fff',
backgroundColor: theme.palette.background.paper,
border: '2px solid currentColor',
},
active: {},

4
frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
View File

@ -27,7 +27,7 @@ const StyledModal = styled('div')(({ theme }) => ({
position: 'relative',
padding: theme.spacing(8),
background: theme.palette.background.paper,
boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
boxShadow: theme.boxShadows.popup,
borderRadius: theme.spacing(2),
[theme.breakpoints.down('md')]: {
padding: theme.spacing(4),
@ -43,7 +43,7 @@ const StyledClose = styled('div')({
const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
fontSize: '1.5rem',
color: theme.palette.action.disabled,
color: theme.palette.action.active,
}));
export const FeedbackCES = ({ state }: IFeedbackCESProps) => {

10
frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
View File

@ -78,10 +78,10 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
>
<Box
sx={{
borderRadius: '12.5px',
borderRadius: `${theme.shape.borderRadiusLarge}px`,
backgroundColor: theme.palette.background.paper,
zIndex: 9999,
boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
boxShadow: theme.boxShadows.elevated,
padding: theme.spacing(3),
maxWidth: '400px',
}}
@ -101,10 +101,10 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
right: '-38px',
top: '-47px',
backgroundColor: theme.palette.background.paper,
boxShadow:
'2px 2px 4px 4px rgba(143,143,143, 0.25)',
boxShadow: theme.boxShadows.elevated,
'&:hover': {
backgroundColor: '#fff',
backgroundColor:
theme.palette.background.paper,
},
}}
onClick={() => setShowFeedback(false)}

2
frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx
View File

@ -17,7 +17,6 @@ const DraftBannerContentWrapper = styled(Box)(({ theme }) => ({
[theme.breakpoints.down('lg')]: {
padding: theme.spacing(1, 2),
},
color: theme.palette.warning.main,
}));
const StyledBox = styled(Box)(({ theme }) => ({
@ -87,6 +86,7 @@ const StickyBanner = styled(Box)(({ theme }) => ({
zIndex: 250 /* has to lower than header.zIndex and higher than body.zIndex */,
borderTop: `1px solid ${theme.palette.warning.border}`,
borderBottom: `1px solid ${theme.palette.warning.border}`,
color: theme.palette.warning.contrastText,
backgroundColor: theme.palette.warning.light,
}));

17
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -13,6 +13,7 @@ import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { DraftBanner } from './DraftBanner/DraftBanner';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
interface IMainLayoutProps {
children: ReactNode;
@ -100,7 +101,21 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
{children}
</MainLayoutContentContainer>
</MainLayoutContent>
<StyledImg src={formatAssetPath(textureImage)} alt="" />
<ThemeMode
darkmode={
<StyledImg
style={{ opacity: 0.06 }}
src={formatAssetPath(textureImage)}
alt=""
/>
}
lightmode={
<StyledImg
src={formatAssetPath(textureImage)}
alt=""
/>
}
/>
</MainLayoutContentWrapper>
<Footer />
</MainLayoutContainer>

3
frontend/src/component/maintenance/MaintenanceBanner.tsx
View File

@ -2,6 +2,7 @@ import { styled } from '@mui/material';
import { ErrorOutlineRounded } from '@mui/icons-material';
const StyledErrorRoundedIcon = styled(ErrorOutlineRounded)(({ theme }) => ({
color: theme.palette.error.main,
height: '20px',
width: '20px',
marginRight: theme.spacing(1),
@ -12,7 +13,7 @@ const StyledDiv = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
justifyContent: 'center',
alignItems: 'center',
color: theme.palette.error.main,
color: theme.palette.error.contrastText,
backgroundColor: theme.palette.error.light,
height: '65px',
borderBottom: `1px solid ${theme.palette.error.border}`,

5
frontend/src/component/menu/Footer/Footer.tsx
View File

@ -5,6 +5,7 @@ import { List, ListItem, ListItemText, Grid, styled } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { ApiDetails } from './ApiDetails/ApiDetails';
import { FooterTitle } from './FooterTitle';
import { focusable } from 'themes/themeStyles';
const StyledFooter = styled('footer')(({ theme }) => ({
padding: theme.spacing(4, 8),
@ -23,8 +24,12 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
padding: 0,
margin: 0,
'& a': {
...focusable(theme),
textDecoration: 'none',
color: theme.palette.text.primary,
'&:hover': {
textDecoration: 'underline',
},
},
}));

72
frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
View File

@ -53,7 +53,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div
@ -224,7 +224,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div
@ -334,7 +334,7 @@ exports[`should render DrawerMenu 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div
@ -498,7 +498,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div
@ -669,7 +669,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div
@ -779,7 +779,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
>
<li
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-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 css-1j1wl1e-MuiListItem-root"
className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-rw9v7e-MuiListItem-root"
disabled={false}
>
<div

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

@ -87,6 +87,7 @@ const StyledLinks = styled('div')(({ theme }) => ({
}));
const StyledAdvancedNavButton = styled('button')(({ theme }) => ({
...focusable(theme),
border: 'none',
background: 'transparent',
height: '100%',

2
frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx
View File

@ -23,7 +23,7 @@ const StyledLink = styled(RouterLink)(({ theme }) => ({
width: '100%',
'&&': {
// Override MenuItem's built-in padding.
color: 'black',
color: theme.palette.text.primary,
padding: theme.spacing(1, 2),
},
}));

24
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
View File

@ -17,7 +17,7 @@ interface IPlaygroundEditorProps {
const StyledEditorHeader = styled('aside')(({ theme }) => ({
height: '50px',
backgroundColor: theme.palette.neutral.light,
backgroundColor: theme.palette.background.paper,
borderTopRightRadius: theme.shape.borderRadiusMedium,
borderTopLeftRadius: theme.shape.borderRadiusMedium,
padding: theme.spacing(1, 2),
@ -26,24 +26,23 @@ const StyledEditorHeader = styled('aside')(({ theme }) => ({
justifyContent: 'space-between',
alignItems: 'center',
border: `1px solid ${theme.palette.divider}`,
borderBottom: 'none',
}));
const StyledEditorStatusContainer = styled('div')(({ theme, style }) => ({
width: '28px',
height: '28px',
width: theme.spacing(3),
height: theme.spacing(3),
display: 'flex',
alignItems: 'center',
color: theme.palette.background.paper,
justifyContent: 'center',
transition: `background-color 0.5s ease-in-out`,
borderRadius: '50%',
opacity: 0.8,
...style,
}));
const StyledErrorSpan = styled('div')(({ theme }) => ({
fontSize: '0.9rem',
color: theme.palette.error.main,
fontSize: theme.fontSizes.smallBody,
color: theme.palette.error.dark,
marginRight: theme.spacing(1),
}));
@ -52,11 +51,15 @@ const EditorStatusOk = () => {
return (
<StyledEditorStatusContainer
style={{
color: theme.palette.success.contrastText,
backgroundColor: theme.palette.success.main,
}}
>
<Check sx={{ width: '20px', height: '20px' }} />
<Check
sx={theme => ({
width: theme.spacing(2),
height: theme.spacing(2),
})}
/>
</StyledEditorStatusContainer>
);
};
@ -67,7 +70,6 @@ const EditorStatusError = () => {
return (
<StyledEditorStatusContainer
style={{
color: theme.palette.error.contrastText,
backgroundColor: theme.palette.error.main,
}}
>
@ -119,8 +121,6 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
style={{
border: `1px solid ${theme.palette.divider}`,
borderTop: 'none',
borderBottomLeftRadius: theme.shape.borderRadiusMedium,
borderBottomRightRadius: theme.shape.borderRadiusMedium,
}}
placeholder={JSON.stringify(
{

2
frontend/src/component/project/Project/Import/ImportLayoutContainer.tsx
View File

@ -1,7 +1,7 @@
import { styled } from '@mui/material';
export const ImportLayoutContainer = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(5, 8, 3, 8),
display: 'flex',
flexDirection: 'column',

9
frontend/src/component/project/Project/Import/ImportModal.tsx
View File

@ -21,18 +21,17 @@ const ModalContentContainer = styled('div')(({ theme }) => ({
}));
const TimelineContainer = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
padding: theme.spacing(6, 8, 3, 4),
backgroundColor: theme.palette.background.sidebar,
padding: theme.spacing(8),
flexBasis: '30%',
}));
const TimelineHeader = styled('div')(({ theme }) => ({
textTransform: 'uppercase',
fontSize: theme.fontSizes.smallBody,
color: theme.palette.primary.contrastText,
color: theme.palette.common.white,
fontWeight: theme.typography.fontWeightBold,
paddingLeft: theme.spacing(2),
marginBottom: theme.spacing(4),
marginBottom: theme.spacing(3),
}));
const isValidJSON = (json: string) => {

58
frontend/src/component/project/Project/Import/ImportTimeline.tsx
View File

@ -1,7 +1,7 @@
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
import React, { FC } from 'react';
import { Box, styled } from '@mui/material';
import { alpha, Box, styled } from '@mui/material';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineDot from '@mui/lab/TimelineDot';
import TimelineContent from '@mui/lab/TimelineContent';
@ -9,42 +9,58 @@ import Timeline from '@mui/lab/Timeline';
import { StageName } from './StageName';
const StyledTimeline = styled(Timeline)(() => ({
padding: 0,
margin: 0,
[`& .${timelineItemClasses.root}:before`]: {
flex: 0,
padding: 0,
},
}));
const StyledTimelineConnector = styled(TimelineConnector)(({ theme }) => ({
const StyledTimelineConnector = styled(TimelineConnector, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
width: '1px',
backgroundColor: theme.palette.neutral.border,
backgroundColor: active
? theme.palette.common.white
: `${alpha(theme.palette.common.white, 0.5)}`,
}));
const StyledTimelineDot = styled(TimelineDot, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
color: active ? theme.palette.primary.main : theme.palette.neutral.border,
backgroundColor: active ? theme.palette.primary.contrastText : 'initial',
fontWeight: active ? theme.fontWeight.bold : theme.fontWeight.medium,
borderColor: theme.palette.neutral.border,
width: '40px',
height: '40px',
color: active
? theme.palette.background.sidebar
: `${alpha(theme.palette.common.white, 0.8)}`,
backgroundColor: active ? theme.palette.common.white : 'initial',
fontWeight: active ? theme.fontWeight.bold : 'normal',
borderColor: active
? theme.palette.common.white
: `${alpha(theme.palette.common.white, 0.8)}`,
width: theme.spacing(5),
height: theme.spacing(5),
lineHeight: theme.spacing(5),
borderWidth: '1px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: theme.spacing(1, 0),
}));
const StyledTimelineContent = styled(TimelineContent, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
marginBottom: theme.spacing(6),
color: active ? theme.palette.common.white : theme.palette.neutral.border,
marginTop: theme.spacing(2),
padding: theme.spacing(2, 2, 6, 2),
color: active
? theme.palette.common.white
: `${alpha(theme.palette.common.white, 0.8)}`,
}));
const TimelineItemTitle = styled(Box)(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
const TimelineItemTitle = styled(Box, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
fontWeight: active ? theme.fontWeight.bold : 'normal',
fontSize: theme.fontSizes.bodySize,
}));
@ -65,10 +81,12 @@ export const ImportTimeline: FC<{
>
1
</StyledTimelineDot>
<StyledTimelineConnector />
<StyledTimelineConnector active={stage === 'configure'} />
</TimelineSeparator>
<StyledTimelineContent active={stage === 'configure'}>
<TimelineItemTitle>Import file</TimelineItemTitle>
<TimelineItemTitle active={stage === 'configure'}>
Import file
</TimelineItemTitle>
<TimelineItemDescription>
Import previously exported toggle configuration from
another Unleash instance as a JSON file
@ -83,10 +101,10 @@ export const ImportTimeline: FC<{
>
2
</StyledTimelineDot>
<StyledTimelineConnector />
<StyledTimelineConnector active={stage === 'validate'} />
</TimelineSeparator>
<StyledTimelineContent active={stage === 'validate'}>
<TimelineItemTitle>
<TimelineItemTitle active={stage === 'validate'}>
Validate configuration
</TimelineItemTitle>
<TimelineItemDescription>
@ -104,7 +122,9 @@ export const ImportTimeline: FC<{
</StyledTimelineDot>
</TimelineSeparator>
<StyledTimelineContent active={stage === 'import'}>
<TimelineItemTitle>Finish import</TimelineItemTitle>
<TimelineItemTitle active={stage === 'import'}>
Finish import
</TimelineItemTitle>
<TimelineItemDescription>
Feature toggle configuration will be imported to your
new Unleash instance

1
frontend/src/component/project/Project/Import/PulsingAvatar.tsx
View File

@ -4,6 +4,7 @@ export const PulsingAvatar = styled(Avatar, {
shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
transition: 'background-color 0.5s ease',
color: theme.palette.common.white,
backgroundColor: active
? theme.palette.primary.main
: theme.palette.divider,

2
frontend/src/component/project/Project/Project.styles.ts
View File

@ -64,7 +64,7 @@ export const StyledProjectTitle = styled('span')(({ theme }) => ({
export const StyledSeparator = styled('div')(({ theme }) => ({
width: '100%',
backgroundColor: theme.palette.background.elevation2,
backgroundColor: theme.palette.divider,
height: '1px',
}));

2
frontend/src/component/project/Project/ProjectStats/StatusBox.tsx
View File

@ -20,7 +20,7 @@ const StyledBoxChangeContainer = styled(Box)(({ theme }) => ({
}));
const StyledTypographySubtext = styled(Typography)(({ theme }) => ({
color: theme.palette.neutral.main,
color: theme.palette.text.secondary,
fontSize: theme.typography.body2.fontSize,
}));

4
frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts
View File

@ -12,7 +12,9 @@ export const useStyles = makeStyles()(theme => ({
backgroundColor: theme.palette.divider,
margin: theme.spacing(4, -4, 3),
},
inputLabel: { backgroundColor: '#fff' },
inputLabel: {
backgroundColor: theme.palette.background.paper,
},
roleName: {
fontWeight: 'bold',
padding: '5px 0px',

9
frontend/src/component/project/ProjectList/ProjectList.tsx
View File

@ -22,7 +22,9 @@ import { Search } from 'component/common/Search/Search';
import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
import { ITooltipResolverProps } from 'component/common/TooltipResolver/TooltipResolver';
import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
import { safeRegExp } from '@server/util/escape-regex';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
const StyledDivContainer = styled('div')(({ theme }) => ({
display: 'flex',
@ -75,7 +77,12 @@ function resolveCreateButtonData(
sx: { maxWidth: '320px' },
variant: 'custom',
},
endIcon: <ProPlanIcon />,
endIcon: (
<ThemeMode
darkmode={<ProPlanIconLight />}
lightmode={<ProPlanIcon />}
/>
),
};
} else if (!hasAccess) {
return {

2
frontend/src/component/splash/SplashPageOperators.tsx
View File

@ -21,7 +21,7 @@ const StyledContent = styled('div')(({ theme }) => ({
padding: theme.spacing(4),
borderRadius: theme.spacing(1),
backgroundColor: theme.palette.primary.main,
color: 'white',
color: theme.palette.common.white,
[theme.breakpoints.up('md')]: {
padding: theme.spacing(8),
},

5
frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
View File

@ -5,6 +5,7 @@ import {
IconButton,
styled,
Tooltip,
Link,
} from '@mui/material';
import { Delete } from '@mui/icons-material';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
@ -109,13 +110,13 @@ export const StrategyParameter = ({
<StyledParagraph>
Parameters let you provide arguments to your strategy
that it can access for evaluation. Read more in the{' '}
<a
<Link
href="https://docs.getunleash.io/reference/custom-activation-strategies#parameter-types"
target="_blank"
rel="noreferrer"
>
parameter types documentation
</a>
</Link>
.
</StyledParagraph>
}

10
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -35,7 +35,7 @@ exports[`renders an empty list correctly 1`] = `
className="css-non55o"
>
<div
className="css-1phd8d6"
className="css-16ldy6v"
>
<svg
aria-hidden={true}
@ -49,7 +49,7 @@ exports[`renders an empty list correctly 1`] = `
/>
</svg>
<div
className="MuiInputBase-root MuiInputBase-colorPrimary css-4a25hy-MuiInputBase-root"
className="MuiInputBase-root MuiInputBase-colorPrimary css-tv3fxu-MuiInputBase-root"
onClick={[Function]}
>
<input
@ -153,7 +153,7 @@ exports[`renders an empty list correctly 1`] = `
<button
aria-label=""
aria-labelledby={null}
className=" css-1xwc11x"
className=" css-sskrcd"
data-mui-internal-clone-element={true}
onBlur={[Function]}
onClick={[Function]}
@ -177,7 +177,7 @@ exports[`renders an empty list correctly 1`] = `
</span>
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-57xzpo-MuiSvgIcon-root"
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-18chwvk-MuiSvgIcon-root"
data-testid="KeyboardArrowUpIcon"
focusable="false"
viewBox="0 0 24 24"
@ -199,7 +199,7 @@ exports[`renders an empty list correctly 1`] = `
</span>
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit sort-arrow css-57xzpo-MuiSvgIcon-root"
className="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit sort-arrow css-18chwvk-MuiSvgIcon-root"
data-testid="KeyboardArrowUpIcon"
focusable="false"
viewBox="0 0 24 24"

2
frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
View File

@ -26,7 +26,7 @@ const StyledHeader = styled('div')(({ theme }) => ({
alignItems: 'center',
padding: theme.spacing(6),
borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.alternative,
color: theme.palette.primary.contrastText,
marginBottom: theme.spacing(3),
boxShadow: theme.boxShadows.primaryHeader,

23
frontend/src/component/user/StandaloneBanner.tsx
View File

@ -13,18 +13,21 @@ interface IStandaloneBannerProps {
const StyledGradient = styled(Gradient)(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.up('sm')]: {
borderBottomLeftRadius: '3px',
borderTopLeftRadius: '3px',
borderTopLeftRadius: theme.shape.borderRadiusLarge,
[theme.breakpoints.down('md')]: {
borderTopLeftRadius: theme.shape.borderRadiusLarge,
borderTopRightRadius: theme.shape.borderRadiusLarge,
},
[theme.breakpoints.down('sm')]: {
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
},
}));
const StyledContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(12, 8),
color: '#fff',
color: theme.palette.common.white,
position: 'relative',
borderTopLeftRadius: '3px',
borderBottomLeftRadius: '3px',
textAlign: 'right',
[theme.breakpoints.down('md')]: {
padding: theme.spacing(6, 4),
@ -35,7 +38,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
}));
const StyledTitle = styled(Typography)(({ theme }) => ({
color: '#fff',
color: theme.palette.common.white,
marginBottom: theme.spacing(2),
fontSize: theme.spacing(4),
marginTop: theme.spacing(10),
@ -48,9 +51,6 @@ const StyledSubtitle = styled(Typography)(({ theme }) => ({
[theme.breakpoints.down('md')]: {
display: 'none',
},
[theme.breakpoints.down('sm')]: {
display: 'none',
},
fontSize: theme.spacing(4),
fontWeight: 'normal',
}));
@ -62,6 +62,9 @@ const StyledLogoContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
},
[theme.breakpoints.down('md')]: {
top: '9px',
},
}));
const logoStyles = (theme: Theme) => ({

4
frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
View File

@ -45,7 +45,7 @@ const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
alignItems: 'center',
gap: theme.spacing(1),
padding: 0,
color: theme.palette.primary.dark,
color: theme.palette.links,
fontWeight: theme.fontWeight.medium,
'&:hover, &:focus': {
textDecoration: 'underline',
@ -87,7 +87,7 @@ export const UserProfileContent = ({
<ConditionallyRender
condition={showProfile}
show={
<StyledPaper id={id}>
<StyledPaper className="dropdown-outline" id={id}>
<StyledProfileInfo>
<StyledUserAvatar user={profile} />
<div>

4
frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
View File

@ -30,7 +30,9 @@ const AuthOptions = ({ options }: IAuthOptionProps) => {
href={o.path}
size="small"
data-testid={`${SSO_LOGIN_BUTTON}-${o.type}`}
style={{ height: '40px', color: '#000' }}
style={{
height: '40px',
}}
startIcon={
<ConditionallyRender
condition={o.type === 'google'}

9
frontend/src/component/user/common/ResetPasswordForm/PasswordChecker.tsx
View File

@ -44,11 +44,12 @@ const StyledTitle = styled(Typography)(({ theme }) => ({
}));
const StyledContainer = styled('div')(({ theme }) => ({
border: '1px solid #f1f1f1',
backgroundColor: theme.palette.background.elevation2,
borderRadius: theme.shape.borderRadius,
position: 'relative',
maxWidth: '350px',
color: '#44606e',
color: theme.palette.text.secondary,
padding: theme.spacing(0.5, 0, 1.5),
}));
const StyledHeaderContainer = styled('div')(({ theme }) => ({
@ -86,7 +87,9 @@ const StyledStatusBar = styled('div', {
width: '50px',
borderRadius: theme.shape.borderRadius,
height: '6px',
backgroundColor: error ? 'red' : theme.palette.primary.main,
backgroundColor: error
? theme.palette.error.main
: theme.palette.primary.main,
}));
const PasswordChecker = ({

11
frontend/src/component/user/common/StandaloneLayout.tsx
View File

@ -33,16 +33,21 @@ const StyledHeader = styled('header')(({ theme }) => ({
const StyledMain = styled('main')(({ theme }) => ({
width: '60%',
flex: '1',
borderTopRightRadius: '3px',
borderBottomRightRadius: '3px',
borderTopRightRadius: theme.shape.borderRadiusLarge,
borderBottomRightRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.background.paper,
position: 'relative',
[theme.breakpoints.down('md')]: {
borderRadius: '0',
borderTopRightRadius: '0',
borderBottomLeftRadius: theme.shape.borderRadiusLarge,
borderBottomRightRadius: theme.shape.borderRadiusLarge,
width: '100%',
position: 'static',
minHeight: 'auto',
},
[theme.breakpoints.down('sm')]: {
borderRadius: '0',
},
}));
const StyledInnerRightContainer = styled('div')(({ theme }) => ({

4
frontend/src/hooks/useThemeMode.ts
View File

@ -4,7 +4,6 @@ import { setLocalStorageItem } from 'utils/storage';
import mainTheme from 'themes/theme';
import darkTheme from 'themes/dark-theme';
import { Theme } from '@emotion/react';
import useUiConfig from './api/getters/useUiConfig/useUiConfig';
interface IUseThemeModeOutput {
resolveTheme: () => Theme;
@ -14,8 +13,7 @@ interface IUseThemeModeOutput {
export const useThemeMode = (): IUseThemeModeOutput => {
const { themeMode, setThemeMode } = useContext(UIContext);
const { uiConfig } = useUiConfig();
const key = `${uiConfig.baseUriPath}:unleash-theme`;
const key = 'unleash-theme';
const resolveTheme = () => {
if (themeMode === 'light') {

7
frontend/src/themes/app.css
View File

@ -36,7 +36,6 @@ button {
.skeleton {
position: relative;
overflow: hidden;
background-color: #e2e8f0;
z-index: 9999;
box-shadow: none;
fill: none;
@ -44,7 +43,6 @@ button {
}
.skeleton::before {
background-color: #e2e8f0;
content: '';
position: absolute;
top: 0px;
@ -62,13 +60,13 @@ button {
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
/* background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 100%,
rgba(255, 255, 255, 0.5) 100%,
rgba(255, 255, 255, 0)
);
); */
animation: shimmer 3s infinite;
content: '';
z-index: 5001;
@ -134,7 +132,6 @@ p {
a {
cursor: pointer;
color: #615bc2;
}
a:hover {

6
frontend/src/themes/colors.ts
View File

@ -16,8 +16,8 @@ export const colors = {
100: '#F7F7FA',
50: '#FFFFFF',
},
// In MUI there colors are used with transparency, and we keep them here for a better overview
// We can use there for other places if needed
// In MUI these colors are used with transparency, and we keep them here for a better overview
// We can use these colors for other places if needed
action: {
0.54: 'rgba(25, 24, 41, 0.54)',
0.32: 'rgba(25, 24, 41, 0.32)',
@ -51,7 +51,7 @@ export const colors = {
50: '#FFF2F3',
},
orange: {
900: '#B35300',
900: '#A34C00',
800: '#D76500',
700: '#F28D00',
600: '#FFAA33',

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

@ -1,7 +1,19 @@
import { createTheme } from '@mui/material/styles';
import { colors } from './colors';
import { alpha } from '@mui/material';
import { focusable } from 'themes/themeStyles';
export default createTheme({
const actionColors = {
0.54: 'rgba(223, 222, 255, 0.54)',
0.32: 'rgba(223, 222, 255, 0.32)',
0.12: 'rgba(223, 222, 255, 0.12)',
0.08: 'rgba(223, 222, 255, 0.08)',
0.05: 'rgba(223, 222, 255, 0.05)',
};
const purpleColor = {
0.5: 'rgba(151, 146, 237, 0.5))',
};
const theme = {
breakpoints: {
values: {
xs: 0,
@ -17,7 +29,7 @@ export default createTheme({
elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
},
typography: {
fontFamily: 'Sen, Roboto, sans-serif',
@ -66,86 +78,96 @@ export default createTheme({
palette: {
common: {
// Used for text color
white: colors.grey[50],
white: '#EEEEFC', // Switch base (OFF) // Tooltips text color // Text color
black: '#A0A0B1', // Switch track (OFF)
},
text: {
primary: colors.grey[900],
secondary: colors.grey[800],
disabled: colors.grey[600],
primary: '#EEEEFC',
secondary: '#A0A0B1',
disabled: '#888799',
},
primary: {
main: colors.purple[800],
light: colors.purple[700],
dark: colors.purple[900],
contrastText: colors.grey[50], // Color used for content when primary.main is used as a background
main: '#9792ED',
light: '#4C4992',
// Maybe to move links color to another variable????
dark: '#9792ED', // Color used for links and on hover for primary buttons
contrastText: '#EEEEFC', // Color used for content when primary.main is used as a background
},
secondary: {
// Used for purple badges and puple light elements
light: colors.purple[50],
main: colors.purple[800],
dark: colors.purple[900],
border: colors.purple[300],
main: '#57549C', // used on icons on these elements
light: '#34325E', // used as a bakground on these elements
dark: '#EEEEFC', // used for text on these elements
border: '#4C4992',
contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
},
info: {
light: colors.blue[50],
main: colors.blue[500],
dark: colors.blue[700],
contrastText: colors.grey[50], // Color used for content when info.main is used as a background
border: colors.blue[200],
// main: '#5483C9', // used on icons on these elements
main: '#a2bbe2', // used on icons on these elements
light: '#1A2641', // used as a bakground on these elements
dark: '#a2bbe2', // used for text on these elements
border: '#1B407A',
contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
},
success: {
light: colors.green[50],
main: colors.green[600],
dark: colors.green[800],
contrastText: colors.grey[50], // Color used for content when success.main is used as a background
border: colors.green[300],
// main: '#62872F', // used on icons on these elements
main: '#94ae6f', // used on icons on these elements
light: '#333D30', // used as a bakground on these elements
dark: '#94ae6f', // used for text on these elements
border: '#3D600C',
contrastText: '#EEEEFC', // Color used for content when success.main is used as a background
},
warning: {
light: colors.orange[100],
main: colors.orange[800],
dark: colors.orange[900],
contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
border: colors.orange[500],
// main: '#9E691C', // used on icons on these elements
main: '#bc7d21', // used on icons on these elements
light: '#3B302C', // used as a bakground on these elements
dark: '#bc7d21', // used for text on these elements
contrastText: '#EEEEFC', // Color used for content when warning.main is used as a background
border: '#6C4A19',
},
error: {
light: colors.red[50],
main: colors.red[700],
dark: colors.red[800],
contrastText: colors.grey[50], // Color used for content when error.main is used as a background
border: colors.red[300],
// main: '#B93F4A', // used on error buttons // used on icons on these elements
main: '#ff6472', // used on error buttons // used on icons on these elements
light: '#3F2835', // used as a bakground on these elements
// dark: '#F15260', // used for text on these elements
dark: '#ff6472', // used for text on these elements
border: '#8A3E45',
contrastText: '#EEEEFC', // Color used for content when error.main is used as a background
},
/**
* Used for grey badges, hover elements, and grey light elements
*/
neutral: {
light: colors.grey[100],
main: colors.grey[700],
dark: colors.grey[800],
border: colors.grey[400],
main: '#858699', // used on icons on these elements
light: '#2B2A3C', // used as a bakground on these elements
dark: '#EEEEFC', // used for text on these elements
border: '#454360',
contrastText: '#EEEEFC', // Color used for text inside badge
},
background: {
paper: colors.grey[50],
default: colors.grey[50],
application: colors.grey[300],
sidebar: colors.purple[800],
elevation1: colors.grey[100],
elevation2: colors.grey[200],
paper: '#222130', // Background color for all containers
default: '#222130',
application: '#1A1924',
sidebar: '#4C4992',
alternative: '#4C4992', // used on the dark theme to shwitch primary main to a darker shade
elevation1: '#2B2A3C',
elevation2: '#2B2A3C',
// elevation2: '#302E42',
},
action: {
// Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
active: colors.action[0.54],
hover: colors.action[0.05],
active: actionColors[0.54],
hover: actionColors[0.05],
hoverOpacity: 0.05,
selected: colors.action[0.08],
selected: actionColors[0.08],
selectedOpacity: 0.08,
disabled: colors.action[0.32],
disabledBackground: colors.action[0.12],
disabled: actionColors[0.32],
disabledBackground: actionColors[0.12],
disabledOpacity: 0.38,
focus: colors.action[0.12],
focus: actionColors[0.12],
focusOpacity: 0.12,
activatedOpacity: 0.12,
},
@ -153,64 +175,123 @@ export default createTheme({
/**
* General divider
*/
divider: colors.grey[400],
divider: '#39384C',
/**
* Table colors.
*/
table: {
headerColor: colors.grey[900], //New - Is needed? ###CHECK
headerBackground: colors.grey[200],
headerHover: colors.grey[300],
divider: colors.grey[300],
rowHover: colors.grey[100],
headerBackground: '#2B2A3C',
headerHover: '#313045',
divider: '#323144',
rowHover: '#262536',
},
/**
* Text highlight effect color. Used when filtering/searching over content.
* Text highlight effect color. Used when filtering/searching over content
*/
highlight: colors.orange[200],
highlight: 'rgba(255, 234, 204, 0.7)',
/**
* Background color used for the API command in the sidebar
*/
codebox: colors.action[0.12],
codebox: 'rgba(52, 50, 94, 0.3)',
/**
* Links color
*/
links: '#9792ED',
/**
* Gradient for the login page
*/
loginGradient: {
from: colors.purple[800],
to: colors.purple[950],
from: '#4C4992',
to: '#4944a7',
},
/**
* Colors for event log output.
* Colors for event log output
*/
eventLog: {
diffAdd: colors.green[800],
diffSub: colors.red[800],
edited: colors.grey[900],
diffAdd: '#77AB2E',
diffSub: '#df626c',
edited: '#EEEEFC',
},
/**
* For 'Seen' column on feature toggles list and other.
* For 'Seen' column on feature toggles list and other
*/
seen: {
unknown: colors.grey[100],
recent: colors.green[100],
inactive: colors.orange[200],
abandoned: colors.red[200],
primary: colors.purple[100],
unknown: '#2B2A3C',
recent: '#4E6131',
inactive: '#875D21',
abandoned: '#8A3E45',
primary: '#302E42',
},
/**
* For Environment Accordion
*/
envAccordion: {
disabled: '#2B2A3C',
expanded: '#1A1924',
},
/**
* MUI grey colors
*/
grey: {
// This was to see were these colors are used from MUI
// 50: '#A6000E',
100: '#888799', // Disabled Switch base (OFF)
// 200: '#A6000E',
// 300: '#A6000E',
// 400: '#A6000E',
// 500: '#A6000E',
600: '#343348', // slider tooltip background
700: '#343348', // Dark tooltip background
// 800: '#A6000E',
// 900: '#A6000E',
// A100: '#A6000E',
// A200: '#A6000E',
// A400: '#A6000E',
// A700: '#A6000E',
},
},
};
export default createTheme({
...theme,
components: {
// Skeleton
MuiCssBaseline: {
styleOverrides: {
'.skeleton': {
'&::before': {
backgroundColor: theme.palette.background.elevation1,
},
'&::after': {
background:
'linear-gradient(90deg, rgba(223, 222, 255, 0) 0, rgba(223, 222, 255, 0.2) 100%, rgba(223, 222, 255, 0.5) 100%, rgba(223, 222, 255, 0))',
},
},
a: {
color: theme.palette.links,
},
'.dropdown-outline, .MuiAutocomplete-popper': {
// used for user dropdown, autocomplete, and change request primary button dropdown, notifications dropdown
outline: `1px solid ${theme.palette.divider}`,
},
},
},
// Links
MuiLink: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.primary.dark,
...focusable(theme),
color: theme.palette.links,
'&:hover': {
textDecoration: 'none',
},
@ -225,7 +306,7 @@ export default createTheme({
color: theme.palette.text.primary,
fontSize: '0.875rem',
'& a': {
color: theme.palette.primary.dark,
color: theme.palette.links,
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
@ -239,7 +320,6 @@ export default createTheme({
MuiTableHead: {
styleOverrides: {
root: ({ theme }) => ({
// background: 'transparent',
'& th': {
height: theme.shape.tableRowHeightCompact,
backgroundColor: theme.palette.table.headerBackground,
@ -281,13 +361,22 @@ export default createTheme({
MuiAlert: {
styleOverrides: {
root: ({ theme }) => ({
padding: theme.spacing(2, 3),
borderRadius: theme.shape.borderRadiusMedium,
a: {
color: 'inherit',
},
'> .MuiAlert-icon': {
padding: 0,
opacity: 1,
fontSize: '24px',
},
'> .MuiAlert-message': {
padding: '3px 0 0 0',
},
'&.MuiAlert-standardInfo': {
backgroundColor: theme.palette.info.light,
color: theme.palette.info.dark,
color: theme.palette.info.contrastText,
border: `1px solid ${theme.palette.info.border}`,
'& .MuiAlert-icon': {
color: theme.palette.info.main,
@ -295,7 +384,7 @@ export default createTheme({
},
'&.MuiAlert-standardSuccess': {
backgroundColor: theme.palette.success.light,
color: theme.palette.success.dark,
color: theme.palette.success.contrastText,
border: `1px solid ${theme.palette.success.border}`,
'& .MuiAlert-icon': {
color: theme.palette.success.main,
@ -303,7 +392,7 @@ export default createTheme({
},
'&.MuiAlert-standardWarning': {
backgroundColor: theme.palette.warning.light,
color: theme.palette.warning.dark,
color: theme.palette.warning.contrastText,
border: `1px solid ${theme.palette.warning.border}`,
'& .MuiAlert-icon': {
color: theme.palette.warning.main,
@ -311,7 +400,7 @@ export default createTheme({
},
'&.MuiAlert-standardError': {
backgroundColor: theme.palette.error.light,
color: theme.palette.error.dark,
color: theme.palette.error.contrastText,
border: `1px solid ${theme.palette.error.border}`,
'& .MuiAlert-icon': {
color: theme.palette.error.main,
@ -326,6 +415,7 @@ export default createTheme({
styleOverrides: {
root: ({ theme }) => ({
'& .MuiTabs-indicator': {
backgroundColor: theme.palette.background.alternative,
height: '4px',
},
'& .MuiTabs-flexContainer': {
@ -345,7 +435,7 @@ export default createTheme({
lineHeight: '1',
minHeight: '62px',
'&:hover': {
backgroundColor: theme.palette.background.elevation2,
backgroundColor: theme.palette.action.hover,
},
'&.Mui-selected': {
color: theme.palette.text.primary,
@ -361,13 +451,31 @@ export default createTheme({
},
},
// Constraint accordion / cards
// Environment accordion
MuiAccordion: {
styleOverrides: {
root: ({ theme }) => ({
'&:first-of-type, &:last-of-type': {
borderRadius: theme.shape.borderRadiusMedium,
borderRadius: theme.shape.borderRadiusLarge,
},
'&.environment-accordion.Mui-expanded': {
outline: `2px solid ${alpha(
theme.palette.background.alternative,
0.6
)}`,
boxShadow: `0px 2px 8px ${alpha(
theme.palette.primary.main,
0.2
)}`,
},
'&.accordion-disabled': {
outline: `1px solid ${alpha('#39384C', 0.5)}`,
backgroundColor: theme.palette.background.application,
},
'&.accordion-disabled.Mui-expanded .MuiAccordionSummary-root':
{
borderBottom: `1px solid ${theme.palette.divider}`,
},
}),
},
},
@ -384,30 +492,33 @@ export default createTheme({
},
},
// Project overview, improve toggle/switch disabled focus effect color
// Project overview, improve switch (ON - state) hover effect color
MuiSwitch: {
styleOverrides: {
root: ({ theme }) => ({
zIndex: 1,
'&:not(.Mui-checked) .MuiTouchRipple-child': {
color: theme.palette.neutral.border,
'&&& > .Mui-checked:hover': {
backgroundColor: actionColors[0.08],
},
'&&& > .Mui-checked.Mui-disabled': {
color: '#423F6E',
},
}),
},
},
// Overwiteing the action.disabledOpacity from MU
// Overwiteing the action.disabledOpacity from MUI
MuiMenuItem: {
styleOverrides: {
root: {
'&.Mui-disabled': {
opacity: 0.66,
opacity: 0.4,
},
},
},
},
// Inputs background - This is used when we have inputs on a grey background (e.g. edit contstraints, playground)
// Inputs background - This is used when we have inputs on a darker background (e.g. edit contstraints, playground)
MuiInputBase: {
styleOverrides: {
root: ({ theme }) => ({
@ -424,429 +535,64 @@ export default createTheme({
}),
},
},
// For dark theme, primary buttons are a bit darker then the primary.main that we use as a primary color
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
'&:not(.Mui-disabled).MuiButton-containedPrimary': {
backgroundColor: theme.palette.background.alternative,
'&:hover': {
backgroundColor: theme.palette.secondary.main,
},
},
}),
},
},
// Constraints negation icon
MuiIconButton: {
styleOverrides: {
root: ({ theme }) => ({
'&.operator-is-active svg': {
fill: theme.palette.background.application,
},
}),
},
},
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: ({ theme }) => ({
fieldset: {
borderColor: '#646382',
},
'&&&:hover fieldset': {
borderColor: '#8B8BA7',
},
'&&&.Mui-focused fieldset': {
borderColor: '#9792ED',
},
'&&&.Mui-disabled fieldset': {
borderColor: '#47475D',
},
}),
},
},
// Popovers
MuiPopover: {
styleOverrides: {
root: ({ theme }) => ({
'.MuiPopover-paper': {
outline: `1px solid ${theme.palette.divider}`,
},
}),
},
},
},
});
// Old dark theme below:
// import { createTheme } from '@mui/material/styles';
// import { colors } from './colors';
// const themeColors = {
// main: colors.darkblue[900],
// secondary: colors.darkblue[800],
// textColor: '#ffffffe6',
// hover: 'rgb(255, 255, 255, 0.7)',
// };
// export default createTheme({
// breakpoints: {
// values: {
// xs: 0,
// sm: 600,
// md: 960,
// lg: 1260,
// xl: 1536,
// },
// },
// boxShadows: {
// main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
// card: '0px 2px 10px rgba(28, 25, 78, 0.12)',
// elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
// popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
// primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
// separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
// },
// typography: {
// fontFamily: 'Sen, Roboto, sans-serif',
// fontWeightBold: '700',
// fontWeightMedium: '700',
// allVariants: { lineHeight: 1.4 },
// button: { lineHeight: 1.75 },
// h1: {
// fontSize: '1.5rem',
// lineHeight: 1.875,
// },
// h3: {
// fontSize: '1rem',
// fontWeight: '700',
// },
// caption: {
// fontSize: `${12 / 16}rem`,
// },
// },
// fontSizes: {
// largeHeader: '2.25rem',
// mainHeader: '1.25rem',
// bodySize: '1rem',
// smallBody: `${14 / 16}rem`,
// smallerBody: `${12 / 16}rem`,
// },
// fontWeight: {
// thin: 300,
// medium: 400,
// semi: 700,
// bold: 700,
// },
// shape: {
// borderRadius: 4,
// borderRadiusMedium: 8,
// borderRadiusLarge: 12,
// borderRadiusExtraLarge: 20,
// tableRowHeight: 64,
// tableRowHeightCompact: 56,
// tableRowHeightDense: 48,
// },
// palette: {
// primary: {
// main: themeColors.textColor,
// light: colors.purple[700],
// dark: colors.purple[900],
// },
// secondary: {
// main: colors.purple[800],
// light: colors.purple[700],
// dark: colors.purple[900],
// },
// info: {
// light: colors.blue[50],
// main: colors.blue[500],
// dark: colors.blue[700],
// border: colors.blue[200],
// },
// success: {
// light: colors.green[50],
// main: colors.green[600],
// dark: themeColors.main,
// border: colors.green[300],
// },
// warning: {
// light: colors.orange[100],
// main: colors.orange[800],
// dark: colors.orange[900],
// border: colors.orange[500],
// },
// error: {
// light: colors.red[50],
// main: colors.red[700],
// dark: colors.red[800],
// border: colors.red[300],
// },
// background: {
// paper: themeColors.main,
// },
// divider: themeColors.secondary,
// // dividerAlternative: colors.grey[400],
// tableHeaderHover: colors.darkblue[700],
// tableHeaderBackground: themeColors.secondary,
// tableHeaderColor: themeColors.textColor,
// highlight: '#FFEACC',
// secondaryContainer: themeColors.secondary,
// contentWrapper: colors.darkblue[800],
// formBackground: themeColors.main,
// formSidebar: colors.darkblue[1000],
// headerBackground: themeColors.main,
// footerBackground: themeColors.main,
// sidebarContainer: 'rgba(32,32,33, 0.2)',
// codebox: colors.darkblue[600],
// featureMetaData: colors.darkblue[1000],
// playgroundBackground: colors.darkblue[600],
// playgroundFormBackground: themeColors.secondary,
// standaloneBackground: colors.black,
// featureStrategySegmentChipBackground: themeColors.secondary,
// featureSegmentSearchBackground: themeColors.secondary,
// dialogHeaderBackground: themeColors.secondary,
// dialogHeaderText: themeColors.textColor,
// lightBorder: colors.darkblue[500],
// constraintAccordion: {
// editBackground: colors.darkblue[600],
// background: themeColors.secondary,
// operatorBackground: themeColors.main,
// },
// standaloneBannerGradient: {
// from: colors.darkblue[1000],
// to: colors.black,
// },
// projectCard: {
// hover: themeColors.secondary,
// textColor: themeColors.textColor,
// },
// formSidebarTextColor: themeColors.textColor,
// checkmarkBadge: themeColors.secondary,
// inputLabelBackground: 'transparent',
// grey: colors.grey,
// text: {
// primary: themeColors.textColor,
// secondary: colors.grey[800],
// disabled: colors.grey[600],
// },
// code: {
// main: '#0b8c8f',
// diffAdd: 'green',
// diffSub: 'red',
// diffNeutral: 'black',
// edited: 'blue',
// },
// neutral: {
// light: colors.darkblue[500],
// main: colors.grey[700],
// dark: colors.grey[800],
// border: colors.grey[500],
// },
// activityIndicators: {
// primary: themeColors.secondary,
// unknown: themeColors.secondary,
// recent: themeColors.secondary,
// inactive: themeColors.secondary,
// abandoned: themeColors.secondary,
// },
// // tertiary: {
// // light: themeColors.secondary,
// // main: colors.grey[400],
// // dark: colors.grey[600],
// // background: 'white',
// // contrast: colors.grey[300],
// // },
// inactiveIcon: colors.grey[600],
// },
// components: {
// MuiAppBar: {
// styleOverrides: {
// root: {
// color: themeColors.textColor,
// },
// },
// },
// MuiInputLabel: {
// styleOverrides: {
// root: {
// color: themeColors.textColor,
// },
// },
// },
// MuiIconButton: {
// styleOverrides: {
// root: {
// color: colors.grey[50],
// '&:hover': {
// backgroundColor: themeColors.hover,
// },
// '&.Mui-disabled': {
// '& .MuiSvgIcon-root': {
// color: colors.grey[700],
// },
// },
// },
// },
// },
// MuiLink: {
// styleOverrides: {
// root: {
// color: colors.grey[50],
// '&:hover': {
// textDecoration: 'none',
// },
// },
// },
// },
// MuiBreadcrumbs: {
// styleOverrides: {
// root: {
// color: themeColors.textColor,
// fontSize: '0.875rem',
// '& a': {
// color: themeColors.textColor,
// textDecoration: 'underline',
// '&:hover': {
// textDecoration: 'none',
// },
// },
// },
// },
// },
// MuiTableHead: {
// styleOverrides: {
// root: {
// background: 'transparent',
// '& th': {
// background: colors.grey[200],
// },
// },
// },
// },
// MuiTableRow: {
// styleOverrides: {
// root: {
// '&.MuiTableRow-hover:hover': {
// background: themeColors.secondary,
// },
// },
// },
// },
// MuiTableCell: {
// styleOverrides: {
// root: {
// borderBottomColor: themeColors.main,
// },
// },
// },
// 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 .MuiSvgIcon-root': {
// color: colors.blue[500],
// },
// },
// '&.MuiAlert-standardSuccess': {
// backgroundColor: colors.green[50],
// color: colors.green[800],
// border: `1px solid ${colors.green[300]}`,
// '& .MuiAlert-icon .MuiSvgIcon-root': {
// color: colors.green[500],
// },
// },
// '&.MuiAlert-standardWarning': {
// backgroundColor: colors.orange[100],
// color: colors.orange[900],
// border: `1px solid ${colors.orange[500]}`,
// '& .MuiAlert-icon .MuiSvgIcon-root': {
// color: colors.orange[800],
// },
// },
// '&.MuiAlert-standardError': {
// backgroundColor: colors.red[50],
// color: colors.red[800],
// border: `1px solid ${colors.red[300]}`,
// '& .MuiAlert-icon .MuiSvgIcon-root': {
// color: colors.red[700],
// },
// },
// },
// },
// },
// MuiButton: {
// styleOverrides: {
// root: {
// '&.Mui-disabled': {
// backgroundColor: colors.grey[400],
// },
// },
// },
// },
// MuiSvgIcon: {
// styleOverrides: {
// root: {
// color: themeColors.textColor,
// },
// },
// },
// MuiTabs: {
// styleOverrides: {
// root: {
// backgroundColor: themeColors.main,
// color: themeColors.textColor,
// '& .MuiTabs-indicator': {
// height: '4px',
// },
// },
// },
// },
// MuiTab: {
// styleOverrides: {
// root: {
// color: themeColors.textColor,
// fontSize: '1rem',
// textTransform: 'none',
// fontWeight: 400,
// minHeight: '62px',
// '&:hover': {
// backgroundColor: themeColors.secondary,
// },
// '&.Mui-selected': {
// color: themeColors.textColor,
// fontWeight: 700,
// },
// '& > span': {
// color: colors.purple[900],
// },
// },
// },
// },
// MuiAccordionSummary: {
// styleOverrides: {
// root: {
// '& > .MuiAccordionSummary-content.Mui-expanded': {
// margin: '12px 0',
// },
// },
// },
// },
// MuiSwitch: {
// styleOverrides: {
// switchBase: {
// zIndex: 1,
// '&:not(.Mui-checked) .MuiTouchRipple-child': {
// color: colors.grey['500'],
// },
// },
// },
// },
// MuiIcon: {
// styleOverrides: {
// root: {
// color: colors.grey[50],
// },
// colorDisabled: {
// color: colors.grey[50],
// },
// },
// },
// MuiMenu: {
// styleOverrides: {
// root: {
// '.MuiMenu-list': {
// backgroundColor: colors.darkblue[600],
// },
// },
// },
// },
// MuiMenuItem: {
// styleOverrides: {
// root: {
// '&.Mui-disabled': {
// opacity: 0.66,
// },
// '&:hover': {
// backgroundColor: themeColors.secondary,
// },
// },
// },
// },
// MuiInputBase: {
// styleOverrides: {
// root: {
// backgroundColor: colors.darkblue[1000],
// '.MuiSvgIcon-root': {
// color: '#fff',
// },
// },
// },
// },
// MuiPaper: {
// styleOverrides: {
// root: {
// backgroundColor: themeColors.main,
// color: themeColors.textColor,
// },
// },
// },
// },
// });

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

@ -1,7 +1,9 @@
import { createTheme } from '@mui/material/styles';
import { colors } from './colors';
import { alpha } from '@mui/material';
import { focusable } from 'themes/themeStyles';
export default createTheme({
const theme = {
breakpoints: {
values: {
xs: 0,
@ -17,7 +19,7 @@ export default createTheme({
elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
},
typography: {
fontFamily: 'Sen, Roboto, sans-serif',
@ -66,8 +68,8 @@ export default createTheme({
palette: {
common: {
// Used for text color
white: colors.grey[50],
white: colors.grey[50], // Tooltips text color // Switch base (OFF) // Text color
black: colors.grey[900], // Switch track (OFF)
},
text: {
primary: colors.grey[900],
@ -82,48 +84,50 @@ export default createTheme({
},
secondary: {
// Used for purple badges and puple light elements
light: colors.purple[50],
main: colors.purple[800],
dark: colors.purple[900],
light: colors.purple[50],
dark: colors.purple[900], // Color used for text
border: colors.purple[300],
contrastText: colors.purple[900], // Color used for text inside badge
},
info: {
light: colors.blue[50],
main: colors.blue[500],
dark: colors.blue[700],
contrastText: colors.grey[50], // Color used for content when info.main is used as a background
light: colors.blue[50],
dark: colors.blue[800], // Color used for text
border: colors.blue[200],
contrastText: colors.blue[800], // Color used for text inside alert
},
success: {
light: colors.green[50],
main: colors.green[600],
dark: colors.green[800],
contrastText: colors.grey[50], // Color used for content when success.main is used as a background
light: colors.green[50],
dark: colors.green[800], // Color used for text
border: colors.green[300],
contrastText: colors.green[800], // Color used for text inside alert
},
warning: {
light: colors.orange[100],
main: colors.orange[800],
dark: colors.orange[900],
contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
light: colors.orange[100],
dark: colors.orange[900], // Color used for text
border: colors.orange[500],
contrastText: colors.orange[900], // Color used for text inside alert
},
error: {
main: colors.red[700], // used on error buttons // used on icons on these elements
light: colors.red[50],
main: colors.red[700],
dark: colors.red[800],
contrastText: colors.grey[50], // Color used for content when error.main is used as a background
dark: colors.red[800], // Color used for text
border: colors.red[300],
contrastText: colors.red[800], // Color used for text inside alert
},
/**
* Used for grey badges, hover elements, and grey light elements
*/
neutral: {
light: colors.grey[100],
main: colors.grey[700],
light: colors.grey[100],
dark: colors.grey[800],
border: colors.grey[400],
contrastText: colors.grey[800], // Color used for text inside badge
},
background: {
@ -131,6 +135,7 @@ export default createTheme({
default: colors.grey[50],
application: colors.grey[300],
sidebar: colors.purple[800],
alternative: colors.purple[800], // used on the dark theme to shwitch primary main to a darker shade
elevation1: colors.grey[100],
elevation2: colors.grey[200],
},
@ -159,7 +164,6 @@ export default createTheme({
* Table colors.
*/
table: {
headerColor: colors.grey[900], //New - Is needed? ###CHECK
headerBackground: colors.grey[200],
headerHover: colors.grey[300],
divider: colors.grey[300],
@ -167,7 +171,7 @@ export default createTheme({
},
/**
* Text highlight effect color. Used when filtering/searching over content.
* Text highlight effect color. Used when filtering/searching over content
*/
highlight: colors.orange[200],
@ -176,6 +180,11 @@ export default createTheme({
*/
codebox: colors.action[0.12],
/**
* Links color
*/
links: colors.purple[900],
/**
* Gradient for the login page
*/
@ -185,7 +194,7 @@ export default createTheme({
},
/**
* Colors for event log output.
* Colors for event log output
*/
eventLog: {
diffAdd: colors.green[800],
@ -194,7 +203,7 @@ export default createTheme({
},
/**
* For 'Seen' column on feature toggles list and other.
* For 'Seen' column on feature toggles list and other
*/
seen: {
unknown: colors.grey[100],
@ -203,14 +212,66 @@ export default createTheme({
abandoned: colors.red[200],
primary: colors.purple[100],
},
},
/**
* For Environment Accordion.
*/
envAccordion: {
disabled: colors.grey[100],
expanded: colors.grey[200],
},
/**
* MUI grey colors
*/
grey: {
// This was to see were these colors are used from MUI
// 50: '#A6000E',
100: colors.grey[100], // Disabled Switch base (OFF)
// 200: '#A6000E',
// 300: '#A6000E',
// 400: '#A6000E',
// 500: '#A6000E',
600: colors.grey[800], // slider tooltip background
700: colors.grey[800], // Dark tooltip background
// 800: '#A6000E',
// 900: '#A6000E',
// A100: '#A6000E',
// A200: '#A6000E',
// A400: '#A6000E',
// A700: '#A6000E',
},
},
};
export default createTheme({
...theme,
components: {
// Skeleton
MuiCssBaseline: {
styleOverrides: {
'.skeleton': {
'&::before': {
backgroundColor: theme.palette.background.elevation1,
},
'&::after': {
background:
'linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0))',
},
},
a: {
color: theme.palette.links,
},
},
},
// Links
MuiLink: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.primary.dark,
...focusable(theme),
color: theme.palette.links,
'&:hover': {
textDecoration: 'none',
},
@ -225,7 +286,7 @@ export default createTheme({
color: theme.palette.text.primary,
fontSize: '0.875rem',
'& a': {
color: theme.palette.primary.dark,
color: theme.palette.links,
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
@ -239,7 +300,6 @@ export default createTheme({
MuiTableHead: {
styleOverrides: {
root: ({ theme }) => ({
// background: 'transparent',
'& th': {
height: theme.shape.tableRowHeightCompact,
backgroundColor: theme.palette.table.headerBackground,
@ -281,10 +341,19 @@ export default createTheme({
MuiAlert: {
styleOverrides: {
root: ({ theme }) => ({
padding: theme.spacing(2, 3),
borderRadius: theme.shape.borderRadiusMedium,
a: {
color: 'inherit',
},
'> .MuiAlert-icon': {
padding: 0,
opacity: 1,
fontSize: '24px',
},
'> .MuiAlert-message': {
padding: '3px 0 0 0',
},
'&.MuiAlert-standardInfo': {
backgroundColor: theme.palette.info.light,
color: theme.palette.info.dark,
@ -345,7 +414,7 @@ export default createTheme({
lineHeight: '1',
minHeight: '62px',
'&:hover': {
backgroundColor: theme.palette.background.elevation2,
backgroundColor: theme.palette.action.hover,
},
'&.Mui-selected': {
color: theme.palette.text.primary,
@ -361,12 +430,22 @@ export default createTheme({
},
},
// Constraint accordion / cards
// Environment accordion
MuiAccordion: {
styleOverrides: {
root: ({ theme }) => ({
'&:first-of-type, &:last-of-type': {
borderRadius: theme.shape.borderRadiusMedium,
borderRadius: theme.shape.borderRadiusLarge,
},
'&.environment-accordion.Mui-expanded': {
outline: `2px solid ${alpha(
theme.palette.background.alternative,
0.6
)}`,
boxShadow: `0px 2px 8px ${alpha(
theme.palette.primary.main,
0.2
)}`,
},
}),
},
@ -384,19 +463,20 @@ export default createTheme({
},
},
// Project overview, improve toggle/switch disabled focus effect color
// Project overview, improve switch (OFF - state) focus effect color
MuiSwitch: {
styleOverrides: {
root: ({ theme }) => ({
zIndex: 1,
'&:not(.Mui-checked) .MuiTouchRipple-child': {
color: theme.palette.neutral.border,
},
'.MuiSwitch-switchBase:not(.Mui-checked) .MuiTouchRipple-child':
{
color: theme.palette.action.disabled,
},
}),
},
},
// Overwiteing the action.disabledOpacity from MU
// Overwiteing the action.disabledOpacity from MUI
MuiMenuItem: {
styleOverrides: {
root: {

1
frontend/src/themes/themeStyles.ts
View File

@ -9,6 +9,7 @@ export const focusable = (theme: Theme) => ({
outlineWidth: 2,
outlineOffset: 2,
outlineColor: theme.palette.primary.main,
borderRadius: '2px',
},
});

35
frontend/src/themes/themeTypes.ts
View File

@ -34,15 +34,14 @@ declare module '@mui/material/styles' {
interface CustomPalette {
/**
* Generic neutral palette color.
* Generic neutral palette color
*/
neutral: PaletteColorOptions;
/**
* Table colors.
* Table colors
*/
table: {
headerColor: string;
headerBackground: string;
headerHover: string;
divider: string;
@ -50,7 +49,7 @@ declare module '@mui/material/styles' {
};
/**
* Colors for event log output.
* Colors for event log output
*/
eventLog: {
diffAdd: string;
@ -59,7 +58,7 @@ declare module '@mui/material/styles' {
};
/**
* For 'Seen' column on feature toggles list and other.
* For 'Seen' column on feature toggles list and other
*/
seen: {
unknown: string;
@ -69,8 +68,6 @@ declare module '@mui/material/styles' {
primary: string;
};
// dividerAlternative: string;
/**
* Background color for the API command in the sidebar
*/
@ -85,9 +82,22 @@ declare module '@mui/material/styles' {
};
/**
* Text highlight effect color. Used when filtering/searching over content.
* Text highlight effect color. Used when filtering/searching over content
*/
highlight: string;
/**
* For Links
*/
links: string;
/**
* For Environment Accordion
*/
envAccordion: {
disabled: string;
expanded: string;
};
}
interface Theme extends CustomTheme {}
@ -102,23 +112,24 @@ declare module '@mui/material/styles' {
interface CustomTypeBackground {
application: string;
sidebar: string;
alternative: string;
elevation1: string;
elevation2: string;
}
interface PaletteColor {
light: string;
main: string;
light: string;
dark: string;
contrastText: string;
border?: string;
contrastText: string;
}
interface PaletteColorOptions {
light?: string;
main?: string;
light?: string;
dark?: string;
contrastText?: string;
border?: string;
contrastText?: string;
}
}