diff --git a/.eslintignore b/.eslintignore index a71674ac..2d122839 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ /playwright-report/ /blob-report/ /playwright/.cache/ +/out/ diff --git a/package-lock.json b/package-lock.json index f863a14d..19100836 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18059,9 +18059,9 @@ "license": "MIT" }, "node_modules/tailwind-merge": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", - "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz", + "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==", "license": "MIT", "funding": { "type": "github", diff --git a/src/app/components/Connect/ConnectSmall.tsx b/src/app/components/Connect/ConnectSmall.tsx index ea7f46d6..128cb054 100644 --- a/src/app/components/Connect/ConnectSmall.tsx +++ b/src/app/components/Connect/ConnectSmall.tsx @@ -41,7 +41,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({ const ref = useRef(null); useOnClickOutside(ref, handleClickOutside); - const { coinName, networkName } = getNetworkConfig(); + const { coinName } = getNetworkConfig(); const { isApiNormal, isGeoBlocked, apiMessage } = useHealthCheck(); // Renders the Tooltip describing the reason @@ -146,7 +146,7 @@ export const ConnectSmall: React.FC<ConnectSmallProps> = ({ disabled={Boolean(address) || !isApiNormal} > <PiWalletBold size={20} className="flex md:hidden" /> - <span className="hidden md:flex">Connect to {networkName} network</span> + <span className="hidden md:flex">Connect Wallets</span> </button> {!isApiNormal && renderApiNotAvailableTooltip()} </div> diff --git a/src/app/components/Footer/Footer.tsx b/src/app/components/Footer/Footer.tsx index c48a4ad9..84cfa71d 100644 --- a/src/app/components/Footer/Footer.tsx +++ b/src/app/components/Footer/Footer.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import { BsDiscord, BsGithub, @@ -10,6 +11,8 @@ import { GoHome } from "react-icons/go"; import { IoMdBook } from "react-icons/io"; import { MdAlternateEmail, MdForum } from "react-icons/md"; +import babylonIcon from "@/app/assets/logo-white.svg"; + const iconLinks = [ { name: "Website", @@ -65,44 +68,50 @@ const iconLinks = [ export const Footer: React.FC = () => { return ( - <div className="container mx-auto flex flex-col items-center"> - <div className="w-24"> - <div className="divider my-1" /> - </div> - <div className="flex justify-center gap-8 p-2"> - <a - href="https://babylonlabs.io/terms-of-use" - target="_blank" - rel="noopener noreferrer" - className="transition-colors hover:text-primary" - > - Terms of Use - </a> - <a - href="https://babylonlabs.io/privacy-policy" - target="_blank" - rel="noopener noreferrer" - className="transition-colors hover:text-primary" - > - Privacy Policy - </a> - </div> - <div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2"> - {iconLinks.map(({ name, url, Icon }) => ( - <div - key={name} - className="flex w-4 items-center justify-center text-[22px] text-xl" - > + <div className="hidden relative md:flex h-[238px] text-white bg-primary-main before:absolute before:h-3 before:w-2/3 before:bg-primary-main before:left-1/4 before:-top-2"> + <div className="container mx-auto flex flex-row items-center justify-around"> + <div className="flex flex-col"> + <div className="flex flex-wrap justify-center gap-8 p-4 pt-2 md:flex-row md:p-6 md:pt-2"> + {iconLinks.map(({ name, url, Icon }) => ( + <div + key={name} + className="flex w-4 items-center justify-center text-[22px] text-xl" + > + <a + href={url} + target="_blank" + rel="noopener noreferrer" + className="transition-colors hover:text-primary" + > + <Icon title={name} /> + </a> + </div> + ))} + </div> + <div> + <a + href="https://babylonlabs.io/terms-of-use" + target="_blank" + rel="noopener noreferrer" + className="transition-colors hover:text-primary" + > + Terms of Use + </a>{" "} + -{" "} <a - href={url} + href="https://babylonlabs.io/privacy-policy" target="_blank" rel="noopener noreferrer" className="transition-colors hover:text-primary" > - <Icon title={name} /> - </a> + Privacy Policy + </a>{" "} + - 2024 Babylon Labs. All rights reserved. </div> - ))} + </div> + <div> + <Image src={babylonIcon} alt="babylon" /> + </div> </div> </div> ); diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx index 53de3362..0b734e05 100644 --- a/src/app/components/Header/Header.tsx +++ b/src/app/components/Header/Header.tsx @@ -1,10 +1,12 @@ +import { twJoin } from "tailwind-merge"; + import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider"; import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider"; import { useAppState } from "@/app/state"; import { shouldDisplayTestingMsg } from "@/config"; -import { ConnectSmall } from "../Connect/ConnectSmall"; import { ConnectedSmall } from "../Connect/ConnectedSmall"; +import { ConnectSmall } from "../Connect/ConnectSmall"; import { Logo } from "../Logo/Logo"; import { TestingInfo } from "../TestingInfo/TestingInfo"; import { ThemeToggle } from "../ThemeToggle/ThemeToggle"; @@ -16,8 +18,8 @@ export const Header = () => { return ( <nav> - <div className="bg-base-300 shadow-sm"> - <div className="container mx-auto flex w-full items-center justify-between gap-4 p-6 pb-4 md:pb-6"> + <section className="bg-primary-main h-[300px] -mb-[188px]"> + <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between"> <Logo /> <div className="flex flex-1"> {shouldDisplayTestingMsg() && ( @@ -26,26 +28,32 @@ export const Header = () => { </div> )} </div> - <ConnectSmall - loading={loading} - onConnect={open} - address={address} - btcWalletBalanceSat={totalBalance} - onDisconnect={disconnect} - /> - <ThemeToggle /> - </div> - <div - className={`${address && "justify-end p-6 pt-0"}container mx-auto flex w-full items-center gap-4 md:hidden md:p-0`} - > - <ConnectedSmall - loading={loading} - address={address} - btcWalletBalanceSat={totalBalance} - onDisconnect={disconnect} - /> + <div className="flex items-center gap-4"> + <ConnectSmall + loading={loading} + onConnect={open} + address={address} + btcWalletBalanceSat={totalBalance} + onDisconnect={disconnect} + /> + <ThemeToggle /> + </div> + <div + className={twJoin( + address && "justify-end p-6 pt-0", + "container mx-auto flex w-full items-center gap-4 md:hidden md:p-0", + )} + > + <ConnectedSmall + loading={loading} + address={address} + btcWalletBalanceSat={totalBalance} + onDisconnect={disconnect} + /> + </div> </div> - </div> + </section> + {shouldDisplayTestingMsg() && ( <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden"> <TestingInfo /> diff --git a/src/app/components/Header/SimplifiedHeader.tsx b/src/app/components/Header/SimplifiedHeader.tsx index 2cb8064e..4c67c5ce 100644 --- a/src/app/components/Header/SimplifiedHeader.tsx +++ b/src/app/components/Header/SimplifiedHeader.tsx @@ -6,8 +6,8 @@ import { TestingInfo } from "../TestingInfo/TestingInfo"; export const SimplifiedHeader = () => { return ( <nav> - <div className="bg-base-300 shadow-sm"> - <div className="container mx-auto flex w-full items-center justify-between gap-4 p-6 pb-4 md:pb-6"> + <section className="bg-primary-main h-[300px] mb-[-188px]"> + <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between"> <Logo /> <div className="flex flex-1"> {shouldDisplayTestingMsg() && ( @@ -17,12 +17,12 @@ export const SimplifiedHeader = () => { )} </div> </div> - </div> - {shouldDisplayTestingMsg() && ( - <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden"> - <TestingInfo /> - </div> - )} + {shouldDisplayTestingMsg() && ( + <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden"> + <TestingInfo /> + </div> + )} + </section> </nav> ); }; diff --git a/src/app/components/Logo/Logo.tsx b/src/app/components/Logo/Logo.tsx index 565f067c..4721c5b9 100644 --- a/src/app/components/Logo/Logo.tsx +++ b/src/app/components/Logo/Logo.tsx @@ -1,31 +1,13 @@ -import { useTheme } from "next-themes"; import Image from "next/image"; -import { useEffect, useState } from "react"; -import darkLogo from "@/app/assets/logo-black.svg"; -import lightLogo from "@/app/assets/logo-white.svg"; +import logo from "@/app/assets/logo-white.svg"; interface LogoProps {} export const Logo: React.FC<LogoProps> = () => { - const [mounted, setMounted] = useState(false); - const { resolvedTheme } = useTheme(); - const lightSelected = resolvedTheme === "light"; - - // useEffect only runs on the client, so now we can safely show the UI - useEffect(() => { - setMounted(true); - }, []); - - // uses placeholder of babylon logo with primary color - // since before theme is resolved, we don't know which logo to show - if (!mounted) { - return <div className="h-[40px] w-[159px]" />; - } - return ( <div className="flex"> - <Image src={lightSelected ? darkLogo : lightLogo} alt="Babylon" /> + <Image src={logo} alt="Babylon" /> </div> ); }; diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx index 37c42233..b29f8acd 100644 --- a/src/app/global-error.tsx +++ b/src/app/global-error.tsx @@ -37,6 +37,7 @@ export default function GlobalError({ network === Network.MAINNET ? "main-app-mainnet" : "main-app-testnet", + "bg-primary-contrast", )} > <GenericError /> diff --git a/src/app/globals.css b/src/app/globals.css index e097447c..9095ed7e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -86,26 +86,6 @@ input[type="number"] { width: 1px !important; } -[data-theme="dark"] .main-app-mainnet { - background: rgb(43, 43, 43) url("./assets/bg-pattern.svg") left top/auto - repeat; -} - -[data-theme="light"] .main-app-mainnet { - background: rgb(236, 236, 236) url("./assets/bg-pattern.svg") left top/auto - repeat; -} - -[data-theme="dark"] .main-app-testnet { - background: rgb(43, 43, 43) url("./assets/testnet-bg-pattern.svg") left - top/auto repeat; -} - -[data-theme="light"] .main-app-testnet { - background: rgb(236, 236, 236) url("./assets/testnet-bg-pattern.svg") left - top/auto repeat; -} - [data-theme="dark"] .react-responsive-modal-modal { background-color: #1e1e1e; color: #fff; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f0ef1c7e..87dd89f7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -34,6 +34,7 @@ export default function RootLayout({ network === Network.MAINNET ? "main-app-mainnet" : "main-app-testnet", + "bg-primary-contrast", )} > {children} diff --git a/tailwind.config.ts b/tailwind.config.ts index 4e0f9109..f576b1cc 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,7 +13,13 @@ const config: Config = { screens: screenBreakPoints, extend: { colors: { - primary: "#FF7C2A", + primary: { + DEFAULT: "#000000DE", + main: "#042F40", + dark: "#12495E", + light: "#387085", + contrast: "#F5F7F2", + }, secondary: "#0DB7BF", "base-400": "hsl(var(--base-400) / <alpha-value>)", },