fix(submissions): rework submission chip css

Coursemology · Dec 18, 2024 · da5a68e · da5a68e
1 parent 98cf7b1
commit da5a68e
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 45 deletions.
diff --git a/.../app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackStatisticsTable.tsx b/.../app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackStatisticsTable.tsx
@@ -193,7 +193,6 @@ const LiveFeedbackStatisticsTable: FC<Props> = (props) => {
       sortable: true,
       cell: (datum) => (
         <SubmissionWorkflowState
-          className="w-100"
           opensInNewTab
           workflowState={datum.workflowState ?? workflowStates.Unstarted}
         />

diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx
@@ -1,6 +1,5 @@
 import { FC, ReactNode, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Box } from '@mui/material';
 import { WorkflowState } from 'types/course/assessment/submission/submission';
 import { MainSubmissionInfo } from 'types/course/statistics/assessmentStatistics';
 
@@ -100,7 +99,7 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
           });
         }}
       >
-        <Box>{datum.attemptStatus![index].attemptCount}</Box>
+        {datum.attemptStatus![index].attemptCount}
       </div>
     );
   };
@@ -115,7 +114,7 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
         },
         title: t(translations.questionIndex, { index: index + 1 }),
         cell: (datum): ReactNode => {
-          return typeof datum.attemptStatus?.[index].attemptCount ===
+          return typeof datum.attemptStatus?.[index]?.attemptCount ===
             'number' ? (
             renderAttemptCountClickableCell(index, datum)
           ) : (
@@ -180,7 +179,6 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
       sortable: true,
       cell: (datum) => (
         <SubmissionWorkflowState
-          className="w-full"
           linkTo={getEditSubmissionURL(courseId, assessmentId, datum.id)}
           opensInNewTab
           workflowState={datum.workflowState ?? workflowStates.Unstarted}

diff --git a/...app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx b/...app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx
@@ -1,6 +1,5 @@
 import { FC, ReactNode, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Box } from '@mui/material';
 import { WorkflowState } from 'types/course/assessment/submission/submission';
 import { MainSubmissionInfo } from 'types/course/statistics/assessmentStatistics';
 
@@ -98,7 +97,7 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
           });
         }}
       >
-        <Box>{datum.answers![index].grade.toFixed(1)}</Box>
+        {datum.answers![index].grade.toFixed(1)}
       </div>
     );
   };
