moved results css to sass module, started react fc for results header

microsoft · Feb 27, 2024 · 3d07989 · 3d07989
1 parent c49cb80
commit 3d07989
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -2,9 +2,21 @@ import { useContext } from "react";
 import { AppStateContext } from "../state/appStateContext";
 import { getCatalogCriteriaWithId } from "../state/helpers";
 import { CriteriaEvaluationResult } from "../types/criteria";
+import css from "./styling/EvalResultDisplay.module.scss";
+import { classList } from "react-common/components/util";
+
 
 interface IProps {}
 
+const ResultsHeader: React.FC = () => {
+    const { state: teacherTool } = useContext(AppStateContext);
+    return (
+        <>
+            <h1>{teacherTool.rubric.name}</h1>
+        </>
+    );
+};
+
 export const EvalResultDisplay: React.FC<IProps> = ({}) => {
     const { state: teacherTool } = useContext(AppStateContext);
 
@@ -19,28 +31,28 @@ export const EvalResultDisplay: React.FC<IProps> = ({}) => {
     return (
         <>
             {teacherTool.projectMetadata && (
-                <div className="eval-results-container">
+                <div className={classList(css["eval-results-container"])}>
                     <h3>{lf("Project: {0}", teacherTool.projectMetadata.name)}</h3>
 
-                    {teacherTool.evalResults.length === 0 && <div className="common-spinner" />}
+                    {teacherTool.evalResults.length === 0 && <div className={css["common-spinner"]} />}
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         const result = teacherTool.evalResults[criteriaInstanceId];
                         const label = getTemplateStringFromCriteriaInstanceId(criteriaInstanceId);
                         return (
                             label && (
-                                <div className="result-block-id" key={criteriaInstanceId}>
-                                    <p className="block-id-label">
-                                        {getTemplateStringFromCriteriaInstanceId(criteriaInstanceId)}:
+                                <div className={css["result-block-id"]} key={criteriaInstanceId}>
+                                    <p className={css["block-id-label"]}>
+                                        {label}:
                                     </p>
                                     {result === CriteriaEvaluationResult.InProgress && (
-                                        <div className="common-spinner" />
+                                        <div className={css["common-spinner"]} />
                                     )}
                                     {result === CriteriaEvaluationResult.CompleteWithNoResult && <p>{lf("N/A")}</p>}
                                     {result === CriteriaEvaluationResult.Fail && (
-                                        <p className="negative-text">{lf("Needs Work")}</p>
+                                        <p className={css["negative-text"]}>{lf("Needs Work")}</p>
                                     )}
                                     {result === CriteriaEvaluationResult.Pass && (
-                                        <p className="positive-text">{lf("Looks Good!")}</p>
+                                        <p className={css["positive-text"]}>{lf("Looks Good!")}</p>
                                     )}
                                 </div>
                             )

diff --git a/teachertool/src/components/styling/EvalResultDisplay.module.scss b/teachertool/src/components/styling/EvalResultDisplay.module.scss
@@ -0,0 +1,30 @@
+.eval-results-container {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    margin: 1rem 0;
+    padding: 1rem;
+    overflow: auto;
+}
+
+.result-block-id {
+    display: flex;
+    padding-left: 0.5rem;
+    margin: 0.2rem 0;
+}
+
+.result-block-id p {
+    margin: 0;
+}
+
+.block-id-label {
+    font-weight: 700;
+    padding-right: 0.5rem;
+}
+
+.positive-text {
+    color: green;
+}
+
+.negative-text {
+    color: red;
+}
diff --git a/teachertool/src/global.scss b/teachertool/src/global.scss
@@ -177,41 +177,6 @@ code {
     width: 100%;
 }
 
-/*******************************/
-/**** EVAL RESULTS STYLING  ****/
-/*******************************/
-
-.eval-results-container {
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    margin: 1rem 0;
-    padding: 1rem;
-    overflow: auto;
-}
-
-.result-block-id {
-    display: flex;
-    padding-left: 0.5rem;
-    margin: 0.2rem 0;
-}
-
-.result-block-id p {
-    margin: 0;
-}
-
-.block-id-label {
-    font-weight: 700;
-    padding-right: 0.5rem;
-}
-
-.positive-text {
-    color: green;
-}
-
-.negative-text {
-    color: red;
-}
-
 /*******************************/
 /******  STYLE OVERRIDES  ******/
 /*******************************/