Fix links chip design (#5963)

Fix #5938 and #5655 - Make sure chip count is displayed - Fix padding - Fix background colors, border - Add hover and active states --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Jun 21, 2024 · 9a4a2e4 · 9a4a2e4
1 parent 7326530
commit 9a4a2e4
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 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
@@ -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
@@ -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,43 +11,63 @@ 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;
   font-weight: ${fontSizeMd};
 
   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>