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

added additional ui tweaks and functionality
anyone-protocol · Jul 17, 2024 · c212db9 · c212db9
2 parents 06248a8 + 453314b
commit c212db9
Show file tree

Hide file tree

Showing 23 changed files with 1,281 additions and 326 deletions.
diff --git a/app.vue b/app.vue
@@ -29,7 +29,7 @@ createWeb3Modal({
 
 const unwatch = watchAccount(config, {
   onChange(account) { 
-    console.log('Account changed!', account)
+    // changed account
   },
 })
 unwatch()

diff --git a/components/DashboardFooter.vue b/components/DashboardFooter.vue
@@ -58,46 +58,58 @@ const isOpen = ref(false);
 
 <template>
   <footer
-    class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center items-center flex-col rounded-xl"
+    class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-end items-end flex-col rounded-xl"
   >
     <UModal v-model="isOpen">
-      <UCard class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
-        <template #header>
-          <h4 class="text-lg font-semibold mb-4">Contract Links</h4>
-        </template>
-
-        <div class="space-y-4">
-          <ul
-            class="list-disc flex flex-col lg:grid lg:grid-cols-3 gap-2 text-center"
-          >
-            <li
-              v-for="link in contractLinks"
-              :key="link.address"
-              class="ml-5 text-left"
-            >
-              <a
-                :href="getLink(link.address, link.type)"
-                target="_blank"
-                class="text-sm text-cyan-800 dark:text-cyan-200 hover:underline"
+      <UCard class="bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+        <h4
+          class="text-lg font-semibold mb-4 border-b border-b-[rgba(255,255,255,0.1)] pb-4"
+        >
+          View Contracts
+        </h4>
+        <UContainer class="">
+          <div class="mb-6">
+            <div class="space-y-4">
+              <ul
+                class="list-disc flex flex-col lg:grid lg:grid-cols-3 gap-2 text-center"
               >
-                {{ link.name }}
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <template #footer>
-          <UButton variant="outline" class="mt-4 w-full" @click="isOpen = false"
-            >Close</UButton
-          >
-        </template>
+                <li
+                  v-for="link in contractLinks"
+                  :key="link.address"
+                  class="ml-5 text-left"
+                >
+                  <a
+                    :href="getLink(link.address, link.type)"
+                    target="_blank"
+                    class="text-sm text-cyan-800 dark:text-cyan-200 hover:underline"
+                  >
+                    {{ link.name }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="flex flex-end justify-end">
+            <UButton
+              variant="outline"
+              size="sm"
+              color="red"
+              @click="isOpen = false"
+            >
+              Close
+            </UButton>
+          </div>
+        </UContainer>
       </UCard>
     </UModal>
 
-    <div class="flex justify-between items-center rounded-xl w-full">
+    <div class="flex justify-between items-center rounded-xl w-full mb-2">
       <div class="flex gap-2">
         <div class="font-brand tracking-wider">
-          <UButton variant="outline" @click="isOpen = true"
+          <UButton
+            variant="outline"
+            @click="isOpen = true"
+            class="opacity-55 hover:opacity-100"
             >View Contracts</UButton
           >
         </div>

diff --git a/components/DashboardHeader.vue b/components/DashboardHeader.vue
@@ -6,6 +6,7 @@ import ButtonMobileMenu from './ui-kit/ButtonMobileMenu.vue';
 import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
 import TitleAndLogo from './ui-kit/TitleAndLogo.vue';
 import ReportIssueButton from '@/components/ui-kit/ReportIssueButton.vue';
+import ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
 
 const menuStore = useMenuStore();
 </script>
@@ -25,17 +26,24 @@ const menuStore = useMenuStore();
         <TitleAndLogo />
       </div>
       <nav class="flex-1">
-        <ul class="flex justify-center items-center space-x-4">
+        <ul class="flex justify-center items-center space-x-2 lg:space-x-4">
           <li>
             <RouterLink to="/">
-              <UButton variant="outline" class="nav-button">Home</UButton>
+              <UButton variant="outline" class="nav-button text-sm lg:text-base"
+                >Home</UButton
+              >
             </RouterLink>
           </li>
           <li>
             <RouterLink to="/relays">
-              <UButton variant="outline" class="nav-button">Relays</UButton>
+              <UButton variant="outline" class="nav-button text-sm lg:text-base"
+                >Relays</UButton
+              >
             </RouterLink>
           </li>
+          <div class="lg:flex items-center gap-2 hidden">
+            <ReportIssueButton />
+          </div>
         </ul>
       </nav>
       <div class="flex items-center gap-2">
@@ -44,10 +52,13 @@ const menuStore = useMenuStore();
       <div class="lg:flex items-center hidden ml-auto mr-6">
         <ButtonConnect />
       </div>
+
       <div class="lg:flex items-center gap-2 hidden">
         <ButtonThemeToggle />
       </div>
     </div>
+
+    <ReportIssueDialog />
   </header>
 </template>
 
@@ -62,11 +73,11 @@ nav ul li {
 }
 
 .dark .router-link-active .nav-button {
-  background-color: #000;
-  color: white;
+  background-color: #141313;
+  color: #d6d6d6;
 }
 .router-link-active .nav-button {
-  background-color: #fff;
+  background-color: transparent;
   color: #000;
 }
 </style>
diff --git a/components/DashboardMobileMenu.vue b/components/DashboardMobileMenu.vue
@@ -3,6 +3,7 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import ButtonConnect from './ui-kit/ButtonConnect.vue';
 import GlowEffect from './ui-kit/GlowEffect.vue';
 import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
+import ReportIssueButton from './ui-kit/ReportIssueButton.vue';
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const lgAndLarger = breakpoints.greaterOrEqual('lg');
@@ -28,7 +29,9 @@ router.beforeEach(async () => {
         <ButtonConnect />
         <ButtonThemeToggle />
       </div>
-
+      <div class="items-center gap-2 flex mb-4 ml-auto">
+        <ReportIssueButton />
+      </div>
       <div
         class="w-full bg-gradient-to-r from-gray-600/10 via-cyan-600 to-gray-600/10 h-px"
       ></div>