fix: use border instead of highlight for currentFocusLine (#147)

exKAZUu-Research · Sep 26, 2024 · 4e9e80d · 4e9e80d
1 parent 2287fff
commit 4e9e80d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/...pp/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx b/...pp/(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/...hAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/SyntaxHighlighter.tsx b/...hAuth)/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 };
         }}