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
2023-06-16 14:16:35 +02:00
parent 98127d1d4c
commit 7f25f16766
18 changed files with 64 additions and 41 deletions
--- a/front/src/AppNavbar.tsx
+++ b/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,
--- a/front/src/modules/comments/components/comments/CommentChip.tsx
+++ b/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>
  );
 }
--- a/front/src/modules/comments/components/comments/CommentHeader.tsx
+++ b/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>
--- a/front/src/modules/opportunities/components/BoardCard.tsx
+++ b/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>
--- a/front/src/modules/opportunities/hooks/useBoard.ts
+++ b/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;
--- a/front/src/modules/settings/components/SettingsNavbar.tsx
+++ b/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>
--- a/front/src/modules/ui/components/board/BoardNewButton.tsx
+++ b/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>
  );
--- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
+++ b/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-right: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(2)};
  width: 100%;

  ${textInputStyle}
--- a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
+++ b/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>
  );
 }
--- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
+++ b/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)}
--- a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
+++ b/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>
  );
--- a/front/src/modules/ui/layout/styles/assets/dark-noise.jpg
+++ b/front/src/modules/ui/layout/styles/assets/dark-noise.jpg
--- a/front/src/modules/ui/layout/styles/assets/light-noise.jpg
+++ b/front/src/modules/ui/layout/styles/assets/light-noise.jpg
--- a/front/src/modules/ui/layout/styles/colors/background.ts
+++ b/front/src/modules/ui/layout/styles/colors/background.ts
@ -1,5 +1,5 @@
-import DarkNoise from './../dark-noise.jpg';
-import LightNoise from './../light-noise.jpg';
+import DarkNoise from '../assets/dark-noise.jpg';
+import LightNoise from '../assets/light-noise.jpg';

 export const backgroundColorsLight = {
  noisyBackground: `url(${LightNoise.toString()});`,
--- a/front/src/modules/ui/layout/styles/texts.ts
+++ b/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,
 };
--- a/front/src/pages/companies/Companies.tsx
+++ b/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}
      >
        <>
--- a/front/src/pages/people/People.tsx
+++ b/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}
--- a/server/package.json
+++ b/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",