Redesign settings profile (#353)

* Redesign settings profile

* Fix spacing

* Fix Company creation

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -19,8 +19,6 @@ export type EditableChipProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input`
-  padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(2)};
   width: 100%;
 
   ${textInputStyle}

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -27,7 +27,7 @@ const StyledContainer = styled.div`
 
 const StyledEditInplaceInput = styled.input`
   height: 18px;
-  margin: 0px ${(props) => props.theme.spacing(2)};
+  margin: 0;
   width: 45%;
 
   ${textInputStyle}

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -19,7 +19,7 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
-  margin: 0px ${(props) => props.theme.spacing(2)};
+  margin: 0;
   width: 100%;
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditableText.tsx

@@ -18,7 +18,7 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input<StyledEditModeProps>`
-  margin: 0px ${(props) => props.theme.spacing(2)};
+  margin: 0;
   width: 100%;
   ${textInputStyle}
 `;

front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx

@@ -24,9 +24,8 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    expect(changeJestFn).toHaveBeenCalledTimes(0);
     const input = canvas.getByRole('textbox');
-    await userEvent.type(input, 'cou');
+    await userEvent.type(input, 'cou', { delay: 100 });
 
     expect(changeJestFn).toHaveBeenNthCalledWith(1, 'A good value c');
     expect(changeJestFn).toHaveBeenNthCalledWith(2, 'A good value co');

front/src/modules/ui/components/menu/DropdownMenuSearch.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import { textInputStyle } from '@/ui/layout/styles/themes';
 
 export const DropdownMenuSearchContainer = styled.div`
-  --horizontal-padding: ${(props) => props.theme.spacing(2)};
   --vertical-padding: ${(props) => props.theme.spacing(1)};
 
   align-items: center;
@@ -13,9 +12,9 @@ export const DropdownMenuSearchContainer = styled.div`
   display: flex;
   flex-direction: row;
   height: calc(36px - 2 * var(--vertical-padding));
-  padding: var(--vertical-padding) var(--horizontal-padding);
+  padding: var(--vertical-padding) 0;
 
-  width: calc(100% - 2 * var(--horizontal-padding));
+  width: calc(100%);
 `;
 
 const StyledEditModeSearchInput = styled.input`

front/src/modules/ui/components/section-titles/MainSectionTitle.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: ReactNode;
+};
+
+const StyledMainSectionTitle = styled.h2`
+  color: ${({ theme }) => theme.text80};
+  font-size: ${({ theme }) => theme.fontSizeExtraLarge};
+  font-weight: ${({ theme }) => theme.fontWeightBold};
+  line-height: 1.5;
+`;
+
+export function MainSectionTitle({ children }: OwnProps) {
+  return <StyledMainSectionTitle>{children}</StyledMainSectionTitle>;
+}

front/src/modules/ui/components/section-titles/SubSectionTitle.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: ReactNode;
+};
+
+const StyledSubSectionTitle = styled.h2`
+  color: ${({ theme }) => theme.text80};
+  font-size: ${({ theme }) => theme.fontSizeMedium};
+  font-weight: ${({ theme }) => theme.fontWeightBold};
+  line-height: 1.5;
+`;
+
+export function SubSectionTitle({ children }: OwnProps) {
+  return <StyledSubSectionTitle>{children}</StyledSubSectionTitle>;
+}

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -46,7 +46,7 @@ const StyledIcon = styled.div`
   margin-right: ${(props) => props.theme.spacing(2)};
 
   & > svg {
-    font-size: ${(props) => props.theme.fontSizeLarge};
+    font-size: ${(props) => props.theme.iconSizeSmall};
   }
 `;