From 3fb152ac7c8ff03c27c8c0ffb0f3d1c73899a060 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sat, 10 Dec 2022 23:30:43 +0000
Subject: [PATCH] fix: back button icon rendering inconsistently (#2306)

Depending on the operating system and therefore the system font
the back icon being a unicode arrow means it'll render inconsistently,
sometimes I've seen it looking really odd.

Instead make use of the font awesome arrow so that'll it render consistently
no matter ths system font.
---
 bin/svgs.js                                   |  1 +
 src/routes/_components/DynamicPageBanner.html | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/bin/svgs.js b/bin/svgs.js
index 16d90adc..3d828bba 100644
--- a/bin/svgs.js
+++ b/bin/svgs.js
@@ -1,5 +1,6 @@
 export default [
   { id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
+  { id: 'fa-arrow-left', src: 'src/thirdparty/font-awesome-svg-png/white/svg/arrow-left.svg' },
   { id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
   { id: 'fa-bell-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell-o.svg' },
   { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },
diff --git a/src/routes/_components/DynamicPageBanner.html b/src/routes/_components/DynamicPageBanner.html
index 8c768678..96f8a20f 100644
--- a/src/routes/_components/DynamicPageBanner.html
+++ b/src/routes/_components/DynamicPageBanner.html
@@ -8,7 +8,10 @@
   <button type="button"
           class="dynamic-page-go-back"
           aria-label="{intl.goBack}"
-          on:click|preventDefault="onGoBack()">{intl.back}</button>
+          on:click|preventDefault="onGoBack()">
+    <SvgIcon className="dynamic-page-go-back-icon" href="#fa-arrow-left" />
+    {intl.back}
+  </button>
 </div>
 <Shortcut key="Backspace" on:pressed="onGoBack()"/>
 <style>
@@ -34,19 +37,25 @@
     text-overflow: ellipsis;
   }
   .dynamic-page-go-back {
-    font-size: 1.3em;
+    display: inline-flex;
+    align-items: center;
+    justify-self: flex-end;
+    font-size: 1.2857142857142858em;
     color: var(--anchor-text);
     border: 0;
     padding: 0;
     background: none;
-    justify-self: flex-end;
   }
   .dynamic-page-go-back:hover {
     text-decoration: underline;
   }
-  .dynamic-page-go-back::before {
-    content: '←';
-    margin-right: 5px;
+  :global(.dynamic-page-go-back-icon) {
+    position: relative;
+    bottom: 0.06em;
+    margin-right: 0.2em;
+    height: 0.66666666em;
+    width: 0.66666666em;
+    fill: currentColor;
   }
   @media (max-width: 767px) {
     .dynamic-page-banner {