Add styled component rule (#1261)

* Add StyledComponent rule * update doc * update doc * update doc
2023-08-17 20:58:02 -07:00
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
--- a/front/src/modules/ui/button/components/DropdownButton.tsx
+++ b/front/src/modules/ui/button/components/DropdownButton.tsx
@ -65,11 +65,11 @@ const StyledDropdownItem = styled.button<ButtonProps>`
  }
 `;

-const DropdownContainer = styled.div`
+const StyledDropdownContainer = styled.div`
  position: relative;
 `;

-const DropdownMenu = styled.div`
+const StyledDropdownMenu = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
@ -112,7 +112,7 @@ export function DropdownButton({
  return (
    <>
      {selectedOption && (
-        <DropdownContainer>
+        <StyledDropdownContainer>
          <StyledButton
            onClick={() => setIsOpen(!isOpen)}
            {...buttonProps}
@ -123,7 +123,7 @@ export function DropdownButton({
            {options.length > 1 && <IconChevronDown />}
          </StyledButton>
          {isOpen && (
-            <DropdownMenu>
+            <StyledDropdownMenu>
              {options
                .filter((option) => option.label !== selectedOption.label)
                .map((option, index) => (
@ -135,9 +135,9 @@ export function DropdownButton({
                    {option.label}
                  </StyledDropdownItem>
                ))}
-            </DropdownMenu>
+            </StyledDropdownMenu>
          )}
-        </DropdownContainer>
+        </StyledDropdownContainer>
      )}
    </>
  );
--- a/front/src/modules/ui/color-scheme/components/ColorSchemePicker.tsx
+++ b/front/src/modules/ui/color-scheme/components/ColorSchemePicker.tsx
@ -13,12 +13,12 @@ const StyledContainer = styled.div`
  }
 `;

-const CardContainer = styled.div`
+const StyledCardContainer = styled.div`
  display: flex;
  flex-direction: column;
 `;

-const Label = styled.span`
+const StyledLabel = styled.span`
  color: ${({ theme }) => theme.font.color.secondary};
  font-size: ${({ theme }) => theme.font.size.xs};
  font-weight: ${({ theme }) => theme.font.weight.medium};
@ -33,30 +33,30 @@ export type ColorSchemePickerProps = {
 export function ColorSchemePicker({ value, onChange }: ColorSchemePickerProps) {
  return (
    <StyledContainer>
-      <CardContainer>
+      <StyledCardContainer>
        <ColorSchemeCard
          onClick={() => onChange(ColorScheme.Light)}
          variant="light"
          selected={value === ColorScheme.Light}
        />
-        <Label>Light</Label>
-      </CardContainer>
-      <CardContainer>
+        <StyledLabel>Light</StyledLabel>
+      </StyledCardContainer>
+      <StyledCardContainer>
        <ColorSchemeCard
          onClick={() => onChange(ColorScheme.Dark)}
          variant="dark"
          selected={value === ColorScheme.Dark}
        />
-        <Label>Dark</Label>
-      </CardContainer>
-      <CardContainer>
+        <StyledLabel>Dark</StyledLabel>
+      </StyledCardContainer>
+      <StyledCardContainer>
        <ColorSchemeCard
          onClick={() => onChange(ColorScheme.System)}
          variant="system"
          selected={value === ColorScheme.System}
        />
-        <Label>System settings</Label>
-      </CardContainer>
+        <StyledLabel>System settings</StyledLabel>
+      </StyledCardContainer>
    </StyledContainer>
  );
 }
--- a/front/src/modules/ui/color-scheme/components/stories/ColorSchemeCard.stories.tsx
+++ b/front/src/modules/ui/color-scheme/components/stories/ColorSchemeCard.stories.tsx
@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

 import { ColorSchemeCard } from '../ColorSchemeCard';

-const Container = styled.div`
+const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
  > * + * {
@ -18,9 +18,9 @@ const meta: Meta<typeof ColorSchemeCard> = {
  component: ColorSchemeCard,
  decorators: [
    (Story) => (
-      <Container>
+      <StyledContainer>
        <Story />
-      </Container>
+      </StyledContainer>
    ),
    ComponentDecorator,
  ],
--- a/front/src/modules/ui/dialog/components/Dialog.tsx
+++ b/front/src/modules/ui/dialog/components/Dialog.tsx
@ -4,7 +4,7 @@ import { motion } from 'framer-motion';

 import { Button, ButtonVariant } from '@/ui/button/components/Button';

-const DialogOverlay = styled(motion.div)`
+const StyledDialogOverlay = styled(motion.div)`
  align-items: center;
  background: ${({ theme }) => theme.background.overlay};
  display: flex;
@ -17,7 +17,7 @@ const DialogOverlay = styled(motion.div)`
  z-index: 9999;
 `;

-const DialogContainer = styled(motion.div)`
+const StyledDialogContainer = styled(motion.div)`
  background: ${({ theme }) => theme.background.primary};
  border-radius: 8px;
  display: flex;
@ -28,7 +28,7 @@ const DialogContainer = styled(motion.div)`
  width: 100%;
 `;

-const DialogTitle = styled.span`
+const StyledDialogTitle = styled.span`
  color: ${({ theme }) => theme.font.color.primary};
  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.semiBold};
@ -36,7 +36,7 @@ const DialogTitle = styled.span`
  text-align: center;
 `;

-const DialogMessage = styled.span`
+const StyledDialogMessage = styled.span`
  color: ${({ theme }) => theme.font.color.primary};
  font-size: ${({ theme }) => theme.font.size.sm};
  font-weight: ${({ theme }) => theme.font.weight.regular};
@ -44,7 +44,7 @@ const DialogMessage = styled.span`
  text-align: center;
 `;

-const DialogButton = styled(Button)`
+const StyledDialogButton = styled(Button)`
  justify-content: center;
  margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
@ -87,7 +87,7 @@ export function Dialog({
  };

  return (
-    <DialogOverlay
+    <StyledDialogOverlay
      variants={dialogVariants}
      initial="closed"
      animate="open"
@ -99,16 +99,16 @@ export function Dialog({
        }
      }}
    >
-      <DialogContainer
+      <StyledDialogContainer
        variants={containerVariants}
        transition={{ damping: 15, stiffness: 100 }}
        {...rootProps}
      >
-        {title && <DialogTitle>{title}</DialogTitle>}
-        {message && <DialogMessage>{message}</DialogMessage>}
+        {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
+        {message && <StyledDialogMessage>{message}</StyledDialogMessage>}
        {children}
        {buttons.map((button) => (
-          <DialogButton
+          <StyledDialogButton
            key={button.title}
            onClick={(e) => {
              button?.onClick?.(e);
@ -119,7 +119,7 @@ export function Dialog({
            {...button}
          />
        ))}
-      </DialogContainer>
-    </DialogOverlay>
+      </StyledDialogContainer>
+    </StyledDialogOverlay>
  );
 }
--- a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 export const DropdownMenu = styled.div<{
--- a/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx
@ -11,7 +11,7 @@ type Props = {
  id?: string;
 };

-const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
+const StyledDropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
  align-items: center;
  display: flex;
  justify-content: space-between;
@ -42,11 +42,11 @@ export function DropdownMenuCheckableItem({
  }

  return (
-    <DropdownMenuCheckableItemContainer onClick={handleClick}>
+    <StyledDropdownMenuCheckableItemContainer onClick={handleClick}>
      <StyledLeftContainer>
        <Checkbox checked={checked} />
        <StyledChildrenContainer>{children}</StyledChildrenContainer>
      </StyledLeftContainer>
-    </DropdownMenuCheckableItemContainer>
+    </StyledDropdownMenuCheckableItemContainer>
  );
 }
--- a/front/src/modules/ui/dropdown/components/DropdownMenuInput.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuInput.tsx
@ -3,7 +3,7 @@ import styled from '@emotion/styled';

 import { textInputStyle } from '@/ui/theme/constants/effects';

-export const DropdownMenuInputContainer = styled.div`
+const StyledDropdownMenuInputContainer = styled.div`
  --vertical-padding: ${({ theme }) => theme.spacing(1)};

  align-items: center;
@ -28,7 +28,7 @@ export const DropdownMenuInput = forwardRef<
  HTMLInputElement,
  InputHTMLAttributes<HTMLInputElement>
 >((props, ref) => (
-  <DropdownMenuInputContainer>
+  <StyledDropdownMenuInputContainer>
    <StyledInput autoComplete="off" placeholder="Search" {...props} ref={ref} />
-  </DropdownMenuInputContainer>
+  </StyledDropdownMenuInputContainer>
 ));
--- a/front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 export const DropdownMenuItemsContainer = styled.div<{
--- a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
@ -13,7 +13,7 @@ type Props = React.ComponentProps<'li'> & {
  disabled?: boolean;
 };

-const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
+const StyledDropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
  Pick<Props, 'hovered'>
 >`
  ${hoverBackground};
@ -72,7 +72,7 @@ export function DropdownMenuSelectableItem({
  }, [hovered]);

  return (
-    <DropdownMenuSelectableItemContainer
+    <StyledDropdownMenuSelectableItemContainer
      {...restProps}
      onClick={handleClick}
      hovered={hovered}
@ -82,6 +82,6 @@ export function DropdownMenuSelectableItem({
      <StyledRightIcon>
        {selected && <IconCheck size={theme.icon.size.md} />}
      </StyledRightIcon>
-    </DropdownMenuSelectableItemContainer>
+    </StyledDropdownMenuSelectableItemContainer>
  );
 }
--- a/front/src/modules/ui/dropdown/components/DropdownMenuSeparator.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuSeparator.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 export const DropdownMenuSeparator = styled.div`
--- a/front/src/modules/ui/dropdown/components/DropdownMenuSubheader.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenuSubheader.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 export const DropdownMenuSubheader = styled.div`
--- a/front/src/modules/ui/dropdown/components/stories/DropdownMenu.stories.tsx
+++ b/front/src/modules/ui/dropdown/components/stories/DropdownMenu.stories.tsx
@ -43,19 +43,19 @@ const FakeContentBelow = () => (
 const avatarUrl =
  'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';

-const FakeMenuContent = styled.div`
+const StyledFakeMenuContent = styled.div`
  height: 400px;
  width: 100%;
 `;

-const FakeBelowContainer = styled.div`
+const StyledFakeBelowContainer = styled.div`
  height: 600px;
  position: relative;

  width: 300px;
 `;

-const MenuAbsolutePositionWrapper = styled.div`
+const StyledMenuAbsolutePositionWrapper = styled.div`
  height: fit-content;
  position: absolute;

@ -157,7 +157,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
 export const Empty: Story = {
  render: (args) => (
    <DropdownMenu {...args}>
-      <FakeMenuContent />
+      <StyledFakeMenuContent />
    </DropdownMenu>
  ),
 };
@ -166,12 +166,12 @@ export const WithContentBelow: Story = {
  ...Empty,
  decorators: [
    (Story) => (
-      <FakeBelowContainer>
+      <StyledFakeBelowContainer>
        <FakeContentBelow />
-        <MenuAbsolutePositionWrapper>
+        <StyledMenuAbsolutePositionWrapper>
          <Story />
-        </MenuAbsolutePositionWrapper>
-      </FakeBelowContainer>
+        </StyledMenuAbsolutePositionWrapper>
+      </StyledFakeBelowContainer>
    ),
  ],
 };
--- a/front/src/modules/ui/editable-field/components/EditableField.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableField.tsx
@ -50,7 +50,7 @@ const StyledEditButtonContainer = styled(motion.div)`
  right: 0;
 `;

-export const EditableFieldBaseContainer = styled.div`
+export const StyledEditableFieldBaseContainer = styled.div`
  align-items: center;
  box-sizing: border-box;

@ -114,7 +114,7 @@ export function EditableField({
  const showEditButton = !isFieldInEditMode && isHovered && useEditButton;

  return (
-    <EditableFieldBaseContainer
+    <StyledEditableFieldBaseContainer
      onMouseEnter={handleContainerMouseEnter}
      onMouseLeave={handleContainerMouseLeave}
    >
@ -151,6 +151,6 @@ export function EditableField({
          <EditableFieldEditButton />
        </StyledEditButtonContainer>
      )}
-    </EditableFieldBaseContainer>
+    </StyledEditableFieldBaseContainer>
  );
 }
--- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';

-export const EditableFieldNormalModeOuterContainer = styled.div<
+const StyledEditableFieldNormalModeOuterContainer = styled.div<
  Pick<
    OwnProps,
    | 'disableClick'
@ -51,7 +51,7 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
  }}
 `;

-export const EditableFieldNormalModeInnerContainer = styled.div`
+const StyledEditableFieldNormalModeInnerContainer = styled.div`
  align-items: center;
  color: ${({ theme }) => theme.font.color.primary};
  font-size: 'inherit';
@ -82,16 +82,16 @@ export function EditableFieldDisplayMode({
  isDisplayModeFixHeight,
 }: React.PropsWithChildren<OwnProps>) {
  return (
-    <EditableFieldNormalModeOuterContainer
+    <StyledEditableFieldNormalModeOuterContainer
      onClick={disableClick ? undefined : onClick}
      disableClick={disableClick}
      isDisplayModeContentEmpty={isDisplayModeContentEmpty}
      disableHoverEffect={disableHoverEffect}
      isDisplayModeFixHeight={isDisplayModeFixHeight}
    >
-      <EditableFieldNormalModeInnerContainer>
+      <StyledEditableFieldNormalModeInnerContainer>
        {children}
-      </EditableFieldNormalModeInnerContainer>
-    </EditableFieldNormalModeOuterContainer>
+      </StyledEditableFieldNormalModeInnerContainer>
+    </StyledEditableFieldNormalModeOuterContainer>
  );
 }
--- a/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
+++ b/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
@ -3,7 +3,7 @@ import styled from '@emotion/styled';

 import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';

-export const EditableFieldEditModeContainer = styled.div<OwnProps>`
+const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
  align-items: center;

  display: flex;
@ -33,11 +33,11 @@ export function EditableFieldEditMode({
  useRegisterCloseFieldHandlers(wrapperRef, onSubmit, onCancel);

  return (
-    <EditableFieldEditModeContainer
+    <StyledEditableFieldEditModeContainer
      data-testid="editable-field-edit-mode-container"
      ref={wrapperRef}
    >
      {children}
-    </EditableFieldEditModeContainer>
+    </StyledEditableFieldEditModeContainer>
  );
 }
--- a/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
+++ b/front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
@ -19,7 +19,7 @@ import {
  FieldRelationValue,
 } from '../types/FieldMetadata';

-const RelationPickerContainer = styled.div`
+const StyledRelationPickerContainer = styled.div`
  left: 0px;
  position: absolute;
  top: -8px;
@ -116,13 +116,13 @@ export function GenericEditableRelationFieldEditMode() {
  }

  return (
-    <RelationPickerContainer>
+    <StyledRelationPickerContainer>
      <RelationPicker
        fieldDefinition={currentEditableFieldDefinition}
        fieldValue={fieldValue}
        handleEntitySubmit={handleSubmit}
        handleCancel={handleCancel}
      />
-    </RelationPickerContainer>
+    </StyledRelationPickerContainer>
  );
 }
--- a/front/src/modules/ui/input/image/components/ImageInput.tsx
+++ b/front/src/modules/ui/input/image/components/ImageInput.tsx
@ -5,12 +5,12 @@ import styled from '@emotion/styled';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icon';

-const Container = styled.div`
+const StyledContainer = styled.div`
  display: flex;
  flex-direction: row;
 `;

-const Picture = styled.button<{ withPicture: boolean }>`
+const StyledPicture = styled.button<{ withPicture: boolean }>`
  align-items: center;
  background: ${({ theme, disabled }) =>
    disabled ? theme.background.secondary : theme.background.tertiary};
@ -46,7 +46,7 @@ const Picture = styled.button<{ withPicture: boolean }>`
  }};
 `;

-const Content = styled.div`
+const StyledContent = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
@ -54,7 +54,7 @@ const Content = styled.div`
  margin-left: ${({ theme }) => theme.spacing(4)};
 `;

-const ButtonContainer = styled.div`
+const StyledButtonContainer = styled.div`
  display: flex;
  flex-direction: row;
  > * + * {
@ -62,7 +62,7 @@ const ButtonContainer = styled.div`
  }
 `;

-const Text = styled.span`
+const StyledText = styled.span`
  color: ${({ theme }) => theme.font.color.light};
  font-size: ${({ theme }) => theme.font.size.xs};
 `;
@ -92,8 +92,8 @@ export function ImageInput({
  };

  return (
-    <Container {...restProps}>
-      <Picture
+    <StyledContainer {...restProps}>
+      <StyledPicture
        withPicture={!!picture}
        disabled={disabled}
        onClick={onUploadButtonClick}
@ -106,9 +106,9 @@ export function ImageInput({
        ) : (
          <IconFileUpload size={theme.icon.size.md} />
        )}
-      </Picture>
-      <Content>
-        <ButtonContainer>
+      </StyledPicture>
+      <StyledContent>
+        <StyledButtonContainer>
          <StyledHiddenFileInput
            type="file"
            ref={hiddenFileInput}
@ -136,11 +136,11 @@ export function ImageInput({
            disabled={!picture || disabled}
            fullWidth
          />
-        </ButtonContainer>
-        <Text>
+        </StyledButtonContainer>
+        <StyledText>
          We support your best PNGs, JPEGs and GIFs portraits under 10MB
-        </Text>
-      </Content>
-    </Container>
+        </StyledText>
+      </StyledContent>
+    </StyledContainer>
  );
 }
--- a/front/src/modules/ui/input/radio/components/Radio.tsx
+++ b/front/src/modules/ui/input/radio/components/Radio.tsx
@ -16,7 +16,7 @@ export enum LabelPosition {
  Right = 'right',
 }

-const Container = styled.div<{ labelPosition?: LabelPosition }>`
+const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
  ${({ labelPosition }) =>
    labelPosition === LabelPosition.Left
      ? `
@ -33,7 +33,7 @@ type RadioInputProps = {
  'radio-size'?: RadioSize;
 };

-const RadioInput = styled(motion.input)<RadioInputProps>`
+const StyledRadioInput = styled(motion.input)<RadioInputProps>`
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
@ -86,7 +86,7 @@ type LabelProps = {
  labelPosition?: LabelPosition;
 };

-const Label = styled.label<LabelProps>`
+const StyledLabel = styled.label<LabelProps>`
  color: ${({ theme }) => theme.font.color.primary};
  cursor: pointer;
  font-size: ${({ theme }) => theme.font.size.sm};
@ -126,8 +126,8 @@ export function Radio({
  }

  return (
-    <Container {...restProps} labelPosition={labelPosition}>
-      <RadioInput
+    <StyledContainer {...restProps} labelPosition={labelPosition}>
+      <StyledRadioInput
        type="radio"
        id="input-radio"
        name="input-radio"
@ -142,15 +142,15 @@ export function Radio({
        transition={{ type: 'spring', stiffness: 300, damping: 20 }}
      />
      {value && (
-        <Label
+        <StyledLabel
          htmlFor="input-radio"
          labelPosition={labelPosition}
          disabled={disabled}
        >
          {value}
-        </Label>
+        </StyledLabel>
      )}
-    </Container>
+    </StyledContainer>
  );
 }

--- a/front/src/modules/ui/input/text/components/TextInputContainer.tsx
+++ b/front/src/modules/ui/input/text/components/TextInputContainer.tsx
@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-import { overlayBackground } from '@/ui/theme/constants/effects';
-
-export const TextInputContainer = styled.div`
-  align-items: center;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  display: flex;
-  margin-left: -1px;
-  min-height: 32px;
-  width: inherit;
-
-  ${overlayBackground}
-
-  z-index: 10;
-`;
--- a/front/src/modules/ui/input/text/components/TextInputDisplay.tsx
+++ b/front/src/modules/ui/input/text/components/TextInputDisplay.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 export const TextInputDisplay = styled.div`
--- a/front/src/modules/ui/input/text/components/TextInputEdit.tsx
+++ b/front/src/modules/ui/input/text/components/TextInputEdit.tsx
@ -1,15 +1,28 @@
 import styled from '@emotion/styled';

 import { textInputStyle } from '@/ui/theme/constants/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';

-import { TextInputContainer } from './TextInputContainer';
-
-const InplaceInputTextInput = styled.input`
+const StyledInplaceInputTextInput = styled.input`
  margin: 0;
  width: 100%;
  ${textInputStyle}
 `;

+const StyledTextInputContainer = styled.div`
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  margin-left: -1px;
+  min-height: 32px;
+  width: inherit;
+
+  ${overlayBackground}
+
+  z-index: 10;
+`;
+
 export type TextInputEditProps = {
  placeholder?: string;
  value?: string;
@ -24,14 +37,14 @@ export function TextInputEdit({
  autoFocus,
 }: TextInputEditProps) {
  return (
-    <TextInputContainer>
-      <InplaceInputTextInput
+    <StyledTextInputContainer>
+      <StyledInplaceInputTextInput
        autoComplete="off"
        autoFocus={autoFocus}
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
      />
-    </TextInputContainer>
+    </StyledTextInputContainer>
  );
 }
--- a/front/src/modules/ui/input/toggle/components/Toggle.tsx
+++ b/front/src/modules/ui/input/toggle/components/Toggle.tsx
@ -7,7 +7,7 @@ type ContainerProps = {
  color?: string;
 };

-const Container = styled.div<ContainerProps>`
+const StyledContainer = styled.div<ContainerProps>`
  align-items: center;
  background-color: ${({ theme, isOn, color }) =>
    isOn ? color ?? theme.color.blue : theme.background.quaternary};
@ -19,7 +19,7 @@ const Container = styled.div<ContainerProps>`
  width: 32px;
 `;

-const Circle = styled(motion.div)`
+const StyledCircle = styled(motion.div)`
  background-color: #fff;
  border-radius: 50%;
  height: 16px;
@ -56,8 +56,8 @@ export function Toggle({ value, onChange, color }: ToggleProps) {
  }, [value]);

  return (
-    <Container onClick={handleChange} isOn={isOn} color={color}>
-      <Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
-    </Container>
+    <StyledContainer onClick={handleChange} isOn={isOn} color={color}>
+      <StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
+    </StyledContainer>
  );
 }
--- a/front/src/modules/ui/layout/components/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/components/DefaultLayout.tsx
@ -37,7 +37,7 @@ const StyledLayout = styled.div`

 const NAVBAR_WIDTH = '236px';

-const MainContainer = styled.div`
+const StyledMainContainer = styled.div`
  display: flex;
  flex-direction: row;
  overflow: hidden;
@ -63,7 +63,7 @@ export function DefaultLayout({ children }: OwnProps) {
      <NavbarAnimatedContainer>
        <AppNavbar />
      </NavbarAnimatedContainer>
-      <MainContainer>
+      <StyledMainContainer>
        {onboardingStatus && onboardingStatus !== OnboardingStatus.Completed ? (
          <>
            <CompaniesMockMode />
@ -76,7 +76,7 @@ export function DefaultLayout({ children }: OwnProps) {
        ) : (
          <>{children}</>
        )}
-      </MainContainer>
+      </StyledMainContainer>
    </StyledLayout>
  );
 }
--- a/front/src/modules/ui/layout/components/ShowPageContainer.tsx
+++ b/front/src/modules/ui/layout/components/ShowPageContainer.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
--- a/front/src/modules/ui/layout/page-bar/components/PageBar.tsx
+++ b/front/src/modules/ui/layout/page-bar/components/PageBar.tsx
@ -14,7 +14,7 @@ import { isNavbarOpenedState } from '../../states/isNavbarOpenedState';

 export const PAGE_BAR_MIN_HEIGHT = 40;

-const TopBarContainer = styled.div`
+const StyledTopBarContainer = styled.div`
  align-items: center;
  background: ${({ theme }) => theme.background.noisy};
  color: ${({ theme }) => theme.font.color.primary};
@ -35,18 +35,18 @@ const StyledLeftContainer = styled.div`
  width: 100%;
 `;

-const TitleContainer = styled.div`
+const StyledTitleContainer = styled.div`
  display: flex;
  font-size: ${({ theme }) => theme.font.size.md};
  margin-left: ${({ theme }) => theme.spacing(1)};
  max-width: 50%;
 `;

-const TopBarButtonContainer = styled.div`
+const StyledTopBarButtonContainer = styled.div`
  margin-right: ${({ theme }) => theme.spacing(1)};
 `;

-const BackIconButton = styled(IconButton)`
+const StyledBackIconButton = styled(IconButton)`
  margin-right: ${({ theme }) => theme.spacing(1)};
 `;

@ -58,7 +58,7 @@ const StyledTopBarIconTitleContainer = styled.div`
  width: 100%;
 `;

-const ActionButtonsContainer = styled.div`
+const StyledActionButtonsContainer = styled.div`
  display: inline-flex;
  gap: ${({ theme }) => theme.spacing(2)};
 `;
@ -91,29 +91,29 @@ export function PageBar({

  return (
    <>
-      <TopBarContainer>
+      <StyledTopBarContainer>
        <StyledLeftContainer>
          {!isNavbarOpened && (
-            <TopBarButtonContainer>
+            <StyledTopBarButtonContainer>
              <NavCollapseButton direction="right" />
-            </TopBarButtonContainer>
+            </StyledTopBarButtonContainer>
          )}
          {hasBackButton && (
-            <TopBarButtonContainer>
-              <BackIconButton
+            <StyledTopBarButtonContainer>
+              <StyledBackIconButton
                icon={<IconChevronLeft size={iconSize} />}
                onClick={navigateBack}
              />
-            </TopBarButtonContainer>
+            </StyledTopBarButtonContainer>
          )}
          <StyledTopBarIconTitleContainer>
            {icon}
-            <TitleContainer data-testid="top-bar-title">
+            <StyledTitleContainer data-testid="top-bar-title">
              <OverflowingTextWithTooltip text={title} />
-            </TitleContainer>
+            </StyledTitleContainer>
          </StyledTopBarIconTitleContainer>
        </StyledLeftContainer>
-        <ActionButtonsContainer>
+        <StyledActionButtonsContainer>
          {onFavoriteButtonClick && (
            <IconButton
              icon={<IconHeart size={16} />}
@ -134,8 +134,8 @@ export function PageBar({
              variant="border"
            />
          )}
-        </ActionButtonsContainer>
-      </TopBarContainer>
+        </StyledActionButtonsContainer>
+      </StyledTopBarContainer>
    </>
  );
 }
--- a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
+++ b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
--- a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';

 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
--- a/front/src/modules/ui/modal/components/Modal.tsx
+++ b/front/src/modules/ui/modal/components/Modal.tsx
@ -7,7 +7,7 @@ import {
  useListenClickOutside,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';

-const ModalDiv = styled(motion.div)`
+const StyledModalDiv = styled(motion.div)`
  display: flex;
  flex-direction: column;
  background: ${({ theme }) => theme.background.primary};
@ -43,7 +43,7 @@ const StyledFooter = styled.div`
  padding: ${({ theme }) => theme.spacing(5)};
 `;

-const BackDrop = styled(motion.div)`
+const StyledBackDrop = styled(motion.div)`
  align-items: center;
  background: ${({ theme }) => theme.background.overlay};
  display: flex;
@ -111,8 +111,8 @@ export function Modal({
  }

  return (
-    <BackDrop>
-      <ModalDiv
+    <StyledBackDrop>
+      <StyledModalDiv
        // framer-motion seems to have typing problems with refs
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
@ -125,8 +125,8 @@ export function Modal({
        {...restProps}
      >
        {children}
-      </ModalDiv>
-    </BackDrop>
+      </StyledModalDiv>
+    </StyledBackDrop>
  );
 }

--- a/front/src/modules/ui/navbar/components/NavBackButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavBackButton.tsx
@ -9,7 +9,7 @@ type OwnProps = {
  title: string;
 };

-const IconAndButtonContainer = styled.button`
+const StyledIconAndButtonContainer = styled.button`
  align-items: center;
  background: inherit;
  border: none;
@ -39,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
  return (
    <>
      <StyledContainer>
-        <IconAndButtonContainer
+        <StyledIconAndButtonContainer
          onClick={() => {
            setIsNavbarSwitchingSize(true);
            navigate('/', { replace: true });
@ -47,7 +47,7 @@ export default function NavBackButton({ title }: OwnProps) {
        >
          <IconChevronLeft />
          <span>{title}</span>
-        </IconAndButtonContainer>
+        </StyledIconAndButtonContainer>
      </StyledContainer>
    </>
  );
--- a/front/src/modules/ui/navbar/components/NavCollapseButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavCollapseButton.tsx
@ -10,7 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

 import { navbarIconSize } from '../constants';

-const CollapseButton = styled.button`
+const StyledCollapseButton = styled.button`
  align-items: center;
  background: inherit;
  border: 0;
@ -48,13 +48,13 @@ export default function NavCollapseButton({
  return (
    <>
      {direction === 'left' ? (
-        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
          <IconLayoutSidebarLeftCollapse size={iconSize} />
-        </CollapseButton>
+        </StyledCollapseButton>
      ) : (
-        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
          <IconLayoutSidebarRightCollapse size={iconSize} />
-        </CollapseButton>
+        </StyledCollapseButton>
      )}
    </>
  );
--- a/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
+++ b/front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx
@ -21,7 +21,7 @@ const StyledContainer = styled.div`
  user-select: none;
 `;

-const LogoAndNameContainer = styled.div`
+const StyledLogoAndNameContainer = styled.div`
  align-items: center;
  display: flex;
 `;
@ -56,7 +56,7 @@ function NavWorkspaceButton() {

  return (
    <StyledContainer>
-      <LogoAndNameContainer>
+      <StyledLogoAndNameContainer>
        <StyledLogo
          logo={
            currentWorkspace?.logo
@ -65,7 +65,7 @@ function NavWorkspaceButton() {
          }
        ></StyledLogo>
        <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
-      </LogoAndNameContainer>
+      </StyledLogoAndNameContainer>
      <NavCollapseButton direction="left" />
    </StyledContainer>
  );
--- a/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx
+++ b/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx
@ -10,14 +10,14 @@ import { RightDrawerPages } from '../types/RightDrawerPages';

 import { RightDrawerTopBar } from './RightDrawerTopBar';

-const RightDrawerPage = styled.div`
+const StyledRightDrawerPage = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
 `;

-const RightDrawerBody = styled.div`
+const StyledRightDrawerBody = styled.div`
  display: flex;
  flex-direction: column;
  height: calc(
@ -47,9 +47,9 @@ export function RightDrawerRouter() {
  }

  return (
-    <RightDrawerPage>
+    <StyledRightDrawerPage>
      <RightDrawerTopBar />
-      <RightDrawerBody>{page}</RightDrawerBody>
-    </RightDrawerPage>
+      <StyledRightDrawerBody>{page}</StyledRightDrawerBody>
+    </StyledRightDrawerPage>
  );
 }
--- a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx
+++ b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx
@ -24,7 +24,7 @@ const StyledRightDrawerTopBar = styled.div`
  padding-right: ${({ theme }) => theme.spacing(2)};
 `;

-const TopBarWrapper = styled.div`
+const StyledTopBarWrapper = styled.div`
  display: flex;
 `;

@ -34,10 +34,10 @@ export function RightDrawerTopBar() {

  return (
    <StyledRightDrawerTopBar>
-      <TopBarWrapper>
+      <StyledTopBarWrapper>
        <RightDrawerTopBarCloseButton />
        {!isMobile && <RightDrawerTopBarExpandButton />}
-      </TopBarWrapper>
+      </StyledTopBarWrapper>
      <ActivityActionBar activityId={activityId ?? ''} />
    </StyledRightDrawerTopBar>
  );
--- a/front/src/modules/ui/snack-bar/components/SnackBar.tsx
+++ b/front/src/modules/ui/snack-bar/components/SnackBar.tsx
@ -51,7 +51,7 @@ const StyledIconContainer = styled.div`
  margin-right: ${({ theme }) => theme.spacing(2)};
 `;

-const ProgressBarContainer = styled.div`
+const StyledProgressBarContainer = styled.div`
  height: 5px;
  left: 0;
  position: absolute;
@ -59,7 +59,7 @@ const ProgressBarContainer = styled.div`
  top: 0;
 `;

-const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
+const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
  align-items: center;
  background-color: transparent;
  border: none;
@ -162,20 +162,20 @@ export function SnackBar({
      variant={variant}
      {...rootProps}
    >
-      <ProgressBarContainer>
+      <StyledProgressBarContainer>
        <ProgressBar
          ref={progressBarRef}
          barHeight={5}
          barColor={rgba(theme.grayScale.gray0, 0.3)}
          duration={duration}
        />
-      </ProgressBarContainer>
+      </StyledProgressBarContainer>
      {icon && <StyledIconContainer>{icon}</StyledIconContainer>}
      {children ? children : message}
      {allowDismiss && (
-        <CloseButton variant={variant} onClick={closeSnackbar}>
+        <StyledCloseButton variant={variant} onClick={closeSnackbar}>
          <IconX aria-label="Close" size={theme.icon.size.md} />
-        </CloseButton>
+        </StyledCloseButton>
      )}
    </StyledMotionContainer>
  );
--- a/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx
+++ b/front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx
@ -6,7 +6,7 @@ import { snackBarInternalState } from '../states/snackBarState';

 import { SnackBar } from './SnackBar';

-const SnackBarContainer = styled.div`
+const StyledSnackBarContainer = styled.div`
  display: flex;
  flex-direction: column;
  position: fixed;
@ -15,7 +15,7 @@ const SnackBarContainer = styled.div`
  z-index: 99999999;
 `;

-const SnackBarMotionContainer = styled(motion.div)`
+const StyledSnackBarMotionContainer = styled(motion.div)`
  margin-right: ${({ theme }) => theme.spacing(3)};
  margin-top: ${({ theme }) => theme.spacing(3)};
 `;
@ -68,9 +68,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
  return (
    <>
      {children}
-      <SnackBarContainer>
+      <StyledSnackBarContainer>
        {snackBarState.queue.map((snackBar) => (
-          <SnackBarMotionContainer
+          <StyledSnackBarMotionContainer
            key={snackBar.id}
            variants={reducedMotion ? reducedVariants : variants}
            initial="initial"
@ -83,9 +83,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
              {...snackBar}
              onClose={() => handleSnackBarClose(snackBar.id)}
            />
-          </SnackBarMotionContainer>
+          </StyledSnackBarMotionContainer>
        ))}
-      </SnackBarContainer>
+      </StyledSnackBarContainer>
    </>
  );
 }
--- a/front/src/modules/ui/step-bar/components/Step.tsx
+++ b/front/src/modules/ui/step-bar/components/Step.tsx
@ -4,13 +4,13 @@ import { motion } from 'framer-motion';

 import { AnimatedCheckmark } from '@/ui/checkmark/components/AnimatedCheckmark';

-const Container = styled.div<{ isLast: boolean }>`
+const StyledContainer = styled.div<{ isLast: boolean }>`
  align-items: center;
  display: flex;
  flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
 `;

-const StepCircle = styled(motion.div)`
+const StyledStepCircle = styled(motion.div)`
  align-items: center;
  border-radius: 50%;
  border-style: solid;
@ -25,13 +25,13 @@ const StepCircle = styled(motion.div)`
  width: 20px;
 `;

-const StepIndex = styled.span`
+const StyledStepIndex = styled.span`
  color: ${({ theme }) => theme.font.color.tertiary};
  font-size: ${({ theme }) => theme.font.size.md};
  font-weight: ${({ theme }) => theme.font.weight.medium};
 `;

-const StepLabel = styled.span<{ isActive: boolean }>`
+const StyledStepLabel = styled.span<{ isActive: boolean }>`
  color: ${({ theme, isActive }) =>
    isActive ? theme.font.color.primary : theme.font.color.tertiary};
  font-size: ${({ theme }) => theme.font.size.md};
@ -40,7 +40,7 @@ const StepLabel = styled.span<{ isActive: boolean }>`
  white-space: nowrap;
 `;

-const StepLine = styled(motion.div)`
+const StyledStepLine = styled(motion.div)`
  height: 2px;
  margin-left: ${({ theme }) => theme.spacing(2)};
  margin-right: ${({ theme }) => theme.spacing(2)};
@ -90,8 +90,8 @@ export const Step = ({
  };

  return (
-    <Container isLast={isLast}>
-      <StepCircle
+    <StyledContainer isLast={isLast}>
+      <StyledStepCircle
        variants={variantsCircle}
        animate={isActive ? 'active' : 'inactive'}
      >
@ -101,17 +101,17 @@ export const Step = ({
            color={theme.grayScale.gray0}
          />
        )}
-        {!isActive && <StepIndex>{index + 1}</StepIndex>}
-      </StepCircle>
-      <StepLabel isActive={isActive}>{label}</StepLabel>
+        {!isActive && <StyledStepIndex>{index + 1}</StyledStepIndex>}
+      </StyledStepCircle>
+      <StyledStepLabel isActive={isActive}>{label}</StyledStepLabel>
      {!isLast && (
-        <StepLine
+        <StyledStepLine
          variants={variantsLine}
          animate={isActive ? 'active' : 'inactive'}
        />
      )}
      {isActive && children}
-    </Container>
+    </StyledContainer>
  );
 };

--- a/front/src/modules/ui/step-bar/components/StepBar.tsx
+++ b/front/src/modules/ui/step-bar/components/StepBar.tsx
@ -3,7 +3,7 @@ import styled from '@emotion/styled';

 import { Step, StepProps } from './Step';

-const Container = styled.div`
+const StyledContainer = styled.div`
  display: flex;
  flex: 1;
  justify-content: space-between;
@ -16,7 +16,7 @@ export type StepsProps = React.PropsWithChildren &

 export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
  return (
-    <Container {...restProps}>
+    <StyledContainer {...restProps}>
      {React.Children.map(children, (child, index) => {
        if (!React.isValidElement(child)) {
          return null;
@ -35,7 +35,7 @@ export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
          isLast: index === React.Children.count(children) - 1,
        });
      })}
-    </Container>
+    </StyledContainer>
  );
 };

--- a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx
+++ b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx
@ -27,7 +27,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
      : ''}
 `;

-const EditableCellDisplayModeInnerContainer = styled.div`
+const StyledEditableCellDisplayModeInnerContainer = styled.div`
  align-items: center;
  display: flex;
  height: 100%;
@ -52,9 +52,9 @@ export function EditableCellDisplayContainer({
      softFocus={softFocus}
      ref={scrollRef}
    >
-      <EditableCellDisplayModeInnerContainer>
+      <StyledEditableCellDisplayModeInnerContainer>
        {children}
-      </EditableCellDisplayModeInnerContainer>
+      </StyledEditableCellDisplayModeInnerContainer>
    </StyledEditableCellDisplayModeOuterContainer>
  );
 }
--- a/front/src/modules/ui/tooltip/AppTooltip.tsx
+++ b/front/src/modules/ui/tooltip/AppTooltip.tsx
@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';

--- a/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
+++ b/front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx
@ -7,7 +7,7 @@ const StyledContainer = styled(motion.div)`
  overflow: hidden;
 `;

-const Word = styled(motion.span)`
+const StyledWord = styled(motion.span)`
  white-space: pre;
 `;

@ -61,9 +61,9 @@ export function AnimatedTextWord({ text = '', ...restProps }: Props) {
      {...restProps}
    >
      {words.map((word, index) => (
-        <Word variants={childAnimation} key={index}>
+        <StyledWord variants={childAnimation} key={index}>
          {word}
-        </Word>
+        </StyledWord>
      ))}
    </StyledContainer>
  );