team chat is now functional

src/app/HeaderButtons.tsx

@@ -1,13 +1,17 @@
-import { Chat } from "@mui/icons-material";
-import { Box, IconButton, Theme, Tooltip, useTheme } from "@mui/material";
+import { Chat as ChatIcon, ChevronRight } from "@mui/icons-material";
+import { Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import Chat from "chat/Chat";
+import { useMobile } from "hooks";
 import { Team, User } from "models";
 import moment from "moment";
+import { pond } from "protobuf-ts/pond";
 import { useEffect, useState } from "react";
-import { getSignatureAccentColour, hasTransparentLogoBG } from "services/whiteLabel";
+import { getSignatureAccentColour } from "services/whiteLabel";
 
 const useStyles = makeStyles((theme: Theme) => ({
   button: {
+    color: getSignatureAccentColour(),
     width: theme.spacing(6),
     height: theme.spacing(6),
     marginTop: "auto",
@@ -28,6 +32,25 @@ const useStyles = makeStyles((theme: Theme) => ({
   off: {
     backgroundColor: "transparent"
   },
+  chatDrawer: {
+    padding: theme.spacing(1),
+    height: "100%",
+    minWidth: theme.spacing(54),
+    maxWidth: theme.spacing(54)
+  },
+  chatDrawerMobile: {
+    padding: theme.spacing(1),
+    height: "auto",
+    width: "100%"
+  },
+  drawerHeader: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: "flex-start"
+  }
 }))
 
 interface Props {
@@ -37,12 +60,13 @@ interface Props {
 }
 
 export default function HeaderButtons(props: Props) {
-  const {hasTeams, user, team} = props
+  const {hasTeams, /*user,*/ team} = props
   const [hasNewChats, setHasNewChats] = useState(false);
   const [chatDrawerOpen, setChatDrawerOpen] = useState(false);
 
   // const theme = useTheme();
   const classes = useStyles();
+  const isMobile = useMobile();
 
   useEffect(() => {
     if (!team) return;
@@ -74,7 +98,7 @@ export default function HeaderButtons(props: Props) {
               setChatDrawerOpen(true);
               setHasNewChats(false);
             }}>
-            <Chat />
+            <ChatIcon />
           </IconButton>
         </Tooltip>
 
@@ -92,7 +116,27 @@ export default function HeaderButtons(props: Props) {
   }
 
   return (
-    chatButton()
+    <>
+    {chatButton()}
+    {team && team.settings && team.settings.key && (
+      <Drawer
+        anchor="right"
+        open={chatDrawerOpen}
+        onClose={() => setChatDrawerOpen(false)}
+        style={{ height: "100%", maxWidth: "100%" }}
+        title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
+        <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+          <div className={classes.drawerHeader}>
+            <IconButton onClick={() => setChatDrawerOpen(false)}>
+              <ChevronRight />
+            </IconButton>
+            <Typography>{team.name()} Chat</Typography>
+          </div>
+          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+        </div>
+      </Drawer>
+    )}
+    </>
   )
 
   // return (