chore: UI enhancements

2077-Collective · Aug 20, 2024 · c441671 · c441671
1 parent 9b14df3
commit c441671
Show file tree

Hide file tree

Showing 15 changed files with 303 additions and 299 deletions.
diff --git a/research/package.json b/research/package.json
@@ -15,6 +15,7 @@
         "@astrojs/svelte": "^5.7.0",
         "@astrojs/tailwind": "^5.1.0",
         "astro": "^4.14.2",
+        "nanostores": "^0.11.2",
         "svelte": "^4.2.18",
         "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4"

diff --git a/research/pnpm-lock.yaml b/research/pnpm-lock.yaml
diff --git a/research/src/components/Dropdown.svelte b/research/src/components/Dropdown.svelte
@@ -0,0 +1,68 @@
+<div class="group flex flex-col relative">
+    <button class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]">
+        Resources
+        <span class="">
+            <svg
+                class="hidden dark:block"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    class="svg-path"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
+                    fill="#D4D4D4"
+                ></path>
+            </svg>
+            <svg
+                class="dark:hidden"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    class="svg-path"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
+                    fill="#1B1B1B"
+                ></path>
+            </svg>
+        </span>
+    </button>
+
+    <div
+        class="group-hover:block rounded bg-black sidebar p-4 absolute hidden top-6"
+    >
+        <a
+            href="https://eip2077.info"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-green text-white hover:text-black hover:rounded"
+            >EIP-2077</a
+        >
+        <a
+            href="https://eips.wiki"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >EIP Wiki</a
+        >
+        <a
+            href="https://research.2077.xyz"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >2077 Labs</a
+        >
+        <a
+            href="https://etherpedia.2077.xyz"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >Etherpedia</a
+        >
+    </div>
+</div>
diff --git a/research/src/components/Header.svelte b/research/src/components/Header.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import Sun from './icons/Sun.svelte'
+    import Moon from './icons/Moon.svelte'
+    import Menu from './icons/Menu.svelte'
+    import Dropdown from './Dropdown.svelte'
+    import {
+        toggleTheme,
+        getTheme,
+        theme,
+        anotherStuff,
+    } from '../stores/theme.store'
+</script>
+
+<header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto">
+    <nav class="flex justify-between">
+        <div>
+            <a href="/" class="">
+                <img
+                    src="/logo-black.webp"
+                    alt=""
+                    width="197"
+                    height="58"
+                    class="dark:hidden block"
+                />
+                <img
+                    src="/logo-white.webp"
+                    alt=""
+                    width="197"
+                    height="58"
+                    class="dark:block hidden"
+                />
+            </a>
+        </div>
+
+        <div class="flex items-center">
+            <!-- <button
+                id="btn"
+                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
+                on:click={toggleTheme}
+            >
+                {#if $theme === 'dark'}
+                    <Sun />
+                {:else}
+                    <Moon />
+                {/if}
+            </button> -->
+
+            <button class="lg:hidden">
+                <Menu />
+            </button>
+
+            <div class="hidden lg:flex items-center gap-x-8">
+                <Dropdown />
+
+                <a href="https://2077.xyz/support" class="hover:text-green"
+                    >Support us</a
+                >
+                <a
+                    href="#subscribe"
+                    class="bg-greenLm text-black px-8 py-2 rounded font-bold"
+                >
+                    Subscribe
+                </a>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<style scoped>
+    .sidebar {
+        clip-path: polygon(30px 0, 100% 0, 280% 0px, 80% 100%, 0 100%, 0 30px);
+        display: none;
+    }
+
+    .sidebar > a:hover {
+        clip-path: polygon(20px 0, 100% 0, 300% 0px, 100% 100%, 0 100%, 0 20px);
+    }
+
+    .sidebar > a:last-child:hover {
+        clip-path: polygon(50px 0, 10% 0, 137% 0px, 80% 100%, 0 100%, 0 0px);
+    }
+
+    .sidebar.show {
+        display: block;
+    }
+
+    .resources-button:hover .svg-path {
+        fill: #c6ff50;
+    }
+
+    .resources-button:focus + .sidebar,
+    .resources-button:hover + .sidebar {
+        display: block;
+    }
+
+    /* The container <div> - needed to position the dropdown content */
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    /* Dropdown Content (Hidden by Default) */
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+    }
+
+    /* Change color of dropdown links on hover */
+    .dropdown-content a:hover {
+        background-color: #ddd;
+    }
+
+    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+    .show {
+        display: block;
+    }
+</style>
diff --git a/research/src/components/icons/Menu.svelte b/research/src/components/icons/Menu.svelte
@@ -0,0 +1,12 @@
+<svg
+    class=""
+    width="28"
+    height="18"
+    viewBox="0 0 28 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <rect class="" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect y="8" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect x="8" y="16" width="20" height="2" rx="1" fill="#1b1b1b"></rect>
+</svg>
diff --git a/research/src/components/icons/Moon.svelte b/research/src/components/icons/Moon.svelte
@@ -0,0 +1,6 @@
+<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+        fill-rule="evenodd"
+        d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    />
+</svg>
diff --git a/research/src/components/icons/Sun.svelte b/research/src/components/icons/Sun.svelte
@@ -0,0 +1,20 @@
+<svg
+    class="fill-yellow-500"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <g clip-path="url(#clip0_535_75)">
+        <path
+            d="M6.76 4.84005L4.96 3.05005L3.55 4.46005L5.34 6.25005L6.76 4.84005ZM1 10.5H4V12.5H1V10.5ZM11 0.550049H13V3.50005H11V0.550049ZM19.04 3.04505L20.448 4.45205L18.658 6.24205L17.251 4.83405L19.04 3.04505ZM17.24 18.16L19.03 19.96L20.44 18.55L18.64 16.76L17.24 18.16ZM20 10.5H23V12.5H20V10.5ZM12 5.50005C8.69 5.50005 6 8.19005 6 11.5C6 14.81 8.69 17.5 12 17.5C15.31 17.5 18 14.81 18 11.5C18 8.19005 15.31 5.50005 12 5.50005ZM12 15.5C9.79 15.5 8 13.71 8 11.5C8 9.29005 9.79 7.50005 12 7.50005C14.21 7.50005 16 9.29005 16 11.5C16 13.71 14.21 15.5 12 15.5ZM11 19.5H13V22.4501H11V19.5ZM3.55 18.5401L4.96 19.9501L6.75 18.15L5.34 16.74L3.55 18.5401Z"
+            fill="#C6FF50"
+        ></path>
+    </g>
+    <defs>
+        <clipPath id="clip0_535_75">
+            <rect width="24" height="24" fill="white"></rect>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/research/src/components/layout/BaseHead.astro b/research/src/components/layout/BaseHead.astro
@@ -1,5 +1,4 @@
 ---
