From 9a4a2e4ca91a1391127184906e8951904a0b7a40 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 21 Jun 2024 16:15:17 +0200
Subject: [PATCH] Fix links chip design (#5963)

Fix https://github.com/twentyhq/twenty/issues/5938 and
https://github.com/twentyhq/twenty/issues/5655

- Make sure chip count is displayed
- Fix padding
- Fix background colors, border
- Add hover and active states

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../field/display/components/LinksDisplay.tsx |  2 +-
 .../link/components/RoundedLink.tsx           | 47 ++++++++++++++-----
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
index ee58d124fb..339859dfe6 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
@@ -59,7 +59,7 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
   );
 
   return isFocused ? (
-    <ExpandableList isChipCountDisplayed={isFocused}>
+    <ExpandableList isChipCountDisplayed>
       {links.map(({ url, label, type }, index) =>
         type === LinkType.LinkedIn || type === LinkType.Twitter ? (
           <SocialLink key={index} href={url} type={type} label={label} />
diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
index 4b63ca0902..61480f17fd 100644
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
@@ -1,7 +1,7 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useContext } from 'react';
 import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
-import { FONT_COMMON, THEME_COMMON } from 'twenty-ui';
+import { FONT_COMMON, THEME_COMMON, ThemeContext } from 'twenty-ui';
 
 type RoundedLinkProps = {
   href: string;
@@ -11,17 +11,23 @@ type RoundedLinkProps = {
 
 const fontSizeMd = FONT_COMMON.size.md;
 const spacing1 = THEME_COMMON.spacing(1);
-const spacing3 = THEME_COMMON.spacing(3);
+const spacing2 = THEME_COMMON.spacing(2);
 
 const spacingMultiplicator = THEME_COMMON.spacingMultiplicator;
 
-const StyledLink = styled.a`
+const StyledLink = styled.a<{
+  color: string;
+  background: string;
+  backgroundHover: string;
+  backgroundActive: string;
+  border: string;
+}>`
   align-items: center;
-  background-color: var(--twentycrm-background-transparent-light);
-  border: 1px solid var(--twentycrm-border-color-medium);
+  background-color: ${({ background }) => background};
+  border: 1px solid ${({ border }) => border};
 
   border-radius: 50px;
-  color: var(--twentycrm-font-color-primary);
+  color: ${({ color }) => color};
 
   cursor: pointer;
   display: inline-flex;
@@ -29,25 +35,39 @@ const StyledLink = styled.a`
 
   gap: ${spacing1};
 
-  height: ${spacing3};
+  height: 10px;
   justify-content: center;
 
   max-width: calc(100% - ${spacingMultiplicator} * 2px);
 
-  max-width: 100%;
-
   min-width: fit-content;
 
   overflow: hidden;
-  padding: ${spacing1} ${spacing1};
+  padding: ${spacing1} ${spacing2};
 
   text-decoration: none;
   text-overflow: ellipsis;
   user-select: none;
   white-space: nowrap;
+
+  &:hover {
+    background-color: ${({ backgroundHover }) => backgroundHover};
+  }
+
+  &:active {
+    background-color: ${({ backgroundActive }) => backgroundActive};
+  }
 `;
 
 export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  const background = theme.background.transparent.lighter;
+  const backgroundHover = theme.background.transparent.light;
+  const backgroundActive = theme.background.transparent.medium;
+  const border = theme.border.color.strong;
+  const color = theme.font.color.primary;
+
   if (!isNonEmptyString(label)) {
     return <></>;
   }
@@ -64,6 +84,11 @@ export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
       target="_blank"
       rel="noreferrer"
       onClick={handleClick}
+      color={color}
+      background={background}
+      backgroundHover={backgroundHover}
+      backgroundActive={backgroundActive}
+      border={border}
     >
       {label}
     </StyledLink>