Add socials and organization pages

common/src/constants.ts

@@ -2,7 +2,7 @@ export const MAX_INT = 99999
 export const MIN_INT = -MAX_INT
 
 export const supportEmail = 'hello@compassmeet.com';
-export const marketingEmail = 'hello@compassmeet.com';
+// export const marketingEmail = 'hello@compassmeet.com';
 
 export const githubRepo = "https://github.com/CompassConnections/Compass";
 export const githubIssues = `${githubRepo}/issues`
@@ -11,6 +11,8 @@ export const paypalLink = "https://www.paypal.com/paypalme/CompassConnections"
 export const patreonLink = "https://patreon.com/CompassMeet"
 export const discordLink = "https://discord.gg/8Vd7jzqjun"
 export const stoatLink = "https://stt.gg/YKQp81yA"
+export const redditLink = "https://www.reddit.com/r/CompassConnect"
+export const xLink = "https://x.com/compassmeet"
 export const formLink = "https://forms.gle/tKnXUMAbEreMK6FC6"
 
 export const pStyle = "mt-1 text-gray-800 dark:text-white whitespace-pre-line";

web/components/love-page.tsx

@@ -1,6 +1,8 @@
 import {HomeIcon, QuestionMarkCircleIcon} from '@heroicons/react/outline'
 import {
+  GlobeAltIcon,
   HomeIcon as SolidHomeIcon,
+  LinkIcon,
   QuestionMarkCircleIcon as SolidQuestionIcon,
   UserCircleIcon,
 } from '@heroicons/react/solid'
