styling updates

Open-Info · May 12, 2024 · 091ce08 · 091ce08
1 parent a67357b
commit 091ce08
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 67 deletions.
diff --git a/src/pages/Flagged.vue b/src/pages/Flagged.vue
@@ -189,7 +189,7 @@ export default {
     shortenAddr(addr: string) {
       if (this.windowWidth <= 768) {
         if (addr.length < 10) return addr;
-        return `${addr.slice(0, 8)}...${addr.slice(addr.length - 8)}`;
+        return `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`;
       }
       return addr;
     },

diff --git a/src/pages/FlaggedView.vue b/src/pages/FlaggedView.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="bg-offBlack">
     <Header :textColor=textColor />
-    <div class="view flex flex-col items-center bg-offBlack h-full justify-center py-[54px]">
-      <div class="mb-[70px] md:hidden">
+    <div class="view flex flex-col items-center bg-offBlack justify-center py-[5px]">
+      <div class="mb-[20px] md:hidden">
         <input type="text" id="search" name="search" v-model="searchQuery"
-          class="bg-offBlack text-offWhite font-normal text-[32px] leading-[36px] drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] font-['VT323'] text-center placeholder-grey py-[9px] px-[22px] min-w-[620px]"
+          class="bg-offBlack text-offWhite font-normal text-[24px] leading-[24px] drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] font-['VT323'] text-center placeholder-grey py-[8px] px-[15px] min-w-[500px]"
           :placeholder="shortenAddr('0x0000000000000000000000000000000000000000')" />
       </div>
-      <div class="ag-grid lg:w-[800px] w-[1062px] border-[3px] drop-shadow-[4px_4px_0px_rgba(0,0,0,0.25)] border-dashed border-red py-[42px]">
-        <ag-grid-vue class="ag-theme-alpine" style="width: 100%; height: 700px" :columnDefs="columnDefs.value"
+      <div class="ag-grid lg:w-[800px] w-[1062px] border-[3px] drop-shadow-[4px_4px_0px_rgba(0,0,0,0.25)] border-dashed border-red py-[5px]">
+        <div class="mb-[20px] hidden md:block p-5">
+          <input type="text" id="search" name="search" v-model="searchQuery"
+            class="w-full bg-offBlack text-offWhite font-normal text-[20px] leading-[14px] drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] font-['VT323'] placeholder-grey py-[8px] px-[15px]"
+            :placeholder="shortenAddr('0x0000000000000000000000000000000000000000')" />
+        </div>
+        <ag-grid-vue class="ag-theme-alpine" style="width: 100%; height: 80vh" :columnDefs="columnDefs.value"
           :rowData="searchData" :defaultColDef="defaultColDef" :rowHeight="68" :headerHeight="68" :pagination="true"
           :paginationPageSize="8" :rowSelection="rowSelection" @grid-ready="onGridReady"
           @selection-changed="onSelectionChanged">
@@ -115,7 +120,7 @@ export default {
         return `${addr.slice(0, 15)}...${addr.slice(addr.length - 15)}`;
       }
       if (deviceWidth.value <= 865) {
-        return `${addr.slice(0, 7)}...${addr.slice(addr.length - 7)}`;
+        return `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`;
       }
       return addr;
     };

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -66,22 +66,20 @@
           to="/view/verified"
           class="hover:bg-green hover:border-black hover:text-black font-['Handjet'] shadow-[8px_8px_0px_rgba(0,0,0,0.5)] font-normal text-[23px] leading-[26px] text-green text-center border-green border-[4px] py-[12px] px-[24px]"
         >
-          Verified
-          <p>addresses</p>
+          $VRFD
         </router-link>
         <a
           href="#"
           class="hover:bg-yellow hover:border-black hover:text-black font-['Handjet'] shadow-[8px_8px_0px_rgba(0,0,0,0.5)] font-normal text-[23px] leading-[26px] text-yellow text-center border-yellow border-[4px] py-[12px] px-[24px]"
         >
