Instadapp/assembly
1
0
Fork 0
mirror of https://github.com/Instadapp/assembly.git synced 2024-07-29 22:37:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Header redesign

Browse Source
This commit is contained in:
Lester Moore Lambac 2021-08-12 16:06:36 +08:00
parent 2e740b7ad5
commit 3eae0d5b37
6 changed files with 47 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/icons/mainnet.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 B

After

Width:  |  Height:  |  Size: 683 B

28
components/AccountSwitcher.vue
View File

@ -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>

30
components/Navbar.vue
View File

@ -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" />

16
components/NetworkSwitcher.vue
View File

@ -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>

3
nuxt.config.js
View File

@ -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]
}
},

8
tailwind.config.js
View File

@ -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',