New logo: oragami crane (#25)

* new logo

* Switch out mantis for crane in logos

* White svg on dark background. Align correctly on landing page.

* Mobile navbar: hide your name, write out Manifold Markets

Co-authored-by: mantikoros <sgrugett@gmail.com>

web/components/manifold-logo.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function ManifoldLogo(props: { darkBackground?: boolean }) {
+  const { darkBackground } = props
+
+  return (
+    <Link href="/">
+      <a className="flex flex-row gap-4">
+        <img
+          className="hover:rotate-12 transition-all"
+          src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
+          width={45}
+          height={45}
+        />
+        <div
+          className={clsx(
+            'sm:hidden font-major-mono lowercase mt-1 text-lg',
+            darkBackground && 'text-white'
+          )}
+        >
+          Manifold
+          <br />
+          Markets
+        </div>
+        <div
+          className={clsx(
+            'hidden sm:flex font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap',
+            darkBackground && 'text-white'
+          )}
+        >
+          Manifold Markets
+        </div>
+      </a>
+    </Link>
+  )
+}

web/components/mantic-logo.tsx

@@ -1,26 +0,0 @@
-import Link from 'next/link'
-import clsx from 'clsx'
-
-export function ManticLogo(props: { darkBackground?: boolean }) {
-  const { darkBackground } = props
-  return (
-    <Link href="/">
-      <a className="flex flex-row gap-3">
-        <img
-          className="sm:h-10 sm:w-10 hover:rotate-12 transition-all"
-          src="/logo-icon.svg"
-          width={40}
-          height={40}
-        />
-        <div
-          className={clsx(
-            'hidden sm:flex font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap',
-            darkBackground && 'text-white'
-          )}
-        >
-          Manifold Markets
-        </div>
-      </a>
-    </Link>
-  )
-}

web/components/nav-bar.tsx

@@ -4,16 +4,17 @@ import Link from 'next/link'
 import { useUser } from '../hooks/use-user'
 import { Row } from './layout/row'
 import { firebaseLogin, User } from '../lib/firebase/users'
-import { ManticLogo } from './mantic-logo'
+import { ManifoldLogo } from './manifold-logo'
 import { ProfileMenu } from './profile-menu'
 
 export function NavBar(props: {
   darkBackground?: boolean
   wide?: boolean
+  isLandingPage?: boolean
   className?: string
   children?: any
 }) {
-  const { darkBackground, wide, className, children } = props
+  const { darkBackground, wide, isLandingPage, className, children } = props
 
   const user = useUser()
 
@@ -26,10 +27,10 @@ export function NavBar(props: {
       <Row
         className={clsx(
           'justify-between items-center mx-auto sm:px-4',
-          wide ? 'max-w-6xl' : 'max-w-4xl'
+          isLandingPage ? 'max-w-7xl' : wide ? 'max-w-6xl' : 'max-w-4xl'
         )}
       >
-        <ManticLogo darkBackground={darkBackground} />
+        <ManifoldLogo darkBackground={darkBackground} />
 
         <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
           {children}

web/components/profile-menu.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import { firebaseLogout, User } from '../lib/firebase/users'
 import { formatMoney } from '../lib/util/format'
-import { Row } from './layout/row'
+import { Col } from './layout/col'
 import { MenuButton } from './menu'
 
 export function ProfileMenu(props: { user: User }) {
@@ -67,16 +67,16 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
 function ProfileSummary(props: { user: User }) {
   const { user } = props
   return (
-    <Row className="avatar items-center">
+    <Col className="avatar items-center sm:flex-row gap-2 sm:gap-0">
-      <div className="rounded-full w-10 h-10 mr-4">
+      <div className="rounded-full w-10 h-10 sm:mr-4">
         <Image src={user.avatarUrl} width={40} height={40} />
       </div>
       <div className="truncate text-left" style={{ maxWidth: 170 }}>
-        {user.name}
+        <div className="hidden sm:flex">{user.name}</div>
         <div className="text-gray-700 text-sm">
           {formatMoney(Math.floor(user.balance))}
         </div>
       </div>
-    </Row>
+    </Col>
   )
 }

web/pages/_app.tsx

@@ -35,7 +35,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
         <meta
           name="twitter:image"
-          content="https://manifold.markets/logo-bg.png"
+          content="https://manifold.markets/logo-bg-white.png"
           key="image2"
         />
       </Head>

web/pages/account.tsx

@@ -9,7 +9,7 @@ function SignInCard() {
     <div className="card glass sm:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-4 sm:mx-auto my-12">
       <div className="p-4">
         <img
-          src="/logo-icon-white-bg.png"
+          src="/logo-bg-white.png"
           className="rounded-lg shadow-lg w-20 h-20"
         />
       </div>

web/pages/landing-page.tsx

@@ -34,7 +34,7 @@ const scrollToAbout = () => {
 function Hero() {
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <NavBar wide darkBackground>
+      <NavBar isLandingPage darkBackground>
         <div
           className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
           onClick={scrollToAbout}

web/public/logo-icon.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 69.218 70.506" xmlns="http://www.w3.org/2000/svg" fill="none">
-  <g data-v-fde0c5aa="" id="5c4df6fb-50cb-4581-b5fd-961d2467c672" stroke="none" fill="#11b981" transform="matrix(0.801904, 0, 0, 0.801904, 7.879115, 8.276814)">
-    <path d="M29.347 10.688A16.012 16.012 0 0 1 34 10c1.604 0 3.168.238 4.652.688C41.374 3.578 47.976 0 58 0a2 2 0 1 1 0 4c-8.574 0-13.645 2.759-15.688 8.325a16.03 16.03 0 0 1 4.399 3.956C49.892 17.358 52 21.399 52 26c0 4.672-2.173 8.766-5.437 9.767C43.11 40.917 37.801 45 34 45s-9.11-4.083-12.563-9.233C18.173 34.767 16 30.672 16 26c0-4.6 2.108-8.642 5.29-9.72a16.03 16.03 0 0 1 4.398-3.955C23.645 6.76 18.573 4 9.999 4a2 2 0 1 1 0-4c10.024 0 16.627 3.578 19.348 10.688zM34 41c1.894 0 5.359-2.493 8.068-5.87C39.58 33.547 38 29.984 38 26c0-3.898 1.513-7.394 3.91-9.026A11.966 11.966 0 0 0 34 14c-2.972 0-5.76 1.087-7.91 2.974C28.488 18.606 30 22.102 30 26c0 3.983-1.58 7.546-4.068 9.13C28.642 38.508 32.106 41 34 41zm-11-9c1.408 0 3-2.547 3-6s-1.592-6-3-6-3 2.547-3 6 1.592 6 3 6zm22 0c1.408 0 3-2.547 3-6s-1.592-6-3-6-3 2.547-3 6 1.592 6 3 6zM6.883 66.673a2 2 0 0 1-3.297.741C1.13 64.96 0 60.813 0 55c0-6.052 3.982-12.206 11.734-18.548a2 2 0 0 1 3.029.604l15 28a2 2 0 1 1-3.526 1.888l-8.755-16.342c-4.18 2.733-7.74 8.065-10.599 16.07zm5.526-25.54C6.75 46.174 4 50.818 4 55c0 2.566.243 4.666.7 6.304 2.934-6.756 6.547-11.518 10.887-14.24l-3.178-5.932zm48.708 25.54c-2.86-8.006-6.418-13.338-10.599-16.071l-8.755 16.342a2 2 0 1 1-3.526-1.888l15-28a2 2 0 0 1 3.03-.604C64.018 42.794 68 48.948 68 55c0 5.813-1.13 9.96-3.585 12.414a2 2 0 0 1-3.298-.741zm-5.526-25.54l-3.178 5.932c4.34 2.721 7.954 7.483 10.887 14.24.457-1.639.7-3.739.7-6.305 0-4.18-2.75-8.825-8.409-13.868z"/>
-  </g>
-</svg>

web/public/logo-white.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="master-artboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500px" height="500px"><rect id="ee-background" x="0" y="0" width="500" height="500" style="fill: white; fill-opacity: 0; pointer-events: none;"/><g transform="matrix(0.4310344457626343, 0, 0, 0.4310344457626343, -49.559356689453125, 43.23752975463867)"><g transform="matrix(-1, 0, 0, 1, 1398.2724346748023, 1.4210854715202004e-14)"><g transform="matrix(-0.8166666626930236, 0, 0, 0.8166666626930236, 1188.272278324478, 1.4210854715202004e-14)"><path d="m1200 723.75c-1.875-7.5-9.375-13.125-16.875-13.125l-266.25-18.75 196.88-444.38c3.75-7.5 1.875-16.875-5.625-22.5s-15-5.625-22.5 0l-401.25 288.75-60-371.25c-1.875-7.5-7.5-15-16.875-15-7.5 0-16.875 3.75-18.75 11.25l-157.5 384.38-243.75-285h-1.875-1.875c-1.875-1.875-1.875-1.875-3.75-1.875h-1.875-5.625-1.875c-1.875 0-3.75 0-5.625 1.875h-1.875c-1.875 0-3.75 1.875-3.75 3.75l-157.5 170.62c-5.625 3.75-5.625 11.25-1.875 18.75 3.75 5.625 9.375 9.375 16.875 9.375h1.875l146.25-22.5 30 459.38v1.875c0 1.875 0 3.75 1.875 5.625 0 1.875 1.875 3.75 3.75 3.75l1.875 1.875c1.875 1.875 1.875 1.875 3.75 1.875h1.875l521.25 178.12c1.875 0 3.75 1.875 5.625 1.875h5.625 1.875c1.875 0 1.875-1.875 3.75-1.875l446.25-326.25c5.625-5.625 9.375-13.125 7.5-20.625zm-1134.4-328.12 91.875-99.375 5.625 84.375zm1063.1 348.75-7.5 5.625-341.25 249.38 65.625-148.12 54.375-123.75zm-605.62 217.5 146.25-161.25c7.5-7.5 5.625-18.75-1.875-26.25s-18.75-5.625-26.25 1.875l-157.5 174.38-230.62-78.75 796.88-575.62-324.38 735zm75-748.12 52.5 324.38-129.38 93.75-63.75-75zm-106.88 438.75-118.12 86.25-142.5 103.12-33.75-525v-11.25z" style="fill-opacity: 1; fill: rgb(255, 255, 255);"/></g></g></g></svg>

web/public/logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="master-artboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500px" height="500px"><rect id="ee-background" x="0" y="0" width="500" height="500" style="fill: white; fill-opacity: 0; pointer-events: none;"/><g transform="matrix(0.4310344457626343, 0, 0, 0.4310344457626343, -49.559356689453125, 43.23752975463867)"><g transform="matrix(-1, 0, 0, 1, 1398.2724346748023, 1.4210854715202004e-14)"><g transform="matrix(-0.8166666626930236, 0, 0, 0.8166666626930236, 1188.272278324478, 1.4210854715202004e-14)"><path d="m1200 723.75c-1.875-7.5-9.375-13.125-16.875-13.125l-266.25-18.75 196.88-444.38c3.75-7.5 1.875-16.875-5.625-22.5s-15-5.625-22.5 0l-401.25 288.75-60-371.25c-1.875-7.5-7.5-15-16.875-15-7.5 0-16.875 3.75-18.75 11.25l-157.5 384.38-243.75-285h-1.875-1.875c-1.875-1.875-1.875-1.875-3.75-1.875h-1.875-5.625-1.875c-1.875 0-3.75 0-5.625 1.875h-1.875c-1.875 0-3.75 1.875-3.75 3.75l-157.5 170.62c-5.625 3.75-5.625 11.25-1.875 18.75 3.75 5.625 9.375 9.375 16.875 9.375h1.875l146.25-22.5 30 459.38v1.875c0 1.875 0 3.75 1.875 5.625 0 1.875 1.875 3.75 3.75 3.75l1.875 1.875c1.875 1.875 1.875 1.875 3.75 1.875h1.875l521.25 178.12c1.875 0 3.75 1.875 5.625 1.875h5.625 1.875c1.875 0 1.875-1.875 3.75-1.875l446.25-326.25c5.625-5.625 9.375-13.125 7.5-20.625zm-1134.4-328.12 91.875-99.375 5.625 84.375zm1063.1 348.75-7.5 5.625-341.25 249.38 65.625-148.12 54.375-123.75zm-605.62 217.5 146.25-161.25c7.5-7.5 5.625-18.75-1.875-26.25s-18.75-5.625-26.25 1.875l-157.5 174.38-230.62-78.75 796.88-575.62-324.38 735zm75-748.12 52.5 324.38-129.38 93.75-63.75-75zm-106.88 438.75-118.12 86.25-142.5 103.12-33.75-525v-11.25z" style="fill-opacity: 1; fill: rgb(67, 55, 201);"/></g></g></g></svg>