Merge pull request #271 from OxfordRSE/student-comments-table

New user comment table on event page

components/EventProblems.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import { Course, Material, Section, Theme, eventItemSplit } from "lib/material"
 import { EventFull, Event, Problem } from "lib/types"
-import { Avatar, Table } from "flowbite-react"
+import { Table } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import { useProblems } from "lib/hooks/useProblems"
 import useUsersOnEvent from "lib/hooks/useUsersOnEvent"
 import Tooltip from "@mui/material/Tooltip"
@@ -36,7 +37,7 @@ const EventProblems: React.FC<Props> = ({ material, event }) => {
           <Table.HeadCell key={user.userEmail} align="center" className="p-0">
             <Tooltip title={`${user?.user?.name} <${user?.userEmail}>`}>
               <div>
-                <Avatar img={user?.user?.image || undefined} rounded={true} size="xs" />
+                <Avatar src={user?.user?.image || undefined} />
               </div>
             </Tooltip>
           </Table.HeadCell>

components/EventUsers.tsx

@@ -4,7 +4,8 @@ import { Material } from "lib/material"
 import { EventFull, Event, Problem } from "lib/types"
 import useSWR, { Fetcher } from "swr"
 import Title from "components/ui/Title"
-import { Avatar, Button, Card, Timeline } from "flowbite-react"
+import { Button, Card, Timeline } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import { ListGroup } from "flowbite-react"
 import { basePath } from "lib/basePath"
 import { useFieldArray, useForm } from "react-hook-form"
@@ -88,7 +89,7 @@ const EventUsers: React.FC<Props> = ({ event }) => {
                   <li className="py-3 sm:py-4">
                     <div className="flex items-center space-x-4">
                       <div className="shrink-0">
-                        <Avatar img={user.user.image || undefined} rounded={true} size="sm" />
+                        <Avatar src={user.user.image || undefined} alt={user.user.name || undefined} />
                       </div>
                       <div className="min-w-0 flex-1">
                         <p className="truncate text-sm font-medium text-gray-900 dark:text-white">{user.user.name}</p>

components/MuiTheme.tsx

@@ -21,7 +21,42 @@ export const LightTheme = createTheme({
         root: {
           backgroundColor: "#f8fafc", // Similar to bg-slate-50
           borderColor: "#e5e7eb", // border-gray-200
-          borderRadius: "8", // rounded-lg
+          borderRadius: "8px", // rounded-lg
+        },
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f8fafc", // Table background similar to paper
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderColor: "#e5e7eb", // border-gray-200 for light borders
+          padding: "6px 12px", // Reduce padding to align with Tailwind-style compactness
+        },
+        head: {
+          backgroundColor: "#f1f5f9", // Header bg like bg-slate-100
+          color: "#374151", // Header text color like text-gray-700
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f1f5f9", // bg-slate-100
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:nth-of-type(even)": {
+            backgroundColor: "#f9fafb", // Alternating row color like bg-slate-50
+          },
         },
       },
     },
@@ -53,5 +88,48 @@ export const DarkTheme = createTheme({
         },
       },
     },
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#111827", // dark:bg-slate-900 for dark mode
+        },
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#374151", // dark:bg-slate-800 for table background
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderColor: "#4b5563", // dark:border-gray-700 for dark mode borders
+          padding: "4px 8px", // Reduce padding for compactness
+          color: "#e5e7eb", // light gray text color like text-gray-300
+        },
+        head: {
+          backgroundColor: "#4b5563", // dark:bg-gray-700 for header background
+          color: "#e5e7eb", // Header text color like text-gray-300
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#4b5563", // dark:bg-gray-700 for header background
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:nth-of-type(even)": {
+            backgroundColor: "#1f2937", // Alternating row color like dark:bg-slate-800
+          },
+        },
+      },
+    },
   },
 })

