From b768283de404f289c51213bf60cd47a557eded0b Mon Sep 17 00:00:00 2001
From: Endre Braut Medhus <endrebm@stud.ntnu.no>
Date: Fri, 19 Nov 2021 10:57:30 +0100
Subject: [PATCH] Make meetings wider, higher and add description

---
 src/components/myMeetings/Meeting.tsx         | 29 ++++++++++---------
 .../myMeetings/MeetingActionsWithPopover.tsx  |  2 +-
 src/pages/MyMeetings.tsx                      |  7 +----
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/myMeetings/Meeting.tsx b/src/components/myMeetings/Meeting.tsx
index e2d626ff..de2ae7c2 100644
--- a/src/components/myMeetings/Meeting.tsx
+++ b/src/components/myMeetings/Meeting.tsx
@@ -20,7 +20,7 @@ interface ParticipantResult {
 export interface MeetingProps {
   id: string;
   title: string;
-  description?: string | null;
+  description: string | undefined;
   startTime: string;
   organization: string;
   participants: ParticipantResult[];
@@ -30,14 +30,14 @@ const styles = {
   width: '100%',
   borderRadius: '4px',
   boxShadow,
-  padding: '1em 2em',
+  padding: '2em',
   overflow: 'hidden',
   ...transition,
 } as React.CSSProperties;
 
 const Meeting: React.FC<
   MeetingProps & { handleDeleteMeeting: (id: string) => void; meetingStatus: 'open' | 'upcoming' | 'ended' }
-> = ({ id, title, startTime, participants, handleDeleteMeeting, meetingStatus }) => {
+> = ({ id, title, startTime, participants, handleDeleteMeeting, meetingStatus, description }) => {
   const { user } = useAuth0();
   const history = useHistory();
   const [isAdmin, setIsAdmin] = useState(false);
@@ -94,17 +94,20 @@ const Meeting: React.FC<
         <Heading as="h2" fontSize="1.5em">
           {title}
         </Heading>
-        <Text fontSize="1em">{formatMeetingTime(new Date(startTime))}</Text>
+        <Box minH="2rem">{description && <Text>{description}</Text>}</Box>
       </VStack>
-      {isAdmin ? (
-        <MeetingActionsWithPopover
-          meetingStatus={meetingStatus}
-          onEditClick={() => history.push(`/meeting/${id}/edit`)}
-          onDeleteClick={() => setDialogIsOpen(true)}
-        />
-      ) : (
-        <Box h="1rem" />
-      )}
+      <HStack w="100%" justifyContent="space-between">
+        <Text fontSize="1em">{formatMeetingTime(new Date(startTime))}</Text>
+        {isAdmin ? (
+          <MeetingActionsWithPopover
+            meetingStatus={meetingStatus}
+            onEditClick={() => history.push(`/meeting/${id}/edit`)}
+            onDeleteClick={() => setDialogIsOpen(true)}
+          />
+        ) : (
+          <Box h="1rem" />
+        )}
+      </HStack>
       <CustomAlertDialog
         dialogIsOpen={dialogIsOpen}
         handleConfirm={() => {
diff --git a/src/components/myMeetings/MeetingActionsWithPopover.tsx b/src/components/myMeetings/MeetingActionsWithPopover.tsx
index ccbc4b40..0ee40681 100644
--- a/src/components/myMeetings/MeetingActionsWithPopover.tsx
+++ b/src/components/myMeetings/MeetingActionsWithPopover.tsx
@@ -16,7 +16,7 @@ const MeetingActionsWithPopover: React.FC<MeetingActionsWithPopoverProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <HStack justifyContent="end" w="100%">
+    <HStack>
       <Popover placement="top-end" isOpen={isOpen} onClose={() => setIsOpen(false)}>
         <PopoverTrigger>
           <Button
diff --git a/src/pages/MyMeetings.tsx b/src/pages/MyMeetings.tsx
index b5ed08d9..4ca0a3c8 100644
--- a/src/pages/MyMeetings.tsx
+++ b/src/pages/MyMeetings.tsx
@@ -96,17 +96,12 @@ const MyMeetings: React.FC = () => {
   return (
     <PageContainer>
       {deleteMeetingLoading && <Loading asOverlay={true} text="Sletter møte" />}
-      <Box m="auto" pt="5em" pb="1.125em" maxWidth="600px">
+      <Box m="auto" pt="5em" pb="1.125em" maxWidth="800px">
         {meetingsData.length === 0 && (
           <Center m="0 2em 2.625em">
             <Text>Du har ingen kommende møter</Text>
           </Center>
         )}
-        {(ongoingMeetings.length > 0 || upcomingMeetings.length > 0) && (
-          <Heading as="h1" fontSize="1em" mx="2em" mb="1.125em">
-            Mine møter
-          </Heading>
-        )}
         {ongoingMeetings.length > 0 && (
           <Box m="0 2em 1.5em">
             <MeetingList