admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor icons passed as props with the new way (#1492)

Browse Source 
* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-10 19:39:17 +01:00
committed by GitHub
parent 89fed80537
commit fb737e2021
82 changed files with 341 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/pages/companies/Companies.tsx
View File

@ -1,5 +1,4 @@
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { v4 } from 'uuid';
@ -70,15 +69,10 @@ export function Companies() {
});
}
const theme = useTheme();
return (
<SpreadsheetImportProvider>
<PageContainer>
<PageHeader
title="Companies"
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
>
<PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PageHotkeys onAddButtonClick={handleAddButtonClick} />
<PageAddButton onClick={handleAddButtonClick} />

8
front/src/pages/companies/CompaniesMockMode.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
@ -15,14 +14,9 @@ const StyledTableContainer = styled.div`
`;
export function CompaniesMockMode() {
const theme = useTheme();
return (
<PageContainer>
<PageHeader
title="Companies"
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
/>
<PageHeader title="Companies" Icon={IconBuildingSkyscraper} />
<PageBody>
<RecoilScope SpecificContext={TableRecoilScopeContext}>
<StyledTableContainer>

4
front/src/pages/companies/CompanyShow.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { CompanyTeam } from '@/companies/components/CompanyTeam';
@ -37,7 +36,6 @@ export function CompanyShow() {
const companyId = useParams().companyId ?? '';
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const navigate = useNavigate();
const theme = useTheme();
const { data, loading } = useCompanyQuery(companyId);
const company = data?.findUniqueCompany;
@ -63,7 +61,7 @@ export function CompanyShow() {
<PageHeader
title={company.name ?? ''}
hasBackButton
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
Icon={IconBuildingSkyscraper}
>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PageFavoriteButton

8
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
@ -24,8 +23,6 @@ const StyledPageHeader = styled(PageHeader)`
`;
export function Opportunities() {
const theme = useTheme();
const { handlePipelineStageAdd, handlePipelineStageDelete } =
usePipelineStages();
@ -56,10 +53,7 @@ export function Opportunities() {
return (
<PageContainer>
<RecoilScope>
<StyledPageHeader
title="Opportunities"
icon={<IconTargetArrow size={theme.icon.size.md} />}
>
<StyledPageHeader title="Opportunities" Icon={IconTargetArrow}>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PipelineAddButton />
</RecoilScope>

8
front/src/pages/people/People.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { v4 } from 'uuid';
@ -62,15 +61,10 @@ export function People() {
});
}
const theme = useTheme();
return (
<SpreadsheetImportProvider>
<PageContainer>
<PageHeader
title="People"
icon={<IconUser size={theme.icon.size.md} />}
>
<PageHeader title="People" Icon={IconUser}>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PageHotkeys onAddButtonClick={handleAddButtonClick} />
<PageAddButton onClick={handleAddButtonClick} />

9
front/src/pages/people/PersonShow.tsx
View File

@ -1,7 +1,6 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { useFavorites } from '@/favorites/hooks/useFavorites';
@ -41,8 +40,6 @@ export function PersonShow() {
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
const navigate = useNavigate();
const theme = useTheme();
const { data, loading } = usePersonQuery(personId);
const person = data?.findUniquePerson;
@ -80,11 +77,7 @@ export function PersonShow() {
return (
<PageContainer>
<PageTitle title={person.displayName || 'No Name'} />
<PageHeader
title={person.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
hasBackButton
>
<PageHeader title={person.firstName ?? ''} Icon={IconUser} hasBackButton>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PageFavoriteButton
isFavorite={isFavorite}

2
front/src/pages/settings/SettingsExperience.tsx
View File

@ -20,7 +20,7 @@ export function SettingsExperience() {
const { colorScheme, setColorScheme } = useColorScheme();
return (
<SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<H1Title title="Experience" />
<Section>

2
front/src/pages/settings/SettingsProfile.tsx
View File

@ -23,7 +23,7 @@ const StyledContainer = styled.div`
export function SettingsProfile() {
return (
<SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<>
<StyledContainer>
<H1Title title="Profile" />

2
front/src/pages/settings/SettingsWorkspace.tsx
View File

@ -18,7 +18,7 @@ const StyledContainer = styled.div`
export function SettingsWorkspace() {
return (
<SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<div>
<StyledContainer>
<H1Title title="General" />

14
front/src/pages/settings/SettingsWorkspaceMembers.tsx
View File

@ -1,10 +1,9 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { Button } from '@/ui/button/components/Button';
import { IconButton } from '@/ui/button/components/IconButton';
import { IconSettings, IconTrash } from '@/ui/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
import { ConfirmationModal } from '@/ui/modal/components/ConfirmationModal';
@ -39,7 +38,6 @@ export function SettingsWorkspaceMembers() {
const [currentUser] = useRecoilState(currentUserState);
const workspace = currentUser?.workspaceMember?.workspace;
const theme = useTheme();
const { data } = useGetWorkspaceMembersQuery();
@ -85,7 +83,7 @@ export function SettingsWorkspaceMembers() {
};
return (
<SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<StyledContainer>
<H1Title title="Members" />
{workspace?.inviteHash && (
@ -111,14 +109,14 @@ export function SettingsWorkspaceMembers() {
accessory={
currentUser?.id !== member.user.id && (
<StyledButtonContainer>
<Button
<IconButton
onClick={() => {
setIsConfirmationModalOpen(true);
setUserToDelete(member.user.id);
}}
variant={'tertiary'}
size={'small'}
icon={<IconTrash size={theme.icon.size.md} />}
variant="tertiary"
size="medium"
Icon={IconTrash}
/>
</StyledButtonContainer>
)

11
front/src/pages/tasks/Tasks.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@ -32,28 +31,24 @@ const StyledTabListContainer = styled.div`
`;
export function Tasks() {
const theme = useTheme();
const openCreateActivity = useOpenCreateActivityDrawer();
const TASK_TABS = [
{
id: 'to-do',
title: 'To do',
icon: <IconCheck size={theme.icon.size.md} />,
Icon: IconCheck,
},
{
id: 'done',
title: 'Done',
icon: <IconArchive size={theme.icon.size.md} />,
Icon: IconArchive,
},
];
return (
<PageContainer>
<PageHeader
title="Tasks"
icon={<IconCheckbox size={theme.icon.size.md} />}
>
<PageHeader title="Tasks" Icon={IconCheckbox}>
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
<PageAddButton
onClick={() => openCreateActivity(ActivityType.Task)}