@@ -44,13 +46,11 @@ export function LovePage(props: {
   const profile = useProfile()
   const bottomNavOptions = user
     ? getBottomNavigation(user, profile)
-    : signedOutNavigation()
+    : getBottomSignedOutNavigation()
   // const [isModalOpen, setIsModalOpen] = useState(false)
-  const desktopSidebarOptions = getDesktopNav(user)
+  const desktopSidebarOptions = getDesktopNavigation(user)
 
-  const mobileSidebarOptions = user
-    ? getSidebarNavigation(() => setIsAddFundsModalOpen(true))
-    : []
+  const mobileSidebarOptions = getMobileSidebar(() => setIsAddFundsModalOpen(true))
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   trackPageView && useTracking(`view love ${trackPageView}`, trackPageProps)
@@ -59,7 +59,7 @@ export function LovePage(props: {
 
   return (
     <>
-      <GoogleOneTapLogin className="fixed bottom-12 right-4 z-[1000]" />
+      <GoogleOneTapLogin className="fixed bottom-12 right-4 z-[1000]"/>
       <Col
         className={clsx(
           'pb-[58px] lg:pb-0', // bottom bar padding
@@ -71,16 +71,17 @@ export function LovePage(props: {
           containerClassName="!bottom-[70px]"
         />
         {/* Maintenance banner */}
-        {IS_MAINTENANCE && <div className="lg:col-span-12 w-full bg-orange-500 text-white text-center text-sm py-2 px-3">
-          Maintenance in progress: Some features may be broken for the next few hours.
-        </div>}
+        {IS_MAINTENANCE &&
+            <div className="lg:col-span-12 w-full bg-orange-500 text-white text-center text-sm py-2 px-3">
+                Maintenance in progress: Some features may be broken for the next few hours.
+            </div>}
         {hideSidebar ? (
-          <div className="lg:col-span-2 lg:flex" />
+          <div className="lg:col-span-2 lg:flex"/>
         ) : (
           <Sidebar
             navigationOptions={desktopSidebarOptions}
             className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-25"
-            />
+          />
         )}
         <main
           className={clsx(
@@ -102,14 +103,23 @@ export function LovePage(props: {
   )
 }
 
-const Profiles = { name: 'Profiles', href: '/', icon: SolidHomeIcon };
-const ProfilesHome = { name: 'Profiles', href: '/', icon: HomeIcon };
-const faq = { name: 'FAQ', href: '/faq', icon: SolidQuestionIcon };
-const About = { name: 'About', href: '/about', icon: QuestionMarkCircleIcon };
-const Signin = { name: 'Sign in', href: '/signin', icon: UserCircleIcon };
+const Profiles = {name: 'Profiles', href: '/', icon: SolidHomeIcon};
+const ProfilesHome = {name: 'Profiles', href: '/', icon: HomeIcon};
+const faq = {name: 'FAQ', href: '/faq', icon: SolidQuestionIcon};
+const About = {name: 'About', href: '/about', icon: QuestionMarkCircleIcon};
+const Signin = {name: 'Sign in', href: '/signin', icon: UserCircleIcon};
 const Notifs = {name: 'Notifs', href: `/notifications`, icon: NotificationsIcon};
 const NotifsSolid = {name: 'Notifs', href: `/notifications`, icon: SolidNotificationsIcon};
 const Messages = {name: 'Messages', href: '/messages', icon: PrivateMessagesIcon};
+const Social = {name: 'Social', href: '/social', icon: LinkIcon};
+const Organization = {name: 'Organization', href: '/organization', icon: GlobeAltIcon};
+
+const base = [
+  About,
+  faq,
+  Social,
+  Organization,
+]
 
 function getBottomNavigation(user: User, profile: Profile | null | undefined) {
   return buildArray(
@@ -130,33 +140,28 @@ function getBottomNavigation(user: User, profile: Profile | null | undefined) {
   )
 }
 
-const signedOutNavigation = () => [
+const getBottomSignedOutNavigation = () => [
   Profiles,
   About,
-  faq,
   Signin,
 ]
-const getDesktopNav = (user: User | null | undefined) => {
+
+const getDesktopNavigation = (user: User | null | undefined) => {
   if (user)
     return buildArray(
       ProfilesHome,
       Notifs,
       Messages,
-      About,
-      faq
+      ...base,
     )
 
   return buildArray(
-    // { name: 'Profiles', href: '/', icon: HomeIcon },
-    About,
-    faq
+    ...base
   )
 }
 
-// No sidebar when signed out
-const getSidebarNavigation = (_toggleModal: () => void) => {
+const getMobileSidebar = (_toggleModal: () => void) => {
   return buildArray(
-    About,
-    faq
+    ...base,
   )
 }

web/components/nav/love-bottom-nav-bar.tsx

@@ -1,18 +1,18 @@
 import Link from 'next/link'
 import clsx from 'clsx'
-import { MenuAlt3Icon } from '@heroicons/react/solid'
-import { Transition, Dialog } from '@headlessui/react'
-import { useState, Fragment } from 'react'
-import { useRouter } from 'next/router'
+import {MenuAlt3Icon} from '@heroicons/react/solid'
+import {Dialog, Transition} from '@headlessui/react'
+import {Fragment, useState} from 'react'
+import {useRouter} from 'next/router'
 import Sidebar from './love-sidebar'
-import { Item } from './love-sidebar-item'
-import { useUser } from 'web/hooks/use-user'
-import { Avatar } from 'web/components/widgets/avatar'
-import { useIsIframe } from 'web/hooks/use-is-iframe'
-import { trackCallback } from 'web/lib/service/analytics'
-import { User } from 'common/user'
-import { Col } from 'web/components/layout/col'
-import { useProfile } from 'web/hooks/use-profile'
+import {Item} from './love-sidebar-item'
+import {useUser} from 'web/hooks/use-user'
+import {Avatar} from 'web/components/widgets/avatar'
+import {useIsIframe} from 'web/hooks/use-is-iframe'
+import {trackCallback} from 'web/lib/service/analytics'
+import {User} from 'common/user'
+import {Col} from 'web/components/layout/col'
+import {useProfile} from 'web/hooks/use-profile'
 
 const itemClass =
   'sm:hover:bg-ink-200 block w-full py-1 px-3 text-center sm:hover:text-primary-700 transition-colors'
@@ -24,7 +24,7 @@ export function BottomNavBar(props: {
   navigationOptions: Item[]
   sidebarNavigationOptions: Item[]
 }) {
-  const { navigationOptions, sidebarNavigationOptions } = props
+  const {navigationOptions, sidebarNavigationOptions} = props
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
   const router = useRouter()
@@ -38,7 +38,8 @@ export function BottomNavBar(props: {
   }
 
   return (
-    <nav className="border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav">
+    <nav
+      className="border-ink-200 dark:border-ink-300 text-ink-700 bg-canvas-50 fixed inset-x-0 bottom-0 z-50 flex select-none items-center justify-between border-t-2 text-xs lg:hidden sidebar-nav">
       {navigationOptions.map((item) => (
         <NavBarItem
           key={item.name}
@@ -47,26 +48,22 @@ export function BottomNavBar(props: {
           user={user}
         />
       ))}
-      {!!user && (
-        <>
-          <div
-            className={clsx(
-              itemClass,
-              'relative',
-              sidebarOpen ? selectedItemClass : ''
-            )}
-            onClick={() => setSidebarOpen(true)}
-          >
-            <MenuAlt3Icon className="mx-auto my-1 h-6 w-6" aria-hidden="true" />
-            More
-          </div>
-          <MobileSidebar
-            sidebarOpen={sidebarOpen}
-            setSidebarOpen={setSidebarOpen}
-            sidebarNavigationOptions={sidebarNavigationOptions}
-          />
-        </>
-      )}
+      <div
+        className={clsx(
+          itemClass,
+          'relative',
+          sidebarOpen ? selectedItemClass : ''
+        )}
+        onClick={() => setSidebarOpen(true)}
+      >
+        <MenuAlt3Icon className="mx-auto my-1 h-6 w-6" aria-hidden="true"/>
+        More
+      </div>
+      <MobileSidebar
+        sidebarOpen={sidebarOpen}
+        setSidebarOpen={setSidebarOpen}
+        sidebarNavigationOptions={sidebarNavigationOptions}
+      />
     </nav>
   )
 }
@@ -79,7 +76,7 @@ function ProfileItem(props: {
   currentPage: string
   track: () => void
 }) {
-  const { user, item, touched, setTouched, currentPage, track } = props
+  const {user, item, touched, setTouched, currentPage, track} = props
   const profile = useProfile()
   return (
     <Link
@@ -114,7 +111,7 @@ function NavBarItem(props: {
   user?: User | null
   className?: string
 }) {
-  const { item, currentPage, children, user } = props
+  const {item, currentPage, children, user} = props
   const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`)
   const [touched, setTouched] = useState(false)
   if (item.name === 'Profile' && user) {
@@ -141,7 +138,7 @@ function NavBarItem(props: {
         onTouchStart={() => setTouched(true)}
         onTouchEnd={() => setTouched(false)}
       >
-        {item.icon && <item.icon className="mx-auto my-1 h-6 w-6" />}
+        {item.icon && <item.icon className="mx-auto my-1 h-6 w-6"/>}
         {children}
         {item.name}
       </button>
@@ -163,7 +160,7 @@ function NavBarItem(props: {
       onTouchStart={() => setTouched(true)}
       onTouchEnd={() => setTouched(false)}
     >
-      {item.icon && <item.icon className="mx-auto my-1 h-6 w-6" />}
+      {item.icon && <item.icon className="mx-auto my-1 h-6 w-6"/>}
       {children}
       {item.name}
     </Link>
@@ -176,7 +173,7 @@ export function MobileSidebar(props: {
   setSidebarOpen: (open: boolean) => void
   sidebarNavigationOptions: Item[]
 }) {
-  const { sidebarOpen, sidebarNavigationOptions, setSidebarOpen } = props
+  const {sidebarOpen, sidebarNavigationOptions, setSidebarOpen} = props
   return (
     <div>
       <Transition.Root show={sidebarOpen} as={Fragment}>
@@ -195,7 +192,7 @@ export function MobileSidebar(props: {
             leaveTo="opacity-0"
           >
             {/* background cover */}
-            <Dialog.Overlay className="bg-canvas-100/75 fixed inset-0" />
+            <Dialog.Overlay className="bg-canvas-100/75 fixed inset-0"/>
           </Transition.Child>
           <Transition.Child
             as={Fragment}

web/pages/organization.tsx

@@ -0,0 +1,38 @@
+import {LovePage} from 'web/components/love-page'
+
+
+export const Block = (props: {
+  url: string
+  content: string
+}) => {
+  const {url, content} = props
+  return <div className="rounded-xl shadow p-6 flex flex-col items-center">
+    <a
+      href={url}
+      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+      target="_blank" rel="noopener noreferrer">
+      {content}
+    </a>
+  </div>;
+}
+
+export default function Organization() {
+  return (
+    <LovePage trackPageView={'social'}>
+      <div className="text-gray-600 dark:text-white min-h-screen p-6">
+        <div className="w-full">
+          <div className="relative py-8 mt-12 overflow-hidden">
+            <div className="relative z-10 max-w-3xl mx-auto px-4">
+              <h3 className="text-4xl font-bold text-center mt-8 mb-8">Organization</h3>
+              <Block url={'/support'} content={'Support'}/>
+              <Block url={'/constitution'} content={'Constitution'}/>
+              <Block url={'/financials'} content={'Financials'}/>
+              <Block url={'/terms'} content={'Terms and Conditions'}/>
+              <Block url={'/privacy'} content={'Privacy Policy'}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LovePage>
+  )
+}

web/pages/social.tsx

@@ -0,0 +1,39 @@
+import {LovePage} from 'web/components/love-page'
+import {discordLink, githubRepo, redditLink, stoatLink, xLink} from "common/constants";
+
+
+export const Block = (props: {
+  url: string
+  content: string
+}) => {
+  const {url, content} = props
+  return <div className="rounded-xl shadow p-6 flex flex-col items-center">
+    <a
+      href={url}
+      className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
+      target="_blank" rel="noopener noreferrer">
+      {content}
+    </a>
+  </div>;
+}
+
+export default function Social() {
+  return (
+    <LovePage trackPageView={'social'}>
+      <div className="text-gray-600 dark:text-white min-h-screen p-6">
+        <div className="w-full">
+          <div className="relative py-8 mt-12 overflow-hidden">
+            <div className="relative z-10 max-w-3xl mx-auto px-4">
+              <h3 className="text-4xl font-bold text-center mt-8 mb-8">Social</h3>
+              <Block url={discordLink} content={'Discord'}/>
+              <Block url={stoatLink} content={'Revolt / Stoat'}/>
+              <Block url={redditLink} content={'Reddit'}/>
+              <Block url={githubRepo} content={'GitHub'}/>
+              <Block url={xLink} content={'X'}/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </LovePage>
+  )
+}