From 175ae5f0aa1a0566d52826c1d66b9d3b5b1fea05 Mon Sep 17 00:00:00 2001 From: Thomas des Francs Date: Thu, 2 Apr 2026 22:26:05 +0200 Subject: [PATCH] polishing next home hero visual (#19284) **Summary** - update the home hero navbar controls and surface styling to better match the latest visual design - simplify row hover actions by removing edit affordances and disabling hover controls for `createdBy` and `accountOwner` - tighten chip typography and spacing for more consistent hero table rendering - include the captured Playwright screenshot artifact for reference **Testing** - Not run (not requested) --- .gitignore | 1 + .../images/home/hero/apple-rainbow-logo.svg | 1 + .../home/hero/avatars/katherine-adams.jpg | Bin 0 -> 2998 bytes .../images/home/hero/twenty-demo-logo.png | Bin 0 -> 976 bytes .../public/images/shared/light-noise.png | Bin 0 -> 9657 bytes .../src/app/(home)/constants/hero.ts | 172 +++---- .../Hero/components/HomeVisual/HomeVisual.tsx | 487 +++++++++++++----- .../components/HomeVisual/homeVisualChip.tsx | 11 +- .../components/HomeVisual/homeVisualTokens.ts | 3 +- .../src/sections/Hero/types/HeroHomeData.ts | 16 +- 10 files changed, 472 insertions(+), 219 deletions(-) create mode 100644 packages/twenty-website-new/public/images/home/hero/apple-rainbow-logo.svg create mode 100644 packages/twenty-website-new/public/images/home/hero/avatars/katherine-adams.jpg create mode 100644 packages/twenty-website-new/public/images/home/hero/twenty-demo-logo.png create mode 100644 packages/twenty-website-new/public/images/shared/light-noise.png diff --git a/.gitignore b/.gitignore index 5d42fe9cac..1d94e44b26 100644 --- a/.gitignore +++ b/.gitignore @@ -52,3 +52,4 @@ mcp.json /.junie/ TRANSLATION_QA_REPORT.md .playwright-mcp/ +.playwright-cli/ diff --git a/packages/twenty-website-new/public/images/home/hero/apple-rainbow-logo.svg b/packages/twenty-website-new/public/images/home/hero/apple-rainbow-logo.svg new file mode 100644 index 0000000000..c7767e8a93 --- /dev/null +++ b/packages/twenty-website-new/public/images/home/hero/apple-rainbow-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/twenty-website-new/public/images/home/hero/avatars/katherine-adams.jpg b/packages/twenty-website-new/public/images/home/hero/avatars/katherine-adams.jpg new file mode 100644 index 0000000000000000000000000000000000000000..32936f12a92d3fe01c103acfaefbed78550f4ed7 GIT binary patch literal 2998 zcmbVM3pAAL8vf>HM(n0>x8)Yv5|!JIC>ghr6xq5^ zY0~TxQKaNHOu5rYQNkpdG5qJB(aBzCt+UoX=lR$7zt8`E&-?!W^R93G&}(QItl4F2 zZwn9z08YUdfJQ)`O=5Tm0FI782LONrXvB{I12b3xb|93#b6bQqK#B550FH$N^f%2O zI0^xG6V)t7R9+Uq!Wk)eC0;^)SCcNGRye!|EZwZ^?cwM~jtvfuq=!YtL6gA58IDo# zL$sRVrY*pPXzz#?z7K|oYl-NZF6Hc=TyO_HenkA-$9ZBZ^aiPIZ)FwW?CNA|zuQJ+ z6R8jw9eqGp91$58>uN_-+w1M4h8=^yRp<~#AekO*>Fm5)$p0OMd! z2owPUJprolq%a5(M2+AZ0*OLn#IQK=RT8j(u?8R!C=?Qn!eE345^)&b2WSFDN?qSl zOxh(7yDmn?ApLYPPJ?*+v8-#yw5DNDY=-zMIe7)eAGOy1q`g7M$oS{2CZ^l0tZi)V zNcOwj+&w(KV7p{Wa7buaIF%k3e=s32DLM1#FImTaJ$@oD|M!A3XV3lP{N*bprB}=T zD8F{6>MrA6^?l}_^$ky+Ha0zLe%{II>Sn)s-P1erhBNwh?A`nEi5c$a*)MZn=Xrdg zF9bj>+k)@Q&i=y}0rrJNqfuzA&=&%kAT&-uW7PGH}5)EdmaW#!29CI0?K247?Ox2q`%! z5#+u>Nd#3PG`<6Zn;39e2*3ioV%O3f zX{~|9@t$)_yRa*O6_XGZNL%3iD12P|!RL}LaS`n7!Yepb{hhVv1&0Tib#1Q%e8HDwmdD!tZJ~JL zCLLG1ZoL^+<9J!cb$Y2)6gaO**0?yfb)iK@1-D(y>1OikV$P7fUj3#5*{Y{%BPE0S zryrYa&)sjTQox-$nPM|nD`qKGe8zsC1UXAR$zsI+>E(b4dA^a?&$o>Z5mLQv6$<9~ zsqtsop*5{T<*c479r2aFs;G6$UP5boAH>=2sN9oT@ zN7LlXDwB&Vm~5kyM<4lZd{UP_TWQRGy)QAgDd0#t(?hd&TizB6$z1kT;|crsEjlA3 z${hn~^$Rn5gH+gEAV!b`f%aQ~n{rMc3x>F4)lE*#@h7i@?{ z?kQE}o8Cd~ypS>F2H>^TxVnW@@#)aPzWaFp9S_-<7In)?*Snj`U+mf^sbtpkQA(Lkq7v{@%x$-dfmDGsos?; z{vX2l#*x0&K-c{to4&AUU%pahRb&b2X;z8+5r2)(wsCqbd3hobirX1i8Tsf3m<=WZrmvq>0GRE&+wF*Nn%FUdGQKexplwMm(g4fow2@VNs zGAO6AoUf28r-wfa%wq5$R+$A>ejtu>ieS@t}P9ZTA8 zt43LEmOHaZ%hb=0P^H&L`>{gKX1zP(AT0@jRQa&B;lxFqf#$`D3kf$W@l{#_A2%Pd z?%|ZFc@{J;4$F>K&2HQL)q(#y?=79c_h@=>R^u>WJlRrS!2y zDr~GrV6jw6%T#S&$dO4EynH6pN6R_nXR9>hj~_q5FcV`om0E2T{BjclAN~meeW$Za zJNm}`9W1PU)}KwAU!O7D2r7yrPN&F597?|*;J9Y{G}(43h`D!ZxS|~b%{%Tv;MVW8 zd@bro*Sn`v4gv>msJ7At_Z+$hYsw>QeBNE7(@0<%b(P9LUG-4&MpFN!Ntg7CEd$36 z#ILWBSRy##(vnpd1P~bU-#1*#lb{BCX@S6dj~>tC8lMGC^1gk|8yJyIP|v>rMYXdA literal 0 HcmV?d00001 diff --git a/packages/twenty-website-new/public/images/home/hero/twenty-demo-logo.png b/packages/twenty-website-new/public/images/home/hero/twenty-demo-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..aac50ec94cf2b7d8d15dd0d04bc80d1edf4d86d3 GIT binary patch literal 976 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 = { - amber: { background: '#fff4d6', border: '#ffd49b', color: '#9a6700' }, - blue: { background: '#d9e2fc', border: '#c6d4f9', color: '#3557c6' }, - gray: { background: '#ebebeb', border: '#d6d6d6', color: '#666666' }, + amber: { background: '#FEF2A4', border: '#FEF2A4', color: '#35290F' }, + blue: { background: '#d9e2fc', border: '#c6d4f9', color: '#3A5CCC' }, + gray: { background: '#ebebeb', border: '#d6d6d6', color: '#838383' }, green: { background: '#ccebd7', border: '#bbe4c9', color: '#153226' }, - orange: { background: '#ffdcc3', border: '#ffcca7', color: '#582d1d' }, + orange: { background: '#ffdcc3', border: '#ffcca7', color: '#ED5F00' }, pink: { background: '#ffe1e7', border: '#ffc8d6', color: '#a51853' }, purple: { background: '#e0e7ff', border: '#c7d2fe', color: '#4f46e5' }, - teal: { background: '#c7ebe5', border: '#b3e3dc', color: '#10302b' }, + teal: { background: '#c7ebe5', border: '#afdfd7', color: '#0E9888' }, violet: { background: '#ebe5ff', border: '#d8cbff', color: '#5b3fd1' }, - red: { background: '#fee2e2', border: '#fecaca', color: '#b91c1c' }, + red: { background: '#fdd8d8', border: '#f9c6c6', color: '#DC3D43' }, }; const PERSON_TONES: Record = { @@ -113,6 +116,10 @@ const PERSON_TONES: Record = { const TABLER_STROKE = 1.6; const NAVIGATION_TABLER_STROKE = 2; +const ROW_HOVER_ACTION_DISABLED_COLUMNS = new Set([ + 'createdBy', + 'accountOwner', +]); // -- Styled Components -- @@ -139,16 +146,7 @@ const ShellScene = styled.div` const Frame = styled.div` aspect-ratio: 1280 / 832; background-color: ${COLORS.background}; - background-image: radial-gradient( - circle at top center, - rgba(0, 0, 0, 0.035), - rgba(0, 0, 0, 0) 55% - ), - ${VISUAL_TOKENS.background.noisy}; - background-position: - center top, - center; - background-repeat: no-repeat, repeat; + background-image: ${VISUAL_TOKENS.background.noisy}; border: 1px solid ${COLORS.border}; border-radius: 8px; box-shadow: ${COLORS.shadow}; @@ -157,24 +155,27 @@ const Frame = styled.div` `; const AppLayout = styled.div` - display: grid; - grid-template-columns: 72px minmax(0, 1fr); + display: flex; height: 100%; + min-height: 0; position: relative; z-index: 1; - - @media (min-width: ${theme.breakpoints.md}px) { - grid-template-columns: 220px minmax(0, 1fr); - } `; const SidebarPanel = styled.aside` background: transparent; - border-right: 1px solid rgba(0, 0, 0, 0.04); display: grid; + flex: 0 0 72px; gap: 12px; grid-template-rows: auto auto minmax(0, 1fr); + min-height: 0; padding: 12px 8px; + width: 72px; + + @media (min-width: ${theme.breakpoints.md}px) { + flex-basis: 220px; + width: 220px; + } `; const SidebarTopBar = styled.div` @@ -196,16 +197,17 @@ const WorkspaceMenu = styled.div` const WorkspaceIcon = styled.div` align-items: center; - background: #111111; - border-radius: 2px; - color: #ffffff; display: flex; - font-family: ${APP_FONT}; - font-size: 11px; - font-weight: ${theme.font.weight.medium}; + flex: 0 0 auto; height: 16px; justify-content: center; - width: 16px; + width: 14px; +`; + +const WorkspaceIconImage = styled.img` + display: block; + height: 100%; + width: 100%; `; const WorkspaceLabel = styled.span` @@ -246,10 +248,17 @@ const SidebarControls = styled.div` display: grid; gap: 8px; grid-template-columns: auto 1fr; + min-width: 0; + + @media (min-width: ${theme.breakpoints.md}px) { + display: flex; + gap: 12px; + justify-content: space-between; + } `; const SegmentedRail = styled.div` - background: rgba(252, 252, 252, 0.8); + background: #fcfcfccc; border: 1px solid ${COLORS.border}; border-radius: 40px; display: grid; @@ -261,12 +270,17 @@ const SegmentedRail = styled.div` const Segment = styled.div<{ $selected?: boolean }>` align-items: center; background: ${({ $selected }) => - $selected ? 'rgba(0, 0, 0, 0.04)' : 'transparent'}; + $selected ? '#0000000a' : 'transparent'}; border-radius: 16px; display: flex; height: 22px; justify-content: center; width: 22px; + + @media (min-width: ${theme.breakpoints.md}px) { + padding: 0 8px; + width: 32px; + } `; const NewChat = styled.div` @@ -305,8 +319,9 @@ const NewChatLabel = styled.span` `; const SidebarScroll = styled.div` - display: grid; - gap: 12px; + display: flex; + flex-direction: column; + gap: 2px; min-height: 0; overflow: hidden; `; @@ -316,14 +331,15 @@ const SidebarSection = styled.div` gap: 2px; `; -const SidebarSectionLabel = styled.span` +const SidebarSectionLabel = styled.span<{ $workspace?: boolean }>` color: ${COLORS.textLight}; display: none; font-family: ${APP_FONT}; font-size: 11px; font-weight: 600; line-height: 1; - padding: 0 4px 4px; + padding: ${({ $workspace }) => + $workspace ? '4px 4px 8px' : '0 4px 4px'}; @media (min-width: ${theme.breakpoints.md}px) { display: block; @@ -333,17 +349,57 @@ const SidebarSectionLabel = styled.span` const SidebarItemRow = styled.div<{ $active?: boolean; $depth?: number; + $interactive?: boolean; + $withBranch?: boolean; }>` align-items: center; background: ${({ $active }) => - $active ? 'rgba(0, 0, 0, 0.04)' : 'transparent'}; + $active ? VISUAL_TOKENS.background.transparent.medium : 'transparent'}; border-radius: 4px; display: grid; - gap: 8px; - grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0; + grid-template-columns: ${({ $withBranch }) => + $withBranch ? '9px minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto'}; height: 28px; - padding: 0 2px 0 ${({ $depth = 0 }) => `${$depth === 0 ? 4 : 24}px`}; + padding: 0 2px 0 ${({ $depth = 0 }) => `${$depth === 0 ? 4 : 11}px`}; position: relative; + text-decoration: none; + transition: background-color 0.14s ease; + + &:hover { + background: ${({ $active, $interactive }) => + $active || $interactive + ? VISUAL_TOKENS.background.transparent.medium + : 'transparent'}; + } +`; + +const SidebarItemRowLink = styled.a<{ + $active?: boolean; + $depth?: number; + $interactive?: boolean; + $withBranch?: boolean; +}>` + align-items: center; + background: ${({ $active }) => + $active ? VISUAL_TOKENS.background.transparent.medium : 'transparent'}; + border-radius: 4px; + display: grid; + gap: 0; + grid-template-columns: ${({ $withBranch }) => + $withBranch ? '9px minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto'}; + height: 28px; + padding: 0 2px 0 ${({ $depth = 0 }) => `${$depth === 0 ? 4 : 11}px`}; + position: relative; + text-decoration: none; + transition: background-color 0.14s ease; + + &:hover { + background: ${({ $active, $interactive }) => + $active || $interactive + ? VISUAL_TOKENS.background.transparent.medium + : 'transparent'}; + } `; const SidebarIconSurface = styled.div<{ @@ -371,8 +427,8 @@ const SidebarItemText = styled.div` min-width: 0; `; -const SidebarItemLabel = styled.span` - color: ${COLORS.textSecondary}; +const SidebarItemLabel = styled.span<{ $active?: boolean }>` + color: ${({ $active }) => ($active ? COLORS.text : COLORS.textSecondary)}; display: none; font-family: ${APP_FONT}; font-size: 13px; @@ -423,12 +479,43 @@ const SidebarChildStack = styled.div` const BranchLine = styled.div` background: ${COLORS.borderStrong}; bottom: 14px; - left: 15px; + left: 11px; position: absolute; top: 0; width: 1px; `; +const SidebarBranchCell = styled.div<{ $isLastChild?: boolean }>` + align-self: stretch; + position: relative; + width: 9px; + + &::before { + background: ${COLORS.borderStrong}; + content: ''; + inset: 0 88.89% 0 0; + opacity: ${({ $isLastChild }) => ($isLastChild ? 0 : 1)}; + position: absolute; + } + + &::after { + border-bottom: 1px solid ${COLORS.borderStrong}; + border-left: 1px solid ${COLORS.borderStrong}; + border-radius: 0 0 0 4px; + content: ''; + inset: 0 0 45.83% 0; + position: absolute; + } +`; + +const SidebarRowMain = styled.div<{ $withBranch?: boolean }>` + align-items: center; + display: flex; + gap: 8px; + min-width: 0; + padding-left: ${({ $withBranch }) => ($withBranch ? '4px' : '0')}; +`; + const SidebarAvatar = styled.div<{ $background: string; $color: string; @@ -450,9 +537,11 @@ const SidebarAvatar = styled.div<{ `; const RightPane = styled.div` - display: grid; + display: flex; + flex: 1 1 auto; + flex-direction: column; gap: 12px; - grid-template-rows: 32px minmax(0, 1fr); + min-height: 0; min-width: 0; padding: 12px 8px 12px 0; @@ -465,6 +554,8 @@ const NavbarBar = styled.div` align-items: center; background: transparent; display: flex; + flex: 0 0 32px; + height: 32px; justify-content: space-between; min-width: 0; `; @@ -524,12 +615,13 @@ const DesktopOnlyNavbarAction = styled.div` } `; -const NavbarDecorativeChip = styled.div` +const NAVBAR_ACTION_BORDER = 'rgba(0, 0, 0, 0.08)'; + +const NavbarActionButton = styled.div` align-items: center; background: transparent; - border: 1px solid ${VISUAL_TOKENS.background.transparent.medium}; + border: 1px solid ${NAVBAR_ACTION_BORDER}; border-radius: ${VISUAL_TOKENS.border.radius.sm}; - color: ${VISUAL_TOKENS.font.color.secondary}; display: inline-flex; font-family: ${APP_FONT}; font-size: ${VISUAL_TOKENS.font.size.md}; @@ -540,19 +632,38 @@ const NavbarDecorativeChip = styled.div` white-space: nowrap; `; -const NavbarDecorativeIconWrap = styled.span` +const NavbarActionIconWrap = styled.span<{ $color?: string }>` align-items: center; - color: currentColor; + color: ${({ $color }) => $color ?? VISUAL_TOKENS.font.color.secondary}; display: flex; flex: 0 0 auto; justify-content: center; `; +const NavbarActionLabel = styled.span<{ $color?: string }>` + color: ${({ $color }) => $color ?? VISUAL_TOKENS.font.color.secondary}; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + line-height: 1.4; + white-space: nowrap; +`; + +const NavbarActionSeparator = styled.div` + background: ${VISUAL_TOKENS.background.transparent.medium}; + border-radius: 56px; + height: 100%; + width: 1px; +`; + const IndexSurface = styled.div` background: ${COLORS.background}; + border: 1px solid ${COLORS.border}; border-radius: 8px; - display: grid; - grid-template-rows: 40px minmax(0, 1fr); + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; min-width: 0; overflow: hidden; `; @@ -563,15 +674,19 @@ const ViewbarBar = styled.div` border-bottom: 1px solid ${COLORS.borderLight}; display: flex; justify-content: space-between; + min-width: 0; padding: 8px 8px 8px 12px; + width: 100%; `; const ViewSwitcher = styled.div` align-items: center; display: flex; + flex: 1 1 auto; gap: 4px; height: 24px; min-width: 0; + overflow: hidden; padding: 0 4px; `; @@ -603,7 +718,11 @@ const TinyDot = styled.div` const ViewActions = styled.div` align-items: center; display: flex; + flex: 0 0 auto; gap: 2px; + margin-left: auto; + position: relative; + z-index: 1; `; const ViewAction = styled.span` @@ -622,7 +741,11 @@ const ViewAction = styled.span` const TableShell = styled.div` display: flex; + flex: 1 1 auto; + min-width: 0; min-height: 0; + overflow: hidden; + width: 100%; `; const GripRail = styled.div` @@ -640,11 +763,14 @@ const GripCell = styled.div` const TableViewport = styled.div<{ $dragging: boolean }>` cursor: ${({ $dragging }) => ($dragging ? 'grabbing' : 'grab')}; + flex: 1 1 auto; min-height: 0; + min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; + width: 100%; &::-webkit-scrollbar { display: none; @@ -652,6 +778,10 @@ const TableViewport = styled.div<{ $dragging: boolean }>` `; const TableCanvas = styled.div<{ $width: number }>` + display: flex; + flex-direction: column; + height: 100%; + min-height: 100%; min-width: ${({ $width }) => `${$width}px`}; width: ${({ $width }) => `${$width}px`}; `; @@ -693,7 +823,7 @@ const TableCell = styled.div<{ $align === 'right' ? 'flex-end' : 'flex-start'}; left: ${({ $sticky }) => ($sticky ? '0' : 'auto')}; min-width: ${({ $width }) => `${$width}px`}; - padding: 0 8px; + padding: 0 ${TABLE_CELL_HORIZONTAL_PADDING}px; position: ${({ $sticky }) => ($sticky ? 'sticky' : 'relative')}; z-index: ${({ $header, $sticky }) => { if ($sticky && $header) { @@ -778,6 +908,16 @@ const EntityCellLayout = styled.div` align-items: center; display: flex; gap: 4px; + height: 100%; + min-width: 0; + position: relative; + width: 100%; +`; + +const CellHoverAnchor = styled.div` + align-items: center; + display: flex; + height: 100%; min-width: 0; position: relative; width: 100%; @@ -826,7 +966,7 @@ const PersonAvatarCircle = styled.div<{ display: flex; flex: 0 0 auto; font-family: ${APP_FONT}; - font-size: 9px; + font-size: 10px; font-weight: ${theme.font.weight.medium}; height: 14px; justify-content: center; @@ -847,24 +987,29 @@ const BooleanRow = styled.div` gap: 4px; `; -const HoverActions = styled.div<{ $visible: boolean }>` +const HoverActions = styled.div<{ $rightInset?: number; $visible: boolean }>` align-items: center; - background: ${COLORS.backgroundSecondary}; - border: 1px solid ${COLORS.border}; + background: ${VISUAL_TOKENS.background.transparent.primary}; + border: 1px solid ${VISUAL_TOKENS.background.transparent.light}; border-radius: 4px; + bottom: 4px; + box-sizing: border-box; box-shadow: ${VISUAL_TOKENS.boxShadow.light}; display: flex; - gap: 2px; + gap: 0; + justify-content: center; opacity: ${({ $visible }) => ($visible ? 1 : 0)}; - padding: 2px; + padding: 0 4px; pointer-events: none; position: absolute; - right: 4px; + right: ${({ $rightInset = HOVER_ACTION_EDGE_INSET - TABLE_CELL_HORIZONTAL_PADDING }) => + `${$rightInset}px`}; top: 4px; transform: translateX(${({ $visible }) => ($visible ? '0' : '4px')}); transition: opacity 0.14s ease, transform 0.14s ease; + width: 24px; `; const MiniAction = styled.div` @@ -872,9 +1017,9 @@ const MiniAction = styled.div` border-radius: 2px; color: ${COLORS.textSecondary}; display: flex; - height: 20px; + height: 16px; justify-content: center; - width: 20px; + width: 16px; `; const FooterFirstContent = styled.div` @@ -960,6 +1105,7 @@ const HEADER_ICON_MAP: Record = { // -- Utility functions -- +const failedAvatarUrls = new Set(); const failedFaviconUrls = new Set(); function getInitials(value: string) { @@ -1157,15 +1303,17 @@ function CopyMini({ color = COLORS.textSecondary, size = 14 }: MiniIconProps) { // -- Favicon logo component -- function FaviconLogo({ + src, domain, label, size = 14, }: { + src?: string; domain?: string; label?: string; size?: number; }) { - const faviconUrl = getLogoUrlFromDomainName(domain); + const faviconUrl = src ?? getLogoUrlFromDomainName(domain); const [localFailedUrl, setLocalFailedUrl] = useState(null); const showFavicon = faviconUrl !== undefined && @@ -1213,6 +1361,31 @@ function FaviconLogo({ // -- Sidebar icon rendering -- +function PersonAvatarContent({ token }: { token: HeroCellPerson }) { + const [localFailedUrl, setLocalFailedUrl] = useState(null); + const showAvatar = + token.avatarUrl !== undefined && + !failedAvatarUrls.has(token.avatarUrl) && + localFailedUrl !== token.avatarUrl; + + if (showAvatar) { + return ( + { + if (token.avatarUrl) { + failedAvatarUrls.add(token.avatarUrl); + setLocalFailedUrl(token.avatarUrl); + } + }} + /> + ); + } + + return token.shortLabel ?? getInitials(token.name); +} + function renderSidebarIcon(icon: HeroSidebarIcon): ReactNode { if (icon.kind === 'brand') { return ( @@ -1223,14 +1396,16 @@ function renderSidebarIcon(icon: HeroSidebarIcon): ReactNode { > {icon.overlay === 'link' ? (
void; selectedLabel?: string; }) { + const showBranch = depth > 0; + const rowSelectable = interactive && item.href === undefined; + const rowInteractive = rowSelectable || item.href !== undefined; const rowActive = - interactive && selectedLabel !== undefined && item.label === selectedLabel; + rowSelectable && selectedLabel !== undefined && item.label === selectedLabel; + const childItems = item.children ?? []; + const rowContent = ( + <> + {showBranch ? : null} + + {renderSidebarIcon(item.icon)} + + {item.label} + {item.meta ? · {item.meta} : null} + + + {item.showChevron || (item.children && item.children.length > 0) ? ( + + + + ) : null} + + ); return ( <> - onSelect?.(item.label) : undefined} - style={{ cursor: interactive ? 'pointer' : 'default' }} - > - {renderSidebarIcon(item.icon)} - - {item.label} - {item.meta ? · {item.meta} : null} - - {item.showChevron || (item.children && item.children.length > 0) ? ( - - - - ) : null} - - {item.children && item.children.length > 0 ? ( + {item.href ? ( + + {rowContent} + + ) : ( + onSelect?.(item.label) : undefined} + style={{ cursor: rowInteractive ? 'pointer' : 'default' }} + > + {rowContent} + + )} + {childItems.length > 0 ? ( - {item.children.map((child) => ( + {childItems.map((child, index) => ( + - {token.avatarUrl ? ( - - ) : ( - (token.shortLabel ?? getInitials(token.name)) - )} + } /> @@ -1413,11 +1616,8 @@ function PersonTokenCell({ ) : null} - -
+ ); } @@ -1468,7 +1668,7 @@ function RelationCellComponent({ hovered: boolean; }) { return ( -
+ {cell.items.map((item) => { const tone = PERSON_TONES[item.tone ?? 'gray'] ?? PERSON_TONES.gray; @@ -1494,11 +1694,37 @@ function RelationCellComponent({ - -
+ + ); +} + +function TextCellComponent({ + cell, + isFirstColumn, +}: { + cell: HeroCellText; + isFirstColumn: boolean; +}) { + if (!isFirstColumn || !cell.shortLabel) { + return {cell.value}; + } + + const tone = PERSON_TONES[cell.tone ?? 'gray'] ?? PERSON_TONES.gray; + + return ( + + {cell.shortLabel} + + } + /> ); } @@ -1506,10 +1732,13 @@ function renderCellValue( cell: HeroCellValue, hovered: boolean, isFirstColumn: boolean, + columnId: string, ): ReactNode { + const showHoverAction = !ROW_HOVER_ACTION_DISABLED_COLUMNS.has(columnId); + switch (cell.type) { case 'text': - return {cell.value}; + return ; case 'number': return {cell.value}; case 'link': @@ -1520,11 +1749,6 @@ function renderCellValue( label={cell.value} variant={ChipVariant.Static} /> - - - ); case 'boolean': @@ -1537,17 +1761,24 @@ function renderCellValue( case 'tag': return {cell.value}; case 'person': - return ; + return ( + + ); case 'entity': return ( ); case 'relation': - return ; + return ( + + ); } } @@ -1728,11 +1959,10 @@ export function HomeVisual({ visual }: { visual: HeroVisualType }) { - {visual.workspace.name} @@ -1777,7 +2007,7 @@ export function HomeVisual({ visual }: { visual: HeroVisualType }) { ) : null} - Workspace + Workspace {visual.workspaceNav.map(renderSidebarEntry)} @@ -1800,26 +2030,30 @@ export function HomeVisual({ visual }: { visual: HeroVisualType }) { - - + + - - New Record - + + New Record + - - + + - - + + + + ⌘K + + @@ -1930,6 +2164,7 @@ export function HomeVisual({ visual }: { visual: HeroVisualType }) { cell, hovered, !!column.isFirstColumn, + column.id, ) : null} diff --git a/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualChip.tsx b/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualChip.tsx index d55c0a68b5..8d9fbd0e46 100644 --- a/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualChip.tsx +++ b/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualChip.tsx @@ -25,7 +25,7 @@ const StyledContainer = styled.div< Pick >` --chip-horizontal-padding: ${VISUAL_TOKENS.spacing[1]}; - --chip-vertical-padding: ${VISUAL_TOKENS.spacing[1]}; + --chip-vertical-padding: 3px; align-items: center; background-color: ${({ variant }) => @@ -70,6 +70,9 @@ const StyledContainer = styled.div< ? VISUAL_TOKENS.spacing[2] : 'var(--chip-horizontal-padding)'}; user-select: none; + font-family: ${VISUAL_TOKENS.font.family}; + font-size: ${VISUAL_TOKENS.font.size.md}; + line-height: 1.4; font-weight: ${({ isBold }) => isBold @@ -83,7 +86,7 @@ const StyledContainer = styled.div< : variant === ChipVariant.Highlighted ? VISUAL_TOKENS.background.transparent.medium : variant === ChipVariant.Static - ? VISUAL_TOKENS.background.transparent.light + ? VISUAL_TOKENS.background.transparent.lighter : 'inherit'}; } @@ -94,7 +97,7 @@ const StyledContainer = styled.div< : variant === ChipVariant.Highlighted ? VISUAL_TOKENS.background.transparent.strong : variant === ChipVariant.Static - ? VISUAL_TOKENS.background.transparent.light + ? VISUAL_TOKENS.background.transparent.lighter : 'inherit'}; } @@ -105,8 +108,10 @@ const StyledContainer = styled.div< const StyledLabel = styled.span` color: inherit; + font-family: inherit; font-size: inherit; font-weight: inherit; + line-height: inherit; max-width: 100%; min-width: 0; overflow: hidden; diff --git a/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualTokens.ts b/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualTokens.ts index c553754c8e..93eff83151 100644 --- a/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualTokens.ts +++ b/packages/twenty-website-new/src/sections/Hero/components/HomeVisual/homeVisualTokens.ts @@ -35,8 +35,7 @@ export const VISUAL_TOKENS = { }, }, background: { - noisy: - "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E\")", + noisy: 'url("/images/shared/light-noise.png")', primary: '#ffffff', secondary: '#fcfcfc', transparent: { diff --git a/packages/twenty-website-new/src/sections/Hero/types/HeroHomeData.ts b/packages/twenty-website-new/src/sections/Hero/types/HeroHomeData.ts index be90e1290b..39932e9d3e 100644 --- a/packages/twenty-website-new/src/sections/Hero/types/HeroHomeData.ts +++ b/packages/twenty-website-new/src/sections/Hero/types/HeroHomeData.ts @@ -2,7 +2,12 @@ import type { HeroBaseDataType } from '@/sections/Hero/types/HeroBaseData'; // -- Cell value types -- -export type HeroCellText = { type: 'text'; value: string }; +export type HeroCellText = { + type: 'text'; + value: string; + shortLabel?: string; + tone?: string; +}; export type HeroCellNumber = { type: 'number'; value: string }; export type HeroCellLink = { type: 'link'; value: string }; export type HeroCellBoolean = { type: 'boolean'; value: boolean }; @@ -57,7 +62,13 @@ export type HeroRowDef = { export type HeroSidebarIcon = | { kind: 'tabler'; name: string; tone: string; overlay?: 'link' } - | { kind: 'brand'; brand: string; overlay?: 'link' } + | { + kind: 'brand'; + brand: string; + domain?: string; + imageSrc?: string; + overlay?: 'link'; + } | { kind: 'avatar'; label: string; @@ -70,6 +81,7 @@ export type HeroSidebarIcon = export type HeroSidebarItem = { id: string; label: string; + href?: string; icon: HeroSidebarIcon; meta?: string; active?: boolean;