From 3eae0d5b3794c06d05b6fbf78c410bdbb5f248e8 Mon Sep 17 00:00:00 2001
From: Lester Moore Lambac <lestermoorelambac@gmail.com>
Date: Thu, 12 Aug 2021 16:06:36 +0800
Subject: [PATCH] Header redesign

---
 assets/icons/mainnet.svg       | 14 +++++++-------
 components/AccountSwitcher.vue | 28 ++++++++++++++--------------
 components/Navbar.vue          | 30 +++++++++++-------------------
 components/NetworkSwitcher.vue | 16 ++++++++--------
 nuxt.config.js                 |  3 ++-
 tailwind.config.js             |  8 +++++---
 6 files changed, 47 insertions(+), 52 deletions(-)

diff --git a/assets/icons/mainnet.svg b/assets/icons/mainnet.svg
index 96b9259..c4d1f6e 100644
--- a/assets/icons/mainnet.svg
+++ b/assets/icons/mainnet.svg
@@ -1,8 +1,8 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.999 2V9.39323L18.2478 12.1855L11.999 2Z" fill="#3F75FF" fill-opacity="0.6" />
-    <path d="M11.9982 2L5.74854 12.1855L11.9982 9.39323V2Z" fill="#3F75FF" fill-opacity="0.2" />
-    <path d="M11.999 16.9766V22.0001L18.252 13.3491L11.999 16.9766Z" fill="#3F75FF" fill-opacity="0.6" />
-    <path d="M11.9982 22.0001V16.9757L5.74854 13.3491L11.9982 22.0001Z" fill="#3F75FF" fill-opacity="0.2" />
-    <path d="M11.999 15.8139L18.2478 12.1856L11.999 9.39502V15.8139Z" fill="#3F75FF" />
-    <path d="M5.74854 12.1856L11.9982 15.8139V9.39502L5.74854 12.1856Z" fill="#3F75FF" fill-opacity="0.6" />
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.9985 2V9.39323L18.2474 12.1855L11.9985 2Z" fill="white" fill-opacity="0.6"/>
+  <path d="M11.9979 2L5.74829 12.1855L11.9979 9.39323V2Z" fill="white" fill-opacity="0.2"/>
+  <path d="M11.9985 16.9766V22.0001L18.2515 13.3491L11.9985 16.9766Z" fill="white" fill-opacity="0.6"/>
+  <path d="M11.9979 22.0001V16.9757L5.74829 13.3491L11.9979 22.0001Z" fill="white" fill-opacity="0.2"/>
+  <path d="M11.9985 15.8139L18.2474 12.1856L11.9985 9.39502V15.8139Z" fill="white"/>
+  <path d="M5.74829 12.1856L11.9979 15.8139V9.39502L5.74829 12.1856Z" fill="white" fill-opacity="0.6"/>
 </svg>
\ No newline at end of file
diff --git a/components/AccountSwitcher.vue b/components/AccountSwitcher.vue
index 3f0fc66..f1f5962 100644
--- a/components/AccountSwitcher.vue
+++ b/components/AccountSwitcher.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="relative w-[162px]" v-click-outside="hide" v-if="activeAccount">
+  <div class="relative w-[160px] md:w-[178px]" v-click-outside="hide" v-if="activeAccount">
     <button
       type="button"
-      class="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-[#0846E4] focus:border-[#0846E4] sm:text-sm"
+      class="bg-primary-blue-darker hover:bg-primary-blue-hover relative w-full border border-primary-blue-border rounded pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-[#0846E4] focus:border-[#0846E4] sm:text-sm"
       aria-haspopup="listbox"
       aria-expanded="true"
       aria-labelledby="listbox-label"
       @click="show = !show"
     >
       <span
-        class="flex items-center capitalize text-primary-blue-dark text-sm font-medium"
+        class="flex items-center capitalize text-white text-sm font-medium"
       >
