From 4e9e80d5ef9c327fbf962f6802366776959b7d60 Mon Sep 17 00:00:00 2001
From: "Sakamoto, Kazunori" <exKAZUu@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:30:47 +0900
Subject: [PATCH] fix: use border instead of highlight for currentFocusLine
 (#147)

---
 .../[lectureId]/problems/[problemId]/ProblmBody.tsx        | 4 ++--
 .../[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
index 7aef8ea0..0c89f271 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx
@@ -127,7 +127,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
                   'プログラムを実行した後'
                 ) : (
                   <>
-                    <Box as="span" bgColor="red.100" px={0.5} rounded="sm">
+                    <Box as="span" border="2px solid #f56565" px={0.5} rounded="sm">
                       {props.problem.sidToLineIndex.get(props.problem.traceItems[currentTraceItemIndex].sid)}行目
                     </Box>
                     を実行した後
@@ -176,7 +176,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
                     {props.problem.sidToLineIndex.get(props.problem.traceItems[previousTraceItemIndex].sid)}行目
                   </Box>
                   を実行した後（
-                  <Box as="span" bgColor="red.100" px={0.5} rounded="sm">
+                  <Box as="span" border="2px solid #f56565" px={0.5} rounded="sm">
                     {props.problem.sidToLineIndex.get(props.problem.traceItems[currentTraceItemIndex].sid)}行目
                   </Box>
                   を実行する前）の盤面
diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx
index 5b5ae35b..564e25f3 100644
--- a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx
@@ -32,13 +32,14 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
         language={programmingLanguageId === 'c' ? 'cpp' : programmingLanguageId}
         lineNumberStyle={{ minWidth: '1.5rem', marginRight: '2rem', paddingRight: 0 }}
         lineProps={(lineNumber) => {
-          const style: React.CSSProperties = { padding: '0 1rem', backgroundColor: '' };
-          // ステップ問題のハイライト
+          const style: React.CSSProperties = { padding: '0 1rem', backgroundColor: '', border: '' };
+          // previousFocusLine と currentFocusLine が等しくなるケースがある。
           if (lineNumber === previousFocusLine) {
             style.backgroundColor = '#feebc8' /* orange.100 */;
           }
           if (lineNumber === currentFocusLine) {
-            style.backgroundColor = '#fed7d7' /* red.100 */;
+            style.border = '4px solid #f56565' /* red.500 */;
+            style.padding = '0 calc(1rem - 4px)'; // Adjust margin to compensate for border width
           }
           return { style };
         }}