From 8fc822a6e7d5d1ba3b822773b7a1e76ea399186d Mon Sep 17 00:00:00 2001
From: GithubAnon0000 <160563432+GithubAnon0000@users.noreply.github.com>
Date: Sun, 16 Feb 2025 15:24:11 +0000
Subject: [PATCH] Use tilted (filled and unfilled) sticky icons in the cards
 editor (#3825)

* Update icons.ts to include hollow and solid icons

* Update icons.ts

* Create sticky-pin-hollow.svg

* Create sticky-pin-solid.svg

* Update StickyBadge.svelte to reflect changed icons
---
 ts/editor/StickyBadge.svelte   | 12 ++++++++----
 ts/icons/sticky-pin-hollow.svg |  1 +
 ts/icons/sticky-pin-solid.svg  |  1 +
 ts/lib/components/icons.ts     |  9 ++++++---
 4 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 ts/icons/sticky-pin-hollow.svg
 create mode 100644 ts/icons/sticky-pin-solid.svg

diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index 96b0a531845..596678f3015 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -11,7 +11,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import Badge from "$lib/components/Badge.svelte";
     import Icon from "$lib/components/Icon.svelte";
-    import { stickyIcon } from "$lib/components/icons";
+    import { stickyIconHollow } from "$lib/components/icons";
+    import { stickyIconSolid } from "$lib/components/icons";
 
     import { context as editorFieldContext } from "./EditorField.svelte";
 
@@ -51,9 +52,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
         widthMultiplier={0.7}
-    >
-        <Icon icon={stickyIcon} />
-    </Badge>
+    ></Badge>
+    {#if active}
+        <Icon icon={stickyIconSolid} />
+    {:else}
+        <Icon icon={stickyIconHollow} />
+    {/if}
 </span>
 
 <style lang="scss">
diff --git a/ts/icons/sticky-pin-hollow.svg b/ts/icons/sticky-pin-hollow.svg
new file mode 100644
index 00000000000..da352f91236
--- /dev/null
+++ b/ts/icons/sticky-pin-hollow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1"?><!-- Adapted from https://www.svgrepo.com/svg/4879/push-pin License: CC0 --><svg fill="currentColor" height="11px" width="11px" version="1.1" id="sticky-pin-hollow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490.125 490.125" xml:space="preserve"><path d="M300.625,5.025c-6.7-6.7-17.6-6.7-24.3,0l-72.6,72.6c-6.7,6.7-6.7,17.6,0,24.3l16.3,16.3l-40.3,40.3l-63.5-7 c-3-0.3-6-0.5-8.9-0.5c-21.7,0-42.2,8.5-57.5,23.8l-20.8,20.8c-6.7,6.7-6.7,17.6,0,24.3l108.5,108.5l-132.4,132.4 c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l132.5-132.5l108.5,108.5c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5 l20.8-20.8c17.6-17.6,26.1-41.8,23.3-66.4l-7-63.5l40.3-40.3l16.2,16.2c6.7,6.7,17.6,6.7,24.3,0l72.6-72.6c3.2-3.2,5-7.6,5-12.1 s-1.8-8.9-5-12.1L300.625,5.025z M400.425,250.025l-16.2-16.3c-6.4-6.4-17.8-6.4-24.3,0l-58.2,58.3c-3.7,3.7-5.5,8.8-4.9,14 l7.9,71.6c1.6,14.3-3.3,28.3-13.5,38.4l-8.7,8.7l-217.1-217.1l8.7-8.6c10.1-10.1,24.2-15,38.4-13.5l71.7,7.9 c5.2,0.6,10.3-1.2,14-4.9l58.2-58.2c6.7-6.7,6.7-17.6,0-24.3l-16.3-16.3l48.3-48.3l160.3,160.3L400.425,250.025z"/></svg>
diff --git a/ts/icons/sticky-pin-solid.svg b/ts/icons/sticky-pin-solid.svg
new file mode 100644
index 00000000000..ade25bff5fb
--- /dev/null
+++ b/ts/icons/sticky-pin-solid.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1"?><!-- Adapted from https://www.svgrepo.com/svg/4879/push-pin License: CC0 --><svg fill="currentColor" height="11px" width="11px" version="1.1" id="sticky-pin-solid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490.125 490.125" xml:space="preserve"><path d="M300.625,5.025c-6.7-6.7-17.6-6.7-24.3,0l-72.6,72.6c-6.7,6.7-6.7,17.6,0,24.3l16.3,16.3l-40.3,40.3l-63.5-7c-3-0.3-6-0.5-8.9-0.5c-21.7,0-42.2,8.5-57.5,23.8l-20.8,20.8c-6.7,6.7-6.7,17.6,0,24.3l108.5,108.5l-132.4,132.4c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l132.5-132.5l108.5,108.5c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l20.8-20.8c17.6-17.6,26.1-41.8,23.3-66.4l-7-63.5l40.3-40.3l16.2,16.2c6.7,6.7,17.6,6.7,24.3,0l72.6-72.6c3.2-3.2,5-7.6,5-12.1s-1.8-8.9-5-12.1L300.625,5.025z"/></svg>
diff --git a/ts/lib/components/icons.ts b/ts/lib/components/icons.ts
index 29dfc4990fe..33c6e04cb61 100644
--- a/ts/lib/components/icons.ts
+++ b/ts/lib/components/icons.ts
@@ -111,8 +111,6 @@ import NewBox_ from "@mdi/svg/svg/new-box.svg?component";
 import newBox_ from "@mdi/svg/svg/new-box.svg?url";
 import Paperclip_ from "@mdi/svg/svg/paperclip.svg?component";
 import paperclip_ from "@mdi/svg/svg/paperclip.svg?url";
-import Sticky_ from "@mdi/svg/svg/pin-outline.svg?component";
-import sticky_ from "@mdi/svg/svg/pin-outline.svg?url";
 import RectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?component";
 import rectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?url";
 import Redo_ from "@mdi/svg/svg/redo.svg?component";
@@ -186,6 +184,10 @@ import underline_ from "bootstrap-icons/icons/type-underline.svg?url";
 
 import IncrementCloze_ from "../../icons/contain-plus.svg?component";
 import incrementCloze_ from "../../icons/contain-plus.svg?url";
+import StickyHollow_ from "../../icons/sticky-pin-hollow.svg?component";
+import stickyHollow_ from "../../icons/sticky-pin-hollow.svg?url";
+import StickySolid_ from "../../icons/sticky-pin-solid.svg?component";
+import stickySolid_ from "../../icons/sticky-pin-solid.svg?url";
 
 export const checkCircle = { url: checkCircle_, component: CheckCircle_ };
 export const chevronDown = { url: chevronDown_, component: ChevronDown_ };
@@ -210,7 +212,8 @@ export const alertIcon = { url: alert_, component: Alert_ };
 export const plainTextIcon = { url: plainText_, component: PlainText_ };
 export const clozeIcon = { url: cloze_, component: Cloze_ };
 export const richTextIcon = { url: richText_, component: RichText_ };
-export const stickyIcon = { url: sticky_, component: Sticky_ };
+export const stickyIconHollow = { url: stickyHollow_, component: StickyHollow_ };
+export const stickyIconSolid = { url: stickySolid_, component: StickySolid_ };
 export const mathIcon = { url: math_, component: Math_ };
 export const floatLeftIcon = { url: floatLeft_, component: FloatLeft_ };
 export const floatNoneIcon = { url: floatNone_, component: FloatNone_ };