-        <span class="text-primary-gray text-xs mr-2.5">
+        <span class="hidden md:block text-white text-sm mr-2.5">
           Account
         </span>
         #{{ activeAccount.id }}
       </span>
       <span
-        class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"
+        class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
       >
         <svg
           :class="{ 'rotate-180': show }"
@@ -29,7 +29,7 @@
         >
           <path
             d="M5.5 5.75L6.20711 6.45711C5.81658 6.84763 5.18342 6.84763 4.79289 6.45711L5.5 5.75ZM1.29289 2.95711L0.585786 2.25L2 0.835786L2.70711 1.54289L1.29289 2.95711ZM8.29289 1.54289L9 0.835786L10.4142 2.25L9.70711 2.95711L8.29289 1.54289ZM4.79289 6.45711L1.29289 2.95711L2.70711 1.54289L6.20711 5.04289L4.79289 6.45711ZM4.79289 5.04289L8.29289 1.54289L9.70711 2.95711L6.20711 6.45711L4.79289 5.04289Z"
-            :fill="show ? '#0846E4' : '#161E2E'"
+            :fill="show ? '#fff' : '#fff'"
           />
         </svg>
       </span>
@@ -47,7 +47,7 @@
     -->
     <div v-show="show" class="w-full px-2 absolute z-10 mt-0.5">
       <ul
-        class="w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm divide-y divide-[#556D9C]/8"
+        class="w-full bg-primary-blue-dark border border-primary-blue-border shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm divide-y divide-primary-blue-border"
         tabindex="-1"
         role="listbox"
         aria-labelledby="listbox-label"
@@ -62,12 +62,12 @@
           v-for="account in accounts"
           :key="account.id"
           @click="setAccount(account)"
-          class="cursor-pointer select-none relative py-3 pl-3 pr-9  hover:bg-primary-blue-dark/[0.07]"
+          class="cursor-pointer select-none relative py-3 pl-3 pr-9  hover:bg-primary-blue-hover"
           id="listbox-option-0"
           role="option"
         >
           <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
-          <span class="flex items-center text-primary-blue-dark">
+          <span class="flex items-center text-white">
             #{{ account.id }}
           </span>
 
@@ -84,7 +84,7 @@
             >
               <path
                 d="M0.5 5.86603C-0.166667 5.48113 -0.166667 4.51888 0.5 4.13397L6.5 0.669874C7.16667 0.284973 8 0.766099 8 1.5359L8 8.4641C8 9.2339 7.16667 9.71503 6.5 9.33013L0.5 5.86603Z"
-                fill="#3F75FF"
+                fill="#fff"
               />
             </svg>
           </span>
@@ -92,20 +92,20 @@
 
         <li
           @click="createAccount"
-          class="cursor-pointer select-none relative py-3 px-3 hover:bg-primary-blue-dark/[0.07]"
+          class="cursor-pointer select-none relative py-3 px-3 hover:bg-primary-blue-hover"
           id="listbox-option-0"
           role="option"
         >
           <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
-          <span class="flex items-center text-xs justify-center">
-            <span class="text-primary-blue-dark mr-1">+</span> Create New
+          <span class="flex items-center text-xs justify-center text-white">
+            <span class="text-white mr-1">+</span> Create New
           </span>
         </li>
       </ul>
     </div>
   </div>
 
-  <button class="bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded-[6px] h-9 flex items-center justify-center w-40" @click="createAccount" v-else>
+  <button class="bg-primary-blue-darker hover:bg-primary-blue-hover border border-primary-blue-border text-white text-sm p-2 rounded flex items-center justify-center w-40" @click="createAccount" v-else>
     Create Account
   </button>
 </template>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index cecfd65..5446cee 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,40 +1,32 @@
 <template>
   <div
-    class="h-[68px] px-8 py-5 border border-b-[#E7E8F1] flex items-center justify-between"
+    class="px-4 md:px-8 py-4 border border-b-[#E7E8F1] flex items-center justify-between flex-col md:flex-row bg-primary-blue-dark space-y-4 md:space-y-0"
   >
     <nuxt-link to="/" class="flex items-center">
-      <svg
-        width="28"
-        height="28"
-        viewBox="0 0 28 28"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 26.6121C14 27.4159 14.6503 28.0751 15.4459 27.9931C22.4985 27.266 28 21.2786 28 14C28 6.72143 22.4985 0.734111 15.4459 0.00697811C14.6503 -0.0754852 14 0.584222 14 1.388V5.26862C14 6.0724 14.6546 6.70882 15.4391 6.86744C18.7489 7.53831 21.2414 10.4764 21.2414 14C21.2414 17.5236 18.7489 20.4618 15.4391 21.1326C14.6546 21.2913 14 21.9282 14 22.7314V26.6121ZM9.65517 2.62883C9.65517 1.63927 8.69111 0.941724 7.80814 1.37975C3.18187 3.67563 0 8.46432 0 14C0 19.5358 3.18187 24.3244 7.80814 26.6203C8.69111 27.0583 9.65517 26.3608 9.65517 25.3712V2.62883Z"
-          fill="#3F75FF"
-        />
+      <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.1549 0.705961C15.6443 -0.235315 14.356 -0.235321 13.8454 0.705949L7.96871 11.5398C7.71538 12.0069 8.03549 12.588 8.54609 12.588L21.4541 12.588C21.9647 12.588 22.2848 12.0069 22.0315 11.5399L16.1549 0.705961Z" fill="white"/>
+        <path d="M24.0175 15.2013C23.7636 14.7331 23.1237 14.7301 22.8658 15.1959L16.3591 26.9465C16.1004 27.4135 16.4202 28 16.9335 28H28.668C29.6892 28 30.3295 26.8378 29.8228 25.9038L24.0175 15.2013Z" fill="white"/>
+        <path d="M13.0663 28C13.5795 28 13.8993 27.4135 13.6407 26.9465L7.13426 15.1961C6.87633 14.7303 6.23645 14.7333 5.98248 15.2015L0.177204 25.9038C-0.329457 26.8378 0.310755 28 1.33195 28H13.0663Z" fill="white"/>
       </svg>
-
-      <span class="ml-2 font-extrabold text-lg">ASSEMBLY</span>
+      <span class="ml-2 font-bold text-2xl text-white">Assembly</span>
     </nuxt-link>
 
-    <div class="flex items-center space-x-2.5">
+    <div class="flex items-center justify-center space-x-2.5">
       <button
         v-if="!active"
         @click="activate"
-        class="bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded-[6px] h-9 flex items-center justify-center w-40"
+        class="bg-primary-blue-darker hover:bg-primary-blue-hover border border-primary-blue-border text-white text-sm p-2 rounded flex items-center justify-center w-40"
       >
         Connect
       </button>
 
-      <button
+      <!-- <button
         v-else
         @click="deactivate"
-        class="bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded-[6px] h-9 flex items-center justify-center w-40"
+        class="bg-primary-blue-darker hover:bg-primary-blue-hover border border-primary-blue-border text-white text-sm p-2 rounded flex items-center justify-center w-40"
       >
         Disonnect
-      </button>
+      </button> -->
 
       <AccountSwitcher v-if="active" />
 
diff --git a/components/NetworkSwitcher.vue b/components/NetworkSwitcher.vue
index 48c09ed..ddbacfd 100644
--- a/components/NetworkSwitcher.vue
+++ b/components/NetworkSwitcher.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="relative w-[148px]" v-click-outside="hide">
+  <div class="relative w-[160px] md:w-[178px]" v-click-outside="hide">
     <button
       type="button"
-      class="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none focus:ring-1 focus:ring-[#0846E4] focus:border-[#0846E4] sm:text-sm"
+      class="bg-primary-blue-darker hover:bg-primary-blue-hover relative w-full border border-primary-blue-border rounded pl-2.5 pr-10 py-1.5 text-left focus:outline-none focus:ring-1 focus:ring-[#0846E4] focus:border-[#0846E4] sm:text-sm"
       aria-haspopup="listbox"
       aria-expanded="true"
       aria-labelledby="listbox-label"
       @click="show = !show"
     >
-      <span class="flex items-center capitalize">
+      <span class="flex items-center capitalize text-sm text-white">
         <component :is="activeNetwork.icon" class="w-6 h-6 mr-2" />
 
         {{ activeNetwork.name }}
       </span>
       <span
-        class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"
+        class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
       >
         <svg
           :class="{ 'rotate-180': show }"
@@ -26,7 +26,7 @@
         >
           <path
             d="M5.5 5.75L6.20711 6.45711C5.81658 6.84763 5.18342 6.84763 4.79289 6.45711L5.5 5.75ZM1.29289 2.95711L0.585786 2.25L2 0.835786L2.70711 1.54289L1.29289 2.95711ZM8.29289 1.54289L9 0.835786L10.4142 2.25L9.70711 2.95711L8.29289 1.54289ZM4.79289 6.45711L1.29289 2.95711L2.70711 1.54289L6.20711 5.04289L4.79289 6.45711ZM4.79289 5.04289L8.29289 1.54289L9.70711 2.95711L6.20711 6.45711L4.79289 5.04289Z"
-            :fill="show ? '#0846E4' : '#161E2E'"
+            :fill="show ? '#fff' : '#fff'"
           />
         </svg>
       </span>
@@ -44,7 +44,7 @@
     -->
     <div v-show="show" class="w-full px-2 absolute z-10 mt-0.5">
       <ul
-        class="w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm divide-y divide-[#556D9C]/8"
+        class="w-full bg-primary-blue-darker border border-primary-blue-border shadow-xl text-white max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm divide-y divide-primary-blue-border"
         tabindex="-1"
         role="listbox"
         aria-labelledby="listbox-label"
@@ -58,7 +58,7 @@
         <li
           v-for="network in networks"
           :key="network.id"
-          class="cursor-pointer select-none relative py-2 pl-3 pr-9"
+          class="cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-primary-blue-hover"
           id="listbox-option-0"
           role="option"
           @click="setActiveNetwork(network.id)"
@@ -88,7 +88,7 @@
             >
               <path
                 d="M0.5 5.86603C-0.166667 5.48113 -0.166667 4.51888 0.5 4.13397L6.5 0.669874C7.16667 0.284973 8 0.766099 8 1.5359L8 8.4641C8 9.2339 7.16667 9.71503 6.5 9.33013L0.5 5.86603Z"
-                fill="#3F75FF"
+                fill="#fff"
               />
             </svg>
           </span>
diff --git a/nuxt.config.js b/nuxt.config.js
index 3eb756a..159b93a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -52,7 +52,8 @@ export default {
   ],
   googleFonts: {
     families: {
-      Montserrat: [100, 200, 300, 400, 500, 600, 700, 800, 900]
+      Montserrat: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+      'Work Sans' : [100, 200, 300, 400, 500, 600, 700, 800, 900]
     }
   },
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 240fc3e..26fa286 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,8 +23,10 @@ module.exports = {
           black: "#161E2E",
           gray: "#A5ADC6",
           blue: {
-            dark: "#3F75FF",
-            hover: "#5E8BFF",
+            dark: "#1874FF",
+            darker: "#186FF1",
+            border: "#0E59EB",
+            hover: "#0846E4",
           }
         },
         lightest: '#FEFEFF',
@@ -108,7 +110,7 @@ module.exports = {
         90: '0.90',
       },
       fontFamily: {
-        sans: ["Montserrat", ...defaultTheme.fontFamily.sans]
+        sans: ["Work Sans", "Montserrat", ...defaultTheme.fontFamily.sans]
       },
       animation: {
         'spin-loading': 'spin 1s cubic-bezier(.6,0,.4,1) infinite',