From 6ef5f4a02b8a7444233ad9bf07b21da77b57342f Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 16 Jan 2026 16:24:45 -0500
Subject: [PATCH] pretty up the cover image button

---
 components/Blocks/ImageBlock.tsx     | 53 ++++++++++++++++++----------
 components/Icons/ImageCoverImage.tsx | 20 +++++++++++
 components/Toolbar/ImageToolbar.tsx  |  9 +++--
 3 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/components/Blocks/ImageBlock.tsx b/components/Blocks/ImageBlock.tsx
index 8623be0b..68233afc 100644
--- a/components/Blocks/ImageBlock.tsx
+++ b/components/Blocks/ImageBlock.tsx
@@ -19,7 +19,16 @@ import { set } from "colorjs.io/fn";
 import { ImageAltSmall } from "components/Icons/ImageAlt";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useSubscribe } from "src/replicache/useSubscribe";
-import { ImageCoverImage } from "components/Icons/ImageCoverImage";
+import {
+  ImageCoverImage,
+  ImageCoverImageRemove,
+} from "components/Icons/ImageCoverImage";
+import {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonTertiary,
+} from "components/Buttons";
+import { CheckTiny } from "components/Icons/CheckTiny";
 
 export function ImageBlock(props: BlockProps & { preview?: boolean }) {
   let { rep } = useReplicache();
@@ -198,32 +207,38 @@ const CoverImageButton = (props: { entityID: string }) => {
   );
 
   // Only show if focused, in a publication, has write permissions, and no cover image is set
-  if (
-    !isFocused ||
-    !pubData?.publications ||
-    !entity_set.permissions.write ||
-    coverImage
-  )
+  if (!isFocused || !pubData?.publications || !entity_set.permissions.write)
     return null;
-
-  return (
-    <div className="absolute top-2 left-2">
-      <button
-        className="flex items-center gap-1 text-xs bg-bg-page/80 hover:bg-bg-page text-secondary hover:text-primary px-2 py-1 rounded-md border border-border hover:border-primary transition-colors"
+  if (coverImage)
+    return (
+      <ButtonSecondary
+        className="absolute top-2 right-2"
         onClick={async (e) => {
           e.preventDefault();
           e.stopPropagation();
           await rep?.mutate.updatePublicationDraft({
-            cover_image: props.entityID,
+            cover_image: null,
           });
         }}
       >
-        <span className="w-4 h-4 flex items-center justify-center">
-          <ImageCoverImage />
-        </span>
-        Set as Cover
-      </button>
-    </div>
+        Remove Cover Image
+        <ImageCoverImageRemove />
+      </ButtonSecondary>
+    );
+  return (
+    <ButtonPrimary
+      className="absolute top-2 right-2"
+      onClick={async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        await rep?.mutate.updatePublicationDraft({
+          cover_image: props.entityID,
+        });
+      }}
+    >
+      Use as Cover Image
+      <ImageCoverImage />
+    </ButtonPrimary>
   );
 };
 
