Remove CSS modules

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useContext } from 'react';
-import { clsx } from 'clsx';
+import { styled } from '@linaria/react';
 import { useRecoilValue } from 'recoil';
+import { BORDER_COMMON, ThemeContext } from 'twenty-ui';
 
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
@@ -22,7 +23,38 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
 import { RecordTableCellEditMode } from './RecordTableCellEditMode';
 
-import styles from './RecordTableCellContainer.module.css';
+const StyledTd = styled.td<{
+  isInEditMode: boolean;
+  backgroundColor: string;
+}>`
+  background: ${({ backgroundColor }) => backgroundColor};
+  z-index: ${({ isInEditMode }) => (isInEditMode ? '4 !important' : 3)};
+`;
+
+const borderRadiusSm = BORDER_COMMON.radius.sm;
+
+const StyledBaseContainer = styled.div<{
+  hasSoftFocus: boolean;
+  fontColorExtraLight: string;
+  backgroundColorTransparentSecondary: string;
+}>`
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  position: relative;
+  user-select: none;
+
+  background: ${({ hasSoftFocus, backgroundColorTransparentSecondary }) =>
+    hasSoftFocus ? backgroundColorTransparentSecondary : 'none'};
+
+  border-radius: ${({ hasSoftFocus }) =>
+    hasSoftFocus ? borderRadiusSm : 'none'};
+
+  border: ${({ hasSoftFocus, fontColorExtraLight }) =>
+    hasSoftFocus ? `1px solid ${fontColorExtraLight}` : 'none'};
+`;
 
 export type RecordTableCellContainerProps = {
   editModeContent: ReactElement;
@@ -43,6 +75,8 @@ export const RecordTableCellContainer = ({
   nonEditModeContent,
   editHotkeyScope,
 }: RecordTableCellContainerProps) => {
+  const { theme } = useContext(ThemeContext);
+
   const { setIsFocused } = useFieldFocus();
   const { openTableCell } = useOpenRecordTableCellFromCell();
 
@@ -99,27 +133,28 @@ export const RecordTableCellContainer = ({
     }
   };
 
+  const tdBackgroundColor = isSelected
+    ? theme.accent.quaternary
+    : theme.background.primary;
+
   return (
-    <td
-      className={clsx({
-        [styles.tdInEditMode]: isInEditMode,
-        [styles.tdNotInEditMode]: !isInEditMode,
-        [styles.tdIsSelected]: isSelected,
-        [styles.tdIsNotSelected]: !isSelected,
-      })}
+    <StyledTd
+      backgroundColor={tdBackgroundColor}
+      isInEditMode={isInEditMode}
       onContextMenu={handleContextMenu}
     >
       <CellHotkeyScopeContext.Provider
         value={editHotkeyScope ?? DEFAULT_CELL_SCOPE}
       >
-        <div
+        <StyledBaseContainer
           onMouseLeave={handleContainerMouseLeave}
           onMouseMove={handleContainerMouseMove}
           onClick={handleContainerClick}
-          className={clsx({
-            [styles.cellBaseContainer]: true,
-            [styles.cellBaseContainerSoftFocus]: hasSoftFocus,
-          })}
+          backgroundColorTransparentSecondary={
+            theme.background.transparent.secondary
+          }
+          fontColorExtraLight={theme.font.color.extraLight}
+          hasSoftFocus={hasSoftFocus}
         >
           {isInEditMode ? (
             <RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
@@ -133,8 +168,8 @@ export const RecordTableCellContainer = ({
               {nonEditModeContent}
             </RecordTableCellDisplayMode>
           )}
-        </div>
+        </StyledBaseContainer>
       </CellHotkeyScopeContext.Provider>
-    </td>
+    </StyledTd>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -1,7 +1,26 @@
 import { Ref } from 'react';
-import clsx from 'clsx';
+import { styled } from '@linaria/react';
 
-import styles from './RecordTableCellDisplayContainer.module.css';
+const StyledOuterContainer = styled.div<{
+  hasSoftFocus?: boolean;
+}>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  padding-left: 6px;
+  width: 100%;
+
+  margin: ${({ hasSoftFocus }) => (hasSoftFocus === true ? '-1px' : 'none')};
+`;
+
+const StyledInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
 
 export type EditableCellDisplayContainerProps = {
   softFocus?: boolean;
@@ -16,17 +35,14 @@ export const RecordTableCellDisplayContainer = ({
   onClick,
   scrollRef,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
-  <div
+  <StyledOuterContainer
     data-testid={
       softFocus ? 'editable-cell-soft-focus-mode' : 'editable-cell-display-mode'
     }
     onClick={onClick}
-    className={clsx({
-      [styles.cellDisplayOuterContainer]: true,
-      [styles.cellDisplayWithSoftFocus]: softFocus,
-    })}
     ref={scrollRef}
+    hasSoftFocus={softFocus}
   >
-    <div className={clsx(styles.cellDisplayInnerContainer)}>{children}</div>
-  </div>
+    <StyledInnerContainer>{children}</StyledInnerContainer>
+  </StyledOuterContainer>
 );

packages/twenty-front/vite.config.ts

@@ -64,6 +64,9 @@ export default defineConfig(({ command, mode }) => {
           '**/Tag.tsx',
           '**/MultiSelectFieldDisplay.tsx',
           '**/RatingInput.tsx',
+          '**/RecordTableCellContainer.tsx',
+          '**/RecordTableCellDisplayContainer.tsx',
+          '**/Avatar.tsx',
         ],
         babelOptions: {
           presets: ['@babel/preset-typescript', '@babel/preset-react'],

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -1,15 +1,49 @@
+import { useContext } from 'react';
+import { styled } from '@linaria/react';
 import { isNonEmptyString, isUndefined } from '@sniptt/guards';
-import clsx from 'clsx';
 import { useRecoilState } from 'recoil';
 
 import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
+import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize';
+import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
+import { AvatarType } from '@ui/display/avatar/types/AvatarType';
+import { ThemeContext } from '@ui/theme';
 import { Nullable, stringToHslColor } from '@ui/utilities';
 
-import styles from './Avatar.module.css';
+const StyledAvatar = styled.div<{
+  size: AvatarSize;
+  rounded?: boolean;
+  clickable?: boolean;
+  color: string;
+  backgroundColor: string;
+  backgroundTransparentLight: string;
+}>`
+  align-items: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
 
-export type AvatarType = 'squared' | 'rounded';
+  border-radius: ${({ rounded }) => (rounded ? '50%' : '2px')};
+  display: flex;
+  font-size: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].fontSize};
+  height: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width};
+  justify-content: center;
 
-export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  width: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width};
+
+  color: ${({ color }) => color};
+  background: ${({ backgroundColor }) => backgroundColor};
+
+  &:hover {
+    box-shadow: ${({ clickable, backgroundTransparentLight }) =>
+      clickable ? `0 0 0 4px ${backgroundTransparentLight}` : 'none'};
+  }
+`;
+const StyledImage = styled.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
 
 export type AvatarProps = {
   avatarUrl?: string | null;
@@ -23,29 +57,7 @@ export type AvatarProps = {
   onClick?: () => void;
 };
 
-const propertiesBySize = {
-  xl: {
-    fontSize: '16px',
-    width: '40px',
-  },
-  lg: {
-    fontSize: '13px',
-    width: '24px',
-  },
-  md: {
-    fontSize: '12px',
-    width: '16px',
-  },
-  sm: {
-    fontSize: '10px',
-    width: '14px',
-  },
-  xs: {
-    fontSize: '8px',
-    width: '12px',
-  },
-};
-
+// TODO: Remove recoil because we don't want it into twenty-ui and find a solution for invalid avatar urls
 export const Avatar = ({
   avatarUrl,
   size = 'md',
@@ -56,6 +68,7 @@ export const Avatar = ({
   color,
   backgroundColor,
 }: AvatarProps) => {
+  const { theme } = useContext(ThemeContext);
   const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState(
     invalidAvatarUrlsState,
   );
@@ -79,31 +92,20 @@ export const Avatar = ({
   const showBackgroundColor = showPlaceholder;
 
   return (
-    <div
-      className={clsx({
-        [styles.avatar]: true,
-        [styles.rounded]: type === 'rounded',
-        [styles.avatarOnClick]: !isUndefined(onClick),
-      })}
+    <StyledAvatar
+      size={size}
+      backgroundColor={showBackgroundColor ? fixedBackgroundColor : 'none'}
+      color={fixedColor}
+      clickable={!isUndefined(onClick)}
+      rounded={type === 'rounded'}
       onClick={onClick}
-      style={{
-        color: fixedColor,
-        backgroundColor: showBackgroundColor ? fixedBackgroundColor : 'none',
-        width: propertiesBySize[size].width,
-        height: propertiesBySize[size].width,
-        fontSize: propertiesBySize[size].fontSize,
-      }}
+      backgroundTransparentLight={theme.background.transparent.light}
     >
       {showPlaceholder ? (
         placeholderChar
       ) : (
-        <img
-          src={avatarUrl}
-          className={styles.avatarImage}
-          onError={handleImageError}
-          alt=""
-        />
+        <StyledImage src={avatarUrl} onError={handleImageError} alt="" />
       )}
-    </div>
+    </StyledAvatar>
   );
 };

packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx

@@ -1,11 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import {
-  Avatar,
-  AvatarProps,
-  AvatarSize,
-  AvatarType,
-} from '@ui/display/avatar/components/Avatar';
+import { Avatar, AvatarProps } from '@ui/display/avatar/components/Avatar';
+import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
+import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import {
   AVATAR_URL_MOCK,
   CatalogDecorator,