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-ui/src/display/avatar/components/Avatar.module.css

@@ -1,23 +0,0 @@
-.avatar {
-  align-items: center;
-  border-radius: 2px;
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  overflow: hidden;
-  user-select: none;
-}
-
-.rounded {
-  border-radius: 50%;
-}
-
-.avatar-on-click:hover {
-  box-shadow: 0 0 0 4px var(--twentycrm-background-transparent-light);
-}
-
-.avatar-image {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}

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,

packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts

@@ -0,0 +1,22 @@
+export const AVATAR_PROPERTIES_BY_SIZE = {
+  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',
+  },
+};

packages/twenty-ui/src/display/avatar/types/AvatarSize.ts

@@ -0,0 +1 @@
+export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';

packages/twenty-ui/src/display/avatar/types/AvatarType.ts

@@ -0,0 +1 @@
+export type AvatarType = 'squared' | 'rounded';

packages/twenty-ui/src/display/chip/components/EntityChip.tsx

@@ -3,7 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import { isNonEmptyString } from '@sniptt/guards';
 
-import { Avatar, AvatarType } from '@ui/display/avatar/components/Avatar';
+import { Avatar } from '@ui/display/avatar/components/Avatar';
+import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { Chip, ChipVariant } from '@ui/display/chip/components/Chip';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { Nullable } from '@ui/utilities/types/Nullable';

packages/twenty-ui/src/display/index.ts

@@ -1,6 +1,9 @@
 export * from './avatar/components/Avatar';
 export * from './avatar/components/AvatarGroup';
 export * from './avatar/components/states/isInvalidAvatarUrlState';
+export * from './avatar/constants/AvatarPropertiesBySize';
+export * from './avatar/types/AvatarSize';
+export * from './avatar/types/AvatarType';
 export * from './checkmark/components/AnimatedCheckmark';
 export * from './checkmark/components/Checkmark';
 export * from './chip/components/Chip';

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.module.css

@@ -1,20 +0,0 @@
-.main {
-  font-family: inherit;
-  font-size: inherit;
-
-  font-weight: inherit;
-  max-width: 100%;
-  overflow: hidden;
-  text-decoration: inherit;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cursor {
-  cursor: pointer;
-}
-
-.large {
-  height: calc(var(--twentycrm-spacing-multiplicator) * 4px);
-}