From 9a159e5787871ca0d9ca6d96167d9f9c71fa81c0 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Mon, 5 Sep 2022 18:59:59 -0500
Subject: [PATCH] feat: improve home screen display

---
 src/Bootstrap.tsx                             |  6 +-
 .../PeerNameDisplay/PeerNameDisplay.tsx       |  6 +-
 src/components/Shell/Shell.tsx                |  6 +-
 src/pages/Home/Home.tsx                       | 85 ++++++++++++++-----
 4 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index ce5226f..c6fec72 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -75,7 +75,11 @@ function Bootstrap({
           {hasLoadedSettings ? (
             <Routes>
               {['/', '/index.html'].map(path => (
-                <Route key={path} path={path} element={<Home />} />
+                <Route
+                  key={path}
+                  path={path}
+                  element={<Home userId={userId} />}
+                />
               ))}
               <Route
                 path="/public/:roomId"
diff --git a/src/components/PeerNameDisplay/PeerNameDisplay.tsx b/src/components/PeerNameDisplay/PeerNameDisplay.tsx
index 3342b69..10d5186 100644
--- a/src/components/PeerNameDisplay/PeerNameDisplay.tsx
+++ b/src/components/PeerNameDisplay/PeerNameDisplay.tsx
@@ -9,5 +9,9 @@ export const PeerNameDisplay = ({
   children,
   ...rest
 }: PeerNameDisplayProps) => {
-  return <Typography {...rest}>{funAnimalName(children)}</Typography>
+  return (
+    <Typography component="span" {...rest}>
+      {funAnimalName(children)}
+    </Typography>
+  )
 }
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 7f3b7a4..5a13a59 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -281,12 +281,12 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
                   padding: '1em 1.5em',
                 }}
                 primary={
-                  <>
-                    <Typography>Your user name: </Typography>
+                  <Typography>
+                    Your user name:{' '}
                     <PeerNameDisplay sx={{ fontWeight: 'bold' }}>
                       {userPeerId}
                     </PeerNameDisplay>
-                  </>
+                  </Typography>
                 }
               />
             </ListItem>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index c55a6a3..6bf3028 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -5,11 +5,21 @@ import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 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 GitHubIcon from '@mui/icons-material/GitHub'
+import Tooltip from '@mui/material/Tooltip'
 import { v4 as uuid } from 'uuid'
 
 import { ShellContext } from 'contexts/ShellContext'
+import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
-export function Home() {
+interface HomeProps {
+  userId: string
+}
+
+export function Home({ userId }: HomeProps) {
   const { setTitle } = useContext(ShellContext)
   const [roomName, setRoomName] = useState(uuid())
   const navigate = useNavigate()
@@ -29,27 +39,25 @@ export function Home() {
   }
 
   return (
-    <Box className="Home px-4">
-      <header className="max-w-3xl text-center mx-auto mt-8">
-        <Typography variant="body1">
-          This is a communication tool that is free, open source, and designed
-          for maximum security. All communication between you and your online
-          peers is encrypted and ephemeral.
-        </Typography>
-        <Typography variant="body1">
-          chitchatter is still a work in progress and not yet ready to be used!
-        </Typography>
-      </header>
-      <main className="mt-8 max-w-3xl text-center mx-auto">
+    <Box className="Home">
+      <main className="mt-6 px-4 max-w-3xl text-center mx-auto">
         <form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">
+          <Typography sx={{ mb: 2 }}>
+            Your user name:{' '}
+            <PeerNameDisplay paragraph={false} sx={{ fontWeight: 'bold' }}>
+              {userId}
+            </PeerNameDisplay>
+          </Typography>
           <FormControl fullWidth>
-            <TextField
-              label="Room name"
-              variant="outlined"
-              value={roomName}
-              onChange={handleRoomNameChange}
-              size="medium"
-            />
+            <Tooltip title="Default room names are randomly generated client-side">
+              <TextField
+                label="Room name"
+                variant="outlined"
+                value={roomName}
+                onChange={handleRoomNameChange}
+                size="medium"
+              />
+            </Tooltip>
           </FormControl>
           <Button
             variant="contained"
@@ -58,10 +66,45 @@ export function Home() {
               marginTop: 2,
             }}
           >
-            Go to public room
+            Go to chat room
           </Button>
         </form>
       </main>
+      <Divider sx={{ my: 2 }} />
+      <Box className="max-w-3xl text-center mx-auto px-4">
+        <Typography variant="body1">
+          This is a communication tool that is free, open source, and designed
+          for simplicity and security. All communication between you and your
+          online peers is encrypted and ephemeral.
+        </Typography>
+      </Box>
+      <Tooltip title="View project source code and documentation">
+        <Link
+          href="https://github.com/jeremyckahn/chitchatter#readme"
+          target="_blank"
+          sx={{ display: 'block', textAlign: 'center', color: '#fff' }}
+        >
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="Open menu"
+            sx={{ mx: 'auto' }}
+          >
+            <GitHubIcon sx={{ fontSize: '2em' }} />
+          </IconButton>
+        </Link>
+      </Tooltip>
+      <Typography variant="body1" sx={{ textAlign: 'center' }}>
+        Licensed under{' '}
+        <Link
+          href="https://github.com/jeremyckahn/chitchatter/blob/develop/LICENSE"
+          target="_blank"
+        >
+          GPL v2
+        </Link>
+        .
+      </Typography>
     </Box>
   )
 }