From bdf546f880da8c03be14de31a7c27616f2bc6c0f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 15 Jun 2024 13:48:08 +0200
Subject: [PATCH] refactor(catalog post): fix spoiler image

---
 .../catalog-row/catalog-row.module.css        |  1 -
 src/components/catalog-row/catalog-row.tsx    | 51 ++++++++-----------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index cf14769c..4686ce04 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -31,7 +31,6 @@
   width: 150px;
   height: 150px;
   display: inline-block;
-  margin: 3px 20px 5px 20px;
   background-color: black;
   color: white !important;
   display: flex;
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index a27e565f..ff9e3d78 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -81,15 +81,6 @@ export const CatalogPostMedia = ({ commentMediaInfo, isOutOfFeed, linkWidth, lin
   );
 };
 
-const SpoilerImage = ({ postLink }: { postLink: string }) => {
-  const { t } = useTranslation();
-  return (
-    <Link to={postLink} className={styles.spoilerThumbnail}>
-      <span className={styles.spoilerText}>{t('spoiler')}</span>
-    </Link>
-  );
-};
-
 const CatalogPost = ({ post }: { post: Comment }) => {
   const { t } = useTranslation();
   const {
@@ -204,27 +195,29 @@ const CatalogPost = ({ post }: { post: Comment }) => {
               <span className={styles.hiddenThumbnail} />
             </Link>
           ) : hasThumbnail ? (
-            spoiler ? (
-              <SpoilerImage postLink={postLink} />
-            ) : (
-              <Link to={postLink}>
-                <div
-                  className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
-                  ref={refs.setReference}
-                  onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
-                  onMouseLeave={() => {
-                    setShowPortal(false);
-                    if (timeoutRef.current) {
-                      clearTimeout(timeoutRef.current);
-                      timeoutRef.current = null;
-                    }
-                  }}
-                >
-                  {threadIcons}
+            <Link to={postLink}>
+              <div
+                className={`${styles.mediaPaddingWrapper} ${hidden && styles.hidden}`}
+                ref={refs.setReference}
+                onMouseOver={() => (timeoutRef.current = setTimeout(() => setShowPortal(true), 250))}
+                onMouseLeave={() => {
+                  setShowPortal(false);
+                  if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = null;
+                  }
+                }}
+              >
+                {threadIcons}
+                {spoiler ? (
+                  <span className={styles.spoilerThumbnail}>
+                    <span className={styles.spoilerText}>{t('spoiler')}</span>
+                  </span>
+                ) : (
                   <CatalogPostMedia commentMediaInfo={commentMediaInfo} isOutOfFeed={isDescription || isRules} linkWidth={linkWidth} linkHeight={linkHeight} />
-                </div>
-              </Link>
-            )
+                )}
+              </div>
+            </Link>
           ) : (
             threadIcons
           )}