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

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

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards';
 import { useContext } from 'react';
-import { useRecoilState } from 'recoil';
 
 import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
 import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize';
@@ -11,6 +10,7 @@ import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
 import { Nullable, stringToHslColor } from '@ui/utilities';
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
+import { useRecoilState } from 'recoil';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
 
 const StyledAvatar = styled.div<{

packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx

@@ -7,6 +7,7 @@ type RoundedLinkProps = {
   href: string;
   label?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  className?: string;
 };
 
 const fontSizeMd = FONT_COMMON.size.md;
@@ -59,7 +60,12 @@ const StyledLink = styled.a<{
   }
 `;
 
-export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
+export const RoundedLink = ({
+  label,
+  href,
+  onClick,
+  className,
+}: RoundedLinkProps) => {
   const { theme } = useContext(ThemeContext);
 
   const background = theme.background.transparent.lighter;
@@ -89,6 +95,7 @@ export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
       backgroundHover={backgroundHover}
       backgroundActive={backgroundActive}
       border={border}
+      className={className}
     >
       {label}
     </StyledLink>