diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index af5d4a9..ed31ddf 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -5,8 +5,9 @@ import localforage from 'localforage'
import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
import { SettingsContext } from 'contexts/SettingsContext'
-import { Home } from 'pages/Home/'
-import { PublicRoom } from 'pages/PublicRoom/'
+import { Home } from 'pages/Home'
+import { About } from 'pages/About'
+import { PublicRoom } from 'pages/PublicRoom'
import { UserSettings } from 'models/settings'
import { PersistedStorageKeys } from 'models/storage'
import { Shell } from 'components/Shell'
@@ -91,6 +92,7 @@ function Bootstrap({
element={}
/>
))}
+ } />
}
diff --git a/src/components/Shell/Drawer.tsx b/src/components/Shell/Drawer.tsx
index d8ebccc..25eb182 100644
--- a/src/components/Shell/Drawer.tsx
+++ b/src/components/Shell/Drawer.tsx
@@ -13,6 +13,7 @@ import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import Home from '@mui/icons-material/Home'
+import QuestionMark from '@mui/icons-material/QuestionMark'
import Brightness4Icon from '@mui/icons-material/Brightness4'
import Brightness7Icon from '@mui/icons-material/Brightness7'
@@ -27,6 +28,7 @@ export interface DrawerProps extends PropsWithChildren {
isDrawerOpen: boolean
onDrawerClose: () => void
onHomeLinkClick: () => void
+ onAboutLinkClick: () => void
theme: Theme
userPeerId: string
}
@@ -35,6 +37,7 @@ export const Drawer = ({
isDrawerOpen,
onDrawerClose,
onHomeLinkClick,
+ onAboutLinkClick,
theme,
userPeerId,
}: DrawerProps) => {
@@ -97,6 +100,16 @@ export const Drawer = ({
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 536077a..f4a4560 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -103,6 +103,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
setIsDrawerOpen(false)
}
+ const handleAboutLinkClick = () => {
+ setIsDrawerOpen(false)
+ }
+
return (
@@ -133,6 +137,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
isDrawerOpen={isDrawerOpen}
onDrawerClose={handleDrawerClose}
onHomeLinkClick={handleHomeLinkClick}
+ onAboutLinkClick={handleAboutLinkClick}
theme={theme}
userPeerId={userPeerId}
/>
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
new file mode 100644
index 0000000..bf66f93
--- /dev/null
+++ b/src/pages/About/About.tsx
@@ -0,0 +1,97 @@
+import { useContext, useEffect } from 'react'
+import Link from '@mui/material/Link'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+
+import { messageCharacterSizeLimit } from 'config/messaging'
+import { ShellContext } from 'contexts/ShellContext'
+
+export const About = () => {
+ const { setTitle } = useContext(ShellContext)
+
+ useEffect(() => {
+ setTitle('About')
+ }, [setTitle])
+
+ return (
+
+
+ Chitchatter is a communication tool designed to make secure and private
+ communication accessible to all. Please{' '}
+
+ see the README
+ {' '}
+ for full project documentation.
+
+
+ ({
+ fontSize: theme.typography.h3.fontSize,
+ fontWeight: theme.typography.fontWeightMedium,
+ mb: 2,
+ })}
+ >
+ User Guide
+
+ ({
+ fontSize: theme.typography.h5.fontSize,
+ fontWeight: theme.typography.fontWeightMedium,
+ mb: 1.5,
+ })}
+ >
+ Chat rooms
+
+
+ Public rooms can be joined by anyone with the room URL.
+ By default, rooms are given a random and un-guessable name. You can name
+ your room whatever you'd like, but keep in mind that simpler room names
+ are more guessable by others. For maximum security, consider using the
+ default room name.
+
+
+ To connect to others, share the room URL with a secure tool such as{' '}
+
+ Burner Note
+ {' '}
+ or{' '}
+
+ Yopass
+
+ . You will be notified when others join the room.
+
+
+ Chat message transcripts are erased as soon as you close the page or
+ navigate away from the room.
+
+ ({
+ fontSize: theme.typography.h5.fontSize,
+ fontWeight: theme.typography.fontWeightMedium,
+ mb: 1.5,
+ })}
+ >
+ Message Authoring
+
+
+ Chat messages support{' '}
+
+ GitHub-flavored Markdown
+
+ .
+
+
+ Press Enter to send a message. Press{' '}
+ Shift + Enter to insert a line break. Message size is
+ limited to {messageCharacterSizeLimit.toLocaleString()} characters.
+
+
+ )
+}
diff --git a/src/pages/About/index.ts b/src/pages/About/index.ts
new file mode 100644
index 0000000..d5d9b8d
--- /dev/null
+++ b/src/pages/About/index.ts
@@ -0,0 +1 @@
+export * from './About'
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index e153868..16d93e1 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useContext, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'
import FormControl from '@mui/material/FormControl'
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography'
import TextField from '@mui/material/TextField'
import Divider from '@mui/material/Divider'
import IconButton from '@mui/material/IconButton'
-import Link from '@mui/material/Link'
+import MuiLink from '@mui/material/Link'
import GitHubIcon from '@mui/icons-material/GitHub'
import Tooltip from '@mui/material/Tooltip'
import { v4 as uuid } from 'uuid'
@@ -42,7 +42,9 @@ export function Home({ userId }: HomeProps) {
return (
-
+
+
+
-
-
+
Licensed under{' '}
-
GPL v2
-
+
. Please{' '}
-
read the docs
-
+
.