NU-1464 style fixes

TouK · Apr 10, 2024 · 722543b · 722543b
1 parent 9a6da92
commit 722543b
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 63 deletions.
diff --git a/designer/client/federation.config.json b/designer/client/federation.config.json
@@ -4,6 +4,7 @@
         "./config": "./src/config",
         "./HttpService": "./src/http/HttpService",
         "./Auth": "./src/containers/Auth/AuthInitializer",
-        "./Icon": "./src/components/UrlIcon"
+        "./Icon": "./src/components/UrlIcon",
+        "./themeHelpers": "./src/containers/theme/helpers"
     }
 }
diff --git a/designer/client/src/components/AddProcessForm.tsx b/designer/client/src/components/AddProcessForm.tsx
@@ -5,7 +5,7 @@ import ValidationLabels from "./modals/ValidationLabels";
 import { NodeTable } from "./graph/node-modal/NodeDetailsContent/NodeTable";
 import { NodeInput, SelectNode } from "./FormElements";
 import { getValidationErrorsForField } from "./graph/node-modal/editors/Validators";
-import { FormControl, FormGroup, FormHelperText, FormLabel, Link, Typography } from "@mui/material";
+import { Box, FormControl, FormGroup, FormHelperText, FormLabel, Link, Typography } from "@mui/material";
 import { Trans, useTranslation } from "react-i18next";
 import StreamingIcon from "../assets/img/streaming.svg";
 import RequestResponseIcon from "../assets/img/request-response.svg";
@@ -14,6 +14,7 @@ import { CustomRadio } from "./customRadio/CustomRadio";
 import { ProcessingMode } from "../http/HttpService";
 import { NodeValidationError } from "../types";
 import { isEmpty } from "lodash";
+import { Option, TypeSelect } from "./graph/node-modal/fragment-input-definition/TypeSelect";
 
 export type FormValue = { processName: string; processCategory: string; processingMode: string; processEngine: string };
 