-          Certified
-          <p>addresses</p>
+          $CRTFD
+          <p class="text-[12px] italic">Coming Soon</p>
         </a>
         <router-link
           to="/view/flagged"
           class="hover:bg-red hover:border-black hover:text-black font-['Handjet'] shadow-[8px_8px_0px_rgba(0,0,0,0.5)] font-normal text-[23px] leading-[26px] text-red text-center border-red border-[4px] py-[12px] px-[24px]"
         >
-          Flagged
-          <p>addresses</p>
+          $FLAG
         </router-link>
       </div>
       <Footer :textColor="footerColor" />
@@ -111,7 +109,7 @@ export default {
   data() {
     return {
       windowWidth: window.innerWidth,
-      placeholder_address: this.shortenAddr('0x0000000000000000000000000000000000000000'),
+      placeholder_address: this.shortenAddr('0x123ABC...'),
       address: '',
       textColor: 'blue',
       footerColor: 'white',
@@ -139,7 +137,7 @@ export default {
     shortenAddr(addr: string) {
       if (this.windowWidth <= 768) {
         if (addr.length < 10) return addr
-        return `${addr.slice(0, 8)}...${addr.slice(addr.length - 8)}`
+        return `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`
       }
       return addr
     },
@@ -150,7 +148,7 @@ export default {
 
     return_placeholder() {
       if (this.address === '') {
-        this.placeholder_address = this.shortenAddr('0x0000000000000000000000000000000000000000')
+        this.placeholder_address = this.shortenAddr('0x123ABC...')
       }
     },
 

diff --git a/src/pages/Unknown.vue b/src/pages/Unknown.vue
@@ -105,7 +105,7 @@
       shortenAddr(addr: string) {
         if (this.windowWidth <= 768) {
           if (addr.length < 10) return addr;
-          return `${addr.slice(0, 8)}...${addr.slice(addr.length - 8)}`;
+          return `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`;
         }
         return addr;
       },

diff --git a/src/pages/VerifiedView.vue b/src/pages/VerifiedView.vue
@@ -1,15 +1,20 @@
 <template>
   <div class="bg-offBlack">
     <Header :textColor=textColor />
-    <div class="view flex flex-col items-center bg-offBlack h-full justify-center py-[54px]">
-      <div class="mb-[70px] md:hidden">
-        <input type="text" id="search" name="search" v-model="searchQuery"
-          class="bg-offBlack drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] text-offWhite font-normal text-[32px] leading-[36px] font-['VT323'] text-center placeholder-grey py-[9px] px-[22px] min-w-[620px]"
+    <div class="view flex flex-col items-center bg-offBlack justify-center py-[5px]">
+      <div class="mb-[20px] md:hidden">       
+         <input type="text" id="search" name="search" v-model="searchQuery"
+         class="bg-offBlack text-offWhite font-normal text-[24px] leading-[24px] drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] font-['VT323'] text-center placeholder-grey py-[8px] px-[15px] min-w-[500px]"
           :placeholder="shortenAddr('0x0000000000000000000000000000000000000000')" />
       </div>
-      <div class="ag-grid lg:w-[800px] w-[1062px] border-[3px] border-dashed drop-shadow-[4px_4px_0px_rgba(0,0,0,0.25)] border-green py-[42px]">
-        <ag-grid-vue class="ag-theme-alpine green" style="width: 100%; height: 700px" :columnDefs="columnDefs.value"
-          :rowData="searchData" :defaultColDef="defaultColDef" :rowHeight="68" :headerHeight="68" :pagination="true"
+      <div class="ag-grid lg:w-[800px] w-[1062px] border-[3px] drop-shadow-[4px_4px_0px_rgba(0,0,0,0.25)] border-dashed border-green py-[5px]">
+        <div class="mb-[20px] hidden md:block p-5">
+          <input type="text" id="search" name="search" v-model="searchQuery"
+            class="w-full bg-offBlack text-offWhite font-normal text-[20px] leading-[14px] drop-shadow-[6px_6px_0px_rgba(0,0,0,0.25)] font-['VT323'] placeholder-grey py-[8px] px-[15px]"
+            :placeholder="shortenAddr('0x0000000000000000000000000000000000000000')" />
+        </div>
+        <ag-grid-vue class="ag-theme-alpine green" style="width: 100%; height: 80vh" :columnDefs="columnDefs.value"
+         :rowData="searchData" :defaultColDef="defaultColDef" :rowHeight="68" :headerHeight="68" :pagination="true"
           :paginationPageSize="8" :rowSelection="rowSelection" @grid-ready="onGridReady"
           @selection-changed="onSelectionChanged">
         </ag-grid-vue>
@@ -118,10 +123,10 @@ export default {
     function shortenAddr(addr: string) {
       if (deviceWidth.value <= 1100 && 865 <= deviceWidth.value) {
         if (addr.length < 10) return addr;
-        return `${addr.slice(0, 15)}...${addr.slice(addr.length - 15)}`;
+        return `${addr.slice(0, 10)}...${addr.slice(addr.length - 10)}`;
       } 
       if (deviceWidth.value <= 865) {
-        return `${addr.slice(0, 7)}...${addr.slice(addr.length - 7)}`;
+        return `${addr.slice(0, 6)}...${addr.slice(addr.length - 4)}`;
       }
       return addr;
     };

diff --git a/src/pages/layouts/Footer.vue b/src/pages/layouts/Footer.vue
@@ -1,46 +1,42 @@
 <template>
-  <footer
-    class="md:hidden flex justify-between items-center px-[50px] w-[100%] h-[147px] border-black border-t-2"
-  >
+  <footer class="md:hidden flex justify-between items-center px-[50px] w-[100%] h-[147px] border-black border-t-2">
     <div class="text-[23px] leading-[26px] font-[400] text-center">
-      <p :class="`text-${textColor} font-['Handjet']`">Our socials</p>
       <a href="https://twitter.com/_vrfd" target="_blank" class="block">
-        <span
-          class="font-[23px] leading-[26px] font-['Handjet'] text-blue"
-          >Twitter</span
-        >
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-white">
+          X 
+        </span>
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-yellow hover:text-blue">
+          @_vrfd
+        </span>
       </a>
       <a href="https://t.me/oi_vrfd" target="_blank" class="block">
-        <span
-          class="font-[23px] leading-[26px] font-['Handjet'] text-blue"
-          >Telegram</span
-        >
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-white">
+          Tg 
+        </span>
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-yellow hover:text-blue">
+          @oi_vrfd
+        </span>
       </a>
     </div>
     <div class="text-[23px] leading-[26px] font-[400] text-center">
-      <p :class="`text-${textColor} font-['Handjet']`">VRFD v{{ version }}</p>
+      <p :class="`text-${textColor} font-['Handjet']`">v{{ version }}</p>
       <p :class="`text-${textColor} font-['Handjet']`">
-        Free and open source.
+        free & open source.
       </p>
       <p :class="`text-${textColor} font-['Handjet']`">
         by
         <a href="https://github.com/open-info/" target="_blank">
-          <span
-            class="font-[23px] leading-[26px] font-['Handjet'] text-blue"
-            >Open Info</span
-          >.
+          <span class="font-[23px] leading-[26px] font-['Handjet'] text-blue hover:text-yellow">
+            Open Info
+          </span>.
         </a>
       </p>
     </div>
     <div class="text-[23px] leading-[26px] font-[400] text-center">
-      <p :class="`text-${textColor} font-['Handjet']`">
-        Saw something weird?
-      </p>
-      <a href="https://bit.ly/oi-feedback" target="_blank">
-        <span
-          class="font-[23px] leading-[26px] font-['Handjet'] text-blue"
-          >Submit Feedback</span
-        >
+      <a href="https://whitepaper.vrfd.info" target="_blank">
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-blue  hover:text-yellow">
+          Whitepaper
+        </span>
       </a>
     </div>
   </footer>
@@ -55,7 +51,7 @@ export default {
     };
   },
   mounted() {
-   this.version = import.meta.env.VITE_APP_VERSION
+    this.version = import.meta.env.VITE_APP_VERSION
   }
 };
 </script>

diff --git a/src/pages/layouts/Header.vue b/src/pages/layouts/Header.vue
@@ -4,12 +4,14 @@
             <ul class="flex">
                 <router-link to="/"
                     :class="`hover:shadow-[6px_6px_0px_#000] border-[4px] border-transparent hover:border-[#000] py-[10px] px-[20px] cursor-pointer hover:bg-blue text-${textColor} hover:text-[#000]`">
-                    <li to="/" class="font-[400] text-[23px] leading-[26px] font-['VT323']">Home</li>
+                    <li to="/" class="font-[400] text-[23px] leading-[26px] font-['VT323']">
+                        Search
+                    </li>
                 </router-link>
                 <li class="md:hidden" @click="showMenu"
-                    :class="`relative ml-[42px] hover:shadow-[6px_6px_0px_#000] border-[4px] border-transparent hover:border-[#000] py-[10px] px-[20px] cursor-pointer hover:bg-blue text-${textColor} hover:text-[#000]`">
+                    :class="`relative ml-[42px] z-30 hover:shadow-[6px_6px_0px_#000] border-[4px] border-transparent hover:border-[#000] py-[10px] px-[20px] cursor-pointer hover:bg-blue text-${textColor} hover:text-[#000]`">
                     <p class="font-[400] text-[23px] leading-[26px] font-['VT323']">
-                        View Top
+                        Lists
                         <i class="text-[15px] fa-solid fa-chevron-down"></i>
                     </p>
                     <ul v-if="dropdown" class="absolute -bottom-[220px] -left-[3px]">
@@ -31,14 +33,7 @@
                     class="font-[400] text-[23px] leading-[26px] font-['VT323']">
                     <li class="md:hidden"
                         :class="`ml-[42px] hover:shadow-[6px_6px_0px_#000] border-[4px] border-transparent hover:border-[#000] py-[10px] px-[20px] cursor-pointer hover:bg-blue text-${textColor} hover:text-[#000]`">
-                        User Manual
-                    </li>
-                </a>
-                <a href="https://whitepaper.vrfd.info" target="_blank"
-                    class="font-[400] text-[23px] leading-[26px] font-['VT323']">
-                    <li class="md:hidden"
-                        :class="`ml-[42px] hover:shadow-[6px_6px_0px_#000] border-[4px] border-transparent hover:border-[#000] py-[10px] px-[20px] cursor-pointer hover:bg-blue text-${textColor} hover:text-[#000]`">
-                        Whitepaper
+                        Docs
                     </li>
                 </a>
             </ul>

diff --git a/src/pages/layouts/MobileFooter.vue b/src/pages/layouts/MobileFooter.vue
@@ -1,8 +1,24 @@
 <template>
     <footer :class="`m_md:hidden flex text-${textColor} font-['VT323'] text-[23px] font-normal leading-[26px] tracking-[1.6px] flex justify-between w-[300px]`">
-        <a href="https://docs.vrfd.info/" target="_blank" class="block">User Manual</a>
-        <a href="https://whitepaper.vrfd.info/" target="_blank" class="block">Whitepaper</a>
-    </footer>
+        <a href="https://twitter.com/_vrfd" target="_blank" class="block">
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-white">
+          X 
+        </span>
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-yellow hover:text-blue">
+          @_vrfd
+        </span>
+      </a>
+      <a href="https://docs.vrfd.info/" target="_blank" class="block">docs</a>
+
+      <a href="https://t.me/oi_vrfd" target="_blank" class="block">
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-white">
+          Tg 
+        </span>
+        <span class="font-[23px] leading-[26px] font-['Handjet'] text-yellow hover:text-blue">
+          @oi_vrfd
+        </span>
+      </a>
+ </footer>
 </template>
 
 <script lang="ts">