Use colored fav icon

common/src/envs/prod.ts

@@ -57,7 +57,7 @@ export const PROD_CONFIG: EnvConfig = {
   adminIds: [
     '0vaZsIJk9zLVOWY4gb61gTrRIU73', // Martin
   ],
-  faviconPath: '/favicon.ico',
+  faviconPath: '/favicon.svg',
 }
 
 export const refreshConfig = () => {

web/components/FavIcon.tsx

@@ -2,12 +2,12 @@ type FavIconProps = {
   className?: string
 }
 
-const FavIcon = ({className}: FavIconProps) => (
+const FavIconBlack = ({className}: FavIconProps) => (
   <img
-    src="https://www.compassmeet.com/favicon.svg"
+    src="https://www.compassmeet.com/favicon-black.svg"
     alt="Compass logo"
     className={`w-12 h-12 ${className ?? ''}`}
   />
 )
 
-export default FavIcon
+export default FavIconBlack

web/components/site-logo.tsx

@@ -1,14 +1,14 @@
 import clsx from 'clsx'
 import {IS_PROD} from 'common/envs/constants'
 import Link from 'next/link'
-import FavIcon from 'web/components/FavIcon'
+import FavIconBlack from 'web/components/FavIcon'
 import {Row} from 'web/components/layout/row'
 
 export default function SiteLogo(props: {noLink?: boolean; className?: string}) {
   const {noLink, className} = props
   const inner = (
     <>
-      <FavIcon className="dark:invert" />
+      <FavIconBlack className="dark:invert" />
       <div className={clsx('my-auto text-xl font-thin logo')}>
         {IS_PROD ? 'Compass' : 'Compass dev'}
       </div>

web/components/widgets/loading-indicator.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import {useEffect, useRef} from 'react'
-import FavIcon from 'web/components/FavIcon'
+import FavIconBlack from 'web/components/FavIcon'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg'
 
@@ -79,7 +79,7 @@ export function CompassLoadingIndicator(props: {
         )}
         role="status"
       >
-        <FavIcon className="dark:invert w-20 h-20" />
+        <FavIconBlack className="dark:invert w-20 h-20" />
       </div>
     </div>
   )

web/pages/_app.tsx

@@ -6,6 +6,7 @@ import {Capacitor} from '@capacitor/core'
 import {Keyboard} from '@capacitor/keyboard'
 import {StatusBar} from '@capacitor/status-bar'
 import clsx from 'clsx'
+import {DEPLOYED_WEB_URL, ENV_CONFIG} from 'common/envs/constants'
 import {IS_VERCEL} from 'common/hosting/constants'
 import {debug} from 'common/logger'
 import type {AppProps} from 'next/app'
@@ -172,12 +173,12 @@ function MyApp(props: AppProps<PageProps>) {
           content={description}
           key="description2"
         />
-        <meta property="og:url" content="https://compassmeet.com" key="url" />
+        <meta property="og:url" content={DEPLOYED_WEB_URL} key="url" />
         <meta property="og:site_name" content="Compass" />
         <meta name="twitter:card" content="summary" key="card" />
         {/*<meta name="twitter:site" content="@compassmeet"/>*/}
-        <meta name="twitter:image" content="https://www.compassmeet.com/favicon.ico" key="image2" />
-        <meta property="og:image" content="https://www.compassmeet.com/favicon.ico" key="image1" />
+        <meta name="twitter:image" content={ENV_CONFIG.faviconPath} key="image2" />
+        <meta property="og:image" content={ENV_CONFIG.faviconPath} key="image1" />
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no, viewport-fit=cover"

web/pages/_document.tsx

@@ -32,7 +32,7 @@ export default function Document() {
         {/*/!* Link to your manifest *!/*/}
         <link rel="manifest" href="/manifest.json" />
         {/*/!* App icons *!/*/}
-        <link rel="apple-touch-icon" href="https://www.compassmeet.com/favicon.ico" />
+        <link rel="apple-touch-icon" href={ENV_CONFIG.faviconPath} />
 
         <Script src="/init-theme.js" strategy="beforeInteractive" />
         {IS_DEPLOYED && (

web/pages/api/og/profile.tsx

@@ -83,7 +83,7 @@ function OgProfile(props: ogProps) {
             </div>
           )}
           {/*<div style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start'}}>*/}
-          {/*  <img src={'https://www.compassmeet.com/favicon.svg'} width={100} height={100} />*/}
+          {/*  <img src={'https://www.compassmeet.com/favicon-black.svg'} width={100} height={100} />*/}
           {/*</div>*/}
           {allTags && (
             <div style={{display: 'flex', gap: '10px', flexWrap: 'wrap'}}>

web/pages/register.tsx

@@ -7,7 +7,7 @@ import {useSearchParams} from 'next/navigation'
 import React, {Suspense, useState} from 'react'
 import toast from 'react-hot-toast'
 import {GoogleButton} from 'web/components/buttons/sign-up-button'
-import FavIcon from 'web/components/FavIcon'
+import FavIconBlack from 'web/components/FavIcon'
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
 import {auth} from 'web/lib/firebase/users'
@@ -169,7 +169,7 @@ function RegisterComponent() {
                 {/*  The project is still in development...*/}
                 {/*</h2>*/}
                 <div className="flex justify-center mb-6">
-                  <FavIcon className="dark:invert" />
+                  <FavIconBlack className="dark:invert" />
                 </div>
                 <h2 className="mt-6 text-center text-3xl font-extrabold ">
                   {t('register.get_started', 'Get Started')}

web/pages/signin.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link'
 import {useSearchParams} from 'next/navigation'
 import React, {Suspense, useEffect, useState} from 'react'
 import {GoogleButton} from 'web/components/buttons/sign-up-button'
-import FavIcon from 'web/components/FavIcon'
+import FavIconBlack from 'web/components/FavIcon'
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
 import {useUser} from 'web/hooks/use-user'
@@ -131,7 +131,7 @@ function RegisterComponent() {
         <div className="max-w-md w-full space-y-8">
           <div>
             <div className="flex justify-center mb-6">
-              <FavIcon className="dark:invert" />
+              <FavIconBlack className="dark:invert" />
             </div>
             <h2 className="mt-6 text-center text-3xl font-extrabold ">
               {t('signin.title', 'Sign in')}