Merge pull request #43 from twentyhq/sammy/t-103-i-see-company-chip-designed-with-picture

Sammy/t 103 i see company chip designed with picture
This commit is contained in:
Sammy Teillet
2023-04-19 11:49:38 +02:00
committed by GitHub
3 changed files with 16 additions and 13 deletions

View File

@@ -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;
}
`;

View File

@@ -1,5 +1,5 @@
export interface Company {
id: number;
name: string;
logo: string;
domain: string;
}

View File

@@ -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="#"
/>
),