From 116c9efa0d89a6f57cdecc160d17d926bd0da1dc Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Fri, 27 Aug 2021 02:26:04 +0100
Subject: [PATCH] Use cross icon for unfollow button

---
 src/assets/icons/cross.svg              |  3 +++
 src/components/sidebar/FollowTarget.vue | 23 ++++++++++++++++++++---
 src/scss/_mixins.scss                   |  2 ++
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/cross.svg

diff --git a/src/assets/icons/cross.svg b/src/assets/icons/cross.svg
new file mode 100644
index 0000000..e3f4776
--- /dev/null
+++ b/src/assets/icons/cross.svg
@@ -0,0 +1,3 @@
+<svg width="304.76" height="304.6" version="1.0" viewBox="0 0 228.57 228.45" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.682 0C12.719 0 8.756 1.52 5.719 4.556L4.554 5.72a15.47 15.47 0 0 0 0 21.924l86.578 86.578L4.554 200.8a15.47 15.47 0 0 0 0 21.924l1.165 1.165c3.037 3.036 7 4.556 10.963 4.556a15.45 15.45 0 0 0 10.96-4.556l86.646-86.644 86.643 86.644a15.468 15.468 0 0 0 21.923 0l1.165-1.165a15.47 15.47 0 0 0 0-21.924l-86.578-86.578 86.578-86.578a15.47 15.47 0 0 0 0-21.924l-1.165-1.164a15.468 15.468 0 0 0-21.923 0L114.288 91.2 27.642 4.556A15.45 15.45 0 0 0 16.682 0z"/>
+</svg>
diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue
index 1ea01dd..423ea3a 100644
--- a/src/components/sidebar/FollowTarget.vue
+++ b/src/components/sidebar/FollowTarget.vue
@@ -25,7 +25,9 @@
 				<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
 			</span>
 			<button class="target__unfollow" type="button" :title="messageUnfollowTitle"
-				@click.prevent="unfollow">{{ messageUnfollow }}</button>
+				@click.prevent="unfollow" :aria-label="messageUnfollow">
+				<SvgIcon name="cross"></SvgIcon>
+			</button>
 		</div>
 	</section>
 </template>
@@ -37,9 +39,12 @@ import {computed, defineComponent, onMounted, ref, watch} from "@vue/runtime-cor
 import {getMinecraftHead} from '@/util';
 import defaultImage from '@/assets/images/player_face.png';
 import {LiveAtlasPlayer} from "@/index";
+import SvgIcon from "@/components/SvgIcon.vue";
+import "@/assets/icons/cross.svg";
 
 export default defineComponent({
 	name: 'FollowTarget',
+	components: {SvgIcon},
 	props: {
 		target: {
 			type: Object as () => LiveAtlasPlayer,
@@ -97,8 +102,20 @@ export default defineComponent({
 
 			.target__unfollow {
 				position: absolute;
-				top: 2rem;
-				right: 1.5rem;
+				top: 1.5rem;
+				right: 1rem;
+				width: 2.5rem;
+				height: 2.5rem;
+
+				&:before {
+					content: '';
+					position: absolute;
+					display: block;
+					top: -1rem;
+					right: -1rem;
+					bottom: -1rem;
+					left: -1rem;
+				}
 			}
 
 			.target__info {
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index b900ac9..276dbff 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -51,6 +51,8 @@
 			position: absolute;
 			width: calc(100% - 1.6rem);
 			height: calc(100% - 1.6rem);
+			min-width: 1.5rem;
+			min-height: 1.5rem;
 			top: 0;
 			right: 0;
 			bottom: 0;