From 5307e1a0c77bf933f573766e92788a00ac96d1d2 Mon Sep 17 00:00:00 2001
From: yoonie-jang <yoonie.jang@mail.utoronto.ca>
Date: Wed, 6 Nov 2024 11:43:10 -0500
Subject: [PATCH] Change CSS class names and refactor highlight style

---
 webstepper/src/CodeDisplay.tsx | 16 ++++++----------
 webstepper/src/css/styles.css  |  4 ++--
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/webstepper/src/CodeDisplay.tsx b/webstepper/src/CodeDisplay.tsx
index a7e8814..46e044b 100644
--- a/webstepper/src/CodeDisplay.tsx
+++ b/webstepper/src/CodeDisplay.tsx
@@ -11,14 +11,8 @@ type CodeDisplayPropTypes = {
 };
 
 export default function CodeDisplay(props: CodeDisplayPropTypes) {
-    const lineClass = (lineNumber: number) => {
-        if (lineNumber == props.highlightLine) {
-            return "HighlightedLine";
-        }
-    };
-
     return (
-        <Box className="CodeBox">
+        <Box className="code-box">
             <SyntaxHighlighter
                 data-testid="code-box"
                 language="python"
@@ -28,9 +22,11 @@ export default function CodeDisplay(props: CodeDisplayPropTypes) {
                 wrapLongLines={true}
                 style={a11yLight}
                 customStyle={{ backgroundColor: "transparent" }}
-                lineProps={(lineNumber) => ({
-                    className: lineClass(lineNumber),
-                })}
+                lineProps={(lineNumber: number) => {
+                    if (lineNumber == props.highlightLine) {
+                        return { className: "line-highlighted" };
+                    }
+                }}
             >
                 {props.text}
             </SyntaxHighlighter>
diff --git a/webstepper/src/css/styles.css b/webstepper/src/css/styles.css
index 7aef526..e5fa334 100644
--- a/webstepper/src/css/styles.css
+++ b/webstepper/src/css/styles.css
@@ -1,10 +1,10 @@
-.CodeBox {
+.code-box {
     width: 100%;
     height: 100%;
     background-color: white;
 }
 
-.HighlightedLine {
+.line-highlighted {
     background-color: yellow;
 }