header, footer, network health styles (#75)

* header, footer, network health styles * prettier * fixes for address watchdog and others --------- Co-authored-by: Alexey Popov <a.popov@tantumpay.com> Co-authored-by: Alain Brenzikofer <alain@integritee.network>
integritee-network · Oct 29, 2024 · b754b84 · b754b84
1 parent 6d4f34b
commit b754b84
Show file tree

Hide file tree

Showing 8 changed files with 247 additions and 294 deletions.
diff --git a/components/ui/HealthDetailsOverlay.vue b/components/ui/HealthDetailsOverlay.vue
@@ -1,115 +1,108 @@
 <template>
   <OverlayDialog :show="show" :close="close" title="System Health">
     <div class="mt-2">
-      <div v-if="!isLive">
-        <p class="text-sm text-yellow-400">
-          This service is not live yet. please try again later!
+      <div v-if="router.currentRoute.value.path === '/teerdays'">
+        <p
+          :class="[
+            'text-sm',
+            'text-gray-400',
+            healthColor(
+              systemHealth.getIntegriteeSystemHealth.integriteeProgress,
+            ),
+          ]"
+        >
+          Integritee Network Block Height:<br />
+          {{
+            formatBlockNumber(
+              systemHealth.getIntergiteeBlockNumberObservable?.value,
+            )
+          }}
+          <b>{{ integriteeNetworkBlockNumberAge }}s</b>
         </p>
       </div>
       <div v-else>