@@ -53,6 +54,13 @@ export function AddProcessForm({
         [handleSetTouched, touched],
     );
 
+    const categoryOptions: Option[] = [
+        { value: "", label: "" },
+        ...categories.map((category) => ({ value: category.value, label: category.value })),
+    ];
+
+    const engineOptions: Option[] = [{ value: "", label: "" }, ...engines.map((engine) => ({ value: engine, label: engine }))];
+
     return (
         <div
             className={cx(
@@ -142,33 +150,21 @@ export function AddProcessForm({
                 {!isEmpty(categories) && (
                     <FormControl>
                         <FormLabel required>{t("addProcessForm.label.category", "Category")}</FormLabel>
-                        <div className="node-value">
-                            <SelectNode
+                        <Box flex={1} width="100%">
+                            <TypeSelect
                                 id="processCategory"
-                                className={"node-input"}
-                                value={value.processCategory}
-                                onChange={(e) => {
-                                    onFieldChange("processCategory", e.target.value);
+                                onChange={(value) => {
+                                    onFieldChange("processCategory", value);
                                 }}
                                 onBlur={() => {
                                     onBlurChange("processCategory", true);
                                 }}
-                            >
-                                <>
-                                    <option value={""}></option>
-                                    {categories.map(({ value, disabled }, index) => (
-                                        <option key={index} value={value} disabled={disabled}>
-                                            {value}
-                                        </option>
-                                    ))}
-                                </>
-                            </SelectNode>
-                            <ValidationLabels
+                                value={categoryOptions.find((option) => option.value === value.processCategory)}
+                                options={categoryOptions}
                                 fieldErrors={
                                     touched.processCategory ? getValidationErrorsForField(validationErrors, "processCategory") : []
                                 }
                             />
-
                             <Typography component={"div"} variant={"overline"} mt={1}>
                                 <Trans i18nKey={"addProcessForm.helperText.category"}>
                                     To read more about categories,
@@ -182,40 +178,25 @@ export function AddProcessForm({
                                     </Link>
                                 </Trans>
                             </Typography>
-                        </div>
+                        </Box>
                     </FormControl>
                 )}
                 {!isEmpty(engines) && (
                     <FormControl>
                         <FormLabel required>{t("addProcessForm.label.engine", "Engine")}</FormLabel>
-                        <div className="node-value">
-                            <SelectNode
+                        <Box flex={1} width="100%">
+                            <TypeSelect
                                 id="processEngine"
-                                value={value.processEngine}
-                                className={"node-input"}
-                                onChange={(e) => {
-                                    onFieldChange("processEngine", e.target.value);
+                                onChange={(value) => {
+                                    onFieldChange("processEngine", value);
                                 }}
                                 onBlur={() => {
                                     onBlurChange("processEngine", true);
                                 }}
-                            >
-                                <>
-                                    <option value={""}></option>
-                                    {engines.map((engine, index) => (
-                                        <option key={index} value={engine}>
-                                            {engine}
-                                        </option>
-                                    ))}
-                                </>
-                            </SelectNode>
-                            {touched.processEngine
-                                ? getValidationErrorsForField(validationErrors, "processEngine").map((engineError, index) => (
-                                      <FormHelperText key={index} error>
-                                          {engineError.message}
-                                      </FormHelperText>
-                                  ))
-                                : []}
+                                value={engineOptions.find((option) => option.value === value.processEngine)}
+                                options={engineOptions}
+                                fieldErrors={touched.processEngine ? getValidationErrorsForField(validationErrors, "processEngine") : []}
+                            />
                             <Typography component={"div"} variant={"overline"} mt={1}>
                                 <Trans i18nKey={"addProcessForm.helperText.engine"}>
                                     To read more about engines,
@@ -229,7 +210,7 @@ export function AddProcessForm({
                                     </Link>
                                 </Trans>
                             </Typography>
-                        </div>
+                        </Box>
                     </FormControl>
                 )}
             </NodeTable>

diff --git a/designer/client/src/components/MenuBar/menu.tsx b/designer/client/src/components/MenuBar/menu.tsx
@@ -19,12 +19,15 @@ const PlainButton = styled("button")({
     margin: "unset",
 });
 
-export const PlainLink = styled(TabElement)({
+export const PlainLink = styled(TabElement)(({ theme }) => ({
     "&, &:hover, &:focus": {
         color: "inherit",
         textDecoration: "none",
     },
-});
+    "&:hover": {
+        background: theme.palette.action.hover,
+    },
+}));
 
 const List = styled(TruncatedList)({
     flex: 1,

diff --git a/designer/client/src/components/customRadio/CustomRadio.tsx b/designer/client/src/components/customRadio/CustomRadio.tsx
@@ -25,6 +25,7 @@ export const CustomRadio = forwardRef(({ label, value, Icon, disabled, active }:
                 sx={(theme) => ({
                     backgroundColor: theme.palette.background.paper,
                     p: [1, 2],
+                    borderColor: active && theme.palette.primary.main,
                     cursor: "pointer",
                     display: "flex",
                     justifyContent: "center",

diff --git a/designer/client/src/components/graph/node-modal/NodeDetailsContent/NodeTableStyled.tsx b/designer/client/src/components/graph/node-modal/NodeDetailsContent/NodeTableStyled.tsx
@@ -26,6 +26,7 @@ export const NodeTableStyled = styled("div")(
             flex: 1;
             flex-basis: 60%;
             display: inline-block;
+            width: 100%;
             textarea {
                 overflow: hidden;
                 height: auto;

diff --git a/designer/client/src/components/graph/node-modal/fragment-input-definition/TypeSelect.tsx b/designer/client/src/components/graph/node-modal/fragment-input-definition/TypeSelect.tsx
@@ -5,6 +5,7 @@ import { selectStyled } from "../../../../stylesheets/SelectStyled";
 import { useTheme } from "@mui/material";
 import ValidationLabels from "../../../modals/ValidationLabels";
 import { FieldError } from "../editors/Validators";
+import { cx } from "@emotion/css";
 
 function useCaptureEsc() {
     const [captureEsc, setCaptureEsc] = useState(false);
@@ -28,7 +29,10 @@ export interface Option {
 }
 
 interface RowSelectProps {
+    id?: string;
+    className?: string;
     onChange: (value: string) => void;
+    onBlur?: (value: string) => void;
     options: Option[];
     readOnly?: boolean;
     isMarked?: boolean;
@@ -37,7 +41,18 @@ interface RowSelectProps {
     fieldErrors: FieldError[];
 }
 
-export function TypeSelect({ isMarked, options, readOnly, value, onChange, placeholder, fieldErrors }: RowSelectProps): JSX.Element {
+export function TypeSelect({
+    id,
+    className,
+    isMarked,
+    options,
+    readOnly,
+    value,
+    onChange,
+    onBlur,
+    placeholder,
+    fieldErrors,
+}: RowSelectProps): JSX.Element {
     const { setCaptureEsc, preventEsc } = useCaptureEsc();
     const theme = useTheme();
 
@@ -46,15 +61,17 @@ export function TypeSelect({ isMarked, options, readOnly, value, onChange, place
     return (
         <NodeValue className="field" marked={isMarked} onKeyDown={preventEsc}>
             <Select
+                id={id}
                 aria-label={"type-select"}
-                className="node-value node-value-select node-value-type-select"
+                className={cx("node-value node-value-select node-value-type-select", className)}
                 isDisabled={readOnly}
                 maxMenuHeight={190}
                 onMenuOpen={() => setCaptureEsc(true)}
                 onMenuClose={() => setCaptureEsc(false)}
                 options={options}
                 value={value || ""}
                 onChange={(option) => onChange(typeof option === "string" ? "" : option.value)}
+                onBlur={(e) => onBlur(e.target.value)}
                 menuPortalTarget={document.body}
                 placeholder={placeholder}
                 styles={{

diff --git a/designer/client/src/components/toolbarComponents/Panel.tsx b/designer/client/src/components/toolbarComponents/Panel.tsx
@@ -5,7 +5,7 @@ import { getLuminance } from "@mui/system/colorManipulator";
 export const PanelHeader = styled("div")<{ color?: string }>(({ color, theme }) => ({
     display: "flex",
     background: getLuminance(color) > 0.5 ? blendDarken(color, 0.08) : blendLighten(color, 0.08),
-    color: theme.typography.overline.color,
+    color: theme.palette.getContrastText(color),
     justifyContent: "space-between",
     padding: theme.spacing(0.25, 0.5),
     flexGrow: 0,

diff --git a/designer/client/src/components/toolbarComponents/toolbarWrapper/ToolbarWrapper.tsx b/designer/client/src/components/toolbarComponents/toolbarWrapper/ToolbarWrapper.tsx
@@ -89,7 +89,7 @@ export function ToolbarWrapper(props: ToolbarWrapperProps): React.JSX.Element |
                     )}
                     {onClose && (
                         <IconWrapper as="button" onClick={onClose}>
-                            <StyledCloseIcon />
+                            <StyledCloseIcon color={"error"} />
                         </IconWrapper>
                     )}
                 </PanelHeader>

diff --git a/designer/client/src/components/toolbars/Survey.tsx b/designer/client/src/components/toolbars/Survey.tsx
@@ -31,14 +31,26 @@ function Survey(props: ToolbarPanelProps) {
     }
 
     return (
-        <ToolbarWrapper {...props} onClose={hideSurvey} color={theme.palette.success.dark}>
+        <ToolbarWrapper {...props} onClose={hideSurvey} color={theme.palette.primary.main}>
             <Stack p={1} spacing={0.5}>
-                <Typography variant="body2">{survey.text}</Typography>
+                <Typography color={theme.palette.getContrastText(theme.palette.primary.main)} variant="body2">
+                    {survey.text}
+                </Typography>
                 <Stack direction="row" spacing={1}>
-                    <Button size="small" sx={(theme) => ({ color: theme.palette.success.main })} variant="text" onClick={onOpen}>
+                    <Button
+                        size="small"
+                        sx={(theme) => ({ color: theme.palette.getContrastText(theme.palette.primary.main) })}
+                        variant="text"
+                        onClick={onOpen}
+                    >
                         {t("panels.survey.ok", "let's go!")}
                     </Button>
-                    <Button size="small" sx={(theme) => ({ color: theme.palette.success.main })} variant="text" onClick={hideSurvey}>
+                    <Button
+                        size="small"
+                        sx={(theme) => ({ color: theme.palette.getContrastText(theme.palette.primary.main) })}
+                        variant="text"
+                        onClick={hideSurvey}
+                    >
                         {t("panels.survey.no", "close")}
                     </Button>
                 </Stack>

diff --git a/designer/client/src/windowManager/ContentGetter.tsx b/designer/client/src/windowManager/ContentGetter.tsx
@@ -53,7 +53,7 @@ const contentGetter: React.FC<WindowContentProps<WindowKind>> = (props) => {
         case WindowKind.addProcess:
             return <AddProcessDialog {...props} />;
         case WindowKind.saveProcess:
-            return <SaveProcessDialog {...props} />;
+            return <CustomActionDialog {...props} />;
         case WindowKind.deployProcess:
             return <DeployProcessDialog {...props} />;
         case WindowKind.calculateCounts:

diff --git a/designer/submodules/packages/components/src/common/defaultTheme.tsx b/designer/submodules/packages/components/src/common/defaultTheme.tsx
@@ -1,6 +1,7 @@
 import { cyan, deepOrange, lime } from "@mui/material/colors";
 import { alpha, createTheme, Theme } from "@mui/material/styles";
 import { useEffect, useMemo, useState } from "react";
+import { getBorderColor } from "nussknackerUi/themeHelpers";
 
 const darkBase = createTheme({
     palette: {
@@ -56,6 +57,9 @@ export const useDefaultTheme = (parent = {}): Theme => {
                 components: {
                     MuiDataGrid: {
                         styleOverrides: {
+                            withBorderColor: ({ theme }) => ({
+                                borderColor: getBorderColor(theme),
+                            }),
                             root: {
                                 border: 0,
                             },
@@ -93,6 +97,15 @@ export const useDefaultTheme = (parent = {}): Theme => {
                                     alignItems: "stretch",
                                 },
                             },
+                            sortIcon: ({ theme }) => ({
+                                color: theme.palette.text.secondary,
+                            }),
+                            menuIconButton: {
+                                color: "currentColor",
+                            },
+                            columnSeparator: {
+                                color: "currentColor",
+                            },
                         },
                     },
                     MuiOutlinedInput: {
@@ -125,6 +138,20 @@ export const useDefaultTheme = (parent = {}): Theme => {
                             },
                         },
                     },
+                    MuiListItemButton: {
+                        styleOverrides: {
+                            divider: ({ theme }) => ({
+                                borderColor: getBorderColor(theme),
+                            }),
+                        },
+                    },
+                    MuiListItemIcon: {
+                        styleOverrides: {
+                            root: {
+                                color: "currentColor",
+                            },
+                        },
+                    },
                 },
             }),
         [backgroundColor, bottomLineColor, root],

diff --git a/designer/submodules/packages/components/src/common/forms/inputWithClear.tsx b/designer/submodules/packages/components/src/common/forms/inputWithClear.tsx
@@ -15,8 +15,9 @@ export function InputWithClear({ value, onChange, ...props }: InputWithClearProp
             onChange={(e) => onChange(e.target.value)}
             endAdornment={
                 value && (
-                    <InputAdornment position="end">
+                    <InputAdornment sx={(theme) => ({ color: theme.palette.text.secondary })} position="end">
                         <IconButton
+                            color="inherit"
                             aria-label="clear"
                             onClick={() => onChange(null)}
                             onMouseDown={(event) => event.preventDefault()}

diff --git a/designer/submodules/packages/components/src/components/componentTable.tsx b/designer/submodules/packages/components/src/components/componentTable.tsx
@@ -56,6 +56,7 @@ export function ComponentTable(props: TableViewData<ComponentType>): JSX.Element
                 getActions: ({ row }) =>
                     row.links.map((link, i) => (
                         <GridActionsCellItem
+                            color={"inherit"}
                             component={ExternalLink}
                             key={link.id}
                             icon={<NuIcon src={link.icon} title={link.title} sx={{ fontSize: "1.5rem", verticalAlign: "middle" }} />}

diff --git a/designer/submodules/packages/components/src/scenarios/filters/quickFilter.tsx b/designer/submodules/packages/components/src/scenarios/filters/quickFilter.tsx
@@ -43,8 +43,8 @@ export function QuickFilter<F extends Record<string, any>>({
                         },
                     }}
                     startAdornment={
-                        <InputAdornment position="start">
-                            <Search sx={{ marginTop: "3px", opacity: 0.5 }} />
+                        <InputAdornment sx={(theme) => ({ color: theme.palette.text.secondary })} position="start">
+                            <Search sx={{ marginTop: "3px" }} />
                         </InputAdornment>
                     }
                 />

diff --git a/designer/submodules/packages/components/src/scenarios/filters/sortOptionsStack.tsx b/designer/submodules/packages/components/src/scenarios/filters/sortOptionsStack.tsx
@@ -38,7 +38,7 @@ function SortOption(props: {
     }, [isDesc, isSelected, onChange, name]);
     return (
         <FilterListItem
-            color={isDefault ? "default" : "primary"}
+            color={isDefault ? "default" : "error"}
             label={<FilterListItemLabel name={name} icon={icon} />}
             icon={<Sort />}
             checkedIcon={<ArrowUpward />}

diff --git a/designer/submodules/packages/components/src/scenarios/list/itemsList.tsx b/designer/submodules/packages/components/src/scenarios/list/itemsList.tsx
@@ -39,7 +39,7 @@ const ListRow = React.memo(function ListRow({ row, style }: { row: RowType; styl
                 sx={{ opacity }}
                 secondaryAction={
                     !row.isFragment && (
-                        <IconButton component={ExternalLink} href={metricsHref(row.name)}>
+                        <IconButton color={"inherit"} component={ExternalLink} href={metricsHref(row.name)}>
                             <AssessmentIcon />
                         </IconButton>
                     )