From 73f3d1f0e9b19aa0c3737a413103747e73d96ab8 Mon Sep 17 00:00:00 2001
From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:22:03 +0000
Subject: [PATCH] Remove 4:5 aspect ratio badge (#1742)

---
 .../src/components/CollectionDisplay.tsx      | 12 -----
 .../src/components/icons/AspectRatioBadge.tsx | 51 -------------------
 2 files changed, 63 deletions(-)
 delete mode 100644 fronts-client/src/components/icons/AspectRatioBadge.tsx

diff --git a/fronts-client/src/components/CollectionDisplay.tsx b/fronts-client/src/components/CollectionDisplay.tsx
index 610ccdcf13..f8e5e0fdd0 100644
--- a/fronts-client/src/components/CollectionDisplay.tsx
+++ b/fronts-client/src/components/CollectionDisplay.tsx
@@ -33,12 +33,6 @@ import { theme } from 'constants/theme';
 import Button from 'components/inputs/ButtonDefault';
 import { updateCollection as updateCollectionAction } from '../actions/Collections';
 import { isMode } from '../selectors/pathSelectors';
-import {
-	COLLECTIONS_USING_PORTRAIT_TRAILS,
-	portraitCardImageCriteria,
-	SUPPORT_PORTRAIT_CROPS,
-} from 'constants/image';
-import { AspectRatioBadge } from './icons/AspectRatioBadge';
 import { DragToConvertFeastCollection } from './FrontsEdit/CollectionComponents/DragToConvertFeastCollection';
 import { selectors as editionsIssueSelectors } from '../bundles/editionsIssueBundle';
 
@@ -275,11 +269,6 @@ class CollectionDisplay extends React.Component<Props, CollectionState> {
 		const targetedTerritory = collection ? collection.targetedTerritory : null;
 		const { displayName } = this.state;
 
-		const usePortrait =
-			SUPPORT_PORTRAIT_CROPS &&
-			collection?.type &&
-			COLLECTIONS_USING_PORTRAIT_TRAILS.includes(collection?.type);
-
 		return (
 			<CollectionContainer
 				id={collection && createCollectionId(collection, frontId)}
@@ -346,7 +335,6 @@ class CollectionDisplay extends React.Component<Props, CollectionState> {
 								</CollectionHeadingText>
 							)}
 						</CollectionHeadlineWithConfigContainer>
-						{usePortrait && <AspectRatioBadge {...portraitCardImageCriteria} />}
 						{isLocked ? (
 							<LockedCollectionFlag>Locked</LockedCollectionFlag>
 						) : headlineContent ? (
diff --git a/fronts-client/src/components/icons/AspectRatioBadge.tsx b/fronts-client/src/components/icons/AspectRatioBadge.tsx
deleted file mode 100644
index ae500baed8..0000000000
--- a/fronts-client/src/components/icons/AspectRatioBadge.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import CircularIconContainer from './CircularIconContainer';
-import { styled, theme } from 'constants/theme';
-
-interface Props {
-	widthAspectRatio: number;
-	heightAspectRatio: number;
-}
-
-const AspectText = styled.span`
-	font-family: TS3TextSans;
-	font-size: 11px;
-	line-height: 1;
-	display: inline-block;
-	min-width: 20px;
-	text-align: center;
-	color: ${theme.colors.white};
-`;
-
-const Container = styled(CircularIconContainer)`
-	background-color: ${theme.colors.blackLight};
-	margin: 4px;
-`;
-
-const getAspectDescription = (
-	widthAspectRatio: number,
-	heightAspectRatio: number,
-): string =>
-	widthAspectRatio > heightAspectRatio
-		? 'landscape'
-		: widthAspectRatio < heightAspectRatio
-			? 'portrait'
-			: 'square';
-
-export const AspectRatioBadge: React.FunctionComponent<Props> = ({
-	widthAspectRatio,
-	heightAspectRatio,
-}) => {
-	return (
-		<Container
-			title={`uses ${widthAspectRatio}:${heightAspectRatio} (${getAspectDescription(
-				widthAspectRatio,
-				heightAspectRatio,
-			)}) image crops`}
-		>
-			<AspectText>
-				{widthAspectRatio}:{heightAspectRatio}
-			</AspectText>
-		</Container>
-	);
-};