Introduce accent for chips (#911)

* Introduce accent for chips

* Add top bar on Mobile on Settings pages

* Various fixes

* Fix according to peer review

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

@@ -1,9 +1,10 @@
-import { PersonChip } from '@/people/components/PersonChip';
 import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
 import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { Company, User } from '~/generated/graphql';
 
+import { UserChip } from '../../users/components/UserChip';
+
 import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
 
 export type CompanyAccountOnwer = Pick<Company, 'id'> & {
@@ -38,7 +39,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
       }
       nonEditModeContent={
         company.accountOwner?.displayName ? (
-          <PersonChip
+          <UserChip
             id={company.accountOwner.id}
             name={company.accountOwner?.displayName ?? ''}
             pictureUrl={company.accountOwner?.avatarUrl ?? ''}

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

@@ -19,6 +19,7 @@ import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedSta
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
+import { EntityChipVariant } from '../../ui/chip/components/EntityChip';
 import { PipelineProgressForBoard } from '../types/CompanyProgress';
 
 import { CompanyChip } from './CompanyChip';
@@ -177,7 +178,7 @@ export function CompanyBoardCard() {
             id={company.id}
             name={company.name}
             pictureUrl={getLogoUrlFromDomainName(company.domainName)}
-            clickable={false}
+            variant={EntityChipVariant.Transparent}
           />
           <StyledCheckboxContainer className="checkbox-container">
             <Checkbox

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

@@ -1,25 +1,26 @@
-import { EntityChip } from '@/ui/chip/components/EntityChip';
+import { EntityChip, EntityChipVariant } from '@/ui/chip/components/EntityChip';
 
 type OwnProps = {
   id: string;
   name: string;
   pictureUrl?: string;
-  clickable?: boolean;
+  variant?: EntityChipVariant;
 };
 
 export function CompanyChip({
   id,
   name,
   pictureUrl,
-  clickable = true,
+  variant = EntityChipVariant.Regular,
 }: OwnProps) {
   return (
     <EntityChip
       entityId={id}
-      linkToEntity={clickable ? `/companies/${id}` : undefined}
+      linkToEntity={`/companies/${id}`}
       name={name}
       avatarType="squared"
       pictureUrl={pictureUrl}
+      variant={variant}
     />
   );
 }

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

@@ -37,7 +37,6 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
         <CompanyChip
           id={company.id}
           name={company.name}
-          clickable
           pictureUrl={getLogoUrlFromDomainName(company.domainName)}
         />
       }