From ad6a3883bc8c861b807419b6b7b3462019ed7f96 Mon Sep 17 00:00:00 2001
From: Grace Kind <gracekind400@gmail.com>
Date: Mon, 8 Jun 2026 21:42:54 -0500
Subject: [PATCH] Update crop indicator

---
 package.json                                  |  2 +-
 src/css/style.css                             | 19 ++++++++++++++++---
 src/img/icons/custom/crop-indicator.svg       |  1 +
 src/js/components/image-carousel.js           |  6 ++++--
 src/js/components/plugin-icon.js              |  1 +
 .../icons/cropIndicatorIcon.template.js       | 15 +++++++++++++++
 6 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/img/icons/custom/crop-indicator.svg
 create mode 100644 src/js/templates/icons/cropIndicatorIcon.template.js

diff --git a/package.json b/package.json
index ca855d1a..a5b864d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "type": "module",
   "scripts": {
     "start": "rm -rf build && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index bc027a9c..63819816 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -2832,12 +2832,25 @@ image-carousel {
   position: absolute;
   bottom: 8px;
   left: 8px;
+  right: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: var(--overlay-color-medium);
   color: var(--white);
-  padding: 2px 6px;
+  padding: 4px;
   border-radius: var(--tag-border-radius);
-  font-size: 11px;
-  font-weight: 600;
+}
+
+.carousel-slide:not(:has(.alt-indicator)) .crop-indicator {
+  left: auto;
+  right: 8px;
+}
+
+.crop-indicator svg {
+  width: 14px;
+  height: 14px;
+  display: block;
 }
 
 @media (min-width: 600px) {
diff --git a/src/img/icons/custom/crop-indicator.svg b/src/img/icons/custom/crop-indicator.svg
new file mode 100644
index 00000000..6d848927
--- /dev/null
+++ b/src/img/icons/custom/crop-indicator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5h4m0 0v4m0-4-4 4M9 19H5m0 0v-4m0 4 4-4"/></svg>
diff --git a/src/js/components/image-carousel.js b/src/js/components/image-carousel.js
index d67e5eeb..32d36abb 100644
--- a/src/js/components/image-carousel.js
+++ b/src/js/components/image-carousel.js
@@ -2,6 +2,7 @@ import { Component } from "/js/components/component.js";
 import { html, render } from "/js/lib/lit-html.js";
 import { isSafari } from "/js/utils.js";
 import "/js/components/lightbox-image-group.js";
+import { cropIndicatorIconTemplate } from "/js/templates/icons/cropIndicatorIcon.template.js";
 
 const MIN_ASPECT_RATIO = 2 / 3;
 const MAX_ASPECT_RATIO = 3 / 2;
@@ -124,8 +125,9 @@ export class ImageCarousel extends Component {
                         class="crop-indicator"
                         data-testid="image-crop-badge"
                         aria-label="Image cropped"
-                        >✂</span
-                      >`
+                      >
+                        ${cropIndicatorIconTemplate()}
+                      </span>`
                     : ""}
                 </button>
               `;
diff --git a/src/js/components/plugin-icon.js b/src/js/components/plugin-icon.js
index 6eb40f30..cf0ad91a 100644
--- a/src/js/components/plugin-icon.js
+++ b/src/js/components/plugin-icon.js
@@ -6,6 +6,7 @@ const ICONS = {
     "chat-dots-line",
     "check",
     "circle-check",
+    "crop-indicator",
     "hamburger-menu",
     "reply",
     "repost",
diff --git a/src/js/templates/icons/cropIndicatorIcon.template.js b/src/js/templates/icons/cropIndicatorIcon.template.js
new file mode 100644
index 00000000..228f795d
--- /dev/null
+++ b/src/js/templates/icons/cropIndicatorIcon.template.js
@@ -0,0 +1,15 @@
+import { html } from "/js/lib/lit-html.js";
+
+export function cropIndicatorIconTemplate() {
+  return html`<div class="icon crop-indicator-icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 5h4m0 0v4m0-4-4 4M9 19H5m0 0v-4m0 4 4-4"
+      />
+    </svg>
+  </div>`;
+}
-- 
2.51.2