fix peer review page dark theme

frontend/src/components/PeerReviewPage.css

@@ -1,80 +1,79 @@
 .peer-review-box {
-  text-align: center;
-  width: 70%;
-  border: 2px solid black;
-  padding: 50px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 25px;
-  margin-bottom: 25px;
-  border-radius: 25px;
+    text-align: center;
+    width: 70%;
+    border: 2px solid black;
+    padding: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    border-radius: 25px;
 }
 
 .peer-review-container__h1,
 .peer-review-box__h3 {
-  text-align: center;
+    text-align: center;
 }
 
 @media screen and (max-width: 650px) {
-  .peer-review-box {
-    border: 0px solid black;
-    padding-left: 5px;
-    margin-left: 5px;
-  }
+    .peer-review-box {
+        border: 0px solid black;
+        padding-left: 5px;
+        margin-left: 5px;
+    }
 }
 
 .peer-review-box__radio-header {
-  width: 100px;
+    width: 100px;
 }
 
-.peer-review-box__radio-button-table {
-  margin: 0px auto;
-  padding: 0;
+.peer-review-box__radio-button-table tr:last-child td {
+    border: 1px solid black;
 }
 
 .peer-review-box__peer-row,
 .peer-review-box__radio-row {
-  border: 1px solid black;
-  margin: auto;
+    border: 1px solid black;
+    margin: auto;
 }
 
 .peer-review-box__peer-header,
 .peer-review-box__radio-header,
 .peer-review-box__radio-button {
-  border: 1px solid black;
-  margin: auto;
-  padding: 0;
-  border-radius: 3px;
+    border: 1px solid black;
+    margin: auto;
+    padding: 0;
+    border-radius: 3px;
 }
 
 .peer-review-box__name-text {
-  margin: 0;
-  text-align: left;
-  grid-row: 1;
-  text-overflow: ellipsis;
-  overflow: hidden;
+    margin: 0;
+    text-align: left;
+    grid-row: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .peer-review-box__text-field-container {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  gap: 24px;
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    gap: 24px;
 }
 
 .peer-review-box__text-question-container {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }
 
 .peer-review-box__text-field-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 }
 
 .peer-review-box__text-field {
-  grid-row: 1;
+    grid-row: 1;
 }
 
 .peer-review__description {

frontend/src/components/PeerReviewPage.jsx

@@ -16,8 +16,10 @@ import peerReviewPageActions from '../reducers/actions/peerReviewPageActions.js'
 import peerReviewService from '../services/peerReview'
 import groupManagementService from '../services/groupManagement'
 import timeLogService from '../services/timeLogs'
+
 import TextField from '@material-ui/core/TextField'
 import Button from '@material-ui/core/Button'
+import { Table, TableHead, TableRow, TableBody, TableCell } from '@material-ui/core'
 
 class PeerReview extends React.Component {
   async componentDidMount() {
@@ -279,22 +281,25 @@ const Question = ({
     return (
       <div className="peer-review-box">
         <h3 className="peer-review-box__h3">{question.header}</h3>
-        <table className="peer-review-box__radio-button-table">
-          <thead>
-            <tr className="peer-review-box__radio-row">
-              <th className="peer-review-box__radio-header" />
+        <Table
+          size="small"
+          className="peer-review-box__radio-button-table"
+        >
+          <TableHead>
+            <TableRow hover>
+              <TableCell className="peer-review-box__radio-header" />
               <OptionHeaders options={temp} />
-            </tr>
-          </thead>
-          <tbody>
+            </TableRow>
+          </TableHead>
+          <TableBody>
             <QuestionRows
               peers={peers}
               options={temp}
               questionId={question.header}
               answerSheet={answerSheet[questionId]}
             />
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     )
   } else if (question.type === 'peerReview') {
@@ -368,9 +373,9 @@ const Question = ({
 const OptionHeaders = ({ options }) => {
   return options.map((option, optionId) => {
     return (
-      <th className="peer-review-box__radio-header" key={optionId}>
+      <TableCell className="peer-review-box__radio-header" key={optionId}>
         {option}
-      </th>
+      </TableCell>
     )
   })
 }
@@ -432,11 +437,11 @@ const QuestionRow = ({
   answerSheet,
 }) => {
   return (
-    <tr className="peer-review-box__peer-row">
-      <th className="peer-review-box__peer-header">{peerName}</th>
+    <TableRow hover className="peer-review-box__peer-row">
+      <TableCell align="center">{peerName}</TableCell>
       {options.map((buttonId, buttonNumber) => {
         return (
-          <th className="peer-review-box__radio-button" key={buttonId}>
+          <TableCell className="peer-review-box__radio-button" key={buttonId}>
             <input
               type="radio"
               name={questionId.toString() + peerId.toString()}
@@ -444,10 +449,10 @@ const QuestionRow = ({
                 radioSelectHandler(peerId, buttonNumber, answerSheet)
               }
             />
-          </th>
+          </TableCell>
         )
       })}
-    </tr>
+    </TableRow>
   )
 }