diff --git a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
index 6d5a5e4dc9..a366c2bcaa 100644
--- a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
+++ b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
@@ -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={
({
}));
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 = ({
diff --git a/frontend/src/component/user/common/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout.tsx
index 03d83378fa..a58571a168 100644
--- a/frontend/src/component/user/common/StandaloneLayout.tsx
+++ b/frontend/src/component/user/common/StandaloneLayout.tsx
@@ -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 }) => ({
diff --git a/frontend/src/hooks/useThemeMode.ts b/frontend/src/hooks/useThemeMode.ts
index 7a9390f2d9..3622a461f0 100644
--- a/frontend/src/hooks/useThemeMode.ts
+++ b/frontend/src/hooks/useThemeMode.ts
@@ -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') {
diff --git a/frontend/src/themes/app.css b/frontend/src/themes/app.css
index ec35a37efc..37afba4776 100644
--- a/frontend/src/themes/app.css
+++ b/frontend/src/themes/app.css
@@ -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 {
diff --git a/frontend/src/themes/colors.ts b/frontend/src/themes/colors.ts
index 45a7fe10f7..3cff2a77a8 100644
--- a/frontend/src/themes/colors.ts
+++ b/frontend/src/themes/colors.ts
@@ -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',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index a08487cb7d..d362ccd910 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -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,
-// },
-// },
-// },
-// },
-// });
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 251e46a3bb..12fa9f1872 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -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: {
diff --git a/frontend/src/themes/themeStyles.ts b/frontend/src/themes/themeStyles.ts
index 923de4e369..895f618fbd 100644
--- a/frontend/src/themes/themeStyles.ts
+++ b/frontend/src/themes/themeStyles.ts
@@ -9,6 +9,7 @@ export const focusable = (theme: Theme) => ({
outlineWidth: 2,
outlineOffset: 2,
outlineColor: theme.palette.primary.main,
+ borderRadius: '2px',
},
});
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index 93b90bceee..8db59d7a57 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -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;
}
}