Merge pull request #55 from ATOR-Development/leggo/phase-1/dev

Leggo/phase 1/dev
anyone-protocol · Jul 18, 2024 · 93c981b · 93c981b
2 parents 9e955b8 + 8fe9512
commit 93c981b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 26 deletions.
diff --git a/components/DashboardFooter.vue b/components/DashboardFooter.vue
@@ -108,7 +108,7 @@ const isOpen = ref(false);
       </UCard>
     </UModal>
 
-    <div class="flex justify-between items-center rounded-xl w-full mb-2">
+    <div class="flex justify-between items-center rounded-xl w-full">
       <div class="flex gap-2">
         <div class="font-brand tracking-wider">
           <UButton
@@ -121,12 +121,9 @@ const isOpen = ref(false);
       </div>
       <div
         @click="openCommitUrl"
-        class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto"
+        class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto hover:cursor-pointer"
       >
-        Version: {{ version }} | Commit:
-        <a href="https://github.com/ATOR-Development/ator-relay-dashboard/commit/${{commitHash}}">
-          {{ commitHash.slice(0,7) }}...
-        </a>
+        Version: {{ version }} | Commit: {{ commitHash.slice(0,7) }}...
       </div>
     </div>
   </footer>

diff --git a/components/DashboardHeader.vue b/components/DashboardHeader.vue
@@ -19,42 +19,39 @@ const menuStore = useMenuStore();
     <div
       class="absolute dark:bg-gradient-to-b dark:from-zinc-900 dark:via-gray-900 bg-gradient-to-b from-slate-100 to-teal-50 w-full inset-0 dark:h-28 h-20 [mask-image:linear-gradient(to_bottom,black_90%,transparent)] lg:hidden"
     ></div>
-    <div
-      class="flex justify-between items-center px-6 pb-4 lg:pt-6 pt-4 relative"
-    >
+    <div class="flex justify-between items-center px-6 pb-4 lg:pt-6 pt-4 relative h-full">
       <div class="flex gap-2 items-center">
         <TitleAndLogo />
       </div>
-      <nav class="flex-1">
+      <nav class="flex-1 h-full">
         <ul class="flex justify-center items-center space-x-2 lg:space-x-4">
           <li>
             <RouterLink to="/">
-              <UButton variant="outline" class="nav-button text-sm lg:text-base"
+              <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
                 >Home</UButton
               >
             </RouterLink>
           </li>
           <li>
             <RouterLink to="/relays">
-              <UButton variant="outline" class="nav-button text-sm lg:text-base"
+              <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base lg:flex hidden"
                 >Relays</UButton
               >
             </RouterLink>
           </li>
-          <div class="lg:flex items-center gap-2 hidden">
-            <ReportIssueButton />
+          <div class="lg:flex items-center gap-2 hidden h-full">
+            <ReportIssueButton class="uniform-height" />
           </div>
         </ul>
       </nav>
       <div class="flex items-center gap-2">
-        <ButtonMobileMenu />
+        <ButtonMobileMenu class="uniform-height" />
       </div>
       <div class="lg:flex items-center hidden ml-auto mr-6">
-        <ButtonConnect />
+        <ButtonConnect class="uniform-height" />
       </div>
-
       <div class="lg:flex items-center gap-2 hidden">
-        <ButtonThemeToggle />
+        <ButtonThemeToggle class="uniform-height" />
       </div>
     </div>
 
@@ -72,6 +69,10 @@ nav ul li {
   margin: 0;
 }
 
+.uniform-height {
+  height: 2.3rem;
+}
+
 .dark .router-link-active .nav-button {
   background-color: #141313;
   color: #d6d6d6;
@@ -80,4 +81,4 @@ nav ul li {
   background-color: transparent;
   color: #000;
 }
-</style>
+</style>
diff --git a/components/DashboardMobileMenu.vue b/components/DashboardMobileMenu.vue
@@ -29,8 +29,18 @@ router.beforeEach(async () => {
         <ButtonConnect />
         <ButtonThemeToggle />
       </div>
-      <div class="items-center gap-2 flex mb-4 ml-auto">
-        <ReportIssueButton />
+      <div class="mb-4 flex-col flex space-y-2">
+        <RouterLink to="/">
+          <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base w-[8rem]"
+            >Home</UButton
+          >
+        </RouterLink>
+        <RouterLink to="/relays">
+          <UButton variant="outline" class="nav-button uniform-height text-sm lg:text-base w-[8rem]"
+            >Relays</UButton
+          >
+        </RouterLink>
+        <ReportIssueButton class="w-[8rem]"/>
       </div>
       <div
         class="w-full bg-gradient-to-r from-gray-600/10 via-cyan-600 to-gray-600/10 h-px"

diff --git a/components/ui-kit/ReportIssueButton.vue b/components/ui-kit/ReportIssueButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UButton variant="outline" @click="onReportIssueClicked">
+  <UButton class="h-3rem" variant="outline" @click="onReportIssueClicked">
     <UIcon name="i-heroicons-exclamation-circle" />
     <div>
       <span>Report Issue</span>

diff --git a/components/ui-kit/TitleAndLogo.vue b/components/ui-kit/TitleAndLogo.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <router-link to="/" class="flex gap-2 items-top">
-      <img class="object-contain h-6 lg:h-8" src="/images/anyone-logo.png" />
+      <!-- <img class="object-contain h-6 lg:h-8" src="/images/anyone-logo.png" /> -->
       <img
-        class="object-contain h-6 lg:h-8 mt-[2px]"
+        class="object-contain h-6 lg:h-8 mt-[2px] ml-[5px]"
         src="/images/anyone-text.png"
       />
     </router-link>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -67,7 +67,7 @@ export default defineNuxtConfig({
       supportWalletPublicKeyBase64:
         'K3jnSGVyHj4kSzgce3+k8gJsfHvUoQeJMNPO8CcsO2s=',
       commitHash: process.env.NUXT_PUBLIC_COMMIT_HASH || 'dev',
-      version: '1.0.7',
+      version: '1.0.8',
     },
   },
   plugins: [{ src: '~/plugins/vue-query.client.ts', mode: 'client' }],

diff --git a/pages/index.vue b/pages/index.vue
@@ -11,7 +11,6 @@
             <p class="mb-4 text-sm">
               The connected wallet shows the following balance:
             </p>
-            <ReportIssueButton />
           </div>
 
           <div class="flex gap-5 lg:gap-32 flex-col lg:flex-row my-4">