From 4bc943f25255bcc1eb458c63dd64398bb8a3586e Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sat, 3 Feb 2024 14:12:11 +0700
Subject: [PATCH] feat(client): make chapter problem editorial more visible
 (#587)

---
 .../single/ChapterProblemPage/ChapterProblemPage.jsx     | 2 +-
 .../ChapterProblemStatementPage.jsx                      | 2 +-
 .../ChapterProblemStatementPage.scss                     | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
index 997d7665f..8822da216 100644
--- a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
+++ b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
@@ -102,7 +102,7 @@ export class ChapterProblemPage extends Component {
       newProgress?.verdict == VerdictCode.AC &&
       this.state.response.editorial
     ) {
-      const problemEditorialEl = document.querySelector('.problem-editorial');
+      const problemEditorialEl = document.querySelector('.chapter-problem-editorial');
       if (problemEditorialEl) {
         problemEditorialEl.scrollIntoView({ behavior: 'smooth' });
       }
diff --git a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
index fc5ff252c..f6e39c542 100644
--- a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
+++ b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
@@ -93,7 +93,7 @@ function ChapterProblemStatementPage({ worksheet }) {
     <ContentCard id="chapter-problem-statement" className="chapter-programming-problem-statement-page">
       {renderStatementHeader()}
       {renderStatement()}
-      <div className="chapter-programming-problem-statement-page__footer">{renderEditorial()}</div>
+      <div className="chapter-problem-editorial">{renderEditorial()}</div>
     </ContentCard>
   );
 }
diff --git a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss
index 92e7d240c..7090f3c7a 100644
--- a/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss
+++ b/judgels-client/src/routes/courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss
@@ -31,7 +31,7 @@
     margin-top: 0;
   }
 
-  .chapter-programming-problem-statement-page__footer {
+  .chapter-problem-editorial {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
@@ -42,9 +42,12 @@
     }
 
     .problem-editorial {
-      border: 2px solid #238551;
-      border-radius: 4px;
+      background-color: #72ca9b;
       box-shadow: none;
+
+      .bp5-dark & {
+        background-color: #1c6e42;
+      }
     }
   }
   .chapter-programming-problem-statement-page__navigation {