Integrate favorites into release (#1168)

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"
             />
           )}