header, footer, network health styles

integritee-network · Oct 28, 2024 · 0992590 · 0992590
1 parent 6d4f34b
commit 0992590
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 95 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,29 +1,45 @@
 <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 -->
+            <span class="text-sm">Network health</span>
+            <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 +56,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 +182,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 +201,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,7 @@ import Incognitee from "assets/img/incognitee-mask.svg";
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 1em;
+
 }
 .logo {
   height: 50px;

diff --git a/pages/gtn.vue b/pages/gtn.vue
@@ -699,7 +699,7 @@ onMounted(() => {
 
   &__columns-row {
     display: flex;
-    gap: 82px;
+    gap: 50px;
 
     @include lg {
       gap: 52px;

diff --git a/pages/teerdays-lp.vue b/pages/teerdays-lp.vue
@@ -1,33 +1,6 @@
 <template>
   <div class="py-24 sm:py-32 container">
-    <div
-      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-      aria-hidden="true"
-    >
-      <div
-        class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-        style="
-          clip-path: polygon(
-            74.1% 44.1%,
-            100% 61.6%,
-            97.5% 26.9%,
-            85.5% 0.1%,
-            80.7% 2%,
-            72.5% 32.5%,
-            60.2% 62.4%,
-            52.4% 68.1%,
-            47.5% 58.3%,
-            45.2% 34.5%,
-            27.5% 76.7%,
-            0.1% 64.9%,
-            17.9% 100%,
-            27.6% 76.8%,
-            76.1% 97.7%,
-            74.1% 44.1%
-          );
-        "
-      />
-    </div>
+
     <div class="mx-auto max-w-7xl">
       <div
         class="grid grid-cols-1 items-center gap-x-8 gap-y-16 lg:grid-cols-2"
@@ -81,6 +54,7 @@
           </div>
         </div>
         <div class="hidden sm:block sm:pl-40 mx-auto w-full max-w-xl lg:mx-0">
+
           <img
             class="col-span-1 w-80 w-full object-contain lg:col-span-1"
             src="/img/index/incognitee-wallet.png"
@@ -400,7 +374,7 @@
     </div>
   </div>
 
-  <footer class="footer">
+  <footer class="footer mt-5">
     <div class="container">
       <div class="footer__row">
         <div class="footer__column footer__column_about">
@@ -636,8 +610,7 @@
           >
         </span>
       </div>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
+
     </div>
   </footer>
 
@@ -1003,7 +976,7 @@ input[type="number"] {
 
   &__columns-row {
     display: flex;
-    gap: 82px;
+    gap: 50px;
 
     @include lg {
       gap: 52px;

diff --git a/pages/teerdays.vue b/pages/teerdays.vue
@@ -273,34 +273,6 @@
       </div>
     </div>
 
-    <div
-      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-      aria-hidden="true"
-    >
-      <div
-        class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-        style="
-          clip-path: polygon(
-            74.1% 44.1%,
-            100% 61.6%,
-            97.5% 26.9%,
-            85.5% 0.1%,
-            80.7% 2%,
-            72.5% 32.5%,
-            60.2% 62.4%,
-            52.4% 68.1%,
-            47.5% 58.3%,
-            45.2% 34.5%,
-            27.5% 76.7%,
-            0.1% 64.9%,
-            17.9% 100%,
-            27.6% 76.8%,
-            76.1% 97.7%,
-            74.1% 44.1%
-          );
-        "
-      />
-    </div>
 
     <hr
       class="my-20 border-0 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent"