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

@@ -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">

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_ };