greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
pull/45450/head
Kai Wei Mo 2022-03-17 07:07:18 -04:00 committed by GitHub
parent adcce7fb6d
commit 6a7d2e5cbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/templates/Challenges/classic/editor.css
View File

@ -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;
}

3
client/src/templates/Challenges/classic/editor.tsx
View File

@ -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 }]
});