components/Navbar.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Button, Dropdown, Tooltip } from "flowbite-react"
+import { Button, Dropdown, Tooltip } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import { Course, Material, Section, Theme, getExcludes, Excludes } from "lib/material"
 import { Event, EventFull } from "lib/types"
 import { signIn, signOut, useSession } from "next-auth/react"
@@ -439,15 +440,12 @@ const Navbar: React.FC<Props> = ({
               <span className="inline-flex items-center text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white w-10 h-10">
                 {session ? (
                   <Avatar
-                    role="img"
-                    img={session.user?.image ? session.user?.image : undefined}
-                    className="w-8 h-8"
-                    size="sm"
-                    rounded={true}
+                    src={session.user?.image ? session.user?.image : undefined}
+                    sx={{ width: 32, height: 32 }}
                     data-cy={`avatar-${session.user?.email}`}
                   />
                 ) : (
-                  <Avatar role="img" className="w-8 h-8" size="sm" rounded={true} data-cy={`avatar-not-signed-in`} />
+                  <Avatar sx={{ width: 32, height: 32 }} data-cy={`avatar-not-signed-in`} />
                 )}
               </span>
             }

components/content/Comment.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Button, Card, Dropdown, Tabs, Tooltip } from "flowbite-react"
+import { Button, Card, Dropdown, Tabs, Tooltip } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { Markdown } from "./Content"
 import { Comment } from "pages/api/comment/[commentId]"
@@ -117,7 +118,7 @@ const CommentView = ({
                     </>
                   }
                 >
-                  <Avatar size="xs" rounded img={user?.image || undefined} />
+                  <Avatar src={user?.image || undefined} alt={user?.name || "Sign in"} />
                 </Tooltip>
               </div>
             )}

components/content/Paragraph.tsx

@@ -27,7 +27,10 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
   const [activeEvent, setActiveEvent] = useActiveEvent()
   const { commentThreads, error, isLoading, mutate } = useCommentThreads(activeEvent?.id)
   const [activeThreadId, setActiveThreadId] = useState<number | undefined>(undefined)
-  const [tempThread, setTempThread] = useState<CommentThread | undefined>(undefined)
+  const [tempThread, setTempThread] = useState<{
+    thread: CommentThread
+    initialAnchor?: { top: number; left: number }
+  } | null>(null)
   const [tempActive, setTempActive] = useState<boolean>(false)
   const email = useSession().data?.user?.email
 
@@ -59,8 +62,10 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
 
   const handleCreateThread = (text: string) => {
     if (!activeEvent) return
+
     const textRefStart = contentText.indexOf(text)
     const textRefEnd = textRefStart + text.length
+    const buttonRect = ref?.current?.getBoundingClientRect()
     const newThread: CommentThread = createEmptyThread(
       activeEvent.id,
       section,
@@ -69,7 +74,10 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
       text,
       email as string
     )
-    setTempThread(newThread)
+    setTempThread({
+      thread: newThread,
+      initialAnchor: buttonRect ? { top: buttonRect.top + window.scrollY, left: buttonRect.left + 355 } : undefined,
+    })
     setTempActive(true)
   }
 
@@ -120,7 +128,7 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
     postCommentThread(newThread).then((thread) => {
       const newThreads = commentThreads ? [...commentThreads, thread] : [thread]
       mutate(newThreads)
-      setTempThread(undefined)
+      setTempThread(null)
       setActiveThreadId(thread.id)
     })
   }
@@ -154,12 +162,13 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
               ))}
               {tempThread && (
                 <Thread
-                  key={tempThread.id}
-                  thread={tempThread}
+                  key={tempThread.thread.id}
+                  thread={tempThread.thread}
                   active={tempActive}
                   setActive={setTempActive}
                   finaliseThread={finaliseThread}
-                  onDelete={() => handleDeleteThread(tempThread)}
+                  onDelete={() => handleDeleteThread(tempThread.thread)}
+                  initialAnchor={tempThread.initialAnchor}
                 />
               )}
             </div>