From 6a7d2e5cbe8255fdc1717df2d9f5ff34410ccdcb Mon Sep 17 00:00:00 2001
From: Kai Wei Mo <66972679+kai-wei-mo@users.noreply.github.com>
Date: Thu, 17 Mar 2022 07:07:18 -0400
Subject: [PATCH] feat: visual distinction between instructions and code
 (#45354)

* Add border-left to description-container

* Add description-container use primary-background

* Jaw border to quaternary bg

* Select editor line to highlight bg

* Update client/src/templates/Challenges/classic/editor.tsx

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
---
 client/src/templates/Challenges/classic/editor.css | 2 +-
 client/src/templates/Challenges/classic/editor.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css
index 5aca55bbac..e12fc72db5 100644
--- a/client/src/templates/Challenges/classic/editor.css
+++ b/client/src/templates/Challenges/classic/editor.css
@@ -41,7 +41,7 @@
 .description-container {
   background-color: var(--secondary-background);
   padding: 10px;
-  border: 2px solid var(--tertiary-background);
+  border: 2px solid var(--quaternary-background);
   max-width: 700px;
 }
 
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index 5b517cc2f1..38fd2799ea 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -178,7 +178,8 @@ const defineMonacoThemes = (
     inherit: true,
     // TODO: Use actual color from style-guide
     colors: {
-      'editor.background': options.usesMultifileEditor ? '#eee' : '#fff'
+      'editor.background': options.usesMultifileEditor ? '#eee' : '#fff',
+      'editor.lineHighlightBorder': '#cee8fc'
     },
     rules: [{ token: 'identifier.js', foreground: darkBlueColor }]
   });