changerd to mui avatar from flowbite avatar

OxfordRSE · Jan 7, 2025 · 7bccb20 · 7bccb20
1 parent 4ffa7b0
commit 7bccb20
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 26 deletions.
diff --git a/components/EventCommentThreads.tsx b/components/EventCommentThreads.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo } from "react"
 import { Material, sectionSplit } from "lib/material"
 import { EventFull } from "lib/types"
-import { Avatar } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import Link from "next/link"
 import useCommentThreads from "lib/hooks/useCommentThreads"
 import { useTheme } from "next-themes"
@@ -84,12 +84,12 @@ const EventCommentThreads: React.FC<Props> = ({ material, event }) => {
         initialExpandedState[sectionName] = true
       })
 
-      // ensure noSectionKey is collapsed
+      // ensure if the section was not found then that section is collapsed
       initialExpandedState[noSectionKey] = false
 
       setExpandedSections(initialExpandedState)
     }
-  }, [commentThreads]) // Only run when commentThreads change
+  }, [commentThreads])
 
   if (threadsIsLoading) return <div>Loading...</div>
   if (!commentThreads) return <div>Failed to load</div>
@@ -192,9 +192,9 @@ const EventCommentThreads: React.FC<Props> = ({ material, event }) => {
                                   <Stack direction="row" spacing={1}>
                                     <Avatar
                                       className="pr-2"
-                                      size="xs"
-                                      rounded
-                                      img={users[thread.createdByEmail]?.image || undefined}
+                                      sx={{ width: 24, height: 24 }}
+                                      src={users[thread.createdByEmail]?.image || undefined}
+                                      alt={users[thread.createdByEmail]?.name || undefined}
                                     />
                                     <>{thread.createdByEmail}</>
                                   </Stack>
@@ -311,9 +311,8 @@ const EventCommentThreads: React.FC<Props> = ({ material, event }) => {
                                   <Stack direction="row" spacing={1}>
                                     <Avatar
                                       className="pr-2"
-                                      size="xs"
-                                      rounded
-                                      img={users[thread.createdByEmail]?.image || undefined}
+                                      src={users[thread.createdByEmail]?.image || undefined}
+                                      alt={users[thread.createdByEmail]?.name || undefined}
                                     />
                                     <>{thread.createdByEmail}</>
                                   </Stack>

diff --git a/components/EventProblems.tsx b/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>

diff --git a/components/EventUsers.tsx b/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>

diff --git a/components/Navbar.tsx b/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>
             }

diff --git a/components/content/Comment.tsx b/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>
             )}

diff --git a/components/content/Thread.tsx b/components/content/Thread.tsx
@@ -1,4 +1,5 @@
-import { Avatar, Button, ButtonProps, Card, Checkbox, Dropdown, Label, Spinner, Tooltip } from "flowbite-react"
+import { Button, ButtonProps, Card, Checkbox, Dropdown, Label, Spinner, 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 { CommentThread, Comment } from "pages/api/commentThread"
@@ -234,7 +235,7 @@ const Thread = ({ thread, active, setActive, onDelete, finaliseThread, initialAn
             }
           >
             <Stack direction="row" spacing={2} className="justify-center">
-              <Avatar size="xs" rounded img={user?.image || undefined} />
+              <Avatar sx={{ width: 32, height: 32 }} src={user?.image || undefined} alt={user?.name || "Sign in"} />
               {commentThread?.resolved === true && (
                 <GoIssueClosed
                   className="h-6 w-6 font-bold text-green dark:text-green-600"

diff --git a/pages/event/[eventId].tsx b/pages/event/[eventId].tsx
@@ -8,7 +8,8 @@ import NavDiagram from "components/navdiagram/NavDiagram"
 import Title from "components/ui/Title"
 import type { Event, EventFull } from "lib/types"
 import { basePath } from "lib/basePath"
-import { Avatar, Button, Card, Tabs } from "flowbite-react"
+import { Button, Card, Tabs } from "flowbite-react"
+import Avatar from "@mui/material/Avatar"
 import EventProblems from "components/EventProblems"
 import { useForm, Controller, useFieldArray } from "react-hook-form"
 import { useSession } from "next-auth/react"
@@ -145,7 +146,7 @@ const Event: NextPage<EventProps> = ({ material, event, pageInfo }) => {
           {eventUser.map((user, index) => (
             <div key={user.id} 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>