Replace unicode sidebar icons with svgs

Unicode characters weren't rendering reliably on all platforms.

components/Sidebar.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { useRouter } from "next/router";
+import Image from "next/image";
 import { formatRelative } from "date-fns";
 
+import arrow from "../public/img/arrow.svg";
+import close from "../public/img/close.svg";
 import CellData from "./CellData";
 import ModData from "./ModData";
 import PluginDetail from "./PluginDetail";
@@ -75,7 +78,7 @@ const Sidebar: React.FC<Props> = ({
         >
           <div className={styles["sidebar-header"]}>
             <button className={styles.close} onClick={onClose}>
-              ✖
+              <Image src={close} width={24} height={24} alt="close" />
             </button>
           </div>
           <h1 className={styles["cell-name-header"]}>
@@ -93,7 +96,7 @@ const Sidebar: React.FC<Props> = ({
         >
           <div className={styles["sidebar-header"]}>
             <button className={styles.close} onClick={onClose}>
-              ✖
+              <Image src={close} width={24} height={24} alt="close" />
             </button>
           </div>
           {!Number.isNaN(modId) && renderModData(modId)}
@@ -107,7 +110,7 @@ const Sidebar: React.FC<Props> = ({
         >
           <div className={styles["sidebar-header"]}>
             <button className={styles.close} onClick={onClose}>
-              ✖
+              <Image src={close} width={24} height={24} alt="close" />
             </button>
           </div>
           {renderPluginData(
@@ -154,13 +157,13 @@ const Sidebar: React.FC<Props> = ({
           className={styles.open}
           onClick={() => setOpen(true)}
           title="Show sidebar"
-        ></button>
+        ><Image src={arrow} alt="show" width={16} height={16} /></button>
       ) : (
         <button
           className={styles.hide}
           onClick={() => setOpen(false)}
           title="Hide sidebar"
-        ></button>
+        ><Image src={arrow} alt="hide" width={16} height={16} /></button>
       )}
       {renderOpenSidebar()}
     </>

public/img/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"/></svg>

public/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>

styles/Sidebar.module.css

@@ -49,16 +49,14 @@
 .hide {
   position: fixed;
   display: block;
-  font-size: 16px;
+  font-size: 0px;
   border: none;
-  background: none;
   cursor: pointer;
   top: 46%;
   left: 299px;
   z-index: 4;
   background-color: #fbefd5;
-  padding-top: 12px;
+  padding: 12px 2px;
-  padding-bottom: 12px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-top: 2px solid #222222;
@@ -66,27 +64,24 @@
   border-right: 2px solid #222222;
 }
 
-.hide:after {
+.hide span {
-  content: "🠈";
+  transform: rotate(180deg);
 }
 
 @media only screen and (max-width: 600px) {
   .hide {
-    top: calc(55% - 22px);
+    top: calc(55% - 21px);
     left: 47%;
-    padding-top: 0px;
+    padding: 2px 12px;
-    padding-bottom: 0px;
     border-top-right-radius: 8px;
     border-bottom-right-radius: 0px;
     border-top-left-radius: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
     border-bottom: none;
     border-left: 2px solid #222222;
   }
 
-  .hide:after {
+  .hide span {
-    content: "🠋";
+    transform: rotate(90deg);
   }
 }
 
@@ -97,16 +92,14 @@
 .open {
   position: fixed;
   display: block;
-  font-size: 16px;
+  font-size: 0px;
   border: none;
-  background: none;
   cursor: pointer;
   top: 46%;
   left: -1px;
   z-index: 3;
   background-color: #fbefd5;
-  padding-top: 12px;
+  padding: 12px 2px;
-  padding-bottom: 12px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-top: 2px solid #222222;
@@ -114,28 +107,25 @@
   border-right: 2px solid #222222;
 }
 
-.open:after {
+.open span {
-  content: "🠊";
+  transform: rotate(0deg);
 }
 
 @media only screen and (max-width: 600px) {
   .open {
     top: initial;
-    bottom: 0;
+    bottom: -1px;
     left: 47%;
-    padding-top: 0px;
+    padding: 2px 12px;
-    padding-bottom: 0px;
     border-top-right-radius: 8px;
     border-bottom-right-radius: 0px;
     border-top-left-radius: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
     border-bottom: none;
     border-left: 2px solid #222222;
   }
-
+  
-  .open:after {
+  .open span {
-    content: "🠉";
+    transform: rotate(270deg);
   }
 }