From 20f8321dca43549aee03749db0d23c412170c485 Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Thu, 25 Jun 2026 13:43:51 +0500
Subject: [PATCH] Rework website FilesVisual to match twenty-front files tab
 (#22147)

- Rework `FilesVisual` to match twenty-front's files tab: bordered file
card with dividers, `All` header sizing, and twenty-front's row
background and date color (kept the bordered `+ Add file`).
- Four files, one per category (pdf/xlsx/pptx/png), with full `MMM D,
YYYY` dates. File-icon colors already matched `useFileIconColors`.
---
 .../FilesVisual/FilesVisual.tsx               | 20 ++++++++++---------
 .../FilesVisual/components/FileRow.tsx        |  7 ++++---
 .../product-feature/FilesVisual/data/files.ts | 13 +++++++-----
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-website/src/sections/product-feature/FilesVisual/FilesVisual.tsx b/packages/twenty-website/src/sections/product-feature/FilesVisual/FilesVisual.tsx
index 6b973aeb28..758ed53207 100644
--- a/packages/twenty-website/src/sections/product-feature/FilesVisual/FilesVisual.tsx
+++ b/packages/twenty-website/src/sections/product-feature/FilesVisual/FilesVisual.tsx
@@ -41,13 +41,12 @@ const Title = styled.span`
   align-items: baseline;
   color: ${THEME_LIGHT.font.color.primary};
   display: flex;
-  font-size: ${previewFontSize(THEME_LIGHT.font.size.md)};
+  font-size: ${previewFontSize(THEME_LIGHT.font.size.lg)};
   font-weight: ${THEME_LIGHT.font.weight.semiBold};
 `;
 
 const Count = styled.span`
   color: ${THEME_LIGHT.font.color.light};
-  font-weight: ${THEME_LIGHT.font.weight.regular};
   margin-left: 8px;
 `;
 
@@ -63,12 +62,15 @@ const AddButton = styled.span`
   padding: 4px 8px;
 `;
 
-const List = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
+const FileCard = styled.div`
+  border: 1px solid ${THEME_LIGHT.border.color.medium};
+  border-radius: ${THEME_LIGHT.border.radius.sm};
+  margin: 0 16px;
   overflow: hidden;
+
+  & > * + * {
+    border-top: 1px solid ${THEME_LIGHT.border.color.light};
+  }
 `;
 
 export function FilesVisual({ active: _active }: { active: boolean }) {
@@ -86,11 +88,11 @@ export function FilesVisual({ active: _active }: { active: boolean }) {
             Add file
           </AddButton>
         </TitleBar>
-        <List>
+        <FileCard>
           {FILES.map((file) => (
             <FileRow key={file.name} file={file} />
           ))}
-        </List>
+        </FileCard>
       </Panel>
     </Root>
   );
diff --git a/packages/twenty-website/src/sections/product-feature/FilesVisual/components/FileRow.tsx b/packages/twenty-website/src/sections/product-feature/FilesVisual/components/FileRow.tsx
index ecaeaf83bf..fe155b19fb 100644
--- a/packages/twenty-website/src/sections/product-feature/FilesVisual/components/FileRow.tsx
+++ b/packages/twenty-website/src/sections/product-feature/FilesVisual/components/FileRow.tsx
@@ -9,14 +9,16 @@ import { type FileEntry } from '../types/file-entry';
 
 const Row = styled.div`
   align-items: center;
+  background-color: ${THEME_LIGHT.background.secondary};
   box-sizing: border-box;
   display: flex;
+  font-size: ${previewFontSize(THEME_LIGHT.font.size.md)};
   gap: 8px;
   height: 48px;
   padding: 0 16px;
 
   &:hover {
-    background-color: ${THEME_LIGHT.background.transparent.light};
+    background-color: transparent;
   }
 `;
 
@@ -54,7 +56,6 @@ const FileIconBox = styled.span`
 
 const FileName = styled.span`
   color: ${THEME_LIGHT.font.color.primary};
-  font-size: ${previewFontSize(THEME_LIGHT.font.size.md)};
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -70,7 +71,7 @@ const Right = styled.div`
 `;
 
 const DateText = styled.span`
-  font-size: ${previewFontSize(THEME_LIGHT.font.size.md)};
+  color: ${THEME_LIGHT.font.color.secondary};
   white-space: nowrap;
 `;
 
diff --git a/packages/twenty-website/src/sections/product-feature/FilesVisual/data/files.ts b/packages/twenty-website/src/sections/product-feature/FilesVisual/data/files.ts
index a83f25fa92..9e346dbc12 100644
--- a/packages/twenty-website/src/sections/product-feature/FilesVisual/data/files.ts
+++ b/packages/twenty-website/src/sections/product-feature/FilesVisual/data/files.ts
@@ -1,9 +1,12 @@
 import { type FileEntry } from '../types/file-entry';
 
 export const FILES: FileEntry[] = [
-  { category: 'document', date: 'Jul 1', name: 'NDA - Anthropic.pdf' },
-  { category: 'spreadsheet', date: 'Jul 12', name: 'Pricing Q4.xlsx' },
-  { category: 'presentation', date: 'Jul 18', name: 'Onboarding deck.pptx' },
-  { category: 'image', date: 'Jul 20', name: 'Brand assets.png' },
-  { category: 'document', date: 'Jul 24', name: 'Security review.docx' },
+  { category: 'document', date: 'Jul 1, 2026', name: 'NDA - Anthropic.pdf' },
+  { category: 'spreadsheet', date: 'Jul 12, 2026', name: 'Pricing Q4.xlsx' },
+  {
+    category: 'presentation',
+    date: 'Jul 18, 2026',
+    name: 'Onboarding deck.pptx',
+  },
+  { category: 'image', date: 'Jul 20, 2026', name: 'Brand assets.png' },
 ];