Fix some icon display size + fix padding issue on EditableChip component (#314)

* Fix some icon display size + fix padding issue on EditableChip component

* Fix according to PR

* Fix server generate and deploy scripts

* Fix image size on Opportunities board

* Fix lint

* Fix according to PR

front/src/AppNavbar.tsx

@@ -1,4 +1,5 @@
 import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 
 import {
   IconBuildingSkyscraper,
@@ -14,6 +15,7 @@ import NavTitle from './modules/ui/layout/navbar/NavTitle';
 import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
 
 export function AppNavbar() {
+  const theme = useTheme();
   return (
     <>
       <NavWorkspaceButton />
@@ -21,25 +23,25 @@ export function AppNavbar() {
         <NavItem
           label="Search"
           to="/search"
-          icon={<IconSearch size={16} />}
+          icon={<IconSearch size={theme.iconSizeMedium} />}
           soon={true}
         />
         <NavItem
           label="Inbox"
           to="/inbox"
-          icon={<IconInbox size={16} />}
+          icon={<IconInbox size={theme.iconSizeMedium} />}
           soon={true}
         />
         <NavItem
           label="Settings"
           to="/settings/profile"
-          icon={<IconSettings size={16} />}
+          icon={<IconSettings size={theme.iconSizeMedium} />}
         />
         <NavTitle label="Workspace" />
         <NavItem
           label="People"
           to="/people"
-          icon={<IconUser size={16} />}
+          icon={<IconUser size={theme.iconSizeMedium} />}
           active={
             !!useMatch({
               path: useResolvedPath('/people').pathname,
@@ -50,7 +52,7 @@ export function AppNavbar() {
         <NavItem
           label="Companies"
           to="/companies"
-          icon={<IconBuildingSkyscraper size={16} />}
+          icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
           active={
             !!useMatch({
               path: useResolvedPath('/companies').pathname,

front/src/modules/comments/components/comments/CommentChip.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconComment } from '@/ui/icons';
@@ -47,13 +48,15 @@ const StyledCount = styled.div`
 `;
 
 export function CommentChip({ count, onClick }: CommentChipProps) {
+  const theme = useTheme();
+
   if (count === 0) return null;
   const formattedCount = count > 99 ? '99+' : count;
 
   return (
     <StyledChip data-testid="comment-chip" onClick={onClick}>
       <StyledCount>{formattedCount}</StyledCount>
-      <IconComment size={16} />
+      <IconComment size={theme.iconSizeMedium} />
     </StyledChip>
   );
 }

front/src/modules/comments/components/comments/CommentHeader.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from 'react-tooltip';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { CommentForDrawer } from '@/comments/types/CommentForDrawer';
@@ -62,6 +63,7 @@ const StyledTooltip = styled(Tooltip)`
 `;
 
 export function CommentHeader({ comment }: OwnProps) {
+  const theme = useTheme();
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
   const exactCreatedAt = beautifyExactDate(comment.createdAt);
   const showDate = beautifiedCreatedAt !== '';
@@ -79,7 +81,7 @@ export function CommentHeader({ comment }: OwnProps) {
     <StyledContainer>
       <Avatar
         avatarUrl={avatarUrl}
-        size={16}
+        size={theme.iconSizeMedium}
         placeholder={capitalizedFirstUsernameLetter}
       />
       <StyledName>{authorName}</StyledName>

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

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { Company, Person } from '../../../generated/graphql';
@@ -26,10 +27,10 @@ const StyledBoardCardHeader = styled.div`
   height: 24px;
   padding: ${(props) => props.theme.spacing(2)};
   img {
-    height: 16px;
+    height: ${(props) => props.theme.iconSizeMedium}px;
     margin-right: ${(props) => props.theme.spacing(2)};
     object-fit: cover;
-    width: 16px;
+    width: ${(props) => props.theme.iconSizeMedium}px;
   }
 `;
 const StyledBoardCardBody = styled.div`
@@ -57,6 +58,7 @@ export const BoardCard = ({ item }: { item: Person | Company }) => {
 
 const PersonBoardCard = ({ person }: { person: Person }) => {
   const fullname = `${person.firstname} ${person.lastname}`;
+  const theme = useTheme();
   return (
     <StyledBoardCard>
       <StyledBoardCardHeader>
@@ -69,7 +71,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => {
       </StyledBoardCardHeader>
       <StyledBoardCardBody>
         <span>
-          <IconBuildingSkyscraper size={16} />
+          <IconBuildingSkyscraper size={theme.iconSizeMedium} />
           <CompanyChip
             name={person.company?.name || ''}
             picture={getLogoUrlFromDomainName(
@@ -78,15 +80,15 @@ const PersonBoardCard = ({ person }: { person: Person }) => {
           />
         </span>
         <span>
-          <IconMail size={16} />
+          <IconMail size={theme.iconSizeMedium} />
           {person.email}
         </span>
         <span>
-          <IconPhone size={16} />
+          <IconPhone size={theme.iconSizeMedium} />
           {person.phone}
         </span>
         <span>
-          <IconCalendarEvent size={16} />
+          <IconCalendarEvent size={theme.iconSizeMedium} />
           {humanReadableDate(new Date(person.createdAt as string))}
         </span>
       </StyledBoardCardBody>
@@ -95,6 +97,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => {
 };
 
 const CompanyBoardCard = ({ company }: { company: Company }) => {
+  const theme = useTheme();
   return (
     <StyledBoardCard>
       <StyledBoardCardHeader>
@@ -106,14 +109,14 @@ const CompanyBoardCard = ({ company }: { company: Company }) => {
       </StyledBoardCardHeader>
       <StyledBoardCardBody>
         <span>
-          <IconUser size={16} />
+          <IconUser size={theme.iconSizeMedium} />
           <PersonChip name={company.accountOwner?.displayName || ''} />
         </span>
         <span>
-          <IconUsers size={16} /> {company.employees}
+          <IconUsers size={theme.iconSizeMedium} /> {company.employees}
         </span>
         <span>
-          <IconCalendarEvent size={16} />
+          <IconCalendarEvent size={theme.iconSizeMedium} />
           {humanReadableDate(new Date(company.createdAt as string))}
         </span>
       </StyledBoardCardBody>

front/src/modules/opportunities/hooks/useBoard.ts

@@ -45,7 +45,6 @@ export const useBoard = () => {
 
   const pipelineEntityType: 'Person' | 'Company' | undefined =
     pipelineStages?.[0].pipelineProgresses?.[0].progressableType;
-  console.log(pipelineEntityType);
 
   const query =
     pipelineEntityType === 'Person' ? useGetPeopleQuery : useGetCompaniesQuery;

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -1,4 +1,5 @@
 import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 
 import { removeTokens } from '@/auth/services/AuthService';
 import {
@@ -13,6 +14,7 @@ import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
 import NavTitle from '@/ui/layout/navbar/NavTitle';
 
 export function SettingsNavbar() {
+  const theme = useTheme();
   return (
     <>
       <NavBackButton title="Settings" />
@@ -21,7 +23,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Profile"
           to="/settings/profile"
-          icon={<IconUser size={16} />}
+          icon={<IconUser size={theme.iconSizeMedium} />}
           active={
             !!useMatch({
               path: useResolvedPath('/people').pathname,
@@ -32,7 +34,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Experience"
           to="/settings/profile/experience"
-          icon={<IconColorSwatch size={16} />}
+          icon={<IconColorSwatch size={theme.iconSizeMedium} />}
           soon={true}
           active={
             !!useMatch({
@@ -45,7 +47,7 @@ export function SettingsNavbar() {
         <NavItem
           label="General"
           to="/settings/workspace"
-          icon={<IconSettings size={16} />}
+          icon={<IconSettings size={theme.iconSizeMedium} />}
           soon={true}
           active={
             !!useMatch({
@@ -58,7 +60,7 @@ export function SettingsNavbar() {
         <NavItem
           label="Logout"
           onClick={removeTokens}
-          icon={<IconLogout size={16} />}
+          icon={<IconLogout size={theme.iconSizeMedium} />}
           danger={true}
         />
       </NavItemsContainer>

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconPlus } from '@/ui/icons/index';
@@ -21,9 +22,10 @@ const StyledButton = styled.button`
 `;
 
 export const NewButton = () => {
+  const theme = useTheme();
   return (
     <StyledButton>
-      <IconPlus size={16} />
+      <IconPlus size={theme.iconSizeMedium} />
       New
     </StyledButton>
   );

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -19,8 +19,8 @@ export type EditableChipProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input`
-  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(1)};
+  padding-right: ${(props) => props.theme.spacing(2)};
   width: 100%;
 
   ${textInputStyle}

front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconCheck } from '@/ui/icons/index';
@@ -35,10 +36,13 @@ export function DropdownMenuSelectableItem({
   onClick,
   children,
 }: React.PropsWithChildren<Props>) {
+  const theme = useTheme();
   return (
     <DropdownMenuSelectableItemContainer onClick={onClick} selected={selected}>
       <StyledLeftContainer>{children}</StyledLeftContainer>
-      <StyledRightIcon>{selected && <IconCheck size={16} />}</StyledRightIcon>
+      <StyledRightIcon>
+        {selected && <IconCheck size={theme.iconSizeMedium} />}
+      </StyledRightIcon>
     </DropdownMenuSelectableItemContainer>
   );
 }

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {
@@ -65,6 +66,7 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
   onRemoveFilter,
   onCancelClick,
 }: OwnProps<SortField, TData>) {
+  const theme = useTheme();
   return (
     <StyledBar>
       <StyledChipcontainer>
@@ -76,9 +78,9 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
               id={sort.key}
               icon={
                 sort.order === 'desc' ? (
-                  <IconArrowNarrowDown />
+                  <IconArrowNarrowDown size={theme.iconSizeMedium} />
                 ) : (
-                  <IconArrowNarrowUp />
+                  <IconArrowNarrowUp size={theme.iconSizeMedium} />
                 )
               }
               onRemove={() => onRemoveSort(sort.key)}

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconX } from '@/ui/icons/index';
@@ -50,13 +51,14 @@ function SortOrFilterChip({
   icon,
   onRemove,
 }: OwnProps) {
+  const theme = useTheme();
   return (
     <StyledChip>
       <StyledIcon>{icon}</StyledIcon>
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <IconX />
+        <IconX size={theme.iconSizeMedium} />
       </StyledDelete>
     </StyledChip>
   );

front/src/modules/ui/layout/styles/colors/background.ts

@@ -1,5 +1,5 @@
-import DarkNoise from './../dark-noise.jpg';
+import DarkNoise from '../assets/dark-noise.jpg';
-import LightNoise from './../light-noise.jpg';
+import LightNoise from '../assets/light-noise.jpg';
 
 export const backgroundColorsLight = {
   noisyBackground: `url(${LightNoise.toString()});`,

front/src/modules/ui/layout/styles/texts.ts

@@ -4,13 +4,12 @@ export const commonText = {
   fontSizeMedium: '1rem',
   fontSizeLarge: '1.08rem',
 
-  iconSizeSmall: '0.92rem',
-  iconSizeMedium: '1.08rem',
-  iconSizeLarge: '1.23rem',
-
   fontWeightMedium: 500,
   fontWeightSemibold: 600,
   fontWeightBold: 700,
   fontFamily: 'Inter, sans-serif',
-  lineHeight: '150%',
+
+  lineHeight: 1.5,
+
+  iconSizeMedium: 16,
 };

front/src/pages/companies/Companies.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -73,12 +74,12 @@ export function Companies() {
   }
 
   const companiesColumns = useCompaniesColumns();
-
+  const theme = useTheme();
   return (
     <AppPage>
       <WithTopBarContainer
         title="Companies"
-        icon={<IconBuildingSkyscraper size={16} />}
+        icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>

front/src/pages/people/People.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -71,11 +72,12 @@ export function People() {
 
   const peopleColumns = usePeopleColumns();
 
+  const theme = useTheme();
   return (
     <AppPage>
       <WithTopBarContainer
         title="People"
-        icon={<IconUser size={16} />}
+        icon={<IconUser size={theme.iconSizeMedium} />}
         onAddButtonClick={handleAddButtonClick}
       >
         <>
@@ -84,7 +86,7 @@ export function People() {
               data={people}
               columns={peopleColumns}
               viewName="All People"
-              viewIcon={<IconList />}
+              viewIcon={<IconList size={theme.iconSizeMedium} />}
               availableSorts={availableSorts}
               availableFilters={availableFilters}
               onSortsUpdate={updateSorts}

server/package.json

@@ -20,10 +20,10 @@
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
     "prisma:generate-client": "npx prisma generate --generator client",
-    "prisma:generate-nest-graphql": "npx prisma generate --generator nestgraphql && eslint \"src/api/@generated/**\" --fix",
+    "prisma:generate-nest-graphql": "npx prisma generate --generator nestgraphql && eslint \"src/core/@generated/**\" --fix",
     "prisma:migrate": "npx prisma migrate deploy",
     "prisma:seed": "npx prisma db seed",
-    "prisma:reset": "yarn prisma:generate-client && yarn prisma:generate-nest-grapql && npx prisma migrate reset"
+    "prisma:reset": "yarn prisma:generate-client && yarn prisma:generate-nest-graphql && npx prisma migrate reset"
   },
   "dependencies": {
     "@apollo/server": "^4.7.3",