-        <div v-if="router.currentRoute.value.path === '/teerdays'">
-          <p
-            :class="[
-              'text-sm',
-              'text-gray-400',
-              healthColor(
-                systemHealth.getIntegriteeSystemHealth.integriteeProgress,
-              ),
-            ]"
-          >
-            Integritee Network Block Height:<br />
-            {{
-              formatBlockNumber(
-                systemHealth.getIntergiteeBlockNumberObservable?.value,
-              )
-            }}
-            <b>{{ integriteeNetworkBlockNumberAge }}s</b>
-          </p>
-        </div>
-        <div v-else>
-          <p class="text-sm text-gray-400">
-            This service is in <b>BETA</b>. Use at your own risk.
-          </p>
-          <br />
-          <p class="text-sm text-gray-400 wrap">
-            Incognitee shard: <i>{{ incogniteeShard }}</i>
-          </p>
-          <p class="text-sm text-gray-400 wrap">
-            Incognitee fingerprint: <i>{{ incogniteeStore.getFingerprint }}</i>
-          </p>
-          <br />
-          <p class="text-sm text-gray-400">
-            Shielding Target: <b>{{ chainConfigs[shieldingTarget].name }}</b>
-          </p>
-          <p
-            :class="[
-              'text-sm',
-              'text-gray-400',
-              healthColor(
-                systemHealth.getSidechainSystemHealth.shieldingTargetProgress,
-              ),
-            ]"
-          >
-            Last block:
-            {{
-              formatBlockNumber(
-                systemHealth.getShieldingTargetBlockNumberObservable?.value,
-              )
-            }}
-            <b>{{ shieldingTargetBlockNumberAge }}s</b>
-          </p>
-          <br />
-          <p class="text-sm text-gray-400 wrap">
-            genesis hash for api vs enclave light client:
-          </p>
-          <p
-            :class="[
-              'text-sm',
-              'text-gray-400',
-              healthColor(systemHealth.getSidechainSystemHealth.genesisMatch),
-            ]"
-          >
-            {{
-              systemHealth.getShieldingTargetApiGenesisHashHex
-                ? systemHealth.getShieldingTargetApiGenesisHashHex.slice(0, 8) +
-                  "..."
-                : "unknown"
-            }}
-            vs
-            {{
-              systemHealth.getShieldingTargetLightClientGenesisHashHex
-                ? systemHealth.getShieldingTargetLightClientGenesisHashHex.slice(
-                    0,
-                    8,
-                  ) + "..."
-                : "unknown"
-            }}
-          </p>
-          <br />
-          <p class="text-sm text-gray-400">
-            Sidechain import of finalized target blocks
-          </p>
-          <p
-            :class="[
-              'text-sm',
-              'text-gray-400',
-              healthColor(
-                systemHealth.getSidechainSystemHealth
-                  .shieldingTargetImportProgress,
-              ),
-            ]"
-          >
-            Last imported L1 block<br />
-            {{
-              formatBlockNumber(
-                systemHealth.getShieldingTargetImportedBlockNumberObservable
-                  ?.value,
-              )
-            }}
+        <p class="text-sm text-gray-400">
+          This service is in <b>BETA</b>. Use at your own risk.
+        </p>
+        <br />
+        <p class="text-sm text-gray-400 wrap">
+          Incognitee shard: <i>{{ incogniteeShard }}</i>
+        </p>
+        <p class="text-sm text-gray-400 wrap">
+          Incognitee fingerprint: <i>{{ incogniteeStore.getFingerprint }}</i>
+        </p>
+        <br />
+        <p class="text-sm text-gray-400">
+          Shielding Target: <b>{{ chainConfigs[shieldingTarget].name }}</b>
+        </p>
+        <p
+          :class="[
+            'text-sm',
+            'text-gray-400',
+            healthColor(
+              systemHealth.getSidechainSystemHealth.shieldingTargetProgress,
+            ),
+          ]"
+        >
+          Last block:
+          {{
+            formatBlockNumber(
+              systemHealth.getShieldingTargetBlockNumberObservable?.value,
+            )
+          }}
+          <b>{{ shieldingTargetBlockNumberAge }}s</b>
+        </p>
+        <br />
+        <p class="text-sm text-gray-400 wrap">
+          genesis hash for api vs enclave light client:
+        </p>
+        <p
+          :class="[
+            'text-sm',
+            'text-gray-400',
+            healthColor(systemHealth.getSidechainSystemHealth.genesisMatch),
+          ]"
+        >
+          {{
+            systemHealth.getShieldingTargetApiGenesisHashHex
+              ? systemHealth.getShieldingTargetApiGenesisHashHex.slice(0, 8) +
+                "..."
+              : "unknown"
+          }}
+          vs
+          {{
+            systemHealth.getShieldingTargetLightClientGenesisHashHex
+              ? systemHealth.getShieldingTargetLightClientGenesisHashHex.slice(
+                  0,
+                  8,
+                ) + "..."
+              : "unknown"
+          }}
+        </p>
+        <br />
+        <p class="text-sm text-gray-400">
+          Sidechain import of finalized target blocks
+        </p>
+        <p
+          :class="[
+            'text-sm',
+            'text-gray-400',
+            healthColor(
+              systemHealth.getSidechainSystemHealth
+                .shieldingTargetImportProgress,
+            ),
+          ]"
+        >
+          Last imported L1 block<br />
+          {{
+            formatBlockNumber(
+              systemHealth.getShieldingTargetImportedBlockNumberObservable
+                ?.value,
+            )
+          }}
 
-            <b>{{ shieldingTargetImportLag }} blocks behind</b>
-          </p>
-        </div>
+          <b>{{ shieldingTargetImportLag }} blocks behind</b>
+        </p>
       </div>
     </div>
   </OverlayDialog>
@@ -123,11 +116,7 @@ import { useInterval } from "@vueuse/core";
 import { useRouter } from "vue-router";
 import { useIncognitee } from "@/store/incognitee.ts";
 import { chainConfigs } from "@/configs/chains.ts";
-import {
-  shieldingTarget,
-  incogniteeShard,
-  isLive,
-} from "@/lib/environmentConfig";
+import { shieldingTarget, incogniteeShard } from "@/lib/environmentConfig";
 
 const router = useRouter();
 const systemHealth = useSystemHealth();

diff --git a/components/ui/HealthIndicator.vue b/components/ui/HealthIndicator.vue
@@ -1,13 +1,22 @@
 <template>
   <div @click="openHealthDetailsOverlay" class="cursor-pointer">
     <div v-if="contextualHealth === Health.Healthy">
