Remove CSS modules (#6017)

CSS modules were used as a first test for performance optimization.

We later found out that Linaria was a better tradeoff.

This PR removes what was implemented in CSS modules and also the CSS
theme file that was created that was overlapping with the TS theme
files.

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

@@ -1,32 +0,0 @@
-.td-in-edit-mode {
-  z-index: 4 !important;
-}
-
-.td-not-in-edit-mode {
-  z-index: 3;
-}
-
-.td-is-selected {
-  background: var(--twentycrm-accent-quaternary);
-}
-
-.td-is-not-selected {
-  background: var(--twentycrm-background-primary);
-}
-
-.cell-base-container {
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  height: 32px;
-  position: relative;
-  user-select: none;
-}
-
-.cell-base-container-soft-focus {
-  background: var(--twentycrm-background-transparent-secondary);
-  border-radius: var(--twentycrm-border-radius-sm);
-  border: 1px solid var(--twentycrm-font-color-extra-light);
-}
-

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();
 
@@ -100,27 +134,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>
@@ -134,8 +169,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.module.css

@@ -1,21 +0,0 @@
-.cell-display-outer-container {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  padding-left: 6px;
-  width: 100%;
-}
-
-.cell-display-with-soft-focus {
-  margin: -1px;
-}
-
-.cell-display-inner-container {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-}
-

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>
 );