diff --git a/components/Icons/ImageCoverImage.tsx b/components/Icons/ImageCoverImage.tsx
index e574daa7..1c226c26 100644
--- a/components/Icons/ImageCoverImage.tsx
+++ b/components/Icons/ImageCoverImage.tsx
@@ -1,3 +1,5 @@
+import { Props } from "./Props";
+
 export const ImageCoverImage = () => (
   <svg
     width="24"
@@ -12,3 +14,21 @@ export const ImageCoverImage = () => (
     />
   </svg>
 );
+
+export const ImageCoverImageRemove = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M21.7744 1.48538C22.0673 1.19249 22.542 1.19259 22.835 1.48538C23.1279 1.77824 23.1278 2.253 22.835 2.54592L2.22461 23.1602C1.93172 23.4526 1.45683 23.4528 1.16406 23.1602C0.871349 22.8674 0.871599 22.3926 1.16406 22.0996L21.7744 1.48538ZM22.9229 4.22561C23.1551 4.66244 23.2881 5.16029 23.2881 5.68948V18.3106C23.2879 20.0361 21.8886 21.4362 20.1631 21.4365H5.71582L6.96582 20.1865H20.1631C21.1982 20.1862 22.0379 19.3457 22.0381 18.3106V15.8067H11.3447L12.5947 14.5567H22.0381V10.1299L21.1738 9.42385L19.9775 10.9678C19.5515 11.5167 18.8233 11.7335 18.166 11.5078L16.3213 10.875C16.3092 10.8709 16.2965 10.8691 16.2842 10.8662L17.2705 9.87893L18.5723 10.3262C18.7238 10.378 18.892 10.3278 18.9902 10.2012L20.2061 8.63284L19.2764 7.87307L20.1641 6.9844L22.0381 8.51565V5.68948C22.0381 5.51371 22.0121 5.34397 21.9668 5.18264L22.9229 4.22561ZM17.6797 3.81448H3.83789C2.80236 3.81448 1.96289 4.65394 1.96289 5.68948V11.4805L4.8291 8.91897C5.18774 8.59894 5.70727 8.54438 6.12207 8.77346L6.20312 8.82327L10.083 11.4112L9.18164 12.3125L8.81055 12.0655L8.03027 12.8692C7.55062 13.3622 6.78587 13.438 6.21875 13.0489C6.17034 13.0156 6.10737 13.0113 6.05469 13.0371L4.79883 13.6573C4.258 13.9241 3.61319 13.8697 3.125 13.5157L2.26172 12.8887L1.96289 13.1573V14.5567H6.93945L5.68945 15.8067H1.96289V18.3115C1.96305 18.6614 2.06054 18.9882 2.22754 19.2686L1.32812 20.168C0.943293 19.6486 0.713079 19.0075 0.712891 18.3115V5.68948C0.712891 3.96359 2.112 2.56448 3.83789 2.56448H18.9287L17.6797 3.81448ZM14.4883 17.2578C14.9025 17.2578 15.2382 17.5937 15.2383 18.0078C15.2382 18.422 14.9025 18.7578 14.4883 18.7578H8.39453L9.89453 17.2578H14.4883ZM3.14941 18.3467C3.09734 18.2446 3.06545 18.1302 3.06543 18.0078C3.0655 17.5938 3.40144 17.2581 3.81543 17.2578H4.23828L3.14941 18.3467ZM4.71094 10.7012L4.70996 10.7002L3.21484 12.0362L3.85938 12.5039C3.97197 12.5854 4.12047 12.5976 4.24512 12.5362L5.50098 11.917C5.95928 11.6909 6.5044 11.7294 6.92578 12.0186C6.99104 12.0633 7.07958 12.0547 7.13477 11.9981L7.75488 11.3604L5.58984 9.91506L4.71094 10.7012ZM8.94629 4.52249C9.92559 4.52266 10.7195 5.31662 10.7197 6.29592C10.7197 7.27533 9.92567 8.06919 8.94629 8.06936C7.96687 8.06924 7.17292 7.27536 7.17285 6.29592C7.17304 5.31659 7.96694 4.52261 8.94629 4.52249ZM8.94629 5.52249C8.51923 5.52261 8.17304 5.86888 8.17285 6.29592C8.17292 6.72307 8.51915 7.06924 8.94629 7.06936C9.37338 7.06919 9.71966 6.72304 9.71973 6.29592C9.71954 5.86891 9.37331 5.52266 8.94629 5.52249Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/Toolbar/ImageToolbar.tsx b/components/Toolbar/ImageToolbar.tsx
index 4991047f..e10e0fc0 100644
--- a/components/Toolbar/ImageToolbar.tsx
+++ b/components/Toolbar/ImageToolbar.tsx
@@ -6,7 +6,10 @@ import { Props } from "components/Icons/Props";
 import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { useSubscribe } from "src/replicache/useSubscribe";
-import { ImageCoverImage } from "components/Icons/ImageCoverImage";
+import {
+  ImageCoverImage,
+  ImageCoverImageRemove,
+} from "components/Icons/ImageCoverImage";
 import { Separator } from "components/Layout";
 import { TextAlignmentButton } from "./TextAlignmentToolbar";
 
@@ -134,10 +137,10 @@ export const ImageCoverButton = () => {
         }
       }}
       tooltipContent={
-        <div>{isCoverImage ? "Remove Cover Image" : "Set as Cover Image"}</div>
+        <div>{isCoverImage ? "Remove Cover Image" : "Use as Cover Image"}</div>
       }
     >
-      <ImageCoverImage />
+      {isCoverImage ? <ImageCoverImageRemove /> : <ImageCoverImage />}
     </ToolbarButton>
   );
 };
-- 
2.51.2