From dfe85f507233340500b197f8d297713b1a5e54e4 Mon Sep 17 00:00:00 2001
From: monodyle <monodylh@gmail.com>
Date: Tue, 12 Jul 2022 14:10:36 +0700
Subject: [PATCH] feat: update tips ui

---
 components/axie-figure/styles.module.css |  4 ++--
 pages/index.tsx                          | 11 +++++++----
 pages/styles.module.css                  | 18 +++++++++++++++---
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/components/axie-figure/styles.module.css b/components/axie-figure/styles.module.css
index 651f1a1..0f327ff 100644
--- a/components/axie-figure/styles.module.css
+++ b/components/axie-figure/styles.module.css
@@ -9,7 +9,7 @@
 
 .overlay {
   position: absolute;
-  width: 645px;
+  width: 720px;
   height: 383px;
   display: flex;
 }
@@ -65,6 +65,6 @@
 .canvas {
   overflow: hidden;
   border-radius: 4px;
-  width: 645px;
+  width: 720px;
   height: 383px;
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 41e1559..4531a8e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -18,10 +18,13 @@ const Home = () => {
       <main>
         <AxieFigure />
         <div className={s.directions}>
-          <p className={s.directionsText}>
-            Directions: Use arrow keys to make the Axie run. Press &quot;e&quot;
-            to attack. Press &quot;Space&quot; to jump!
-          </p>
+          <div className={s.key}>←</div>
+          <div className={s.key}>→</div>
+          <span className={s.text}>to run,</span>
+          <div className={s.key}>E</div>
+          <span className={s.text}>to attack, and</span>
+          <div className={s.key}>Space</div>
+          <span className={s.text}>to jump.</span>
         </div>
       </main>
     </div>
diff --git a/pages/styles.module.css b/pages/styles.module.css
index d9e038c..dc73eaf 100644
--- a/pages/styles.module.css
+++ b/pages/styles.module.css
@@ -3,9 +3,21 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 4px;
 }
 
-.directionsText {
-  width: 600px;
-  margin: 0px;
+.key {
+  border: solid 1px #5c627e;
+  color: #5c627e;
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 11px;
+  line-height: 21px;
+  font-weight: 700;
+}
+
+.text {
+  color: #5c627e;
+  line-height: 21px;
 }