Fixed summaryForm styles + dark theme (#2122)

Author: Georgi2704

.changeset/easy-crews-fry.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+Fix WfoSummary label styles

apps/wfo-ui

@@ -18,7 +18,7 @@ import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
+import { summaryFieldStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
@@ -38,7 +38,7 @@ function Summary({
     data,
     ...props
 }: SummaryFieldProps) {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
     if (!data) {

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SummaryField.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const summaryFieldStyles = ({ theme }: WfoTheme) => {
     const summaryFieldStyle = css({
         'div.emailMessage': {
             td: {

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SummaryFieldStyling.ts

@@ -26,3 +26,4 @@ export * from './ConnectedSelectField';
 export * from './deprecated/FileUploadField';
 export * from './commonStyles';
 export * from './types';
+export * from './SummaryFieldStyling';

packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts

@@ -1,59 +1,16 @@
 import React from 'react';
 
+import { capitalize } from 'lodash';
 import type { PydanticFormElement } from 'pydantic-forms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
-import { tint } from '@elastic/eui';
-import { css } from '@emotion/react';
 
-import { getCommonFormFieldStyles } from '@/components';
-import { WfoTheme, useWithOrchestratorTheme } from '@/hooks';
-
-export const getStyles = ({ theme }: WfoTheme) => {
-    const toShadeColor = (color: string) => tint(color, 0.9);
-
-    const summaryFieldStyle = css({
-        'div.emailMessage': {
-            td: {
-                color: theme.colors.text,
-            },
-            p: {
-                color: theme.colors.text,
-            },
-            html: {
-                marginLeft: '-10px',
-            },
-        },
-        'section.table-summary': {
-            marginTop: '20px',
-            width: '100%',
-            td: {
-                padding: '10px',
-                verticalAlign: 'top',
-            },
-            'td:not(:first-child):not(:last-child)': {
-                borderRight: `1px solid ${theme.colors.lightestShade}`,
-            },
-            '.label': {
-                fontWeight: 'bold',
-                color: theme.colors.lightestShade,
-                backgroundColor: theme.colors.primary,
-                borderRight: `2px solid ${theme.colors.lightestShade}`,
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
-            },
-            '.value': {
-                backgroundColor: toShadeColor(theme.colors.primary),
-                borderBottom: `1px solid ${theme.colors.lightestShade}`,
-            },
-        },
-    });
-    return {
-        summaryFieldStyle: summaryFieldStyle,
-    };
-};
+import { getCommonFormFieldStyles, summaryFieldStyles } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { snakeToHuman } from '@/utils';
 
 export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
     const { id, title, description } = pydanticFormField;
@@ -102,12 +59,14 @@ export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
             </tr>
         );
 
+    const formattedTitle = snakeToHuman(capitalize(title ?? ''));
+
     return (
         <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
             <section>
                 <EuiFormRow
-                    label={description}
-                    labelAppend={<EuiText size="m">{title}</EuiText>}
+                    label={<p className="label">{formattedTitle}</p>}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
                     id={id}
                     fullWidth
                 >