From 2ef60578cc3889b892af84370e151f53fda2e64e Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Mon, 17 Aug 2020 13:36:51 -0400
Subject: [PATCH] Make the Show Profile button larger

---
 src/components/Explore.vue | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index 4926496..4cc82f6 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -9,7 +9,7 @@
     </div>
     <div class="explore-statblock">
       <Statblock :subject="world.player" />
-      <button @click="$emit('profile')">Show profile</button>
+      <button class="show-profile" @click="$emit('profile')">Show profile</button>
     </div>
     <div class="explore-wallet">
       <WalletView :subject="world.player" />
@@ -231,6 +231,36 @@ export default class Explore extends Vue {
   opacity: 0;
 }
 
+.show-profile {
+  grid-area: var(--nav-direction);
+  padding: 5%;
+  background: #555;
+  color: #ccc;
+  font-size: 1rem;
+  border-color: #ccc;
+  border-width: 3px;
+  border-radius: 8px;
+  border-style: outset;
+  outline: none;
+  width: 100%;
+  height: 4rem;
+  z-index: 1;
+  user-select: none;
+}
+
+.show-profile:hover {
+  background: #666;
+}
+
+.show-profile:active {
+  background: #777;
+  border-style: inset;
+}
+
+.show-profile:focus {
+  background: #666;
+}
+
 </style>
 
 <style>