Add link to company page (#727)

* Add link to company page

* Have company chip background color matchin the card's

* Revert "Have company chip background color matchin the card's"

This reverts commit 8e9575fd933f9efb8d6614ec7287d6be28b81f7e.

* Create chip variants

* Lint

* code style

* Fix tests

* Fix tests

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -11,6 +11,7 @@ import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgres
 import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState';
 import { BoardCardEditableFieldDate } from '@/ui/board/card-field/components/BoardCardEditableFieldDate';
 import { BoardCardEditableFieldText } from '@/ui/board/card-field/components/BoardCardEditableFieldText';
+import { ChipVariant } from '@/ui/chip/components/EntityChip';
 import { IconCurrencyDollar } from '@/ui/icon';
 import { IconCalendarEvent } from '@/ui/icon';
 import { Checkbox } from '@/ui/input/components/Checkbox';
@@ -21,6 +22,8 @@ import {
 } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
+import { CompanyChip } from './CompanyChip';
+
 const StyledBoardCard = styled.div<{ selected: boolean }>`
   background-color: ${({ theme, selected }) =>
     selected ? theme.selectedCard : theme.background.secondary};
@@ -129,11 +132,13 @@ export function CompanyBoardCard() {
     <StyledBoardCardWrapper>
       <StyledBoardCard selected={selected}>
         <StyledBoardCardHeader>
-          <img
-            src={getLogoUrlFromDomainName(company.domainName).toString()}
-            alt={`${company.name}-company-logo`}
+          <CompanyChip
+            id={company.id}
+            name={company.name}
+            clickable
+            picture={getLogoUrlFromDomainName(company.domainName)}
+            variant={ChipVariant.transparent}
           />
-          <span>{company.name}</span>
           <div style={{ display: 'flex', flex: 1 }} />
           <Checkbox checked={selected} onChange={handleCheckboxChange} />
         </StyledBoardCardHeader>

front/src/modules/companies/components/CompanyChip.tsx

@@ -1,13 +1,20 @@
-import { EntityChip } from '@/ui/chip/components/EntityChip';
+import { ChipVariant, EntityChip } from '@/ui/chip/components/EntityChip';
 
 type OwnProps = {
   id: string;
   name: string;
   picture?: string;
   clickable?: boolean;
+  variant?: ChipVariant;
 };
 
-export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
+export function CompanyChip({
+  id,
+  name,
+  picture,
+  clickable,
+  variant = ChipVariant.opaque,
+}: OwnProps) {
   return (
     <EntityChip
       entityId={id}
@@ -16,6 +23,7 @@ export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
       avatarType="squared"
       clickable={clickable}
       picture={picture}
+      variant={variant}
     />
   );
 }