chat input now always sits at the bottom of the chat; has a divider

src/app/HeaderButtons.tsx

@@ -1,12 +1,9 @@
-import { Chat as ChatIcon, ChevronRight } from "@mui/icons-material";
-import { Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { Chat as ChatIcon } from "@mui/icons-material";
+import { Box, IconButton, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import Chat from "chat/Chat";
 import { ChatDrawer } from "chat/ChatDrawer";
-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 } from "services/whiteLabel";
 
@@ -33,18 +30,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   off: {
     backgroundColor: "transparent"
   },
-  chatDrawer: {
-    padding: theme.spacing(1),
-    height: "100%",
-    minWidth: theme.spacing(54),
-    maxWidth: theme.spacing(54),
-    zIndex: 1000000000000
-  },
-  chatDrawerMobile: {
-    padding: theme.spacing(1),
-    height: "auto",
-    width: "100%"
-  },
   drawerHeader: {
     display: "flex",
     alignItems: "center",
@@ -65,10 +50,7 @@ export default function HeaderButtons(props: 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;
@@ -109,7 +91,6 @@ export default function HeaderButtons(props: Props) {
             width="8px"
             height="8px"
             borderRadius="50%"
-            // style={{ backgroundColor: theme.palette.primary.main }}
             className={classes.on}
           />
         )}
@@ -126,74 +107,7 @@ export default function HeaderButtons(props: Props) {
         onClose={() => setChatDrawerOpen(false)}
         team={team}
       />
-      // <Drawer
-      //   anchor="right"
-      //   open={chatDrawerOpen}
-      //   sx={{ zIndex: 10000 }}
-      //   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 (
-  //   {user.settings?.notificationMethods?.includes(
-  //     pond.NotificationMethod.NOTIFICATION_METHOD_APP
-  //   ) && (
-  //     <div style={{ position: "relative", marginLeft: theme.spacing(-1) }}>
-  //       <Tooltip title="Notifications">
-  //         <IconButton
-  //           style={{ marginLeft: theme.spacing(1) }}
-  //           onClick={() => {
-  //             setNotificationDrawerOpen(true);
-  //           }}>
-  //           <Notifications />
-  //         </IconButton>
-  //       </Tooltip>
-  //       {hasNewNotifications && (
-  //         <Box
-  //           width="8px"
-  //           height="8px"
-  //           borderRadius="50%"
-  //           style={{ backgroundColor: theme.palette.primary.main }}
-  //           className={classes.on}
-  //         />
-  //       )}
-  //     </div>
-  //   )}
-  //   {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)}>
-  //             <ChevronRightIcon />
-  //           </IconButton>
-  //           <Typography>{team.name()} Chat</Typography>
-  //         </div>
-  //         <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
-  //       </div>
-  //     </Drawer>
-  //   )}
-  //   <NotificationDrawer
-  //     setNotificationDrawerOpen={setNotificationDrawerOpen}
-  //     notificationDrawerOpen={notificationDrawerOpen}
-  //   />
-  // )
 }