diff --git a/frontend/src/assets/icons/logoBg.svg b/frontend/src/assets/icons/logoBg.svg index b79f917031..5de3f95cbf 100644 --- a/frontend/src/assets/icons/logoBg.svg +++ b/frontend/src/assets/icons/logoBg.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/assets/icons/logoWhiteBg.svg b/frontend/src/assets/icons/logoWhiteBg.svg index f888d4a288..812527bc2b 100644 --- a/frontend/src/assets/icons/logoWhiteBg.svg +++ b/frontend/src/assets/icons/logoWhiteBg.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx b/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx index ce7a6ea9f4..13e2d0f241 100644 --- a/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx +++ b/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx @@ -10,13 +10,18 @@ import { RequestsPerSecondSchemaDataResultItem, } from 'openapi'; import logoIcon from 'assets/icons/logoBg.svg'; +import logoWhiteIcon from 'assets/icons/logoWhiteBg.svg'; import { formatAssetPath } from 'utils/formatPath'; +import { useThemeMode } from 'hooks/useThemeMode'; const StyledMermaid = styled(Mermaid)(({ theme }) => ({ '#mermaid .node rect': { fill: theme.palette.secondary.light, stroke: theme.palette.secondary.border, }, + '#mermaid .unleash-logo': { + padding: theme.spacing(1), + }, })); const isRecent = (value: ResultValue) => { @@ -79,6 +84,7 @@ const toGraphData = (metrics?: RequestsPerSecondSchema) => { export const NetworkOverview = () => { usePageTitle('Network - Overview'); + const { themeMode } = useThemeMode(); const { metrics } = useInstanceMetrics(); const apps = useMemo(() => { return toGraphData(metrics); @@ -89,8 +95,8 @@ export const NetworkOverview = () => { subgraph _[ ] direction BT Unleash(
Unleash) + themeMode === 'dark' ? logoWhiteIcon : logoIcon + )}' width='72' height='72' class='unleash-logo'/>
Unleash) ${apps .map( ({ label, reqs, type }, i) => diff --git a/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx b/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx index 5bcc720019..dafdca5dc6 100644 --- a/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx +++ b/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx @@ -18,16 +18,18 @@ import { ILocationSettings, useLocationSettings, } from 'hooks/useLocationSettings'; -import theme from 'themes/theme'; import { formatDateHM } from 'utils/formatDate'; import { RequestsPerSecondSchema } from 'openapi'; import 'chartjs-adapter-date-fns'; -import { Alert } from '@mui/material'; +import { Alert, useTheme } from '@mui/material'; import { Box } from '@mui/system'; import { CyclicIterator } from 'utils/cyclicIterator'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { usePageTitle } from 'hooks/usePageTitle'; import { unknownify } from 'utils/unknownify'; +import { Theme } from '@mui/material/styles/createTheme'; + +const pointStyles = ['circle', 'rect', 'rectRounded', 'rectRot', 'triangle']; interface IPoint { x: number; @@ -49,6 +51,7 @@ const createChartPoints = ( }; const createInstanceChartOptions = ( + theme: Theme, locationSettings: ILocationSettings ): ChartOptions<'line'> => ({ locale: locationSettings.locale, @@ -58,6 +61,7 @@ const createInstanceChartOptions = ( mode: 'index', intersect: false, }, + color: theme.palette.text.secondary, plugins: { tooltip: { backgroundColor: theme.palette.background.paper, @@ -78,12 +82,13 @@ const createInstanceChartOptions = ( itemSort: (a, b) => b.parsed.y - a.parsed.y, }, legend: { - position: 'top', - align: 'end', + position: 'bottom', + align: 'start', labels: { boxWidth: 10, boxHeight: 10, usePointStyle: true, + padding: 24, }, }, title: { @@ -95,6 +100,10 @@ const createInstanceChartOptions = ( size: 16, weight: '400', }, + color: theme.palette.text.primary, + padding: { + bottom: 32, + }, }, }, scales: { @@ -103,15 +112,24 @@ const createInstanceChartOptions = ( title: { display: true, text: 'Requests per second', + color: theme.palette.text.secondary, }, // min: 0, suggestedMin: 0, - ticks: { precision: 0 }, + ticks: { precision: 0, color: theme.palette.text.secondary }, + grid: { + color: theme.palette.divider, + borderColor: theme.palette.divider, + }, }, x: { type: 'time', time: { unit: 'minute' }, - grid: { display: true }, + grid: { + display: true, + color: theme.palette.divider, + borderColor: theme.palette.divider, + }, ticks: { callback: (_, i, data) => formatDateHM(data[i].value * 1000, locationSettings.locale), @@ -135,7 +153,10 @@ class ItemPicker { } } -const toChartData = (rps?: RequestsPerSecondSchema): ChartDatasetType[] => { +const toChartData = ( + theme: Theme, + rps?: RequestsPerSecondSchema +): ChartDatasetType[] => { if (rps?.data?.result) { const colorPicker = new ItemPicker([ theme.palette.success, @@ -143,7 +164,7 @@ const toChartData = (rps?: RequestsPerSecondSchema): ChartDatasetType[] => { theme.palette.primary, theme.palette.warning, ]); - return rps.data.result.map(dataset => { + return rps.data.result.map((dataset, i) => { const endpoint = unknownify(dataset.metric?.endpoint); const appName = unknownify(dataset.metric?.appName); const color = colorPicker.pick(endpoint); @@ -156,7 +177,7 @@ const toChartData = (rps?: RequestsPerSecondSchema): ChartDatasetType[] => { elements: { point: { radius: 4, - pointStyle: 'circle', + pointStyle: pointStyles[i % pointStyles.length], }, line: { borderDash: [8, 4], @@ -171,15 +192,16 @@ const toChartData = (rps?: RequestsPerSecondSchema): ChartDatasetType[] => { export const NetworkTraffic: VFC = () => { const { locationSettings } = useLocationSettings(); const { metrics } = useInstanceMetrics(); + const theme = useTheme(); const options = useMemo(() => { - return createInstanceChartOptions(locationSettings); - }, [locationSettings]); + return createInstanceChartOptions(theme, locationSettings); + }, [theme, locationSettings]); usePageTitle('Network - Traffic'); const data = useMemo(() => { - return { datasets: toChartData(metrics) }; - }, [metrics, locationSettings]); + return { datasets: toChartData(theme, metrics) }; + }, [theme, metrics, locationSettings]); return ( ({ marginRight: 'auto', padding: theme.spacing(2, 3), backgroundColor: theme.palette.background.paper, - border: `1px solid ${theme.palette.secondary.main}`, + border: `1px solid ${theme.palette.background.alternative}`, borderRadius: theme.shape.borderRadiusLarge, gap: theme.spacing(1), flexWrap: 'wrap', })); const StyledCount = styled('span')(({ theme }) => ({ - background: theme.palette.secondary.main, + background: theme.palette.background.alternative, color: theme.palette.common.white, padding: theme.spacing(0.5, 1), borderRadius: theme.shape.borderRadius, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx index 3fd9092672..4f52a78abb 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx @@ -1,4 +1,4 @@ -import { Box, Tooltip, useTheme } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg'; import { ReactComponent as NegatedIconOff } from 'assets/icons/24_Negator off.svg'; import { IConstraint } from 'interfaces/strategy'; diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx index 1791bffdee..f582969e14 100644 --- a/frontend/src/component/common/HelpIcon/HelpIcon.tsx +++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx @@ -1,5 +1,6 @@ import { styled, Tooltip, TooltipProps } from '@mui/material'; import { HelpOutline } from '@mui/icons-material'; +import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; const StyledContainer = styled('span')(({ theme }) => ({ display: 'inline-grid', @@ -22,12 +23,28 @@ const StyledContainer = styled('span')(({ theme }) => ({ })); interface IHelpIconProps { - tooltip: string; + tooltip: React.ReactNode; + htmlTooltip?: boolean; placement?: TooltipProps['placement']; children?: React.ReactNode; } -export const HelpIcon = ({ tooltip, placement, children }: IHelpIconProps) => { +export const HelpIcon = ({ + tooltip, + htmlTooltip, + placement, + children, +}: IHelpIconProps) => { + if (htmlTooltip) { + return ( + + + {children ?? } + + + ); + } + return ( diff --git a/frontend/src/component/common/Mermaid/Mermaid.tsx b/frontend/src/component/common/Mermaid/Mermaid.tsx index c156a2fa74..65738518bf 100644 --- a/frontend/src/component/common/Mermaid/Mermaid.tsx +++ b/frontend/src/component/common/Mermaid/Mermaid.tsx @@ -5,8 +5,25 @@ import { useRef, useEffect } from 'react'; const StyledMermaid = styled('div')(({ theme }) => ({ display: 'flex', justifyContent: 'center', - '#mermaid .edgeLabel': { - backgroundColor: theme.palette.background.paper, + '#mermaid': { + '.edgeLabel': { + backgroundColor: theme.palette.background.paper, + color: theme.palette.text.primary, + }, + '.nodeLabel': { + color: theme.palette.secondary.dark, + }, + '.edgePaths > path': { + stroke: theme.palette.secondary.dark, + }, + '.arrowMarkerPath': { + fill: theme.palette.secondary.dark, + stroke: 'transparent', + }, + }, + '&&& #mermaid .node rect': { + stroke: theme.palette.secondary.border, + fill: theme.palette.secondary.light, }, })); diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx index 9d5bc5bb30..a02c380441 100644 --- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx +++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx @@ -56,7 +56,7 @@ const Toast = ({ title, text, type, confetti }: IToast) => { }; return ( -
+
{confetti && renderConfetti()} diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx index 8a1df2b340..f37a53d94e 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx @@ -6,7 +6,7 @@ import { FeatureMetricsHours, } from './FeatureMetricsHours/FeatureMetricsHours'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; -import { Grid, styled } from '@mui/material'; +import { Grid } from '@mui/material'; import { FeatureMetricsContent } from './FeatureMetricsContent/FeatureMetricsContent'; import { useQueryStringNumberState } from 'hooks/useQueryStringNumberState'; import { useQueryStringState } from 'hooks/useQueryStringState'; @@ -16,12 +16,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { usePageTitle } from 'hooks/usePageTitle'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; -const StyledContainer = styled('div')(({ theme }) => ({ - [theme.breakpoints.down('md')]: { - marginTop: theme.spacing(2), - }, -})); - export const FeatureMetrics = () => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); @@ -62,12 +56,7 @@ export const FeatureMetrics = () => { return ( - + 0} @@ -95,12 +84,10 @@ export const FeatureMetrics = () => { /> - - - + { + const theme = useTheme(); const { locationSettings } = useLocationSettings(); const sortedMetrics = useMemo(() => { @@ -37,12 +39,17 @@ export const FeatureMetricsChart = ({ }, [metrics]); const options = useMemo(() => { - return createChartOptions(sortedMetrics, hoursBack, locationSettings); - }, [sortedMetrics, hoursBack, locationSettings]); + return createChartOptions( + theme, + sortedMetrics, + hoursBack, + locationSettings + ); + }, [theme, sortedMetrics, hoursBack, locationSettings]); const data = useMemo(() => { - return createChartData(sortedMetrics, locationSettings); - }, [sortedMetrics, locationSettings]); + return createChartData(theme, sortedMetrics, locationSettings); + }, [theme, sortedMetrics, locationSettings]); return (
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts index 907e9018ce..feee76a510 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts @@ -1,8 +1,8 @@ import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { ChartData } from 'chart.js'; import { ILocationSettings } from 'hooks/useLocationSettings'; -import theme from 'themes/theme'; import 'chartjs-adapter-date-fns'; +import { Theme } from '@mui/material/styles/createTheme'; interface IPoint { x: string; @@ -10,6 +10,7 @@ interface IPoint { } export const createChartData = ( + theme: Theme, metrics: IFeatureMetricsRaw[], locationSettings: ILocationSettings ): ChartData<'line', IPoint[], string> => { diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts index 638b2a1ec3..29eb1e4334 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts @@ -2,10 +2,11 @@ import { ILocationSettings } from 'hooks/useLocationSettings'; import 'chartjs-adapter-date-fns'; import { ChartOptions, defaults } from 'chart.js'; import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; -import theme from 'themes/theme'; import { formatDateHM } from 'utils/formatDate'; +import { Theme } from '@mui/material/styles/createTheme'; export const createChartOptions = ( + theme: Theme, metrics: IFeatureMetricsRaw[], hoursBack: number, locationSettings: ILocationSettings @@ -18,6 +19,7 @@ export const createChartOptions = ( mode: 'index', intersect: false, }, + color: theme.palette.text.secondary, plugins: { tooltip: { backgroundColor: theme.palette.background.paper, @@ -56,6 +58,7 @@ export const createChartOptions = ( size: 16, weight: '400', }, + color: theme.palette.text.primary, }, }, scales: { @@ -64,10 +67,15 @@ export const createChartOptions = ( title: { display: true, text: 'Number of requests', + color: theme.palette.text.secondary, }, // min: 0, suggestedMin: 0, - ticks: { precision: 0 }, + ticks: { precision: 0, color: theme.palette.text.secondary }, + grid: { + color: theme.palette.divider, + borderColor: theme.palette.divider, + }, }, x: { type: 'time', @@ -76,6 +84,7 @@ export const createChartOptions = ( ticks: { callback: (_, i, data) => formatDateHM(data[i].value, locationSettings.locale), + color: theme.palette.text.secondary, }, }, }, diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx index 52cfcfed8f..c3275af9cf 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx @@ -11,7 +11,7 @@ interface IFeatureMetricsChipsProps { const StyledTitle = styled('h2')(({ theme }) => ({ margin: 0, - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(1.5), fontSize: theme.fontSizes.smallBody, fontWeight: theme.fontWeight.thin, color: theme.palette.text.secondary, diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx index 004075305b..917dd6d04b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx @@ -2,7 +2,6 @@ import { FeatureMetricsTable } from '../FeatureMetricsTable/FeatureMetricsTable' import { IFeatureMetricsRaw } from 'interfaces/featureToggle'; import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw'; import { Box, Typography } from '@mui/material'; -import theme from 'themes/theme'; import { useId } from 'hooks/useId'; import React, { Suspense } from 'react'; @@ -35,12 +34,7 @@ export const FeatureMetricsContent = ({ return ( - + ({ + margin: 0, + marginBottom: theme.spacing(1), + fontSize: theme.fontSizes.smallBody, + fontWeight: theme.fontWeight.thin, + color: theme.palette.text.secondary, +})); + interface IFeatureMetricsHoursProps { hoursBack: number; setHoursBack: (value: number) => void; @@ -18,15 +27,17 @@ export const FeatureMetricsHours = ({ }; return ( - +
+ Period + +
); }; diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx index 9171d5a8ac..44eea60642 100644 --- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx +++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx @@ -1,11 +1,18 @@ import { useContext, useMemo, useState } from 'react'; -import { Box, Button, IconButton, Tooltip, useTheme } from '@mui/material'; +import { + Box, + Button, + IconButton, + Tooltip, + useTheme, + styled, +} from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg'; +import { ReactComponent as UnleashLogo } from 'assets/icons/logoBg.svg'; +import { ReactComponent as UnleashLogoWhite } from 'assets/icons/logoWhiteBg.svg'; import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { - contentSpacingY, fadeInTopEnter, fadeInTopLeave, fadeInTopStart, @@ -17,6 +24,13 @@ import { } from 'component/feedback/FeedbackNPS/showNPSFeedback'; import { useAuthFeedback } from 'hooks/api/getters/useAuth/useAuthFeedback'; import { useAuthFeedbackApi } from 'hooks/api/actions/useAuthFeedbackApi/useAuthFeedbackApi'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; + +const StyledHeader = styled('h3')(({ theme }) => ({ + margin: 0, + color: theme.palette.text.primary, + marginLeft: theme.spacing(1), +})); interface IFeedbackNPSProps { openUrl: string; @@ -77,12 +91,13 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => { leave={animations.leave} > @@ -90,35 +105,37 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => { sx={{ display: 'flex', flexDirection: 'column', + rowGap: theme.spacing(1.5), position: 'relative', - ...contentSpacingY(theme), }} > ({ position: 'absolute', - right: '-38px', - top: '-47px', - backgroundColor: theme.palette.background.paper, - boxShadow: theme.boxShadows.elevated, - '&:hover': { - backgroundColor: - theme.palette.background.paper, - }, - }} + right: theme.spacing(-4), + top: theme.spacing(-4), + })} onClick={() => setShowFeedback(false)} size="large" > - + > + } + lightmode={} + /> + Unleash feedback + + { } /> - + ({ fontWeight: theme.fontWeight.bold, @@ -13,8 +12,9 @@ const StyledDescription = styled(Typography)(({ theme }) => ({ })); export const CollaborationModeTooltip: FC = () => ( - open: @@ -31,9 +31,5 @@ export const CollaborationModeTooltip: FC = () => ( } - arrow - describeChild - > - - + /> ); diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index d8193e431b..5c8204627c 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -140,10 +140,15 @@ const ProjectForm: React.FC = ({ condition={Boolean(projectModeFlag)} show={ <> - - - What is your project collaboration mode? - + +

What is your project collaboration mode?