Fix style (#8475)

## Before ![image](https://github.com/user-attachments/assets/1c96c30c-da06-4caa-a05d-1c58006dcfa5) ## After ![image](https://github.com/user-attachments/assets/523fac64-7521-4c0f-bfa8-457d48493628)
2024-11-13 14:32:40 +01:00
parent d2af97276d
commit ba79a1d324
8 changed files with 79 additions and 37 deletions
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx
@ -1,51 +0,0 @@
-import { JSX } from 'react';
-import styled from '@emotion/styled';
-
-type HorizontalSeparatorProps = {
-  visible?: boolean;
-  text?: string;
-};
-const StyledSeparator = styled.div<HorizontalSeparatorProps>`
-  background-color: ${({ theme }) => theme.border.color.medium};
-  height: ${({ visible }) => (visible ? '1px' : 0)};
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-  margin-top: ${({ theme }) => theme.spacing(3)};
-  width: 100%;
-`;
-
-const StyledSeparatorContainer = styled.div`
-  align-items: center;
-  display: flex;
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
-  margin-top: ${({ theme }) => theme.spacing(3)};
-  width: 100%;
-`;
-
-const StyledLine = styled.div<HorizontalSeparatorProps>`
-  background-color: ${({ theme }) => theme.border.color.medium};
-  height: ${({ visible }) => (visible ? '1px' : 0)};
-  flex-grow: 1;
-`;
-
-const StyledText = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-  margin: 0 ${({ theme }) => theme.spacing(2)};
-  white-space: nowrap;
-`;
-
-export const HorizontalSeparator = ({
-  visible = true,
-  text = '',
-}: HorizontalSeparatorProps): JSX.Element => (
-  <>
-    {text ? (
-      <StyledSeparatorContainer>
-        <StyledLine visible={visible} />
-        {text && <StyledText>{text}</StyledText>}
-        <StyledLine visible={visible} />
-      </StyledSeparatorContainer>
-    ) : (
-      <StyledSeparator visible={visible} />
-    )}
-  </>
-);
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@ -1,5 +1,14 @@
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
-import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
+import {
+  HorizontalSeparator,
+  ActionLink,
+  IconGoogle,
+  IconKey,
+  IconMicrosoft,
+  Loader,
+  MainButton,
+  StyledText,
+} from 'twenty-ui';
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import {
@ -20,15 +29,6 @@ import { useMemo, useState } from 'react';
 import { Controller } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import {
-  ActionLink,
-  IconGoogle,
-  IconKey,
-  IconMicrosoft,
-  Loader,
-  MainButton,
-  StyledText,
-} from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';

 const StyledContentContainer = styled.div`
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
@ -1,15 +1,7 @@
 /* @license Enterprise */

-import { HorizontalSeparator } from '@/auth/sign-in-up/components/HorizontalSeparator';
-import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { TextInput } from '@/ui/input/components/TextInput';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ChangeEvent, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
 import {
+  HorizontalSeparator,
  Button,
  H2Title,
  IconCheck,
@ -18,6 +10,14 @@ import {
  IconUpload,
  Section,
 } from 'twenty-ui';
+import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ChangeEvent, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { isDefined } from '~/utils/isDefined';

--- a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
+++ b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx
@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-
 import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
 import { setNestedValue } from '@/workflow/utils/setNestedValue';
 import { Select, SelectOption } from '@/ui/input/components/Select';
@ -8,7 +7,7 @@ import { WorkflowEditGenericFormBase } from '@/workflow/components/WorkflowEditG
 import VariableTagInput from '@/workflow/search-variables/components/VariableTagInput';
 import { WorkflowCodeStep } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
-import { IconCode, isDefined } from 'twenty-ui';
+import { IconCode, isDefined, HorizontalSeparator } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 import { getDefaultFunctionInputFromInputSchema } from '@/workflow/utils/getDefaultFunctionInputFromInputSchema';
 import { FunctionInput } from '@/workflow/types/FunctionInput';
@ -23,16 +22,19 @@ const StyledLabel = styled.div`
  color: ${({ theme }) => theme.font.color.light};
  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-top: ${({ theme }) => theme.spacing(3)};
+  margin-top: ${({ theme }) => theme.spacing(2)};
  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;

 const StyledInputContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
  display: flex;
  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
  position: relative;
-  gap: ${({ theme }) => theme.spacing(4)};
-  padding-left: ${({ theme }) => theme.spacing(4)};
 `;

 type WorkflowEditActionFormServerlessFunctionProps =
@ -139,17 +141,40 @@ export const WorkflowEditActionFormServerlessFunction = (
  const renderFields = (
    functionInput: FunctionInput,
    path: string[] = [],
-  ): ReactNode | undefined => {
+    isRoot = true,
+  ): ReactNode[] => {
+    const displaySeparator = (functionInput: FunctionInput) => {
+      const keys = Object.keys(functionInput);
+      if (keys.length > 1) {
+        return true;
+      }
+      if (keys.length === 1) {
+        const subKeys = Object.keys(functionInput[keys[0]]);
+        return subKeys.length > 0;
+      }
+      return false;
+    };
+
    return Object.entries(functionInput).map(([inputKey, inputValue]) => {
      const currentPath = [...path, inputKey];
      const pathKey = currentPath.join('.');

      if (inputValue !== null && typeof inputValue === 'object') {
+        if (isRoot) {
+          return (
+            <>
+              {displaySeparator(functionInput) && (
+                <HorizontalSeparator noMargin />
+              )}
+              {renderFields(inputValue, currentPath, false)}
+            </>
+          );
+        }
        return (
          <StyledContainer key={pathKey}>
            <StyledLabel>{inputKey}</StyledLabel>
            <StyledInputContainer>
-              {renderFields(inputValue, currentPath)}
+              {renderFields(inputValue, currentPath, false)}
            </StyledInputContainer>
          </StyledContainer>
        );
@ -184,7 +209,7 @@ export const WorkflowEditActionFormServerlessFunction = (
        disabled={props.readonly}
        onChange={handleFunctionChange}
      />
-      {functionInput && renderFields(functionInput)}
+      {renderFields(functionInput)}
    </WorkflowEditGenericFormBase>
  );
 };
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx
@ -21,7 +21,7 @@ const StyledContainer = styled.div`

 const StyledLabel = styled.div`
  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.xs};
+  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.semiBold};
  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;