Huge bulk of style fixing. Overlays fixed, icon overlays integrated t…

…o minimize code redundancy.
ReCodEx · Nov 26, 2024 · 71d5632 · 71d5632
1 parent d9592b4
commit 71d5632
Show file tree

Hide file tree

Showing 285 changed files with 2,531 additions and 2,593 deletions.
diff --git a/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js b/src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js
@@ -68,11 +68,11 @@ const AssignmentDetails = ({
       isOpen={isOpen}
       className={className}>
       <>
-        <Table responsive size="sm" className="mb-1">
+        <Table size="sm" className="card-table">
           <tbody>
             {permissionHints.update && (
               <tr>
-                <td className="text-center text-body-secondary shrink-col px-2">
+                <td className="icon-col">
                   <VisibleIcon />
                 </td>
                 <th>
@@ -86,7 +86,7 @@ const AssignmentDetails = ({
 
             {permissionHints.update && (
               <tr>
-                <td className="text-center text-body-secondary shrink-col px-2">
+                <td className="icon-col">
                   <Icon icon="plane-departure" />
                 </td>
                 <th>
@@ -106,7 +106,7 @@ const AssignmentDetails = ({
 
             {permissionHints.update && isPublic && visibleFrom && visibleFrom * 1000 > Date.now() && (
               <tr>
-                <td className="text-center text-body-secondary shrink-col px-2">
+                <td className="icon-col">
                   <Icon icon={['far', 'clock']} />
                 </td>
                 <th>
@@ -119,7 +119,7 @@ const AssignmentDetails = ({
             )}
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
+              <td className="icon-col">
                 <DeadlineIcon />
               </td>
               <th>
@@ -136,7 +136,7 @@ const AssignmentDetails = ({
                       <>
                         <br />
                         <Button variant="primary" onClick={() => setOpen(true)} size="xs" noShadow>
-                          <PointsGraphIcon gapRight />
+                          <PointsGraphIcon gapRight={2} />
                           <FormattedMessage id="app.assignment.deadlinesGraphButton" defaultMessage="Show Graph" />
                         </Button>
                       </>
@@ -166,7 +166,7 @@ const AssignmentDetails = ({
             </tr>
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
+              <td className="icon-col">
                 <Icon icon="trophy" />
               </td>
               <th>
@@ -205,7 +205,7 @@ const AssignmentDetails = ({
 
             {isBonus && (
               <tr>
-                <td className="text-center text-body-secondary shrink-col px-2">
+                <td className="icon-col">
                   <BonusIcon />
                 </td>
                 <th>
@@ -218,7 +218,7 @@ const AssignmentDetails = ({
             )}
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
+              <td className="icon-col">
                 <Icon icon="percent" />
               </td>
               <th>
@@ -234,7 +234,7 @@ const AssignmentDetails = ({
             </tr>
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
+              <td className="icon-col">
                 <CodeIcon />
               </td>
               <th>
@@ -252,9 +252,7 @@ const AssignmentDetails = ({
             </tr>
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
-                {isStudent && canSubmit.canSubmit ? <SendIcon /> : <Icon icon="hashtag" />}
-              </td>
+              <td className="icon-col">{isStudent && canSubmit.canSubmit ? <SendIcon /> : <Icon icon="hashtag" />}</td>
               <th>
                 <FormattedMessage id="app.assignment.submissionsCountLimit" defaultMessage="Submission attempts" />:
                 <Explanation id="submissionsCountLimit">
@@ -301,7 +299,7 @@ const AssignmentDetails = ({
             </tr>
 
             <tr>
-              <td className="text-center text-body-secondary shrink-col px-2">
+              <td className="icon-col">
                 <Icon icon={['far', 'file-code']} />
               </td>
               <th>

diff --git a/src/components/Assignments/Assignment/AssignmentDetails/FailedAssignmentDetails.js b/src/components/Assignments/Assignment/AssignmentDetails/FailedAssignmentDetails.js
@@ -7,7 +7,7 @@ const FailedAssignmentDetails = () => (
   <Box
     title={
       <span>
-        <WarningIcon gapRight />
+        <WarningIcon gapRight={2} />
         <FormattedMessage id="app.assignment.error" defaultMessage="Exercise assignment could not be loaded." />
       </span>
     }

diff --git a/src/components/Assignments/Assignment/AssignmentDetails/LoadingAssignmentDetails.js b/src/components/Assignments/Assignment/AssignmentDetails/LoadingAssignmentDetails.js
@@ -8,7 +8,7 @@ const LoadingAssignmentDetails = () => (
   <Box
     title={
       <span>
-        <LoadingIcon gapRight />
+        <LoadingIcon gapRight={2} />
         <FormattedMessage id="app.assignment.loading" defaultMessage="Loading exercise assignment..." />
       </span>
     }

diff --git a/src/components/Assignments/Assignment/AssignmentMaxPoints/AssignmentMaxPoints.js b/src/components/Assignments/Assignment/AssignmentMaxPoints/AssignmentMaxPoints.js
@@ -50,9 +50,9 @@ const AssignmentMaxPoints = ({
         }>
         <span>
           {maxPointsDeadlineInterpolation ? (
-            <PointsInterpolationIcon gapLeft smallGapRight />
+            <PointsInterpolationIcon gapLeft={2} gapRight={1} />
           ) : (
-            <PointsDecreasedIcon gapLeft smallGapRight />
+            <PointsDecreasedIcon gapLeft={2} gapRight={1} />
           )}
           {maxPointsBeforeSecondDeadline}
         </span>

diff --git a/src/components/Assignments/Assignment/AssignmentStatusIcon/AssignmentStatusIcon.js b/src/components/Assignments/Assignment/AssignmentStatusIcon/AssignmentStatusIcon.js
@@ -7,10 +7,11 @@ import Icon, { EvaluationFailedIcon } from '../../../icons';
 const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestSolution = false }) => {
   if (!submission) {
     return (
-      <StatusIcon
-        id={id}
-        icon={<Icon icon="exclamation-triangle" className="text-danger" />}
-        message={
+      <Icon
+        icon="exclamation-triangle"
+        className="text-danger"
+        tooltipId={id}
+        tooltip={
           <FormattedMessage
             id="app.assignemntStatusIcon.solutionMissingSubmission"
             defaultMessage="The solution was not submitted for evaluation probably due to an error. You may need to resubmit it."
@@ -22,10 +23,11 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
 
   if (!submission.evaluation && !submission.failure) {
     return (
-      <StatusIcon
-        id={id}
-        icon={<Icon icon="cogs" className="text-warning" />}
-        message={
+      <Icon
+        icon="cogs"
+        className="text-warning"
+        tooltipId={id}
+        tooltip={
           <FormattedMessage
             id="app.assignemntStatusIcon.inProgress"
             defaultMessage="Assignment solution is being evaluated."
@@ -37,53 +39,66 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
 
   if (submission.failure) {
     return (
-      <StatusIcon
-        id={id}
-        icon={<EvaluationFailedIcon className="text-danger" />}
-        message={<FormattedMessage id="app.solutionStatusIcon.evaluationFailed" defaultMessage="Evaluation failed." />}
+      <EvaluationFailedIcon
+        className="text-danger"
+        tooltipId={id}
+        tooltip={<FormattedMessage id="app.solutionStatusIcon.evaluationFailed" defaultMessage="Evaluation failed." />}
       />
     );
   }
 
   if (submission.evaluation.score >= 1.0) {
     return (
       <StatusIcon
-        id={id}
         accepted={accepted}
-        icon={<Icon icon={isBestSolution ? 'thumbs-up' : ['far', 'thumbs-up']} className="text-success" />}
-        message={
-          <>
-            <FormattedMessage id="app.assignemntStatusIcon.ok" defaultMessage="Assignment is successfully completed." />
-            {isBestSolution && !accepted && (
-              <FormattedMessage
-                id="app.assignemntStatusIcon.isBestSolution"
-                defaultMessage="This is the best solution of the author submitted so far."
-              />
-            )}
-          </>
+        icon={
+          <Icon
+            icon={isBestSolution ? 'thumbs-up' : ['far', 'thumbs-up']}
+            className="text-success"
+            tooltipId={id}
+            tooltip={
+              <>
+                <FormattedMessage
+                  id="app.assignemntStatusIcon.ok"
+                  defaultMessage="Assignment is successfully completed."
+                />
+                {isBestSolution && !accepted && (
+                  <FormattedMessage
+                    id="app.assignemntStatusIcon.isBestSolution"
+                    defaultMessage="This is the best solution of the author submitted so far."
+                  />
+                )}
+              </>
+            }
+          />
         }
       />
     );
   }
 
   return (
     <StatusIcon
-      id={id}
       accepted={accepted}
-      icon={<Icon icon={isBestSolution ? 'thumbs-down' : ['far', 'thumbs-down']} className="text-danger" />}
-      message={
-        <>
-          <FormattedMessage
-            id="app.assignemntStatusIcon.failed"
-            defaultMessage="No correct solution was submitted yet."
-          />
-          {isBestSolution && !accepted && (
-            <FormattedMessage
-              id="app.assignemntStatusIcon.isBestSolution"
-              defaultMessage="This is the best solution of the author submitted so far."
-            />
-          )}
-        </>
+      icon={
+        <Icon
+          icon={isBestSolution ? 'thumbs-down' : ['far', 'thumbs-down']}
+          className="text-danger"
+          tooltipId={id}
+          tooltip={
+            <>
+              <FormattedMessage
+                id="app.assignemntStatusIcon.failed"
+                defaultMessage="No correct solution was submitted yet."
+              />
+              {isBestSolution && !accepted && (
+                <FormattedMessage
+                  id="app.assignemntStatusIcon.isBestSolution"
+                  defaultMessage="This is the best solution of the author submitted so far."
+                />
+              )}
+            </>
+          }
+        />
       }
     />
   );

diff --git a/src/components/Assignments/Assignment/AssignmentSyncIcon/AssignmentSyncIcon.js b/src/components/Assignments/Assignment/AssignmentSyncIcon/AssignmentSyncIcon.js
@@ -34,7 +34,7 @@ const AssignmentSyncIcon = ({ id, syncInfo, ...props }) => {
 
             {!syncInfo.isSynchronizationPossible && (
               <p>
-                <WarningIcon className="text-danger" gapRight />
+                <WarningIcon className="text-danger" gapRight={2} />
                 <FormattedMessage
                   id="app.assignment.syncIsNotPossible"
                   defaultMessage="The exercise is not in a consistent state, synchronization is not possible at the moment."
@@ -44,7 +44,9 @@ const AssignmentSyncIcon = ({ id, syncInfo, ...props }) => {
           </Popover.Body>
         </Popover>
       }>
-      <WarningIcon {...props} className={syncInfo.isSynchronizationPossible ? 'text-warning' : 'text-danger'} />
+      <span>
+        <WarningIcon {...props} className={syncInfo.isSynchronizationPossible ? 'text-warning' : 'text-danger'} />
+      </span>
     </OverlayTrigger>
   ) : null;
 };

diff --git a/src/components/Assignments/Assignment/AssignmentTableRow/AssignmentTableRow.js b/src/components/Assignments/Assignment/AssignmentTableRow/AssignmentTableRow.js
@@ -85,10 +85,10 @@ const AssignmentTableRow = ({
       ) : (
         <AssignmentIcon className="text-body-secondary" />
       )}
-      <MaybeBonusAssignmentIcon gapLeft id={id} isBonus={isBonus} />
+      <MaybeBonusAssignmentIcon gapLeft={2} id={id} isBonus={isBonus} />
 
       {(permissionHints.update || permissionHints.viewAssignmentSolutions) && exerciseSynchronizationInfo && (
-        <AssignmentSyncIcon id={id} syncInfo={exerciseSynchronizationInfo} gapLeft />
+        <AssignmentSyncIcon id={id} syncInfo={exerciseSynchronizationInfo} gapLeft={2} />
       )}
     </td>
 
@@ -158,12 +158,12 @@ const AssignmentTableRow = ({
                 </Tooltip>
               }>
               <Button size="xs" variant="info" onClick={discussionOpen}>
-                <ChatIcon smallGapLeft smallGapRight />
+                <ChatIcon gapLeft={1} gapRight={1} />
               </Button>
             </OverlayTrigger>
           ) : (
             <Button size="xs" variant="info" onClick={discussionOpen}>
-              <ChatIcon gapRight />
+              <ChatIcon gapRight={2} />
               <FormattedMessage id="generic.discussion" defaultMessage="Discussion" />
             </Button>
           ))}
@@ -178,7 +178,7 @@ const AssignmentTableRow = ({
                 </Tooltip>
               }>
               <Button size="xs" variant="primary">
-                <ResultsIcon smallGapLeft smallGapRight />
+                <ResultsIcon gapLeft={1} gapRight={1} />
               </Button>
             </OverlayTrigger>
           </Link>
@@ -194,7 +194,7 @@ const AssignmentTableRow = ({
                 </Tooltip>
               }>
               <Button size="xs" variant="warning">
-                <EditIcon smallGapLeft smallGapRight />
+                <EditIcon gapLeft={1} gapRight={1} />
               </Button>
             </OverlayTrigger>
           </Link>

diff --git a/src/components/Assignments/Assignment/AssignmentTableRow/LoadingAssignmentTableRow.js b/src/components/Assignments/Assignment/AssignmentTableRow/LoadingAssignmentTableRow.js
@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 const LoadingAssignmentTableRow = ({ colSpan = 1 }) => (
   <tr>
     <td className="text-center" colSpan={colSpan}>
-      <LoadingIcon gapRight />
+      <LoadingIcon gapRight={2} />
       <FormattedMessage id="app.assignmentsTableRow.loading" defaultMessage="Loading assignments..." />
     </td>
   </tr>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ const FailedAssignmentDetails = () => ( @@
       <Box
         title={
           <span>
-            <WarningIcon gapRight />
+            <WarningIcon gapRight={2} />
             <FormattedMessage id="app.assignment.error" defaultMessage="Exercise assignment could not be loaded." />
           </span>
         }
@@ Expand Down @@