From 2ee84b0b3e3ad9643e5bc2f089ec5369179f399d Mon Sep 17 00:00:00 2001
From: Oliver Sayers <talk@savagecore.uk>
Date: Sun, 24 Sep 2023 01:24:14 +0100
Subject: [PATCH] Change to svg for x and check. iOS could not colour the check
 emoji

---
 src/__snapshots__/App.spec.ts.snap | 28 ++++++++++++++++++++++++++--
 src/assets/icons/check.svelte      | 14 ++++++++++++++
 src/assets/icons/cross.svelte      | 14 ++++++++++++++
 src/components/keypad/index.svelte |  7 +++++--
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icons/check.svelte
 create mode 100644 src/assets/icons/cross.svelte

diff --git a/src/__snapshots__/App.spec.ts.snap b/src/__snapshots__/App.spec.ts.snap
index 0db4ee5..f945e5d 100644
--- a/src/__snapshots__/App.spec.ts.snap
+++ b/src/__snapshots__/App.spec.ts.snap
@@ -50,7 +50,9 @@ exports[`should render without crashing 1`] = `
           title="Help"
         >
           <svg
+            height="2rem"
             viewBox="0 0 24 24"
+            width="2rem"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
@@ -76,7 +78,9 @@ exports[`should render without crashing 1`] = `
             title="View source"
           >
             <svg
+              height="2rem"
               viewBox="0 0 24 24"
+              width="2rem"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
@@ -327,7 +331,16 @@ exports[`should render without crashing 1`] = `
             <button
               class="btn red svelte-28bcpt"
             >
-              ✘
+              <svg
+                height="2rem"
+                viewBox="0 0 24 24"
+                width="2rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"
+                />
+              </svg>
             </button>
              
             <button
@@ -339,7 +352,16 @@ exports[`should render without crashing 1`] = `
             <button
               class="btn green svelte-28bcpt"
             >
-              ✔
+              <svg
+                height="2rem"
+                viewBox="0 0 24 24"
+                width="2rem"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
+                />
+              </svg>
             </button>
           </div>
         </div>
@@ -394,7 +416,9 @@ exports[`should render without crashing 1`] = `
         >
           <svg
             fill="#f14e32"
+            height="2rem"
             viewBox="0 0 24 24"
+            width="2rem"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
diff --git a/src/assets/icons/check.svelte b/src/assets/icons/check.svelte
new file mode 100644
index 0000000..f46dc0a
--- /dev/null
+++ b/src/assets/icons/check.svelte
@@ -0,0 +1,14 @@
+<!-- https://boxicons.com/ -->
+<script>
+  export let size = '2rem';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="{size}"
+  height="{size}"
+  viewBox="0 0 24 24"
+  ><path
+    d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
+  ></path></svg
+>
diff --git a/src/assets/icons/cross.svelte b/src/assets/icons/cross.svelte
new file mode 100644
index 0000000..203157a
--- /dev/null
+++ b/src/assets/icons/cross.svelte
@@ -0,0 +1,14 @@
+<!-- https://boxicons.com/ -->
+<script>
+  export let size = '2rem';
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="{size}"
+  height="{size}"
+  viewBox="0 0 24 24"
+  ><path
+    d="m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z"
+  ></path></svg
+>
diff --git a/src/components/keypad/index.svelte b/src/components/keypad/index.svelte
index e708fdb..7db247c 100644
--- a/src/components/keypad/index.svelte
+++ b/src/components/keypad/index.svelte
@@ -2,6 +2,9 @@
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
 
+  import CheckIcon from '../../assets/icons/check.svelte';
+  import CrossIcon from '../../assets/icons/cross.svelte';
+
   // https://i.imgur.com/NKHNmfr.png
   // https://codepen.io/noleli/pen/abbeWRL
   // https://www.reddit.com/r/paydaytheheist/comments/15jvvpq/payday_3_beta_vault_code_generator_from/
@@ -175,11 +178,11 @@
     </div>
     <div class="row">
       <button class="btn red" on:click="{() => onKeypadInput('Backspace')}">
-        ✘
+        <CrossIcon />
       </button>
       <button class="btn" on:click="{() => onKeypadInput('0')}"> 0 </button>
       <button class="btn green" on:click="{() => onKeypadInput('OK')}">
-        ✔
+        <CheckIcon />
       </button>
     </div>
   </div>