fix: dont rely on colour for boost/favourite state

By changing the shape it means no matter what the colour difference between
pressed and non-pressed it'll be possible to know the state.

src/routes/_components/IconButton.html

@@ -12,9 +12,13 @@
         ref:node
 >
   <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
+  {#if checked}
+  <SvgIcon className="icon-button-svg icon-button-check" href="#fa-check" />
+  {/if}
 </button>
 <style>
   .icon-button {
+    position: relative;
     padding: 6px 10px;
     background: none;
     border: none;
@@ -31,6 +35,14 @@
     pointer-events: none; /* hack for Edge */
   }
 
+  :global(.icon-button-check) {
+    position: absolute;
+    top: 0;
+    right: 1px;
+    height: 12px;
+    width: 12px;
+  }
+
   :global(.icon-button.big-icon .icon-button-svg) {
     width: 32px;
     height: 32px;
@@ -128,7 +140,8 @@
       className: undefined,
       sameColorWhenPressed: false,
       ariaHidden: false,
-      clickListener: true
+      clickListener: true,
+      checked: false
     }),
     store: () => store,
     computed: {

src/routes/_components/status/StatusToolbar.html

@@ -14,6 +14,7 @@
     pressedLabel="Unboost"
     pressable={!reblogDisabled}
     pressed={reblogged}
+    checked={reblogged}
     disabled={reblogDisabled}
     href={reblogIcon}
     clickListener={false}
@@ -25,6 +26,7 @@
     pressedLabel="{intl.unfavorite}"
     pressable={true}
     pressed={favorited}
+    checked={favorited}
     href="#fa-star"
     clickListener={false}
     elementId={favoriteKey}