Merge pull request twentyhq#43 from twentyhq/sammy/t-103-i-see-compan…

…y-chip-designed-with-picture Sammy/t 103 i see company chip designed with picture
steebtom · Apr 19, 2023 · bb40c1b · bb40c1b
2 parents 5560476 + ddebb35
commit bb40c1b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx
@@ -10,17 +10,20 @@ type OwnProps = {
 
 const StyledContainer = styled.span`
   background-color: ${(props) => props.theme.tertiaryBackground};
-  border-radius: 4px;
+  border-radius: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text80};
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px 4px 4px;
-  gap: 4px;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
 
   img {
-    height: 1rem;
-    width: 1rem;
-    border-radius: 0.5rem;
+    height: 14px;
+    width: 14px;
     object-fit: cover;
   }
 `;

diff --git a/front/src/interfaces/company.interface.ts b/front/src/interfaces/company.interface.ts
@@ -1,5 +1,5 @@
 export interface Company {
   id: number;
   name: string;
-  logo: string;
+  domain: string;
 }
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
@@ -48,7 +48,7 @@ const defaultData: Array<Person> = [
     fullName: 'Alexandre Prot',
     picture: personPlaceholder,
     email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
     creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
@@ -59,7 +59,7 @@ const defaultData: Array<Person> = [
     fullName: 'Alexandre Prot',
     picture: personPlaceholder,
     email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
     phone: '06 12 34 56 78',
     creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
@@ -70,7 +70,7 @@ const defaultData: Array<Person> = [
     fullName: 'Alexandre Prot',
     picture: personPlaceholder,
     email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
     creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
@@ -81,7 +81,7 @@ const defaultData: Array<Person> = [
     fullName: 'Alexandre Prot',
     picture: personPlaceholder,
     email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    company: { id: 1, name: 'Slack', domain: 'slack.com' },
     phone: '06 12 34 56 78',
     creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
@@ -92,7 +92,7 @@ const defaultData: Array<Person> = [
     fullName: 'Alexandre Prot',
     picture: personPlaceholder,
     email: 'alexandre@qonto.com',
-    company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
+    company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
     phone: '06 12 34 56 78',
     creationDate: new Date('Feb 23, 2018'),
     pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
@@ -133,7 +133,7 @@ const columns = [
     cell: (props) => (
       <CellLink
         name={props.row.original.company.name}
-        picture={props.row.original.company.logo}
+        picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
         href="#"
       />
     ),