-// @ts-ignore: Cannot find module 'astro:transitions'
 import { ViewTransitions } from 'astro:transitions'
 
 interface Props {
@@ -45,22 +44,22 @@ const { title, description, ogImage } = Astro.props
     />
 
     <script is:inline>
-        const theme = () => {
-            let btn = document.querySelector('#btn')
-            let btn_mobile = document.querySelector('#btn-mobile')
-            const toggleDarkMode = () => {
-                document.documentElement.classList.toggle('dark')
-                const isDarkMode =
-                    document.documentElement.classList.contains('dark')
-                localStorage.setItem('theme', isDarkMode ? 'dark' : 'light')
-            }
-            btn.addEventListener('click', toggleDarkMode)
-            btn_mobile.addEventListener('click', toggleDarkMode)
-        }
-
-        theme()
-
-        document.addEventListener('astro:after-swap', theme)
+        // const theme = () => {
+        //     let btn = document.querySelector('#btn')
+        //     let btn_mobile = document.querySelector('#btn-mobile')
+        //     const toggleDarkMode = () => {
+        //         document.documentElement.classList.toggle('dark')
+        //         const isDarkMode =
+        //             document.documentElement.classList.contains('dark')
+        //         localStorage.setItem('theme', isDarkMode ? 'dark' : 'light')
+        //     }
+        //     btn.addEventListener('click', toggleDarkMode)
+        //     btn_mobile.addEventListener('click', toggleDarkMode)
+        // }
+
+        // theme()
+
+        // document.addEventListener('astro:after-swap', theme)
     </script>
 
     <script