feat: update tips ui

phuong-axie · Jul 12, 2022 · dfe85f5 · dfe85f5
1 parent bef0eda
commit dfe85f5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;
 }