Make token update synchronous on FE (#11486)

1. Removing tokenPair internal variable of ApolloFactory. We will relay
on cookieStorage
2. setting the cookie explicitely instead of only relaying on recoil
cookieEffect which is too late

packages/twenty-ui/src/components/avatar-chip/AvatarChip.tsx

@@ -19,7 +19,7 @@ export const AvatarChip = ({
     label={name}
     variant={ChipVariant.Transparent}
     size={size}
-    leftComponent={() => (
+    leftComponent={
       <AvatarChipsLeftComponent
         name={name}
         LeftIcon={LeftIcon}
@@ -29,7 +29,7 @@ export const AvatarChip = ({
         isIconInverted={isIconInverted}
         placeholderColorSeed={placeholderColorSeed}
       />
-    )}
+    }
     clickable={false}
     className={className}
     maxWidth={maxWidth}

packages/twenty-ui/src/components/avatar-chip/AvatarChipLeftComponent.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { Avatar } from '@ui/display/avatar/components/Avatar';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';

packages/twenty-ui/src/components/avatar-chip/LinkAvatarChip.tsx

@@ -39,7 +39,7 @@ export const LinkAvatarChip = ({
         : ChipVariant.Regular
     }
     size={size}
-    leftComponent={() => (
+    leftComponent={
       <AvatarChipsLeftComponent
         name={name}
         LeftIcon={LeftIcon}
@@ -49,7 +49,7 @@ export const LinkAvatarChip = ({
         isIconInverted={isIconInverted}
         placeholderColorSeed={placeholderColorSeed}
       />
-    )}
+    }
     className={className}
     maxWidth={maxWidth}
   />

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -30,7 +30,7 @@ export type ChipProps = {
   maxWidth?: number;
   variant?: ChipVariant;
   accent?: ChipAccent;
-  leftComponent?: (() => ReactNode) | null;
+  leftComponent?: ReactNode | null;
   rightComponent?: (() => ReactNode) | null;
   className?: string;
 };
@@ -146,7 +146,7 @@ export const Chip = ({
       className={className}
       maxWidth={maxWidth}
     >
-      {leftComponent?.()}
+      {leftComponent}
       {!isLabelHidden && (
         <OverflowingTextWithTooltip size={size} text={label} />
       )}

packages/twenty-ui/src/components/chip/LinkChip.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
   Chip,
   ChipAccent,
@@ -17,8 +17,6 @@ export type LinkChipProps = Omit<
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 };
 
-// Ideally we would use the UndecoratedLink component from @ui/navigation
-// but it led to a bug probably linked to circular dependencies, which was hard to solve
 const StyledLink = styled(Link)`
   text-decoration: none;
 `;