Merge pull request #517 from bettersg/feat/checkmate-v2-keen

UI Changes to Voting Page
bettersg · Dec 15, 2024 · 9190ff3 · 9190ff3
2 parents 320b813 + a98403e
commit 9190ff3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/checkers-app/src/components/vote/MessageCard.tsx b/checkers-app/src/components/vote/MessageCard.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
-import { Card, CardBody, Typography, Button } from "@material-tailwind/react";
+import { Card, CardBody, Typography, Button, Alert } from "@material-tailwind/react";
+import { ChatBubbleLeftEllipsisIcon, PaperAirplaneIcon } from "@heroicons/react/20/solid";
 
 interface PropType {
   text: string | null;
   type: "image" | "text";
   caption: string | null;
   imageUrl: string | null;
+  sender: string | null;
 }
 
 // Helper function to detect URLs and split the text
@@ -44,7 +46,7 @@ const splitTextByUrls = (text: string) => {
 export default function MessageCard(prop: PropType) {
   const [isExpanded, setIsExpanded] = useState(false);
   const lengthBeforeTruncation = 300;
-  const { text, caption, imageUrl, type } = prop;
+  const { text, caption, imageUrl, type, sender } = prop;
 
   const toggleExpansion = () => {
     setIsExpanded(!isExpanded);
@@ -69,6 +71,10 @@ export default function MessageCard(prop: PropType) {
   return (
     <Card className="bg-error-color overflow-y-auto overflow-x-hidden max-w-md w-full h-full max-h-full p-3">
       <CardBody className="-m-3">
+        <Typography className="flex items-center mb-2">
+          <ChatBubbleLeftEllipsisIcon className="h-6 w-6 text-[#ff327d] mr-2 flex-shrink-0"/>
+          <p className="font-semibold leading-none">Message：</p>
+        </Typography>
         <Typography className="w-full">
           {type === "image" && displayText.length > 0 && (
             <span className="font-bold">Caption: </span>
@@ -109,6 +115,7 @@ export default function MessageCard(prop: PropType) {
             {isExpanded ? "Show Less" : "Read More"}
           </Button>
         )}
+
       </CardBody>
       {type === "image" && imageUrl && (
         <img
@@ -117,6 +124,12 @@ export default function MessageCard(prop: PropType) {
           className="w-full object-contain rounded-xl"
         />
       )}
+      <CardBody className="-m-3">
+      <Typography className="flex items-center mt-1 mb-2">
+        <PaperAirplaneIcon className="h-6 w-6 text-[#ff8932] mr-2 flex-srhink-0"/>
+        <p className="font-medium leading-none">Sender: {sender}</p>
+      </Typography>
+      </CardBody>
     </Card>
   );
 }
diff --git a/checkers-app/src/components/vote/index.tsx b/checkers-app/src/components/vote/index.tsx
@@ -1,5 +1,5 @@
 import MessageCard from "./MessageCard";
-import { Typography, Alert } from "@material-tailwind/react";
+import { Typography } from "@material-tailwind/react";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useUser } from "../../providers/UserContext";
@@ -64,8 +64,9 @@ export default function VotePage() {
           text={vote.text}
           imageUrl={vote.signedImageUrl}
           caption={vote.caption}
+          sender={vote.sender}
         />
-        <Alert variant="ghost">Sender: {vote.sender}</Alert>
+
         {vote.communityNote ? (
           <CommunityNoteCard 
           en = {vote.communityNote.en}