From aae4a2138eebd02bc847523b50a83aa7a5915d5a Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Sat, 12 Nov 2022 19:52:43 -0500
Subject: [PATCH] Use buttons were buttons ought to be

---
 index.html  | 16 ++++++++++++----
 src/UI.purs | 13 ++++++++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 3fb701d..b912994 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,14 @@ p {
 	gap: 30px;
 	justify-content: center;
 }
+.control {
+	background-color: transparent;
+	color: white;
+	border: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+}
 .thumbnail-card {
 	height: 400px;
 	width: 400px;
@@ -79,7 +87,7 @@ p {
 	z-index: -1;
 	position: fixed;
 	height: fit-content;
-	font-size: 70px;
+	font-size: 90px;
 	top: 0;
 	bottom: 0;
 	margin: auto 0;
@@ -93,9 +101,9 @@ p {
 }
 #close {
 	position: absolute;
-	font-size: 40px;
-	top: 10px;
-	right: 20px;
+	font-size: 50px;
+	top: 5px;
+	right: 40px;
 }
 #focused-panel.unzoomed > div.blurhash-frame {
 	max-height: 80vh;
diff --git a/src/UI.purs b/src/UI.purs
index 6de26aa..529c34d 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -45,9 +45,9 @@ widthHeight w h = "width:" <> (show w) <> "px;height:" <> (show h) <> "px;"
 
 renderThumbnail :: forall m. Int -> Image -> H.ComponentHTML Event () m
 renderThumbnail pos image =
-    HH.div
+    HH.button
         (
-            [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame"]
+            [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame", "control"]
             , HE.onClick \_ -> Focus pos
             ]
             <>
@@ -82,20 +82,23 @@ renderFocused zoom image =
             [ HP.id "focused-bg"
             , HE.onClick \_ -> Unfocus
             ]
-            [ HH.div
+            [ HH.button
                 [ HP.id "close"
+                , HP.class_ $ ClassName "control"
                 ]
                 [ HH.text "⨯"
                 ]
             ]
-        , HH.div
+        , HH.button
             [ HP.id "prev-image"
+            , HP.class_ $ ClassName "control"
             , HE.onClick \_ -> Pan false
             ]
             [ HH.text "❰"
             ]
-        , HH.div
+        , HH.button
             [ HP.id "next-image"
+            , HP.class_ $ ClassName "control"
             , HE.onClick \_ -> Pan true
             ]
             [ HH.text "❱"