@@ -108,11 +107,7 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
     maxGrade: number,
   ): ReactNode => {
     const className = getClassNameForMarkCell(totalGrade, maxGrade);
-    return (
-      <div className={className}>
-        <Box>{totalGrade.toFixed(1)}</Box>
-      </div>
-    );
+    return <div className={className}>{totalGrade.toFixed(1)}</div>;
   };
 
   const answerColumns: ColumnTemplate<MainSubmissionInfo>[] = Array.from(
@@ -125,7 +120,7 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
         },
         title: t(translations.questionIndex, { index: index + 1 }),
         cell: (datum): ReactNode => {
-          return typeof datum.answers?.[index].grade === 'number' ? (
+          return typeof datum.answers?.[index]?.grade === 'number' ? (
             renderAnswerGradeClickableCell(index, datum)
           ) : (
             <div />
@@ -189,13 +184,12 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
       sortable: true,
       cell: (datum) => (
         <SubmissionWorkflowState
-          className="w-full"
           linkTo={getEditSubmissionURL(courseId, assessmentId, datum.id)}
           opensInNewTab
           workflowState={datum.workflowState ?? workflowStates.Unstarted}
         />
       ),
-      className: 'center',
+      className: 'text-left',
     },
     ...answerColumns,
     {

diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/classNameUtils.ts b/client/app/bundles/course/assessment/pages/AssessmentStatistics/classNameUtils.ts
@@ -47,8 +47,8 @@ export const getClassNameForMarkCell = (
     maxGrade / 2,
   );
   return grade >= maxGrade / 2
-    ? `${greenBackgroundColorClassName[gradientLevel]} p-[1rem]`
-    : `${redBackgroundColorClassName[gradientLevel]} p-[1rem]`;
+    ? `${greenBackgroundColorClassName[gradientLevel]} p-1.5`
+    : `${redBackgroundColorClassName[gradientLevel]} p-1.5`;
 };
 
 // for attempt count cell, the difference in color means the following:
@@ -59,10 +59,10 @@ export const getClassNameForAttemptCountCell = (
   attempt: AttemptInfo,
 ): string => {
   if (!attempt.isAutograded || attempt.correct === null) {
-    return 'bg-gray-300 p-[1rem]';
+    return 'bg-gray-300 p-1.5';
   }
 
-  return attempt.correct ? 'bg-green-300 p-[1rem]' : 'bg-red-300 p-[1rem]';
+  return attempt.correct ? 'bg-green-300 p-1.5' : 'bg-red-300 p-1.5';
 };
 
 export const getClassnameForLiveFeedbackCell = (

diff --git a/client/app/bundles/course/assessment/submission/components/SubmissionWorkflowState.tsx b/client/app/bundles/course/assessment/submission/components/SubmissionWorkflowState.tsx
@@ -1,6 +1,5 @@
-import { FC } from 'react';
+import { FC, JSXElementConstructor, ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { Warning } from '@mui/icons-material';
 import { Chip } from '@mui/material';
 import palette from 'theme/palette';
 import { WorkflowState } from 'types/course/assessment/submission/submission';
@@ -14,6 +13,7 @@ interface SubmissionWorkflowStateProps {
   className?: string;
   linkTo?: string;
   opensInNewTab?: boolean;
+  icon?: ReactElement;
   // The "unstarted" workflow state represents a student who has not clicked "Attempt" to create a submission
   // (i.e. the submission for the assessment from them does not exist)
   workflowState: WorkflowState | typeof workflowStates.Unstarted;
@@ -23,24 +23,11 @@ const SubmissionWorkflowState: FC<SubmissionWorkflowStateProps> = (props) => {
   const { className, linkTo, opensInNewTab, workflowState } = props;
   const { t } = useTranslation();
 
-  const renderUnpublishedWarning = (): JSX.Element | undefined => {
-    if (workflowState === workflowStates.Graded) {
-      return (
-        <span style={{ display: 'inline-block', paddingLeft: 5 }}>
-          <div data-tooltip-id="unpublished-grades" data-tooltip-offset={8}>
-            <Warning fontSize="inherit" />
-          </div>
-        </span>
-      );
-    }
-    return undefined;
-  };
-
   if (workflowState === workflowStates.Unstarted || !linkTo) {
     return (
       <Chip
-        className={`${palette.submissionStatusClassName[workflowState]} ${className}`}
-        icon={renderUnpublishedWarning()}
+        className={`w-fit py-1.5 h-auto ${palette.submissionStatusClassName[workflowState]} ${className}`}
+        icon={props.icon}
         label={t(translations[workflowState])}
         variant="filled"
       />
@@ -53,9 +40,9 @@ const SubmissionWorkflowState: FC<SubmissionWorkflowStateProps> = (props) => {
         target: '_blank',
         rel: 'noopener noreferrer',
       })}
-      className={`text-blue-800 ${palette.submissionStatusClassName[workflowState]} ${className}`}
+      className={`text-blue-800 hover:underline w-fit py-1.5 h-auto ${palette.submissionStatusClassName[workflowState]} ${className}`}
       component={Link}
-      icon={renderUnpublishedWarning()}
+      icon={props.icon}
       label={t(translations[workflowState])}
       to={linkTo}
       variant="filled"

diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTable.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTable.jsx
@@ -35,7 +35,7 @@ const styles = {
     display: 'none',
   },
   tableCell: {
-    padding: '0.5em',
+    padding: '0 0.5em',
     textOverflow: 'initial',
     whiteSpace: 'nowrap',
     wordBreak: 'break-word',
@@ -364,7 +364,7 @@ export default class SubmissionsTable extends Component {
           <TableHead>
             <TableRow>
               {tableHeaderColumnFor('userName')}
-              {tableHeaderCenterColumnFor('submissionStatus')}
+              {tableHeaderColumnFor('submissionStatus')}
               {tableHeaderCenterColumnFor('grade')}
               {assessment.gamified
                 ? tableHeaderCenterColumnFor('experiencePoints')

diff --git a/...t/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx b/...t/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx
@@ -1,5 +1,6 @@
 import { memo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Warning } from '@mui/icons-material';
 import Delete from '@mui/icons-material/Delete';
 import History from '@mui/icons-material/History';
 import RemoveCircle from '@mui/icons-material/RemoveCircle';
@@ -30,7 +31,7 @@ import submissionsTranslations from './translations';
 
 const styles = {
   tableCell: {
-    padding: '0.5em',
+    padding: '0 0.5em',
     textOverflow: 'initial',
     whiteSpace: 'normal',
     alignItems: 'center',
@@ -55,6 +56,21 @@ const renderPhantomUserIcon = (submission) => {
   return null;
 };
 
+const renderUnpublishedWarning = (submission) => {
+  if (submission.workflowState !== workflowStates.Graded) return null;
+  return (
+    <span className="d-inline-block pl-1.5">
+      <div
+        className="flex align-center"
+        data-tooltip-id="unpublished-grades"
+        data-tooltip-offset={8}
+      >
+        <Warning fontSize="inherit" />
+      </div>
+    </span>
+  );
+};
+
 const SubmissionsTableRow = (props) => {
   const { assessment, assessmentId, courseId, dispatch, submission } = props;
   const palette = useTheme().palette;
@@ -242,11 +258,9 @@ const SubmissionsTableRow = (props) => {
             </Link>
           </span>
         </TableCell>
-        <TableCell style={tableCenterCellStyle}>
+        <TableCell style={styles.tableCell}>
           <SubmissionWorkflowState
-            className={
-              submission.workflowState !== workflowStates.Graded && 'w-36'
-            }
+            icon={renderUnpublishedWarning(submission)}
             linkTo={getEditSubmissionURL(courseId, assessmentId, submission.id)}
             workflowState={submission.workflowState}
           />