Feature/ntgl 820 create friend group modal

client/src/components/navbar/Navbar.tsx

@@ -12,6 +12,7 @@ import Changelog from './Changelog';
 import CustomModal from './CustomModal';
 import Privacy from './Privacy';
 import Settings from './Settings';
+import AddGroupButton from '../sidebar/addGroupDialog/AddGroupDialog';
 
 const LogoImg = styled('img')`
   height: 46px;
@@ -82,6 +83,7 @@ const Navbar: React.FC = () => {
             content={<Privacy />}
           />
           <CustomModal title="Settings" showIcon={<SettingsIcon />} description={'Settings'} content={<Settings />} />
+          <AddGroupButton />
         </Toolbar>
       </StyledNavBar>
     </NavbarBox>

client/src/components/sidebar/addGroupDialog/AddGroupDialog.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Add as AddIcon } from '@mui/icons-material';
+import { Dialog, IconButton, Tooltip } from '@mui/material';
+import AddGroupDialogActions from './AddGroupDialogActions';
+import AddGroupDialogTitle from './AddGroupDialogTitle';
+import AddGroupDialogContent from './AddGroupDialogContent';
+
+
+export interface FriendType {
+  name: string;
+  zID: number;
+}
+
+const AddGroupDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [groupName, setGroupName] = useState('');
+  const [selectedFriends, setSelectedFriends] = useState<FriendType[]>([]);
+  const [groupImageURL, setGroupImageURL] = useState('');
+
+  const handleCreateGroup = () => {
+    // TODO call API
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setGroupName('');
+    setSelectedFriends([]);
+    setGroupImageURL('');
+  };
+
+  return (
+    <>
+      <Tooltip title="Add a Group">
+        <IconButton color="inherit" onClick={() => setIsOpen(true)}>
+          <AddIcon />
+        </IconButton>
+      </Tooltip>
+
+      <Dialog disableScrollLock onClose={handleClose} open={isOpen} fullWidth maxWidth="sm">
+        <AddGroupDialogTitle handleClose={handleClose} />
+        <AddGroupDialogContent
+          groupImageURL={groupImageURL}
+          setGroupImageURL={setGroupImageURL}
+          setGroupName={setGroupName}
+          setSelectedFriends={setSelectedFriends}
+        />
+        <AddGroupDialogActions handleClose={handleClose} handleCreateGroup={handleCreateGroup} />
+      </Dialog>
+    </>
+  );
+};
+
+export default AddGroupDialog;

client/src/components/sidebar/addGroupDialog/AddGroupDialogActions.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button, DialogActions } from '@mui/material';
+import { styled } from '@mui/system';
+
+
+const StyledDialogActions = styled(DialogActions)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  padding: 0px 60px 30px 0px;
+`;
+
+interface AddGroupDialogActionsProps {
+  handleClose: () => void;
+  handleCreateGroup: () => void;
+}
+
+const AddGroupDialogActions: React.FC<AddGroupDialogActionsProps> = ({ handleClose, handleCreateGroup }) => {
+  return (
+    <StyledDialogActions>
+      <Button variant="text" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button variant="contained" onClick={handleCreateGroup}>
+        Create
+      </Button>
+    </StyledDialogActions>
+  );
+};
+
+export default AddGroupDialogActions;

