Merge branch 'refs/heads/preview/NU-1633-fixes-related-to-color-chang…

…es' into preview/esp-pre-release-preview

# Conflicts:
#	designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Fragment should allow adding input parameters and display used fragment graph in modal #5.png
#	designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Process view should have node search toolbar #0.png
#	designer/client/cypress/e2e/__image_snapshots__/electron/Linux/Process view should have node search toolbar #2.png

designer/client/README.md

@@ -183,3 +183,15 @@ We use `react-i18next` package for internalizations. This mechanism has priority
 2. `default` passed as an argument
 
 File `translations/$lng/main.json` is generated in `prebuild` phase based on defaults. During development (`start` scripts) is removed to avoid confusions.
+
+# Theme customization
+
+We utilize the [Mui theme](https://mui.com/material-ui/customization/default-theme) for style customization. There are two themes:
+
+-   Designer [client theme](./src/containers/theme/nuTheme.tsx)
+-   Designer [components theme](../submodules/packages/components/src/common/defaultTheme.tsx)
+    The components theme inherits the client theme
+
+## Theme colors customization
+
+All Colors are stored in the [modePalette](./src/containers/theme/darkModePalette.ts), Currently, only dark mode palette support is available.

designer/client/src/components/ComponentPreview.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from "@emotion/css";
 import React from "react";
 import { NodeType } from "../types";
-import { BORDER_RADIUS, CONTENT_PADDING, iconBackgroundSize, iconSize, portSize, RECT_HEIGHT, RECT_WIDTH } from "./graph/EspNode/esp";
+import { BORDER_RADIUS, CONTENT_PADDING, iconBackgroundSize, iconSize, RECT_HEIGHT, RECT_WIDTH } from "./graph/EspNode/esp";
 import NodeUtils from "./graph/NodeUtils";
 import { ComponentIcon } from "./toolbars/creator/ComponentIcon";
 import { alpha, styled, useTheme } from "@mui/material";
@@ -59,7 +59,7 @@ export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; i
 
     const ContentStyled = styled("div")(({ theme }) => ({
         color: theme.palette.text.primary,
-        fontSize: theme.typography.caption.fontSize,
+        fontSize: theme.typography.body1.fontSize,
         flex: 1,
         whiteSpace: "nowrap",
         display: "flex",
@@ -89,8 +89,8 @@ export function ComponentPreview({ node, isActive, isOver }: { node: NodeType; i
 }
 
 const Port = ({ className }: { className?: string }) => {
-    const size = portSize * 2;
-    const position = size * 2;
+    const size = 24;
+    const position = size / 2;
     const port = css({
         width: size,
         height: size,

designer/client/src/components/MenuBar/menu.tsx

@@ -18,7 +18,7 @@ const PlainButton = styled("button")({
     outline: "unset",
     padding: "unset",
     margin: "unset",
-    "&, &:focus": {
+    "&:focus": {
         outline: "unset",
     },
 });

designer/client/src/components/modals/MoreScenarioDetailsDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, styled, Typography } from "@mui/material";
+import { Box, styled, SvgIcon, Typography } from "@mui/material";
 import { WindowButtonProps, WindowContentProps } from "@touk/window-manager";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,13 +9,15 @@ import moment from "moment";
 import i18next from "i18next";
 import { capitalize, startCase } from "lodash";
 import { ProcessingMode } from "../../http/HttpService";
+import NuLogoIcon from "../../assets/img/nuLogoIcon.svg";
 
 const ItemWrapperStyled = styled("div")({ display: "grid", gridAutoColumns: "minmax(0, 1fr)", gridAutoFlow: "column" });
 
 const ItemLabelStyled = styled(Typography)({ display: "flex", justifyContent: "flex-end", marginRight: "8px" });
 
 ItemLabelStyled.defaultProps = {
-    variant: "subtitle2",
+    variant: "caption",
+    fontWeight: 300,
 };
 
 interface Props {
@@ -59,39 +61,45 @@ function MoreScenarioDetailsDialog(props: WindowContentProps<WindowKind, Props>)
             buttons={buttons}
             components={{
                 Content: () => (
-                    <Box width={"400px"} mx={"auto"}>
-                        <Typography textAlign={"center"} variant={"subtitle1"}>
+                    <Box width={"500px"} mx={"auto"} p={2}>
+                        <Box display={"flex"} justifyContent={"center"} mb={2}>
+                            <SvgIcon color={"primary"} fontSize={"large"}>
+                                <NuLogoIcon />
+                            </SvgIcon>
+                        </Box>
+
+                        <Typography component={"div"} textAlign={"center"} variant={"caption"} fontWeight={"li"}>
                             {i18next.t("scenarioDetails.header", "Nussknacker scenario:")}
                         </Typography>
-                        <Typography textAlign={"center"} variant={"subtitle1"}>
+                        <Typography sx={{ wordWrap: "break-word" }} textAlign={"center"} variant={"subtitle2"}>
                             {scenario.name}
                         </Typography>
-                        <Box display={"flex"} flexDirection={"column"} mt={4} mb={6}>
+                        <Box display={"flex"} flexDirection={"column"} mt={3} mb={3}>
                             {displayStatus && (
                                 <ItemWrapperStyled>
                                     <ItemLabelStyled>{i18next.t("scenarioDetails.label.status", "Status")}</ItemLabelStyled>
-                                    <Typography variant={"body2"}>{capitalize(startCase(processState.status.name))}</Typography>
+                                    <Typography variant={"caption"}>{capitalize(startCase(processState.status.name))}</Typography>
                                 </ItemWrapperStyled>
                             )}
                             <ItemWrapperStyled>
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.processingMode", "Processing mode")}</ItemLabelStyled>
-                                <Typography variant={"body2"}>{processingModeVariantName}</Typography>
+                                <Typography variant={"caption"}>{processingModeVariantName}</Typography>
                             </ItemWrapperStyled>
                             <ItemWrapperStyled>
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.category", "Category")}</ItemLabelStyled>
-                                <Typography variant={"body2"}>{scenario.processCategory}</Typography>
+                                <Typography variant={"caption"}>{scenario.processCategory}</Typography>
                             </ItemWrapperStyled>
                             <ItemWrapperStyled>
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.engine", "Engine")}</ItemLabelStyled>
-                                <Typography variant={"body2"}>{scenario.engineSetupName}</Typography>
+                                <Typography variant={"caption"}>{scenario.engineSetupName}</Typography>
                             </ItemWrapperStyled>
                             <ItemWrapperStyled>
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.created", "Created")}</ItemLabelStyled>
-                                <Typography variant={"body2"}>{moment(scenario.createdAt).format(DATE_FORMAT)}</Typography>
+                                <Typography variant={"caption"}>{moment(scenario.createdAt).format(DATE_FORMAT)}</Typography>
                             </ItemWrapperStyled>
                             <ItemWrapperStyled>
                                 <ItemLabelStyled>{i18next.t("scenarioDetails.label.lastModified", "Last modified")}</ItemLabelStyled>
-                                <Typography variant={"body2"}>{moment(scenario.modifiedAt).format(DATE_FORMAT)}</Typography>
+                                <Typography variant={"caption"}>{moment(scenario.modifiedAt).format(DATE_FORMAT)}</Typography>
                             </ItemWrapperStyled>
                         </Box>
                     </Box>

designer/client/src/stylesheets/SelectStyled.ts

@@ -111,7 +111,7 @@ export const selectStyled = (theme: Theme) => {
         ${base};
         color: ${theme.palette.text.secondary};
         :hover {
-            color: ${theme.palette.text.secondary};
+            color: ${theme.palette.text.secondary}; // It overwrites default react-select hover color
         }
     `;
 

designer/client/webpack.config.ts

@@ -149,7 +149,7 @@ const config: Configuration = {
             //see ./config.ts
             base: isProd ? "__publicPath__/static/" : "/",
             filename: "main.html",
-            favicon: "src/assets/img/favicon.svg",
+            favicon: "src/assets/img/nuLogoIcon.svg",
             meta: {
                 viewport: "user-scalable = no",
             },

docs/MigrationGuide.md

@@ -80,6 +80,7 @@ To see the biggest differences please consult the [changelog](Changelog.md).
   and [Kafka connector-specific docs](https://nightlies.apache.org/flink/flink-docs-stable/docs/connectors/datastream/kafka/#idleness)
 * [#5875](https://github.com/TouK/nussknacker/pull/5875) Removed `useNamingStrategyForConsumerGroupId` feature flag
   allowing for disabling namespaced Kafka consumer groups
+* [#5848](https://github.com/TouK/nussknacker/pull/5848): Introduced a new method for handling colors, aimed at simplifying customization. Now, all colors are centrally stored in a single location. Refer to [README.md](../designer/client/README.md#Theme-colors-customization) for details on theme colors customization.
 
 ## In version 1.14.0