From 20731999710d1ed78a9354ab7e3e8c40bab9a9cc Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Mon, 6 Jun 2022 22:28:44 +0200
Subject: [PATCH] Added possibility to remove roundness on preview cards

---
 src/components/Library/PreviewCardCTAs.tsx |  4 ++--
 src/components/PreviewCard.tsx             | 28 ++++++++++++++--------
 src/pages/library/index.tsx                |  1 +
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Library/PreviewCardCTAs.tsx b/src/components/Library/PreviewCardCTAs.tsx
index 3983260..18a1cda 100644
--- a/src/components/Library/PreviewCardCTAs.tsx
+++ b/src/components/Library/PreviewCardCTAs.tsx
@@ -23,7 +23,7 @@ export function PreviewCardCTAs(props: Props): JSX.Element {
           }`}
         >
           {/* TODO: Add to langui */}
-          <ToolTip content="I want it!">
+          <ToolTip content="I want it!" disabled={expand}>
             <Button
               icon={Icon.Favorite}
               text={expand ? "I want it!" : undefined}
@@ -46,7 +46,7 @@ export function PreviewCardCTAs(props: Props): JSX.Element {
               }}
             />
           </ToolTip>
-          <ToolTip content="I have it!">
+          <ToolTip content="I have it!" disabled={expand}>
             <Button
               icon={Icon.BackHand}
               text={expand ? "I have it!" : undefined}
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 66f17cf..84254fb 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -23,6 +23,7 @@ import { Img } from "./Img";
 interface Props {
   thumbnail?: UploadImageFragment | string | null | undefined;
   thumbnailAspectRatio?: string;
+  thumbnailRounded?: boolean;
   href: string;
   pre_title?: string | null | undefined;
   title: string | null | undefined;
@@ -53,6 +54,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,
+    thumbnailAspectRatio = "4/3",
+    thumbnailRounded = true,
     pre_title,
     title,
     subtitle,
@@ -61,7 +64,6 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
     topChips,
     bottomChips,
     keepInfoVisible,
-    thumbnailAspectRatio,
     metadata,
     hoverlay,
     infoAppend,
@@ -129,9 +131,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
         {stackNumber > 0 && (
           <>
             <div
-              className="absolute inset-0 -top-[var(--stacked-top)*2.1rem]
-              scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden rounded-md bg-light
-              brightness-[0.8] sepia-[0.5] transition-[top_transform]"
+              className={`absolute inset-0 -top-[var(--stacked-top)*2.1rem]
+              scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden ${
+                thumbnailRounded && "rounded-md"
+              } bg-light
+              brightness-[0.8] sepia-[0.5] transition-[top_transform]`}
             >
               {thumbnail && (
                 <Img
@@ -143,9 +147,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
             </div>
 
             <div
-              className="absolute inset-0 -top-[var(--stacked-top)*1rem]
-              scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden rounded-md bg-light
-              brightness-[0.9] sepia-[0.2] transition-[top_transform]"
+              className={`absolute inset-0 -top-[var(--stacked-top)*1rem]
+              scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden ${
+                thumbnailRounded && "rounded-md"
+              } bg-light
+              brightness-[0.9] sepia-[0.2] transition-[top_transform]`}
             >
               {thumbnail && (
                 <Img
@@ -162,9 +168,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
           <div className="relative">
             <Img
               className={
-                keepInfoVisible
-                  ? "rounded-t-md"
-                  : "rounded-md coarse:rounded-b-none"
+                thumbnailRounded
+                  ? keepInfoVisible
+                    ? "rounded-t-md"
+                    : "rounded-md coarse:rounded-b-none"
+                  : undefined
               }
               image={thumbnail}
               quality={ImageQuality.Medium}
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 3e1299a..f42dba4 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -281,6 +281,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
                         subtitle={item.attributes.subtitle}
                         thumbnail={item.attributes.thumbnail?.data?.attributes}
                         thumbnailAspectRatio="21/29.7"
+                        thumbnailRounded={false}
                         keepInfoVisible={keepInfoVisible}
                         topChips={
                           item.attributes.metadata &&