Prettied quiz discussion

Aldas1 · Dec 16, 2023 · c0c868a · c0c868a
1 parent 13433db
commit c0c868a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/better-frontend/src/components/QuizDiscussionBlock.tsx b/better-frontend/src/components/QuizDiscussionBlock.tsx
@@ -6,6 +6,7 @@ import {
   Input,
   List,
   ListItem,
+  Text,
 } from "@chakra-ui/react";
 import useDiscussion from "../hooks/useDiscussion";
 import { DiscussionComment } from "../types/quiz";
@@ -60,7 +61,7 @@ function CommentArea({ comments }: { comments: DiscussionComment[] }) {
     (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
   );
 
-  const messagesEnd = useRef(null);
+  const messagesEnd = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
     messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
@@ -71,11 +72,14 @@ function CommentArea({ comments }: { comments: DiscussionComment[] }) {
   }, [comments]);
 
   return (
-    <List height="80vh" overflow="scroll">
+    <List height="83vh" overflowX="hidden" overflowY="scroll">
       {sortedComments.map((c, i) => {
         return (
           <ListItem key={i}>
-            {c.username == null ? "Guest" : c.username}: {c.content}
+            <Text as="span" fontWeight="bold" color="purple.300">
+              {c.username == null ? "Guest" : c.username}
+            </Text>
+            : {c.content}
           </ListItem>
         );
       })}

diff --git a/better-frontend/src/pages/QuizPreview.tsx b/better-frontend/src/pages/QuizPreview.tsx
@@ -219,7 +219,7 @@ function QuizPreview() {
       <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="md">
         <DrawerOverlay />
         <DrawerContent>
-          <DrawerHeader>Quiz discussion</DrawerHeader>
+          <DrawerHeader fontSize="2xl" fontWeight="bold">Quiz discussion</DrawerHeader>
           <DrawerCloseButton />
           <DrawerBody display="flex" alignItems="stretch">
             <QuizDiscussionBlock id={quiz.id} />