feat: icon indicating you authored review (#412)

icssc · Feb 2, 2024 · e0f9318 · e0f9318
1 parent a337e23
commit e0f9318
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/site/src/component/Review/Review.scss b/site/src/component/Review/Review.scss
@@ -144,7 +144,11 @@
 .add-report-button:hover {
   background-color: lightgray;
 }
-
+.gapped {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 @media only screen and (max-width: 600px) {
   .subreview-content {
     flex-direction: column;

diff --git a/site/src/component/Review/SubReview.tsx b/site/src/component/Review/SubReview.tsx
@@ -6,7 +6,7 @@ import Tooltip from 'react-bootstrap/Tooltip';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { useCookies } from 'react-cookie';
 import { Link } from 'react-router-dom';
-
+import { PersonFill } from 'react-bootstrap-icons';
 import { ReviewData, VoteRequest, CourseGQLData, ProfessorGQLData, VoteColor } from '../../types/types';
 import ReportForm from '../ReportForm/ReportForm';
 
@@ -41,6 +41,7 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor, colors, colo
       alert('You must be logged in to vote.');
       return;
     }
+
     const votes = {
       id: ((e.target as HTMLElement).parentNode! as Element).getAttribute('id')!,
       upvote: true,
@@ -74,13 +75,20 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor, colors, colo
   };
 
   const badgeOverlay = <Tooltip id="verified-tooltip">This review was verified by an administrator.</Tooltip>;
+  const authorOverlay = <Tooltip id="authored-tooltip">You are the author of this review.</Tooltip>;
 
   const verifiedBadge = (
     <OverlayTrigger overlay={badgeOverlay}>
       <Badge variant="primary">Verified</Badge>
     </OverlayTrigger>
   );
 
+  const authorBadge = (
+    <OverlayTrigger overlay={authorOverlay}>
+      <PersonFill size={25} fill="green"></PersonFill>
+    </OverlayTrigger>
+  );
+
   return (
     <div className="subreview">
       <div>
@@ -137,9 +145,10 @@ const SubReview: FC<SubReviewProps> = ({ review, course, professor, colors, colo
           </div>
           <div>
             <div className="subreview-author">
-              <p>
-                <span className="mr-1">Posted by {review.userDisplay}</span>
+              <p className=" gapped">
+                <span className=" mr-1">Posted by {review.userDisplay}</span>
                 {review.verified && verifiedBadge}
+                {cookies.user?.id === review.userID && authorBadge}
               </p>
               <p>
                 {new Date(review.timestamp).toLocaleString('default', {