Felix icons (#312)

* Fix icon size in table top bar

* Replace building icon

* Replace Employees icon

* Replace map icon

* Replace calendar icon

* Replace Target icon

front/src/AppNavbar.tsx

@@ -1,7 +1,7 @@
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
   IconInbox,
   IconSearch,
   IconSettings,
@@ -50,7 +50,7 @@ export function AppNavbar() {
         <NavItem
           label="Companies"
           to="/companies"
-          icon={<IconBuilding size={16} />}
+          icon={<IconBuildingSkyscraper size={16} />}
           active={
             !!useMatch({
               path: useResolvedPath('/companies').pathname,

front/src/modules/opportunities/components/BoardCard.tsx

@@ -5,12 +5,12 @@ import CompanyChip from '../../companies/components/CompanyChip';
 import PersonPlaceholder from '../../people/components/person-placeholder.png';
 import { PersonChip } from '../../people/components/PersonChip';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconMail,
   IconPhone,
-  IconSum,
   IconUser,
+  IconUsers,
 } from '../../ui/icons';
 import { getLogoUrlFromDomainName, humanReadableDate } from '../../utils/utils';
 
@@ -69,7 +69,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => {
       </StyledBoardCardHeader>
       <StyledBoardCardBody>
         <span>
-          <IconBuilding size={16} />
+          <IconBuildingSkyscraper size={16} />
           <CompanyChip
             name={person.company?.name || ''}
             picture={getLogoUrlFromDomainName(
@@ -86,7 +86,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => {
           {person.phone}
         </span>
         <span>
-          <IconCalendar size={16} />
+          <IconCalendarEvent size={16} />
           {humanReadableDate(new Date(person.createdAt as string))}
         </span>
       </StyledBoardCardBody>
@@ -110,10 +110,10 @@ const CompanyBoardCard = ({ company }: { company: Company }) => {
           <PersonChip name={company.accountOwner?.displayName || ''} />
         </span>
         <span>
-          <IconSum size={16} /> {company.employees}
+          <IconUsers size={16} /> {company.employees}
         </span>
         <span>
-          <IconCalendar size={16} />
+          <IconCalendarEvent size={16} />
           {humanReadableDate(new Date(company.createdAt as string))}
         </span>
       </StyledBoardCardBody>

front/src/modules/ui/icons/index.ts

@@ -1,5 +1,5 @@
 export { IconAddressBook } from './components/IconAddressBook';
-export { IconBuilding } from '@tabler/icons-react';
+export { IconBuildingSkyscraper } from '@tabler/icons-react';
 export { IconMessageCircle as IconComment } from '@tabler/icons-react';
 export { IconCheck } from '@tabler/icons-react';
 export { IconTrash } from '@tabler/icons-react';
@@ -16,12 +16,12 @@ export { IconX } from '@tabler/icons-react';
 export { IconChevronLeft } from '@tabler/icons-react';
 export { IconPlus } from '@tabler/icons-react';
 export { IconLink } from '@tabler/icons-react';
-export { IconSum } from '@tabler/icons-react';
+export { IconUsers } from '@tabler/icons-react';
-export { IconCalendar } from '@tabler/icons-react';
+export { IconCalendarEvent } from '@tabler/icons-react';
-export { IconMapPin } from '@tabler/icons-react';
+export { IconMap } from '@tabler/icons-react';
 export { IconMail } from '@tabler/icons-react';
 export { IconPhone } from '@tabler/icons-react';
-export { IconTarget } from '@tabler/icons-react';
+export { IconTargetArrow } from '@tabler/icons-react';
 export { IconChevronDown } from '@tabler/icons-react';
 export { IconArrowNarrowDown } from '@tabler/icons-react';
 export { IconArrowNarrowUp } from '@tabler/icons-react';

front/src/modules/ui/layout/SecondaryLayout.tsx

@@ -31,8 +31,7 @@ const SubContainer = styled.div`
   flex-direction: column;
   margin: ${(props) => props.theme.spacing(4)};
   max-width: calc(100vw - 500px);
-  padding: 32px;
+  padding: ${(props) => props.theme.spacing(8)};
-  padding: ${(props) => props.theme.spacing(2)};
   width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

front/src/modules/ui/layout/navbar/NavBackButton.tsx

@@ -39,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
         <IconAndButtonContainer
           onClick={() => navigate('/', { replace: true })}
         >
-          <IconChevronLeft strokeWidth={3} />
+          <IconChevronLeft />
           <span>{title}</span>
         </IconAndButtonContainer>
         <NavCollapseButton hideOnDesktop={true} />

front/src/pages/companies/Companies.tsx

@@ -19,7 +19,7 @@ import {
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
-import { IconBuilding } from '@/ui/icons/index';
+import { IconBuildingSkyscraper } from '@/ui/icons/index';
 import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
@@ -78,7 +78,7 @@ export function Companies() {
     <AppPage>
       <WithTopBarContainer
         title="Companies"
-        icon={<IconBuilding size={16} />}
+        icon={<IconBuildingSkyscraper size={16} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -87,7 +87,7 @@ export function Companies() {
               data={companies}
               columns={companiesColumns}
               viewName="All Companies"
-              viewIcon={<IconList />}
+              viewIcon={<IconList size={16} />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

front/src/pages/companies/companies-columns.tsx

@@ -15,12 +15,12 @@ import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRe
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconLink,
-  IconMapPin,
+  IconMap,
-  IconSum,
   IconUser,
+  IconUsers,
 } from '@/ui/icons/index';
 import { getCheckBoxColumn } from '@/ui/tables/utils/getCheckBoxColumn';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
@@ -34,7 +34,10 @@ export const useCompaniesColumns = () => {
       getCheckBoxColumn(),
       columnHelper.accessor('name', {
         header: () => (
-          <ColumnHead viewName="Name" viewIcon={<IconBuilding size={16} />} />
+          <ColumnHead
+            viewName="Name"
+            viewIcon={<IconBuildingSkyscraper size={16} />}
+          />
         ),
         cell: (props) => (
           <CompanyEditableNameChipCell company={props.row.original} />
@@ -60,7 +63,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('employees', {
         header: () => (
-          <ColumnHead viewName="Employees" viewIcon={<IconSum size={16} />} />
+          <ColumnHead viewName="Employees" viewIcon={<IconUsers size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -83,7 +86,7 @@ export const useCompaniesColumns = () => {
       }),
       columnHelper.accessor('address', {
         header: () => (
-          <ColumnHead viewName="Address" viewIcon={<IconMapPin size={16} />} />
+          <ColumnHead viewName="Address" viewIcon={<IconMap size={16} />} />
         ),
         cell: (props) => (
           <EditableText
@@ -102,7 +105,7 @@ export const useCompaniesColumns = () => {
         header: () => (
           <ColumnHead
             viewName="Creation"
-            viewIcon={<IconCalendar size={16} />}
+            viewIcon={<IconCalendarEvent size={16} />}
           />
         ),
         cell: (props) => (

front/src/pages/companies/companies-filters.tsx

@@ -2,12 +2,12 @@ import { Company } from '@/companies/interfaces/company.interface';
 import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { SEARCH_USER_QUERY } from '@/search/services/search';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconLink,
-  IconMapPin,
+  IconMap,
-  IconSum,
   IconUser,
+  IconUsers,
 } from '@/ui/icons/index';
 import { mapToUser, User } from '@/users/interfaces/user.interface';
 import { QueryMode } from '~/generated/graphql';
@@ -15,7 +15,7 @@ import { QueryMode } from '~/generated/graphql';
 export const nameFilter = {
   key: 'name',
   label: 'Name',
-  icon: <IconBuilding size={16} />,
+  icon: <IconBuildingSkyscraper size={16} />,
   type: 'text',
   operands: [
     {
@@ -45,7 +45,7 @@ export const nameFilter = {
 export const employeesFilter = {
   key: 'employees',
   label: 'Employees',
-  icon: <IconSum size={16} />,
+  icon: <IconUsers size={16} />,
   type: 'text',
   operands: [
     {
@@ -105,7 +105,7 @@ export const urlFilter = {
 export const addressFilter = {
   key: 'address',
   label: 'Address',
-  icon: <IconMapPin size={16} />,
+  icon: <IconMap size={16} />,
   type: 'text',
   operands: [
     {
@@ -135,7 +135,7 @@ export const addressFilter = {
 export const ccreatedAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <IconCalendar size={16} />,
+  icon: <IconCalendarEvent size={16} />,
   type: 'date',
   operands: [
     {

front/src/pages/companies/companies-sorts.tsx

@@ -1,10 +1,10 @@
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconLink,
-  IconMapPin,
+  IconMap,
-  IconSum,
+  IconUsers,
 } from '@/ui/icons/index';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
@@ -12,13 +12,13 @@ export const availableSorts = [
   {
     key: 'name',
     label: 'Name',
-    icon: <IconBuilding size={16} />,
+    icon: <IconBuildingSkyscraper size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'employees',
     label: 'Employees',
-    icon: <IconSum size={16} />,
+    icon: <IconUsers size={16} />,
     _type: 'default_sort',
   },
   {
@@ -30,13 +30,13 @@ export const availableSorts = [
   {
     key: 'address',
     label: 'Address',
-    icon: <IconMapPin size={16} />,
+    icon: <IconMap size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'createdAt',
     label: 'Creation',
-    icon: <IconCalendar size={16} />,
+    icon: <IconCalendarEvent size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<Companies_Order_By>>;

front/src/pages/opportunities/Opportunities.tsx

@@ -1,4 +1,4 @@
-import { IconTarget } from '@/ui/icons/index';
+import { IconTargetArrow } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { AppPage } from '~/AppPage';
 
@@ -14,7 +14,7 @@ export function Opportunities() {
     return <div>Initial board or items not found</div>;
   return (
     <AppPage>
-      <WithTopBarContainer title="Opportunities" icon={<IconTarget />}>
+      <WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
         <Board initialBoard={initialBoard} items={items} />
       </WithTopBarContainer>
     </AppPage>

front/src/pages/people/people-columns.tsx

@@ -10,10 +10,10 @@ import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconMail,
-  IconMapPin,
+  IconMap,
   IconPhone,
   IconUser,
 } from '@/ui/icons/index';
@@ -65,7 +65,7 @@ export const usePeopleColumns = () => {
         header: () => (
           <ColumnHead
             viewName="Company"
-            viewIcon={<IconBuilding size={16} />}
+            viewIcon={<IconBuildingSkyscraper size={16} />}
           />
         ),
         cell: (props) => <PeopleCompanyCell people={props.row.original} />,
@@ -92,7 +92,7 @@ export const usePeopleColumns = () => {
         header: () => (
           <ColumnHead
             viewName="Creation"
-            viewIcon={<IconCalendar size={16} />}
+            viewIcon={<IconCalendarEvent size={16} />}
           />
         ),
         cell: (props) => (
@@ -109,7 +109,7 @@ export const usePeopleColumns = () => {
       }),
       columnHelper.accessor('city', {
         header: () => (
-          <ColumnHead viewName="City" viewIcon={<IconMapPin size={16} />} />
+          <ColumnHead viewName="City" viewIcon={<IconMap size={16} />} />
         ),
         cell: (props) => (
           <EditableText

front/src/pages/people/people-filters.tsx

@@ -6,10 +6,10 @@ import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interfa
 import { Person } from '@/people/interfaces/person.interface';
 import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconMail,
-  IconMapPin,
+  IconMap,
   IconPhone,
   IconUser,
 } from '@/ui/icons/index';
@@ -101,7 +101,7 @@ export const emailFilter = {
 export const companyFilter = {
   key: 'company_name',
   label: 'Company',
-  icon: <IconBuilding size={16} />,
+  icon: <IconBuildingSkyscraper size={16} />,
   type: 'relation',
   searchConfig: {
     query: SEARCH_COMPANY_QUERY,
@@ -165,7 +165,7 @@ export const phoneFilter = {
 export const createdAtFilter = {
   key: 'createdAt',
   label: 'Created At',
-  icon: <IconCalendar size={16} />,
+  icon: <IconCalendarEvent size={16} />,
   type: 'date',
   operands: [
     {
@@ -192,7 +192,7 @@ export const createdAtFilter = {
 export const cityFilter = {
   key: 'city',
   label: 'City',
-  icon: <IconMapPin size={16} />,
+  icon: <IconMap size={16} />,
   type: 'text',
   operands: [
     {

front/src/pages/people/people-sorts.tsx

@@ -1,9 +1,9 @@
 import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
 import {
-  IconBuilding,
+  IconBuildingSkyscraper,
-  IconCalendar,
+  IconCalendarEvent,
   IconMail,
-  IconMapPin,
+  IconMap,
   IconPhone,
   IconUser,
 } from '@/ui/icons/index';
@@ -30,7 +30,7 @@ export const availableSorts = [
   {
     key: 'company_name',
     label: 'Company',
-    icon: <IconBuilding size={16} />,
+    icon: <IconBuildingSkyscraper size={16} />,
     _type: 'custom_sort',
     orderByTemplates: [(order: Order_By) => ({ company: { name: order } })],
   },
@@ -49,13 +49,13 @@ export const availableSorts = [
   {
     key: 'createdAt',
     label: 'Created at',
-    icon: <IconCalendar size={16} />,
+    icon: <IconCalendarEvent size={16} />,
     _type: 'default_sort',
   },
   {
     key: 'city',
     label: 'City',
-    icon: <IconMapPin size={16} />,
+    icon: <IconMap size={16} />,
     _type: 'default_sort',
   },
 ] satisfies Array<SortType<People_Order_By>>;