Integrate favorites into release (#1168)

front/src/modules/favorites/components/Favorites.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
 
 import NavItem from '@/ui/navbar/components/NavItem';
+import NavTitle from '@/ui/navbar/components/NavTitle';
 import { Avatar } from '@/users/components/Avatar';
 import { useGetFavoritesQuery } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
-const Wrapper = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow-x: auto;
@@ -16,48 +17,46 @@ export function Favorites() {
   const { data } = useGetFavoritesQuery();
   const favorites = data?.findFavorites;
 
-  if (!favorites) return <></>;
+  if (!favorites || favorites.length === 0) return <></>;
 
   return (
-    <Wrapper>
-      {favorites &&
-        favorites.map(
-          ({ id, person, company }) =>
-            (person && (
-              <NavItem
-                key={id}
-                label={`${person.firstName} ${person.lastName}`}
-                icon={
-                  <Avatar
-                    key={id}
-                    avatarUrl={person.avatarUrl ?? ''}
-                    type="rounded"
-                    placeholder={`${person.firstName} ${person.lastName}`}
-                    size="md"
-                  />
-                }
-                to={`/person/${person.id}`}
-              />
-            )) ||
-            (company && (
-              <NavItem
-                key={id}
-                label={company.name}
-                icon={
-                  <Avatar
-                    key={id}
-                    avatarUrl={
-                      getLogoUrlFromDomainName(company.domainName) ?? ''
-                    }
-                    type="squared"
-                    placeholder={company.name}
-                    size="md"
-                  />
-                }
-                to={`/companies/${company.id}`}
-              />
-            )),
-        )}
-    </Wrapper>
+    <StyledContainer>
+      <NavTitle label="Favorites" />
+      {favorites.map(
+        ({ id, person, company }) =>
+          (person && (
+            <NavItem
+              key={id}
+              label={`${person.firstName} ${person.lastName}`}
+              icon={
+                <Avatar
+                  key={id}
+                  avatarUrl={person.avatarUrl ?? ''}
+                  type="rounded"
+                  placeholder={`${person.firstName} ${person.lastName}`}
+                  size="md"
+                />
+              }
+              to={`/person/${person.id}`}
+            />
+          )) ||
+          (company && (
+            <NavItem
+              key={id}
+              label={company.name}
+              icon={
+                <Avatar
+                  key={id}
+                  avatarUrl={getLogoUrlFromDomainName(company.domainName) ?? ''}
+                  type="squared"
+                  placeholder={company.name}
+                  size="md"
+                />
+              }
+              to={`/companies/${company.id}`}
+            />
+          )),
+      )}
+    </StyledContainer>
   );
 }

front/src/modules/ui/button/components/IconButton.tsx

@@ -5,20 +5,21 @@ export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
 
 export type IconButtonSize = 'large' | 'medium' | 'small';
 
-export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
-
-export type IconButtonAccent = 'regular' | 'red';
+export type IconButtonFontColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger';
 
 export type ButtonProps = {
   icon?: React.ReactNode;
   variant?: IconButtonVariant;
   size?: IconButtonSize;
   textColor?: IconButtonFontColor;
-  accent?: IconButtonAccent;
 } & React.ComponentProps<'button'>;
 
 const StyledIconButton = styled.button<
-  Pick<ButtonProps, 'variant' | 'size' | 'textColor' | 'accent'>
+  Pick<ButtonProps, 'variant' | 'size' | 'textColor'>
 >`
   align-items: center;
   background: ${({ theme, variant }) => {
@@ -69,13 +70,13 @@ const StyledIconButton = styled.button<
         return 'none';
     }
   }};
-  color: ${({ theme, disabled, textColor, accent }) => {
+  color: ${({ theme, disabled, textColor }) => {
     if (disabled) {
       return theme.font.color.extraLight;
     }
 
-    return accent
-      ? theme.color[accent]
+    return textColor === 'danger'
+      ? theme.color.red
       : theme.font.color[textColor ?? 'secondary'];
   }};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
@@ -126,7 +127,6 @@ export function IconButton({
   size = 'medium',
   textColor = 'tertiary',
   disabled = false,
-  accent = 'regular',
   ...props
 }: ButtonProps) {
   return (
@@ -135,7 +135,6 @@ export function IconButton({
       size={size}
       disabled={disabled}
       textColor={textColor}
-      accent={accent}
       {...props}
     >
       {icon}

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

@@ -13,7 +13,7 @@ type OwnProps = {
   isFavorite?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
-  onFavouriteButtonClick?: () => void;
+  onFavoriteButtonClick?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -29,7 +29,7 @@ export function WithTopBarContainer({
   isFavorite,
   icon,
   onAddButtonClick,
-  onFavouriteButtonClick,
+  onFavoriteButtonClick,
 }: OwnProps) {
   return (
     <StyledContainer>
@@ -40,7 +40,7 @@ export function WithTopBarContainer({
         isFavorite={isFavorite}
         icon={icon}
         onAddButtonClick={onAddButtonClick}
-        onFavouriteButtonClick={onFavouriteButtonClick}
+        onFavoriteButtonClick={onFavoriteButtonClick}
       />
       <RightDrawerContainer topMargin={PAGE_BAR_MIN_HEIGHT + 16 + 16}>
         {children}

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

@@ -69,7 +69,7 @@ type OwnProps = {
   isFavorite?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
-  onFavouriteButtonClick?: () => void;
+  onFavoriteButtonClick?: () => void;
 };
 
 export function PageBar({
@@ -78,7 +78,7 @@ export function PageBar({
   isFavorite,
   icon,
   onAddButtonClick,
-  onFavouriteButtonClick,
+  onFavoriteButtonClick,
 }: OwnProps) {
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
@@ -114,13 +114,13 @@ export function PageBar({
           </StyledTopBarIconTitleContainer>
         </StyledLeftContainer>
         <ActionButtonsContainer>
-          {onFavouriteButtonClick && (
+          {onFavoriteButtonClick && (
             <IconButton
               icon={<IconHeart size={16} />}
               size="large"
               data-testid="add-button"
-              accent={isFavorite ? 'red' : 'regular'}
-              onClick={onFavouriteButtonClick}
+              textColor={isFavorite ? 'danger' : 'secondary'}
+              onClick={onFavoriteButtonClick}
               variant="border"
             />
           )}