From e66fc036b9fc17aff31bb9ee35a93c3b58c0240b Mon Sep 17 00:00:00 2001
From: Lynn <lynn@foldr.moe>
Date: Tue, 18 Jan 2022 00:12:59 +0100
Subject: [PATCH] Emoji links, cause phones are narrow and stuff

---
 src/App.css | 15 +++++++++++++++
 src/App.tsx | 33 +++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index a0c6250..1f888e1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -198,3 +198,18 @@ a:active {
 .Settings-setting label {
   margin-inline-start: 8px;
 }
+
+.top-right {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+
+.emoji-link {
+  font-size: 150%;
+  text-decoration: none;
+}
+
+.top-right a + a {
+  margin-inline-start: 8px;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 05071ed..b65ec78 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -46,19 +46,36 @@ function App() {
       <h1>
         <span style={hard ? { color: "#e66" } : {}}>hell</span>o wordl
       </h1>
-      <div style={{ position: "absolute", right: 5, top: 5 }}>
+      <div className="top-right">
         {page !== "game" ? (
-          <a href="#" onClick={() => setPage("game")}>
-            Close
+          <a
+            className="emoji-link"
+            href="#"
+            onClick={() => setPage("game")}
+            title="Close"
+            aria-label="Close"
+          >
+            ❌
           </a>
         ) : (
           <>
-            <a href="#" onClick={() => setPage("about")}>
-              Help
+            <a
+              className="emoji-link"
+              href="#"
+              onClick={() => setPage("about")}
+              title="About"
+              aria-label="About"
+            >
+              ❓
             </a>
-            {" • "}
-            <a href="#" onClick={() => setPage("settings")}>
-              Settings
+            <a
+              className="emoji-link"
+              href="#"
+              onClick={() => setPage("settings")}
+              title="Settings"
+              aria-label="Settings"
+            >
+              ⚙️
             </a>
           </>
         )}