From d5d7f9dfa2e5aabecee851f1c016c2901c1b7e3b Mon Sep 17 00:00:00 2001 From: nahbee10 Date: Wed, 6 Nov 2024 16:16:32 -0500 Subject: [PATCH 01/10] add search bar to nav --- assets/tailwind-output.css | 86 ++++++++++++++++++++++++++++++++++++++ styles/main.css | 7 ++++ tailwind.config.ts | 1 + templates/header.hbs | 12 ++++++ 4 files changed, 106 insertions(+) diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index c8d842bf5..40ff1bb11 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -608,6 +608,10 @@ video { pointer-events: none; } +.\!pointer-events-auto { + pointer-events: auto !important; +} + .visible { visibility: visible; } @@ -696,6 +700,10 @@ video { z-index: 850; } +.z-search { + z-index: 810; +} + .col-span-1 { grid-column: span 1 / span 1; } @@ -708,6 +716,10 @@ video { grid-column: 1 / -1; } +.m-auto { + margin: auto; +} + .\!my-auto { margin-top: auto !important; margin-bottom: auto !important; @@ -762,6 +774,10 @@ video { margin-top: 0px !important; } +.\!mt-4 { + margin-top: 1rem !important; +} + .\!mt-6 { margin-top: 1.5rem !important; } @@ -1029,6 +1045,10 @@ video { width: 2rem; } +.w-\[25rem\] { + width: 25rem; +} + .w-\[3\.75rem\] { width: 3.75rem; } @@ -1085,6 +1105,10 @@ video { flex-shrink: 1; } +.shrink-0 { + flex-shrink: 0; +} + .flex-grow { flex-grow: 1; } @@ -1187,6 +1211,12 @@ video { gap: 1rem; } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); @@ -1269,6 +1299,10 @@ video { border-radius: 0.25rem; } +.rounded-\[1\.25rem\] { + border-radius: 1.25rem; +} + .rounded-full { border-radius: 9999px; } @@ -1335,6 +1369,10 @@ video { border-color: rgba(34,34,34,0.05); } +.border-transparent { + border-color: transparent; +} + .\!bg-light-accent-2 { --tw-bg-opacity: 1 !important; background-color: rgb(254 244 255 / var(--tw-bg-opacity)) !important; @@ -3216,6 +3254,32 @@ html:has(.ArticlePage) { padding-right: 0.75rem !important; } +.search.search-full { + width: 100%; + flex-grow: 1; + input { + width: 100%; + } + input { + background-color: transparent !important; + } + input { + font-family: var(--font-basel-grotesk) !important; + font-size: 0.875rem !important; + font-weight: 485 !important; + line-height: 1/25rem !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale !important; + } + input:focus-visible { + border-style: none !important; + } + input:focus-visible { + outline: 2px solid transparent !important; + outline-offset: 2px !important; + } +} + .placeholder\:text-light-pink-vibrant::-moz-placeholder { --tw-text-opacity: 1; color: rgb(245 13 180 / var(--tw-text-opacity)); @@ -3242,6 +3306,19 @@ html:has(.ArticlePage) { margin-top: 1.5rem; } +.focus-within\:\!border-light-surface-3:focus-within { + border-color: rgba(34,34,34,0.05) !important; +} + +.focus-within\:\!bg-transparent:focus-within { + background-color: transparent !important; +} + +.focus-within\:\!text-light-neutral-1:focus-within { + --tw-text-opacity: 1 !important; + color: rgb(34 34 34 / var(--tw-text-opacity)) !important; +} + .hover\:\!bg-light-accent-2-hovered:hover { --tw-bg-opacity: 1 !important; background-color: rgb(254 235 252 / var(--tw-bg-opacity)) !important; @@ -3760,6 +3837,15 @@ html:has(.ArticlePage) { color: rgb(252 116 254 / var(--tw-text-opacity)); } +.focus-within\:dark\:\!border-dark-surface-3:where(.dark, .dark *):focus-within { + border-color: rgba(255,255,255,0.12) !important; +} + +.focus-within\:dark\:\!text-dark-neutral-1:where(.dark, .dark *):focus-within { + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +} + .dark\:hover\:bg-dark-accent-1-hovered:hover:where(.dark, .dark *) { --tw-bg-opacity: 1; background-color: rgb(253 60 254 / var(--tw-bg-opacity)); diff --git a/styles/main.css b/styles/main.css index 222b8989c..3ca2dc7be 100644 --- a/styles/main.css +++ b/styles/main.css @@ -333,3 +333,10 @@ html:has(.ArticlePage) { .ck.ck-editor__editable_inline { @apply !px-3; } + +.search.search-full { + @apply w-full grow; + input { + @apply !body-3 !bg-transparent w-full focus-visible:!border-none focus-visible:!outline-none; + } +} diff --git a/tailwind.config.ts b/tailwind.config.ts index c07519142..df259d47f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -45,6 +45,7 @@ const config: Config = { zIndex: { modal: "900", scrim: "850", + search: "810", nav: "800", }, spacing: { diff --git a/templates/header.hbs b/templates/header.hbs index 5ffdcda25..0fa542dbc 100644 --- a/templates/header.hbs +++ b/templates/header.hbs @@ -1,12 +1,24 @@ From 6971918abd291cbd36224a1c9e2d00abff6ba2ff Mon Sep 17 00:00:00 2001 From: nahbee10 Date: Wed, 6 Nov 2024 16:57:05 -0500 Subject: [PATCH 02/10] add mobile nav and hero search bars --- assets/navigation-bundle.js | 30 +++++++++--- assets/tailwind-output.css | 18 ++++++++ src/modules/homepage/HomepageModule.tsx | 17 ++++++- src/modules/navigation/MobileMenuModal.tsx | 2 +- src/modules/navigation/Navigation.tsx | 54 ++++++++++++++++++---- src/svgs/Icons/index.tsx | 15 ++++++ templates/header.hbs | 12 ++++- templates/home_page.hbs | 15 +++++- 8 files changed, 144 insertions(+), 19 deletions(-) diff --git a/assets/navigation-bundle.js b/assets/navigation-bundle.js index 0d5d03fad..b32334bd2 100644 --- a/assets/navigation-bundle.js +++ b/assets/navigation-bundle.js @@ -1,5 +1,5 @@ import { aa as api, r as reactExports, j as jsxRuntimeExports, ab as Ye, ac as cn, ad as yt, ae as je, a6 as reactDomExports, a7 as ThemeProviders, a8 as createTheme } from 'shared'; -import { T as ThemeIconMap, S as Sun, M as Moon, C as Close, P as PrimaryButton, L as LinkBase, a as MiniUnicon, B as ButtonBase, b as Menu } from 'index'; +import { T as ThemeIconMap, S as Sun, M as Moon, C as Close, P as PrimaryButton, a as Search, B as ButtonBase, L as LinkBase, b as MiniUnicon, c as Menu } from 'index'; class StorageManager { key; @@ -88,12 +88,14 @@ const MobileMenuModal = ({ isOpen, close }) => { }), children: [jsxRuntimeExports.jsxs("div", { className: "pt-margin-mobile", children: [jsxRuntimeExports.jsxs("div", { className: "relative", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row-reverse mb-margin-mobile", children: jsxRuntimeExports.jsx("button", { onClick: handleClose, className: "group", children: jsxRuntimeExports.jsx(Close, { className: "h-3.5 w-3.5" }) }) }), jsxRuntimeExports.jsx("nav", { id: "new-mobile-nav" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsxRuntimeExports.jsx("h3", { className: cn('body-1', { 'text-light-neutral-1': theme === 'light', 'text-dark-neutral-1': theme === 'dark', - }), children: "Theme" }), jsxRuntimeExports.jsx(ThemeSwitch, {})] })] }), jsxRuntimeExports.jsx("div", { className: "py-margin-mobile", children: jsxRuntimeExports.jsx(PrimaryButton, { onClick: handleClose, className: "ml-padding-small-dense", label: "Submit Request", href: "https://support.uniswap.org/hc/en-us/requests/new", size: "large", theme: theme, color: "accent-2", fullWidth: true }) })] }) }) })); + }), children: "Theme" }), jsxRuntimeExports.jsx(ThemeSwitch, {})] })] }), jsxRuntimeExports.jsx("div", { className: "py-margin-mobile", children: jsxRuntimeExports.jsx(PrimaryButton, { onClick: handleClose, className: "ml-padding-small-dense", label: "Submit Request", href: "/hc/en-us/requests/new", size: "large", theme: theme, color: "accent-2", fullWidth: true }) })] }) }) })); }; const Navigation = () => { const [scrollIsOnTop, setScrollIsOnTop] = reactExports.useState(false); const [menuIsOpen, setMenuIsOpen] = reactExports.useState(false); + const [mobileSearchBarIsOpen, setMobileSearchBarIsOpen] = reactExports.useState(false); + const searchBarRef = reactExports.useRef(null); reactExports.useEffect(() => { const handleScroll = () => { const position = window.scrollY; @@ -110,11 +112,27 @@ const Navigation = () => { window.removeEventListener('scroll', handleScroll); }; }, [setScrollIsOnTop]); - return (jsxRuntimeExports.jsxs(UIProvider, { children: [jsxRuntimeExports.jsx("nav", { className: cn('Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1', { + reactExports.useEffect(() => { + const timeout = setTimeout(() => { + const searchBarPlaceholder = document.getElementById("search-bar-placeholder-nav-mobile"); + if (searchBarPlaceholder && searchBarRef.current) { + searchBarRef.current.appendChild(searchBarPlaceholder); + searchBarPlaceholder.style.opacity = "1"; + } + }, 100); + return () => clearTimeout(timeout); + }, []); + return (jsxRuntimeExports.jsxs(UIProvider, { children: [jsxRuntimeExports.jsxs("nav", { className: cn('Navigation fixed top-0 left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1', { 'border-b': !scrollIsOnTop, - }), children: jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] md:px-[0.9375rem] md:py-3 md:h-[4.5rem]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center", children: jsxRuntimeExports.jsxs(LinkBase, { href: "/", className: "flex flex-row items-center", children: [jsxRuntimeExports.jsx(MiniUnicon, { className: "mb-[0.1875rem] h-8 w-8" }), jsxRuntimeExports.jsx("p", { className: "body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1", children: "Uniswap Support" })] }) }), jsxRuntimeExports.jsx("div", { className: "md:hidden", children: jsxRuntimeExports.jsx(ButtonBase, { id: "mobile-menu-button", onClick: () => { - setMenuIsOpen((prev) => !prev); - }, children: jsxRuntimeExports.jsx(Menu, { className: "h-padding-large w-padding-large" }) }) }), jsxRuntimeExports.jsxs("div", { className: "hidden md:flex", children: [jsxRuntimeExports.jsx(ThemeSwitch, {}), jsxRuntimeExports.jsx(PrimaryButton, { className: "ml-padding-small-dense !my-auto !py-0 !h-8", label: "Submit Request", href: "https://support.uniswap.org/hc/en-us/requests/new", color: "accent-2" })] })] }) }), jsxRuntimeExports.jsx("div", { className: cn('fixed inset-0 z-scrim bg-scrim transition duration-500', { + }), children: [jsxRuntimeExports.jsxs("div", { className: cn("absolute w-full h-full top-0 left-0 !bg-light-surface-1 dark:!bg-dark-surface-1 px-4 py-[1.15625rem] flex flex-row justify-between items-center", { + "hidden": mobileSearchBarIsOpen + }), children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center grow", children: [jsxRuntimeExports.jsx(Search, { className: "h-padding-large w-padding-large" }), jsxRuntimeExports.jsx("div", { ref: searchBarRef, className: "grow" })] }), jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { + setMobileSearchBarIsOpen((prev) => !prev); + }, className: "body-2 text-light-neutral-2 dark:text-dark-neutral-2 shrink-0", children: "Cancel" })] }), jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-row items-center justify-between border-light-surface-3 px-4 py-[1.15625rem] md:px-[0.9375rem] md:py-3 md:h-[4.5rem]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-row items-center", children: jsxRuntimeExports.jsxs(LinkBase, { href: "/", className: "flex flex-row items-center", children: [jsxRuntimeExports.jsx(MiniUnicon, { className: "mb-[0.1875rem] h-8 w-8" }), jsxRuntimeExports.jsx("p", { className: "body-3 md:button-label-2 ml-2 text-light-accent-1 dark:text-dark-accent-1", children: "Uniswap Support" })] }) }), jsxRuntimeExports.jsxs("div", { className: "md:hidden", children: [jsxRuntimeExports.jsx(ButtonBase, { id: "mobile-menu-button", onClick: () => { + setMobileSearchBarIsOpen((prev) => !prev); + }, className: "mr-3", children: jsxRuntimeExports.jsx(Search, { className: "h-padding-large w-padding-large" }) }), jsxRuntimeExports.jsx(ButtonBase, { onClick: () => { + setMenuIsOpen((prev) => !prev); + }, children: jsxRuntimeExports.jsx(Menu, { className: "h-padding-large w-padding-large" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hidden md:flex", children: [jsxRuntimeExports.jsx(ThemeSwitch, {}), jsxRuntimeExports.jsx(PrimaryButton, { className: "ml-padding-small-dense !my-auto !py-0 !h-8", label: "Submit Request", href: "https://support.uniswap.org/hc/en-us/requests/new", color: "accent-2" })] })] })] }), jsxRuntimeExports.jsx("div", { className: cn('fixed inset-0 z-scrim bg-scrim transition duration-500', { 'pointer-events-none opacity-0': !menuIsOpen, 'opacity-1': menuIsOpen, }) }), jsxRuntimeExports.jsx(MobileMenuModal, { isOpen: menuIsOpen, close: () => { diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 40ff1bb11..f188cf32a 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -818,6 +818,10 @@ video { margin-right: 0.5rem; } +.mr-3 { + margin-right: 0.75rem; +} + .mr-4 { margin-right: 1rem; } @@ -854,6 +858,10 @@ video { margin-top: 1.5rem; } +.mt-8 { + margin-top: 2rem; +} + .mt-\[1\.875rem\] { margin-top: 1.875rem; } @@ -1378,6 +1386,11 @@ video { background-color: rgb(254 244 255 / var(--tw-bg-opacity)) !important; } +.\!bg-light-surface-1 { + --tw-bg-opacity: 1 !important; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; +} + .\!bg-light-surface-3 { background-color: rgba(34,34,34,0.05) !important; } @@ -1622,6 +1635,11 @@ video { padding: 0.5rem; } +.\!px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + .\!px-4 { padding-left: 1rem !important; padding-right: 1rem !important; diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx index 3849522e1..deabf05d2 100644 --- a/src/modules/homepage/HomepageModule.tsx +++ b/src/modules/homepage/HomepageModule.tsx @@ -1,4 +1,4 @@ -import { FC } from "react"; +import { FC, useEffect, useRef } from "react"; import cn from "classnames"; import { @@ -32,6 +32,20 @@ const Homepage: FC = ({ homepageData }) => { const heros = homepageData.heros || []; const hero = heros[Math.floor(Math.random() * heros.length)]; + const searchBarRef = useRef(null); + + useEffect(() => { + const timeout = setTimeout(() => { + const searchBarPlaceholder = document.getElementById("search-bar-placeholder-mobile"); + if (searchBarPlaceholder && searchBarRef.current) { + searchBarRef.current.appendChild(searchBarPlaceholder); + searchBarPlaceholder.style.opacity = "1"; + } + }, 100); + + return () => clearTimeout(timeout); + }, []); + return (
{hero && ( @@ -44,6 +58,7 @@ const Homepage: FC = ({ homepageData }) => { {hero.headerLine2} +
)} {homepageData.coloredCardsBlock && diff --git a/src/modules/navigation/MobileMenuModal.tsx b/src/modules/navigation/MobileMenuModal.tsx index 4c35a04a2..fa6a383bb 100644 --- a/src/modules/navigation/MobileMenuModal.tsx +++ b/src/modules/navigation/MobileMenuModal.tsx @@ -76,7 +76,7 @@ const MobileMenuModal: FC = ({ isOpen, close }) => { onClick={handleClose} className="ml-padding-small-dense" label="Submit Request" - href="https://support.uniswap.org/hc/en-us/requests/new" + href="/hc/en-us/requests/new" size="large" theme={theme} color="accent-2" diff --git a/src/modules/navigation/Navigation.tsx b/src/modules/navigation/Navigation.tsx index 3aba13660..f55183652 100644 --- a/src/modules/navigation/Navigation.tsx +++ b/src/modules/navigation/Navigation.tsx @@ -1,18 +1,20 @@ -import { FC, useState, useEffect } from 'react'; -import type { Navigation } from './data-types'; +import { FC, useState, useEffect, useRef } from "react"; +import type { Navigation } from "./data-types"; import cn from 'classnames'; -import { MiniUnicon } from '../../svgs/Logos'; -import { Menu } from '../../svgs/Icons'; -import { PrimaryButton, ButtonBase, LinkBase } from '../../base/Button'; -import ThemeSwitch from './ThemeSwitch'; -import MobileMenuModal from './MobileMenuModal'; -import { UIProvider } from '../../context/uiProvider'; +import { MiniUnicon } from "../../svgs/Logos"; +import { Menu, Search } from "../../svgs/Icons"; +import { PrimaryButton, ButtonBase, LinkBase } from "../../base/Button"; +import ThemeSwitch from "./ThemeSwitch"; +import MobileMenuModal from "./MobileMenuModal"; +import { UIProvider } from "../../context/uiProvider"; const Navigation: FC = () => { const [scrollIsOnTop, setScrollIsOnTop] = useState(false); const [menuIsOpen, setMenuIsOpen] = useState(false); + const [mobileSearchBarIsOpen, setMobileSearchBarIsOpen] = useState(false); + const searchBarRef = useRef(null); useEffect(() => { const handleScroll = () => { @@ -31,6 +33,18 @@ const Navigation: FC = () => { }; }, [setScrollIsOnTop]); + useEffect(() => { + const timeout = setTimeout(() => { + const searchBarPlaceholder = document.getElementById("search-bar-placeholder-nav-mobile"); + if (searchBarPlaceholder && searchBarRef.current) { + searchBarRef.current.appendChild(searchBarPlaceholder); + searchBarPlaceholder.style.opacity = "1"; + } + }, 100); + + return () => clearTimeout(timeout); + }, []); + return (