From ccd85b443ed8f26ae24d3e1e42052c00b1f9d815 Mon Sep 17 00:00:00 2001
From: Gonza Montiel <gon.montiel@gmail.com>
Date: Tue, 25 Jul 2023 13:18:58 +0200
Subject: [PATCH] fix versions & runtime in navbar

---
 src/components/Layout/NetworkId.tsx | 2 +-
 src/components/Layout/Versions.tsx  | 7 +++----
 src/index.css                       | 4 +++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/NetworkId.tsx b/src/components/Layout/NetworkId.tsx
index ef5e1c39..e405e400 100644
--- a/src/components/Layout/NetworkId.tsx
+++ b/src/components/Layout/NetworkId.tsx
@@ -9,7 +9,7 @@ const NetworkId: FC = memo(() => {
 
   return (
     <div className="pendulum-network-id">
-      <span>Network: </span>
+      <span>Block No: </span>
       <svg height="5" width="5">
         <circle cx="2.5" cy="2.5" r="2.5" />
       </svg>
diff --git a/src/components/Layout/Versions.tsx b/src/components/Layout/Versions.tsx
index 51b8ad6a..3c1ba15f 100644
--- a/src/components/Layout/Versions.tsx
+++ b/src/components/Layout/Versions.tsx
@@ -28,10 +28,9 @@ const Versions: FC<Props> = memo(({ tenantName }: Props) => {
 
   return (
     <div className="pendulum-versions">
-      {/* <span className="absolute right-14 top-2 text-green-300 hover:text-green-500 cursor-default rotate-6">
-      {indicator}
-    </span> */}
-      <p>DApp: {state.nodeName} </p>
+      <span className="absolute right-14 top-2 text-green-300 hover:text-green-500 cursor-default rotate-6">
+        {indicator}
+      </span>
       <p>Runtime: {(state.nodeVersion && state.nodeVersion.toString()) || '0.0.0-00000000000'}</p>
     </div>
   );
diff --git a/src/index.css b/src/index.css
index 6b82a3bf..63843f7b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,6 +38,7 @@
   --subtitle-collator-box: #fff;
   --text-primary-disabled: rgba(88, 102, 126, 0.4);
   --tag-background: rgba(78, 229, 154, 0.16); /* --primary 16% */
+  --network-bg: #252733;
 }
 
 [data-theme='pendulum'] {
@@ -57,6 +58,7 @@
   --selected-nav-item: hsla(272, 15%, 56%, 0.1);
   --text-primary-disabled: rgba(88, 102, 126, 0.4);
   --tag-background: rgba(144, 126, 160, 0.16); /* --primary 16% */
+  --network-bg: hsla(0, 0%, 0%, 0.04);
 }
 
 body {
@@ -88,7 +90,7 @@ strong {
 }
 
 .pendulum-network-id {
-  background-color: hsla(0, 0%, 0%, 0.04);
+  background-color: var(--network-bg);
   border-radius: 4px;
   width: 160px;
   margin-left: 30px;