client/src/components/sidebar/addGroupDialog/AddGroupDialogContent.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { CheckCircle as CheckCircleIcon, RadioButtonUnchecked as RadioButtonUncheckedIcon } from '@mui/icons-material';
+import { Autocomplete, Checkbox, Chip, DialogContent, TextField, Tooltip } from '@mui/material';
+import { styled } from '@mui/system';
+import EditImagePopOver from './EditImagePopOver';
+import { friends } from './dummyData';
+import { FriendType } from './AddGroupDialog';
+
+
+const StyledDialogContent = styled(DialogContent)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  padding: 40px 60px;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Circle = `
+  width: 150px;
+  height: 150px;
+  border-radius: 999px;
+`;
+
+const CircleOutline = styled('div')`
+  ${Circle}
+  border: 1px solid gray;
+`;
+
+const CircleImage = styled('img')`
+  ${Circle}
+  object-fit: cover;
+`;
+
+const StyledUploadImageContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+interface AddGroupDialoContentProps {
+  groupImageURL: string;
+  setGroupImageURL: (url: string) => void;
+  setGroupName: (groupName: string) => void;
+  setSelectedFriends: (friends: FriendType[]) => void;
+}
+
+const AddGroupDialogContent: React.FC<AddGroupDialoContentProps> = ({
+  groupImageURL,
+  setGroupImageURL,
+  setGroupName,
+  setSelectedFriends,
+}) => {
+  return (
+    <StyledDialogContent>
+      <StyledUploadImageContainer>
+        <label>
+          <CircleOutline>{<CircleImage src={groupImageURL} />}</CircleOutline>
+        </label>
+        <EditImagePopOver groupImageURL={groupImageURL} setGroupImageURL={setGroupImageURL} />
+      </StyledUploadImageContainer>
+
+      <TextField
+        label="Group Name"
+        variant="outlined"
+        required
+        fullWidth
+        onChange={(e) => setGroupName(e.target.value)}
+      />
+
+      <Autocomplete
+        multiple
+        options={friends}
+        disableCloseOnSelect
+        fullWidth
+        onChange={(_, value) => setSelectedFriends(value)}
+        getOptionLabel={(option) => option.name}
+        renderOption={(props, option, { selected }) => (
+          <li {...props}>
+            <Checkbox
+              icon={<RadioButtonUncheckedIcon fontSize="small" />}
+              checkedIcon={<CheckCircleIcon fontSize="small" />}
+              style={{ marginRight: 8 }}
+              checked={selected}
+            />
+            {option.name}
+          </li>
+        )}
+        renderTags={(tagValue, getTagProps) => {
+          return tagValue.map((option, index) => (
+            <Tooltip title={'z' + option.zID}>
+              <Chip {...getTagProps({ index })} label={option.name} />
+            </Tooltip>
+          ));
+        }}
+        renderInput={(params) => <TextField {...params} label="Group Members" placeholder="Search for names..." />}
+      />
+    </StyledDialogContent>
+  );
+};
+
+export default AddGroupDialogContent;

client/src/components/sidebar/addGroupDialog/AddGroupDialogTitle.tsx

@@ -0,0 +1,33 @@
+import { Close as CloseIcon } from '@mui/icons-material';
+import { DialogTitle, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+
+
+const StyledDialogTitle = styled(DialogTitle)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  padding: 40px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+interface AddGroupDialogTitleProps {
+  handleClose: () => void;
+}
+
+const AddGroupDialogTitle: React.FC<AddGroupDialogTitleProps> = ({ handleClose }) => {
+  return (
+    <>
+      <StyledDialogTitle>
+        <Typography variant="h6">Create a Group</Typography>
+        <div>
+          <IconButton onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+      </StyledDialogTitle>
+    </>
+  );
+};
+
+export default AddGroupDialogTitle;

client/src/components/sidebar/addGroupDialog/EditImagePopOver.tsx

@@ -0,0 +1,70 @@
+import { Edit as EditIcon } from '@mui/icons-material';
+import { IconButton, Popover, TextField } from '@mui/material';
+import { styled } from '@mui/system';
+import React from 'react';
+
+const EditIconCircle = styled('div')`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  border: 1px solid gray;
+  border-radius: 999px;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  top: -35px;
+  cursor: pointer;
+  &:hover {
+    border: ${({ theme }) => (theme.palette.mode === 'light' ? '1px solid black' : '1px solid white;')};
+  }
+`;
+
+const StyledPopoverContent = styled('div')`
+  width: 400px;
+`;
+
+interface EditImagePopOverProps {
+  groupImageURL: string;
+  setGroupImageURL: (url: string) => void;
+}
+
+const EditImagePopOver: React.FC<EditImagePopOverProps> = ({ groupImageURL, setGroupImageURL }) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+
+  return (
+    <EditIconCircle>
+      <div>
+        <IconButton onClick={(e) => setAnchorEl(e.currentTarget)}>
+          <EditIcon />
+        </IconButton>
+
+        <Popover
+          open={Boolean(anchorEl)}
+          anchorEl={anchorEl}
+          onClose={() => setAnchorEl(null)}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+        >
+          <StyledPopoverContent>
+            <TextField
+              placeholder="Enter image address..."
+              variant="outlined"
+              value={groupImageURL}
+              fullWidth
+              onChange={(e) => setGroupImageURL(e.target.value)}
+            />
+          </StyledPopoverContent>
+        </Popover>
+      </div>
+    </EditIconCircle>
+  );
+};
+
+export default EditImagePopOver;

client/src/components/sidebar/addGroupDialog/dummyData.tsx

@@ -0,0 +1,13 @@
+import { FriendType } from "./AddGroupDialog";
+
+
+export const friends: FriendType[] = [
+  { name: 'Shaam', zID: 532445 },
+  { name: 'Ray', zID: 523495 },
+  { name: 'hhlu', zID: 584290 },
+  { name: 'Sohum', zID: 523840 },
+  { name: 'Chanel', zID: 542567 },
+  { name: 'Nikki', zID: 524596 },
+  { name: 'Micky', zID: 523948 },
+  { name: 'Jasmine', zID: 540938 },
+];