-      <div class="bg-green-500 w-4 h-4 rounded-full" title="all good"></div>
+      <div
+        class="bg-green-500 w-4 h-4 rounded-full"
+        title="system health: all good"
+      ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Warning">
-      <div class="bg-yellow-500 w-4 h-4 rounded-full" title="warnings"></div>
+      <div
+        class="bg-yellow-500 w-4 h-4 rounded-full"
+        title="system health: warnings"
+      ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Critical">
-      <div class="bg-red-500 w-4 h-4 rounded-full" title="critical"></div>
+      <div
+        class="bg-red-500 w-4 h-4 rounded-full"
+        title="system health: critical"
+      ></div>
     </div>
     <div v-else>
       <div

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,29 +1,44 @@
 <template>
-  <div class="layout">
-    <header class="header">
-      <div class="header-content">
+  <div class="container">
+    <header class="header bg-gray-800 text-white py-4">
+      <div class="header-content mx-auto flex items-center justify-between">
+        <!-- Logo -->
         <Incognitee class="logo" />
-        <HealthIndicator />
-        <div class="flex items-center">
+
+        <!-- Flex container for network health, indicator, and wallet information -->
+        <div class="flex items-center gap-4">
+          <!-- gap-4 steuert den Abstand zwischen den Elementen -->
+          <!-- Network health text and health indicator -->
+          <div class="flex items-center gap-2">
+            <!-- gap-2 für den Abstand zwischen Network Health und Indikator -->
+            <HealthIndicator />
+          </div>
+
+          <!-- SVG icon -->
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
-            class="w-6 h-6 mr-2"
+            class="w-6 h-6"
           >
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
               d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
             />
           </svg>
-          <div class="address cursor-pointer" @click="emitAddressClicked">
+
+          <!-- Address and Connect Wallet button -->
+          <div
+            class="text-white text-sm cursor-pointer"
+            @click="emitAddressClicked"
+          >
             <!-- Full address on larger screens and short address on mobile -->
             <div v-if="accountStore.getAddress === 'none'">
               <button
-                class="mr-5 incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+                class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
               >
                 Connect Wallet
               </button>
@@ -40,13 +55,14 @@
         </div>
       </div>
     </header>
+
     <footer class="footer">
-      <nav class="footer-content">
+      <nav class="footer-content container mx-auto">
         <div class="container">
           <div
-            class="flex mt-10 fixed left-0 right-0 bottom-10 mb-2 w-full px-4 rounded justify-around"
+            class="flex mt-10 fixed left-0 right-0 bottom-10 mb-2 w-full px-4 rounded justify-around z-30"
           >
-            <div class="custom-border-gradient">
+            <div class="container custom-border-gradient">
               <div class="inner-box">
                 <div class="flex justify-around text-white">
                   <div class="flex flex-col items-center text-center">
@@ -165,15 +181,17 @@ const emitAddressClicked = () => {
   width: 100%;
 }
 
-.header {
-  flex-shrink: 0; /* Prevents the header from shrinking */
+.header,
+.footer {
+  flex-shrink: 0;
 }
 
-.header-content {
+.header-content,
+.footer-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1em;
+  width: 100%;
 }
 
 .logo {
@@ -182,29 +200,16 @@ const emitAddressClicked = () => {
 }
 
 .main {
-  flex-grow: 1; /* Allows the main content to take up the remaining space */
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
 }
 
-.footer {
-  flex-shrink: 0; /* Prevents the footer from shrinking */
-  z-index: 5;
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-around;
-}
-
-.footer-content ul {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  padding: 0;
-  list-style-type: none;
+.address {
+  font-size: 0.875rem;
+  color: white;
 }
 
 .bg-green-500 {

diff --git a/layouts/landing.vue b/layouts/landing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="gtn-layout">
+  <div class="container">
     <header class="header">
       <div class="header-content">
         <Incognitee class="logo" />
@@ -41,7 +41,6 @@ import Incognitee from "assets/img/incognitee-mask.svg";
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1em;
 }
 .logo {
   height: 50px;