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

* 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>

front/src/modules/ui/layout/components/PageAddButton.tsx

@@ -8,7 +8,7 @@ type OwnProps = {
 export function PageAddButton({ onClick }: OwnProps) {
   return (
     <IconButton
-      icon={<IconPlus size={16} />}
+      Icon={IconPlus}
       size="medium"
       variant="secondary"
       data-testid="add-button"

front/src/modules/ui/layout/components/PageFavoriteButton.tsx

@@ -9,7 +9,7 @@ type OwnProps = {
 export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
   return (
     <IconButton
-      icon={<IconHeart size={16} />}
+      Icon={IconHeart}
       size="medium"
       variant="secondary"
       data-testid="add-button"

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -1,12 +1,13 @@
-import { type ComponentProps, type ReactNode, useCallback } from 'react';
+import { type ComponentProps, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { IconButton } from '@/ui/button/components/IconButton';
+import { IconButton, IconButtonSize } from '@/ui/button/components/IconButton';
 import { IconChevronLeft } from '@/ui/icon/index';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
-import { navbarIconSize } from '@/ui/navbar/constants';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
@@ -63,28 +64,27 @@ const StyledPageActionContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
-type OwnProps = ComponentProps<'div'> & {
+type PageHeaderProps = ComponentProps<'div'> & {
   title: string;
   hasBackButton?: boolean;
-  icon: ReactNode;
+  Icon: IconComponent;
   children?: JSX.Element | JSX.Element[];
 };
 
 export function PageHeader({
   title,
   hasBackButton,
-  icon,
+  Icon,
   children,
   ...props
-}: OwnProps) {
+}: PageHeaderProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
 
   const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
 
-  const iconSize = useIsMobile()
-    ? navbarIconSize.mobile
-    : navbarIconSize.desktop;
+  const iconSize: IconButtonSize = useIsMobile() ? 'small' : 'medium';
+  const theme = useTheme();
 
   return (
     <StyledTopBarContainer {...props}>
@@ -97,14 +97,15 @@ export function PageHeader({
         {hasBackButton && (
           <StyledTopBarButtonContainer>
             <StyledBackIconButton
-              icon={<IconChevronLeft size={iconSize} />}
+              Icon={IconChevronLeft}
+              size={iconSize}
               onClick={navigateBack}
               variant="tertiary"
             />
           </StyledTopBarButtonContainer>
         )}
         <StyledTopBarIconStyledTitleContainer>
-          {icon}
+          {Icon && <Icon size={theme.icon.size.md} />}
           <StyledTitleContainer data-testid="top-bar-title">
             <OverflowingTextWithTooltip text={title} />
           </StyledTitleContainer>

front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx

@@ -1,14 +1,16 @@
+import { JSX } from 'react';
 import styled from '@emotion/styled';
 
+import { IconComponent } from '@/ui/icon/types/IconComponent';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { PageHeader } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
-type OwnProps = {
+type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
   title: string;
-  icon: React.ReactNode;
+  Icon: IconComponent;
 };
 
 const StyledContainer = styled.div<{ isMobile: boolean }>`
@@ -18,12 +20,16 @@ const StyledContainer = styled.div<{ isMobile: boolean }>`
   width: 100%;
 `;
 
-export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
+export function SubMenuTopBarContainer({
+  children,
+  title,
+  Icon,
+}: SubMenuTopBarContainerProps) {
   const isMobile = useIsMobile();
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <PageHeader title={title} icon={icon} />}
+      {isMobile && <PageHeader title={title} Icon={Icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );