From 5707400c9874aebbf9a24a4e18ba29e85546ae72 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Tue, 17 Aug 2021 21:16:43 +0300
Subject: [PATCH] update navbar style

---
 assets/icons/mainnet.svg       | 12 ++++++------
 assets/icons/polygon.svg       |  2 +-
 components/AccountSwitcher.vue | 12 ++++++------
 components/Navbar.vue          |  8 ++++----
 components/NetworkSwitcher.vue | 12 ++++++------
 layouts/default.vue            |  2 +-
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/assets/icons/mainnet.svg b/assets/icons/mainnet.svg
index 96b9259..3fa9739 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" />
+    <path d="M11.999 2V9.39323L18.2478 12.1855L11.999 2Z" fill="currentColor" />
+    <path d="M11.9982 2L5.74854 12.1855L11.9982 9.39323V2Z" fill="currentColor" />
+    <path d="M11.999 16.9766V22.0001L18.252 13.3491L11.999 16.9766Z" fill="currentColor" />
+    <path d="M11.9982 22.0001V16.9757L5.74854 13.3491L11.9982 22.0001Z" fill="currentColor" />
+    <path d="M11.999 15.8139L18.2478 12.1856L11.999 9.39502V15.8139Z" fill="currentColor" />
+    <path d="M5.74854 12.1856L11.9982 15.8139V9.39502L5.74854 12.1856Z" fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/polygon.svg b/assets/icons/polygon.svg
index fe11c86..ef9e84d 100644
--- a/assets/icons/polygon.svg
+++ b/assets/icons/polygon.svg
@@ -1,5 +1,5 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
         d="M13.5643 6.7159C13.4303 6.64018 13.279 6.60039 13.1251 6.60039C12.9712 6.60039 12.8199 6.64018 12.686 6.7159L10.6714 7.89885L9.3025 8.67113L7.28793 9.85487C7.15397 9.93066 7.00268 9.9705 6.84877 9.9705C6.69486 9.9705 6.54357 9.93066 6.40962 9.85487L4.80809 8.92908C4.67769 8.85208 4.56899 8.74321 4.49217 8.6127C4.41536 8.48219 4.37296 8.3343 4.36894 8.18292V6.35667C4.36714 6.20379 4.40708 6.05332 4.48446 5.92147C4.56177 5.79009 4.67373 5.6825 4.80809 5.6105L6.38351 4.71004C6.51748 4.63432 6.66876 4.59452 6.82266 4.59452C6.97656 4.59452 7.12784 4.63432 7.26181 4.71004L8.83802 5.6105C8.96842 5.68751 9.07712 5.79637 9.15394 5.92688C9.23075 6.0574 9.27315 6.20528 9.27718 6.35667V7.5404L10.6461 6.74281V5.55907C10.6476 5.40612 10.6074 5.25565 10.5298 5.12387C10.4527 4.99231 10.3407 4.88467 10.2061 4.8129L7.28793 3.11563C7.15397 3.03983 7.00268 3 6.84877 3C6.69486 3 6.54357 3.03983 6.40962 3.11563L3.43919 4.81369C3.30511 4.88643 3.19338 4.99433 3.11601 5.1258C3.03864 5.25726 2.99854 5.40732 3.00004 5.55986V8.98289C2.99854 9.13542 3.03864 9.28548 3.11601 9.41695C3.19338 9.54841 3.30511 9.65631 3.43919 9.72906L6.40962 11.4271C6.54355 11.503 6.69485 11.5429 6.84877 11.5429C7.0027 11.5429 7.154 11.503 7.28793 11.4271L9.3025 10.2711L10.6714 9.47268L12.686 8.31743C12.8199 8.24164 12.9712 8.2018 13.1251 8.2018C13.279 8.2018 13.4303 8.24164 13.5643 8.31743L15.1405 9.2171C15.2717 9.29311 15.381 9.40176 15.4578 9.53251C15.5346 9.66326 15.5763 9.81165 15.5788 9.96327V11.7895C15.5803 11.942 15.5403 12.0919 15.4631 12.2234C15.3859 12.3548 15.2744 12.4628 15.1405 12.5357L13.5643 13.4615C13.4303 13.5373 13.279 13.5771 13.1251 13.5771C12.9712 13.5771 12.8199 13.5373 12.686 13.4615L11.1105 12.561C10.9801 12.484 10.8714 12.3751 10.7946 12.2446C10.7178 12.1141 10.6754 11.9662 10.6714 11.8148V10.6311L9.3025 11.4287V12.6124C9.30091 12.765 9.34097 12.9151 9.41835 13.0466C9.49573 13.178 9.60751 13.2859 9.74165 13.3586L12.7121 15.0575C12.846 15.1333 12.9973 15.1731 13.1512 15.1731C13.3051 15.1731 13.4564 15.1333 13.5904 15.0575L16.5608 13.3586C16.6913 13.2817 16.8001 13.1729 16.8769 13.0423C16.9537 12.9118 16.9961 12.7639 17 12.6124V9.18387C17.0015 9.03133 16.9614 8.88127 16.884 8.74981C16.8066 8.61835 16.6949 8.51045 16.5608 8.4377L13.5643 6.7159Z"
-        fill="#8247E5" />
+        fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/components/AccountSwitcher.vue b/components/AccountSwitcher.vue
index bd87720..9d443ac 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-dark 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-bold"
       >
-        <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="#fff"
           />
         </svg>
       </span>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index a2452bc..de64250 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,6 +1,6 @@
 <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] shadow flex flex-col md:flex-row md:items-center md:justify-between"
   >
     <nuxt-link to="/" class="flex items-center text-[#1874FF]">
       <svg
@@ -27,11 +27,11 @@
       <span class="ml-2 font-extrabold text-lg">ASSEMBLY</span>
     </nuxt-link>
 
-    <div class="flex items-center space-x-2.5">
+    <div class="mt-8 md:mt-0 ml-auto 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="hidden md:flex bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded h-9  items-center justify-center w-40"
       >
         Connect
       </button>
@@ -39,7 +39,7 @@
       <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="hidden md:flex bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded h-9 items-center justify-center w-40"
       >
         Disonnect
       </button>
diff --git a/components/NetworkSwitcher.vue b/components/NetworkSwitcher.vue
index 48c09ed..69dfabe 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-dark 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 font-medium 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="#fff"
           />
         </svg>
       </span>
@@ -65,7 +65,7 @@
         >
           <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
           <span class="flex items-center">
-            <component :is="network.icon" class="w-6 h-6 mr-2" />
+            <component :is="network.icon" class="w-6 h-6 mr-2 text-primary-blue-dark" />
 
             {{ network.name }}
           </span>
diff --git a/layouts/default.vue b/layouts/default.vue
index e0cea26..8c6e214 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -5,7 +5,7 @@
     <div class="min-h-screen flex flex-col">
       <Navbar />
       <div v-if="activeNetworkId" class="flex-1 overflow-x-hidden ">
-        <div class="max-w-6xl mx-auto py-12">
+        <div class="px-4 md:px-0 max-w-6xl mx-auto py-12">
           <Nuxt />
         </div>
       </div>