fix: partnaire logo style on offers

SocialGouv · Mar 6, 2024 · 97b2d0a · 97b2d0a
1 parent 12acaf5
commit 97b2d0a
Showing 1 changed file with 58 additions and 55 deletions.
diff --git a/webapp/src/components/cards/OfferCard.tsx b/webapp/src/components/cards/OfferCard.tsx
@@ -6,64 +6,67 @@ import { dottedPattern } from "~/utils/chakra-theme";
 import { OfferKindBadge } from "../OfferKindBadge";
 
 type OfferCardProps = {
-  offer: OfferIncluded;
-  displayExpiryDate?: boolean;
+	offer: OfferIncluded;
+	displayExpiryDate?: boolean;
 };
 
 const OfferCard = ({ offer, displayExpiryDate = false }: OfferCardProps) => {
-  return (
-    <Link href={`/dashboard/offer/${offer.id}`}>
-      <Flex flexDir="column">
-        <Flex
-          bgColor={offer.partner.color}
-          py={5}
-          borderTopRadius={12}
-          position="relative"
-          justifyContent="center"
-          alignItems="center"
-          sx={{ ...dottedPattern("#ffffff") }}
-        >
-          <Flex alignItems="center" borderRadius="full" p={1} bgColor="white">
-            <Image
-              src={offer.partner.icon.url ?? ""}
-              alt={offer.partner.icon.alt ?? ""}
-              width={32}
-              height={32}
-            />
-          </Flex>
-        </Flex>
-        <Flex
-          flexDir="column"
-          p={3}
-          bgColor="white"
-          borderBottomRadius={8}
-          gap={2}
-          boxShadow="md"
-        >
-          <Text fontSize="sm" fontWeight="medium">
-            {offer.partner.name}
-          </Text>
-          <Text fontWeight="bold" fontSize="sm" noOfLines={2} h="42px">
-            {offer.title}
-          </Text>
-          <OfferKindBadge kind={offer.kind} variant="light" />
-          {displayExpiryDate && (
-            <Flex
-              alignSelf="start"
-              borderRadius="2xl"
-              bgColor="bgWhite"
-              py={2}
-              px={3}
-            >
-              <Text fontSize="xs" fontWeight="medium">
-                Expire le : {new Date(offer.validityTo).toLocaleDateString()}
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-      </Flex>
-    </Link>
-  );
+	return (
+		<Link href={`/dashboard/offer/${offer.id}`}>
+			<Flex flexDir="column">
+				<Flex
+					bgColor={offer.partner.color}
+					py={5}
+					borderTopRadius={12}
+					position="relative"
+					justifyContent="center"
+					alignItems="center"
+					sx={{ ...dottedPattern("#ffffff") }}
+				>
+					<Flex alignItems="center" borderRadius="full" p={1} bgColor="white">
+						<Image
+							src={offer.partner.icon.url ?? ""}
+							alt={offer.partner.icon.alt ?? ""}
+							width={42}
+							height={42}
+							style={{
+								borderRadius: '50%'
+							}}
+						/>
+					</Flex>
+				</Flex>
+				<Flex
+					flexDir="column"
+					p={3}
+					bgColor="white"
+					borderBottomRadius={8}
+					gap={2}
+					boxShadow="md"
+				>
+					<Text fontSize="sm" fontWeight="medium">
+						{offer.partner.name}
+					</Text>
+					<Text fontWeight="bold" fontSize="sm" noOfLines={2} h="42px">
+						{offer.title}
+					</Text>
+					<OfferKindBadge kind={offer.kind} variant="light" />
+					{displayExpiryDate && (
+						<Flex
+							alignSelf="start"
+							borderRadius="2xl"
+							bgColor="bgWhite"
+							py={2}
+							px={3}
+						>
+							<Text fontSize="xs" fontWeight="medium">
+								Expire le : {new Date(offer.validityTo).toLocaleDateString()}
+							</Text>
+						</Flex>
+					)}
+				</Flex>
+			</Flex>
+		</Link>
+	);
 };
 
 export default OfferCard;