From 1c046b37b591a4d0948dbcf083ce4ddfbc714e10 Mon Sep 17 00:00:00 2001
From: Kostya Cholak <kostya.cholak@gmail.com>
Date: Mon, 22 Jul 2024 11:13:00 +0400
Subject: [PATCH] fix: use kbd for the hints

---
 src/App.tsx                                  | 16 ++++++++++++++--
 src/api.ts                                   |  2 +-
 src/components/ServerIsOutdatedComponent.tsx |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e5e6543..f4ff829 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,8 +21,20 @@ import { pushHistory } from "./structures/history";
 
 
 const didYouKnowMessages = [
-  "Did you know that you can Alt+Click a widget to reset its position",
-  "Did you know that you can Shft+Drag to move around without dragging widgets"
+  (<span>
+    Did you know that you can
+    <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+      Alt + Click
+    </kbd>
+    a widget to reset its position
+  </span>),
+  (<span>
+    Did you know that you can 
+    <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+      Shift + Drag
+    </kbd>
+    to move around without dragging widgets
+  </span>)
 ]
 
 
diff --git a/src/api.ts b/src/api.ts
index 078bb98..c27b8de 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,7 +1,7 @@
 import { IS_MOCKED } from "./mock";
 
 const MIN_CONNECTING_TIME = 250;
-export const LATEST_VERSION = "0.5.0";
+export const LATEST_VERSION = "0.5.1";
 
 class WebSocketClient {
   private ws: WebSocket | null;
diff --git a/src/components/ServerIsOutdatedComponent.tsx b/src/components/ServerIsOutdatedComponent.tsx
index 2f5b512..7c1e621 100644
--- a/src/components/ServerIsOutdatedComponent.tsx
+++ b/src/components/ServerIsOutdatedComponent.tsx
@@ -13,6 +13,7 @@ export default function ServerIsOutdatedComponent() {
       <p className="text-sm text-slate-400 text-center">
         Your version of Explainable is outdated. <br/>
         Please update to the latest version ({LATEST_VERSION}) to continue.<br/><br/>
+        You can update by running <br/>
         <code>{pipCommand}</code>
         <Button 
           variant="outline"