diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx index 7e6ba6f6e..f07155c4c 100644 --- 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 ( <> @@ -21,25 +23,25 @@ export function AppNavbar() { } + icon={} soon={true} /> } + icon={} soon={true} /> } + icon={} /> } + icon={} active={ !!useMatch({ path: useResolvedPath('/people').pathname, @@ -50,7 +52,7 @@ export function AppNavbar() { } + icon={} active={ !!useMatch({ path: useResolvedPath('/companies').pathname, diff --git a/front/src/modules/comments/components/comments/CommentChip.tsx b/front/src/modules/comments/components/comments/CommentChip.tsx index 92eb185af..3b5dd6029 100644 --- 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 ( {formattedCount} - + ); } diff --git a/front/src/modules/comments/components/comments/CommentHeader.tsx b/front/src/modules/comments/components/comments/CommentHeader.tsx index a05228fe4..70f57f44b 100644 --- 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) { {authorName} diff --git a/front/src/modules/opportunities/components/BoardCard.tsx b/front/src/modules/opportunities/components/BoardCard.tsx index 75ffe0378..0d92f2e01 100644 --- 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 ( @@ -69,7 +71,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => { - + { /> - + {person.email} - + {person.phone} - + {humanReadableDate(new Date(person.createdAt as string))} @@ -95,6 +97,7 @@ const PersonBoardCard = ({ person }: { person: Person }) => { }; const CompanyBoardCard = ({ company }: { company: Company }) => { + const theme = useTheme(); return ( @@ -106,14 +109,14 @@ const CompanyBoardCard = ({ company }: { company: Company }) => { - + - {company.employees} + {company.employees} - + {humanReadableDate(new Date(company.createdAt as string))} diff --git a/front/src/modules/opportunities/hooks/useBoard.ts b/front/src/modules/opportunities/hooks/useBoard.ts index 960751c74..536ee94b8 100644 --- 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; diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx index c8177b34a..07a040a53 100644 --- 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 ( <> @@ -21,7 +23,7 @@ export function SettingsNavbar() { } + icon={} active={ !!useMatch({ path: useResolvedPath('/people').pathname, @@ -32,7 +34,7 @@ export function SettingsNavbar() { } + icon={} soon={true} active={ !!useMatch({ @@ -45,7 +47,7 @@ export function SettingsNavbar() { } + icon={} soon={true} active={ !!useMatch({ @@ -58,7 +60,7 @@ export function SettingsNavbar() { } + icon={} danger={true} /> diff --git a/front/src/modules/ui/components/board/BoardNewButton.tsx b/front/src/modules/ui/components/board/BoardNewButton.tsx index 9aef0fac5..4613c338d 100644 --- 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 ( - + New ); diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index a8b36dd54..fbdb6b632 100644 --- 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} diff --git a/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx index 9c20ba7b1..c1ed649f1 100644 --- 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) { + const theme = useTheme(); return ( {children} - {selected && } + + {selected && } + ); } diff --git a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx index 07ea6c31d..cd5cddd5c 100644 --- 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({ onRemoveFilter, onCancelClick, }: OwnProps) { + const theme = useTheme(); return ( @@ -76,9 +78,9 @@ function SortAndFilterBar({ id={sort.key} icon={ sort.order === 'desc' ? ( - + ) : ( - + ) } onRemove={() => onRemoveSort(sort.key)} diff --git a/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx b/front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx index f477d3a6c..df7c248be 100644 --- 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 ( {icon} {labelKey && {labelKey}: } {labelValue} - + ); diff --git a/front/src/modules/ui/layout/styles/dark-noise.jpg b/front/src/modules/ui/layout/styles/assets/dark-noise.jpg similarity index 100% rename from front/src/modules/ui/layout/styles/dark-noise.jpg rename to front/src/modules/ui/layout/styles/assets/dark-noise.jpg diff --git a/front/src/modules/ui/layout/styles/light-noise.jpg b/front/src/modules/ui/layout/styles/assets/light-noise.jpg similarity index 100% rename from front/src/modules/ui/layout/styles/light-noise.jpg rename to front/src/modules/ui/layout/styles/assets/light-noise.jpg diff --git a/front/src/modules/ui/layout/styles/colors/background.ts b/front/src/modules/ui/layout/styles/colors/background.ts index 3c76520b0..79e805988 100644 --- 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()});`, diff --git a/front/src/modules/ui/layout/styles/texts.ts b/front/src/modules/ui/layout/styles/texts.ts index 70da66cc5..25cf41e70 100644 --- 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, }; diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 21df587a1..82b27c596 100644 --- 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 ( } + icon={} onAddButtonClick={handleAddButtonClick} > <> diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index b4709b85c..9ec4003a9 100644 --- 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 ( } + icon={} onAddButtonClick={handleAddButtonClick} > <> @@ -84,7 +86,7 @@ export function People() { data={people} columns={peopleColumns} viewName="All People" - viewIcon={} + viewIcon={} availableSorts={availableSorts} availableFilters={availableFilters} onSortsUpdate={updateSorts} diff --git a/server/package.json b/server/package.json index c5fdbfc8b..c6dad0a16 100644 --- 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",