Merge pull request #17 from AniketSinghShaktawat/showReviews

Added Different Colours for Scores
expertiza · Apr 23, 2024 · 4231041 · 4231041
2 parents 5eb75d2 + 09b9ff2
commit 4231041
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/pages/ViewTeamGrades/ShowReviews.tsx b/src/pages/ViewTeamGrades/ShowReviews.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import { getColorClass } from './utils';
 import { RootState } from "../../store/store";
 import { useDispatch, useSelector } from "react-redux";
 
+
 interface ReviewComment {
   score: number;
   comment?: string;
@@ -53,7 +55,7 @@ const ShowReviews: React.FC<ShowReviewsProps> = ({ data }) => {
             <div key={`round-${r}-question-${j}-review-${i}`} className="review-block">
               <div className="question">{j+1}. {data[r][j].questionText}</div>
               <div className="score-container">
-                <span className="score">{data[r][j].reviews[i].score}</span>
+                <span className={`score ${getColorClass(data[r][j].reviews[i].score,data[r][j].maxScore)}`}>{data[r][j].reviews[i].score}</span>
                 {data[r][j].reviews[i].comment && (
                   <div className="comment">{data[r][j].reviews[i].comment}</div>
                 )}

diff --git a/src/pages/ViewTeamGrades/grades.scss b/src/pages/ViewTeamGrades/grades.scss
@@ -246,19 +246,24 @@
 }
 
 .score {
-  background-color: #4caf50;
-  border-radius: 50%; /* Makes it circular */
-  width: 24px; 
+  border-radius: 50%;
+  width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: black; /* Text color */
-  margin-right: 10px; /* Space between score and comment */
-  font-weight: bold; /* Make the score text bold */
-
+  color: black;
+  margin-right: 10px;
+  font-weight: bold;
 }
 
+.c1 { background-color: #ff0000; } /* Example color for c1 */
+.c2 { background-color: #ff8000; } /* Example color for c2 */
+.c3 { background-color: #ffff00; } /* Example color for c3 */
+.c4 { background-color: #80ff00; } /* Example color for c4 */
+.c5 { background-color: #00ff00; } /* Example color for c5 */
+.cf { background-color: #0000ff; } /* Fallback color for cf */
+
 .comment {
   flex-grow: 1; /* Ensures comment fills the rest of the container */
   padding-top: 3px;