Logo and favicon

packages/wallet/components/Navbar.tsx

@@ -1,14 +1,13 @@
 import { Github } from 'lucide-react'
 import Link from 'next/link'
 
+import BYORIcon from './icons/BYORIcon'
 import { L2BeatLogo } from './L2BeatLogo'
 
 export function Navbar(): JSX.Element {
   return (
     <div className="container flex font-semibold py-2 items-start sm:items-end px-0">
-      <span className="text-4xl max-w-[13rem] sm:max-w-[26rem] italic">
-        Build Your Own Rollup
-      </span>
+      <BYORIcon className="h-16 w-16" />
       <div className="sm:flex sm:items-end">
         <span className="text-sm sm:pl-2">Made By</span>
         <Link href="https://l2beat.com">

packages/wallet/components/icons/BYORIcon.tsx

@@ -0,0 +1,28 @@
+import React, { SVGAttributes } from 'react'
+
+import { Icon } from './Icon'
+
+export default function BYORIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <Icon
+      aria-label="BYOR logo"
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 456 456"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M456 56H236V236H56V456H456V56ZM328.432 190.537V230H353.568V190.537C359.135 189.131 364.232 186.875 368.861 183.77C373.49 180.664 377.475 176.973 380.814 172.695C384.154 168.359 386.732 163.584 388.549 158.369C390.424 153.096 391.361 147.559 391.361 141.758V103.965H366.225V141.758C366.225 145.215 365.551 148.496 364.203 151.602C362.914 154.648 361.127 157.314 358.842 159.6C356.557 161.885 353.861 163.701 350.756 165.049C347.709 166.338 344.457 166.982 341 166.982C337.543 166.982 334.262 166.338 331.156 165.049C328.109 163.701 325.443 161.885 323.158 159.6C320.873 157.314 319.057 154.648 317.709 151.602C316.42 148.496 315.775 145.215 315.775 141.758V103.965H290.551V141.758C290.551 147.559 291.459 153.096 293.275 158.369C295.15 163.584 297.758 168.359 301.098 172.695C304.438 176.973 308.422 180.664 313.051 183.77C317.738 186.875 322.865 189.131 328.432 190.537ZM236.127 347.51C236.127 353.486 235.336 359.258 233.754 364.824C232.23 370.332 230.062 375.518 227.25 380.381C224.438 385.186 221.039 389.58 217.055 393.564C213.07 397.549 208.676 400.977 203.871 403.848C199.066 406.66 193.881 408.828 188.314 410.352C182.748 411.934 176.977 412.725 171 412.725C165.023 412.725 159.252 411.934 153.686 410.352C148.178 408.828 142.992 406.66 138.129 403.848C133.324 400.977 128.93 397.549 124.945 393.564C120.961 389.58 117.533 385.186 114.662 380.381C111.85 375.518 109.652 370.332 108.07 364.824C106.547 359.258 105.785 353.486 105.785 347.51C105.785 341.533 106.547 335.762 108.07 330.195C109.652 324.629 111.85 319.443 114.662 314.639C117.533 309.834 120.961 305.439 124.945 301.455C128.93 297.471 133.324 294.072 138.129 291.26C142.992 288.447 148.178 286.279 153.686 284.756C159.252 283.174 165.023 282.383 171 282.383C176.977 282.383 182.748 283.174 188.314 284.756C193.881 286.279 199.066 288.447 203.871 291.26C208.676 294.072 213.07 297.471 217.055 301.455C221.039 305.439 224.438 309.834 227.25 314.639C230.062 319.443 232.23 324.629 233.754 330.195C235.336 335.762 236.127 341.533 236.127 347.51ZM211.078 347.51C211.078 342.002 210.023 336.816 207.914 331.953C205.805 327.031 202.934 322.783 199.301 319.209C195.727 315.576 191.479 312.705 186.557 310.596C181.693 308.486 176.508 307.432 171 307.432C165.434 307.432 160.219 308.486 155.355 310.596C150.492 312.705 146.244 315.576 142.611 319.209C138.979 322.783 136.107 327.031 133.998 331.953C131.889 336.816 130.834 342.002 130.834 347.51C130.834 353.018 131.889 358.203 133.998 363.066C136.107 367.871 138.979 372.09 142.611 375.723C146.244 379.355 150.492 382.227 155.355 384.336C160.219 386.445 165.434 387.5 171 387.5C176.508 387.5 181.693 386.445 186.557 384.336C191.479 382.227 195.727 379.355 199.301 375.723C202.934 372.09 205.805 367.871 207.914 363.066C210.023 358.203 211.078 353.018 211.078 347.51ZM319.203 359.639V309.189H344.428C347.885 309.189 351.137 309.863 354.184 311.211C357.23 312.5 359.896 314.287 362.182 316.572C364.467 318.857 366.254 321.553 367.543 324.658C368.891 327.705 369.564 330.957 369.564 334.414C369.564 337.871 368.891 341.152 367.543 344.258C366.254 347.305 364.467 349.971 362.182 352.256C359.896 354.541 357.23 356.357 354.184 357.705C351.137 358.994 347.885 359.639 344.428 359.639H319.203ZM293.979 410H319.203V384.775L347.416 384.6L358.402 410H385.209L371.234 377.041C374.867 374.756 378.148 372.061 381.078 368.955C384.008 365.85 386.469 362.451 388.461 358.76C390.512 355.068 392.064 351.172 393.119 347.07C394.232 342.969 394.789 338.75 394.789 334.414C394.789 329.785 394.174 325.332 392.943 321.055C391.771 316.777 390.072 312.764 387.846 309.014C385.678 305.264 383.041 301.865 379.936 298.818C376.889 295.713 373.49 293.076 369.74 290.908C366.049 288.682 362.064 286.982 357.787 285.811C353.51 284.58 349.057 283.965 344.428 283.965H293.979V410Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M210 0H0V210H210V0ZM154.57 144.885C156.562 140.314 157.559 135.422 157.559 130.207C157.559 127.863 157.236 125.461 156.592 123C156.006 120.48 155.127 118.078 153.955 115.793C152.783 113.508 151.377 111.428 149.736 109.553C148.096 107.619 146.25 106.096 144.199 104.982C146.191 103.752 148.008 102.199 149.648 100.324C151.289 98.4492 152.695 96.3691 153.867 94.084C155.039 91.7988 155.947 89.4258 156.592 86.9648C157.236 84.5039 157.559 82.1016 157.559 79.7578C157.559 74.543 156.562 69.6504 154.57 65.0801C152.578 60.5098 149.854 56.5254 146.396 53.127C142.998 49.6699 139.014 46.9453 134.443 44.9531C129.873 42.9609 124.98 41.9648 119.766 41.9648H56.748V168H119.766C124.98 168 129.873 167.004 134.443 165.012C139.014 163.02 142.998 160.324 146.396 156.926C149.854 153.469 152.578 149.455 154.57 144.885ZM119.766 142.775H81.9727V117.639H119.766C121.523 117.639 123.164 117.961 124.688 118.605C126.211 119.25 127.529 120.158 128.643 121.33C129.814 122.443 130.723 123.762 131.367 125.285C132.012 126.809 132.334 128.449 132.334 130.207C132.334 131.965 132.012 133.605 131.367 135.129C130.723 136.652 129.814 138 128.643 139.172C127.529 140.285 126.211 141.164 124.688 141.809C123.164 142.453 121.523 142.775 119.766 142.775ZM119.766 92.4141H81.9727V67.1895H119.766C121.523 67.1895 123.164 67.5117 124.688 68.1562C126.211 68.8008 127.529 69.709 128.643 70.8809C129.814 71.9941 130.723 73.3125 131.367 74.8359C132.012 76.3594 132.334 78 132.334 79.7578C132.334 81.5156 132.012 83.1855 131.367 84.7676C130.723 86.291 129.814 87.6387 128.643 88.8105C127.529 89.9238 126.211 90.8027 124.688 91.4473C123.164 92.0918 121.523 92.4141 119.766 92.4141Z"
+        fill="white"
+      />
+    </Icon>
+  )
+}

packages/wallet/components/icons/Icon.tsx

@@ -0,0 +1,14 @@
+import React, { SVGAttributes } from 'react'
+
+export function Icon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="var(--text)"
+      role="img"
+      {...props}
+    />
+  )
+}

packages/wallet/pages/_document.tsx

@@ -3,7 +3,21 @@ import { Head, Html, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link rel="byor icon" href="/static/favicon.svg" type="image/svg+xml" />
+        <link
+          rel="byor icon"
+          href="/static/favicon-dark.png"
+          type="image/png"
+          media="(prefers-color-scheme: dark)"
+        />
+        <link
+          rel="byor icon"
+          href="/static/favicon-light.png"
+          type="image/png"
+          media="(prefers-color-scheme: light)"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />

packages/wallet/pages/index.tsx

@@ -44,7 +44,7 @@ export default function Home() {
   return (
     <>
       <WagmiConfig config={wagmiConfig}>
-        <main className="pb-6">
+        <main className="pb-6 mx-auto px-4">
           <Navbar />
           <Overview />
           <Wallet />