Add opengraph tags

apps/web/src/app/root.tsx

@@ -15,7 +15,6 @@ import { WalletProvider } from "../context/WalletProvider";
 
 import {
   SITE_DESCRIPTION,
-  SITE_EMOJI,
   SITE_NAME,
   SITE_URL,
   SOCIAL_TWITTER,
@@ -37,17 +36,28 @@ export const meta: MetaFunction = () => [
     title: SITE_NAME,
     viewport: "width=device-width,initial-scale=1",
   },
+  {
+    rel: "icon",
+    href: "/logo-dark.svg",
+    type: "image/svg+xml",
+  },
+  { rel: "shortcut icon", href: "/favicon.ico" },
+  { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" },
+  { rel: "manifest", href: "/manifest.json" },
   { name: "description", content: SITE_DESCRIPTION },
-  { name: "image", content: SITE_EMOJI },
-  { name: "og:image", content: "/opengraph-image" },
+  { name: "theme-color", content: "#111827" },
+  { name: "color-scheme", content: "dark" },
+
+  { name: "image", content: "/logo-bg.svg" },
+  { name: "og:image", content: "/opengraph-image.webp" },
   { name: "og:title", content: SITE_NAME },
   { name: "og:description", content: SITE_DESCRIPTION },
   { name: "og:url", content: SITE_URL },
   { name: "og:type", content: "website" },
   { name: "og:site_name", content: SITE_NAME },
   { name: "og:locale", content: "en_US" },
   { name: "twitter:card", content: "summary_large_image" },
-  { name: "twitter:image", content: "/opengraph-image" },
+  { name: "twitter:image", content: "/opengraph-image.webp" },
   { name: "twitter:title", content: SITE_NAME },
   { name: "twitter:description", content: SITE_DESCRIPTION },
   { name: "twitter:site", content: SOCIAL_TWITTER },

apps/web/src/components/Header.tsx

@@ -1,14 +1,15 @@
 import React from "react";
+import { SITE_NAME } from "../../../../constants";
 import { ConnectButton } from "./ConnectButton";
 
 export default function Header() {
   return (
     <div className="bg-gray-900 py-4">
       <div className="container max-w-4xl mx-auto flex justify-between items-center">
         <div className="flex items-center gap-2">
-          <img src="/logo-light.svg" alt="Council Haus" className="h-10" />
-          <h1 className="text-xl font-bold text-accent tracking-wider">
-            Council Haus
+          <img src="/logo-dark.svg" alt="CouncilHaus" className="h-9" />
+          <h1 className="text-xl font-medium text-accent tracking-wider mt-1">
+            {SITE_NAME}
           </h1>
         </div>
         <ConnectButton />

constants.ts

@@ -1,10 +1,9 @@
-export const SITE_NAME = "Councilhaus";
+export const SITE_NAME = "CouncilHaus";
 export const SITE_DESCRIPTION =
   "Democratically allocate a budget across projects";
-export const SITE_EMOJI = "🏜️";
 export const SITE_URL = "https://council.haus";
 export const SOCIAL_TWITTER = "blossom_labs";
-export const SOCIAL_GITHUB = "BlossomLabs/councilhaus";
+export const SOCIAL_GITHUB = "BlossomLabs/CouncilHaus";
 
 export const DEFAULT_COUNCIL_ADDRESS =
   "0xfa942226e5dd1e2d4d99014982846786b09939da";