From 34cd013fd6d35e6e45bde65d6fe21622340b652f Mon Sep 17 00:00:00 2001
From: eug-vs <eugene@eug-vs.xyz>
Date: Wed, 4 May 2022 13:03:11 +0300
Subject: feat: use code tag in helper text

---
 src/components/Timer.tsx | 16 ++++++++++++++--
 src/style.css            | 10 ++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
index e90c3ce..c3bc555 100644
--- a/src/components/Timer.tsx
+++ b/src/components/Timer.tsx
@@ -9,8 +9,20 @@ enum Mode {
 };
 
 const helperText = {
-  [Mode.idle]: 'Hold SPACE to start countdown',
-  [Mode.countdown]: 'Release SPACE to begin',
+  [Mode.idle]: (
+    <>
+      <span>Hold </span>
+      <code>SPACE</code>
+      <span> to start countdown</span>
+    </>
+  ),
+  [Mode.countdown]: (
+    <>
+      <span>Release </span>
+      <code>SPACE</code>
+      <span> to begin</span>
+    </>
+  ),
   [Mode.running]: 'Go fast!',
   [Mode.over]: 'You are too late!',
 };
diff --git a/src/style.css b/src/style.css
index 04b2382..54b39b3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,6 +2,7 @@ html {
   font-family: "Open Sans", sans-serif;
   color: #ebdbb2;
   background-color: #282828;
+  font-size: 16px;
 }
 p {
   margin: 1em 0;
@@ -16,3 +17,12 @@ a:hover {
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
 }
+code {
+  font-family: monospace;
+  font-size: 90%;
+  margin: 0;
+  padding: 2px;
+  background: #1d2021;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
-- 
cgit v1.2.3