From 51fc383b1ade581f4458c224f046431be3535493 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 10:34:31 +0200 Subject: [PATCH 1/4] refactor: rename logo to domain --- front/src/interfaces/company.interface.ts | 2 +- front/src/pages/people/People.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/front/src/interfaces/company.interface.ts b/front/src/interfaces/company.interface.ts index 05e76c2a9..c5eba718f 100644 --- 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 index 3135ce971..6205a941a 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -48,7 +48,7 @@ const defaultData: Array = [ 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 = [ 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' }, @@ -70,7 +70,7 @@ const defaultData: Array = [ 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 = [ 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' }, @@ -92,7 +92,7 @@ const defaultData: Array = [ 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' }, @@ -133,7 +133,7 @@ const columns = [ cell: (props) => ( ), From 38cc857f77d583a187c3cbd4cf29e093ab9dedcd Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 10:36:14 +0200 Subject: [PATCH 2/4] feat: use favicon icon in company chip --- front/src/pages/people/People.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 6205a941a..fc6831b42 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -59,7 +59,7 @@ const defaultData: Array = [ fullName: 'Alexandre Prot', picture: personPlaceholder, email: 'alexandre@qonto.com', - company: { id: 1, name: 'Qonto', domain: 'qonto.com' }, + 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' }, @@ -81,7 +81,7 @@ const defaultData: Array = [ fullName: 'Alexandre Prot', picture: personPlaceholder, email: 'alexandre@qonto.com', - company: { id: 1, name: 'Qonto', domain: 'qonto.com' }, + 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 = [ fullName: 'Alexandre Prot', picture: personPlaceholder, email: 'alexandre@qonto.com', - company: { id: 1, name: 'Qonto', domain: 'qonto.com' }, + 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) => ( ), From b6bfefe8469656433e555689ed8755b5a73f2fae Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 10:55:06 +0200 Subject: [PATCH 3/4] feat: set design of Company chip --- front/src/components/table/CellLink.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx index 9073de59b..94b6eebac 100644 --- a/front/src/components/table/CellLink.tsx +++ b/front/src/components/table/CellLink.tsx @@ -14,13 +14,16 @@ const StyledContainer = styled.span` color: ${(props) => props.theme.text80}; display: inline-flex; align-items: center; - padding: 4px 8px 4px 4px; + padding: 4px; gap: 4px; + :hover { + filter: brightness(95%); + } + img { - height: 1rem; - width: 1rem; - border-radius: 0.5rem; + height: 14px; + width: 14px; object-fit: cover; } `; From ddebb358657fb98e95d09f59a2a5d4c91188dd6e Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Wed, 19 Apr 2023 11:00:43 +0200 Subject: [PATCH 4/4] refactor: use theme spacings --- front/src/components/table/CellLink.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx index 94b6eebac..18c29a249 100644 --- a/front/src/components/table/CellLink.tsx +++ b/front/src/components/table/CellLink.tsx @@ -10,12 +10,12 @@ 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; - gap: 4px; + padding: ${(props) => props.theme.spacing(1)}; + gap: ${(props) => props.theme.spacing(1)}; :hover { filter: brightness(95%);