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 { .description-container {
background-color: var(--secondary-background); background-color: var(--secondary-background);
padding: 10px; padding: 10px;
border: 2px solid var(--tertiary-background); border: 2px solid var(--quaternary-background);
max-width: 700px; max-width: 700px;
} }

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

@ -178,7 +178,8 @@ const defineMonacoThemes = (
inherit: true, inherit: true,
// TODO: Use actual color from style-guide // TODO: Use actual color from style-guide
colors: { colors: {
'editor.background': options.usesMultifileEditor ? '#eee' : '#fff' 'editor.background': options.usesMultifileEditor ? '#eee' : '#fff',
'editor.lineHighlightBorder': '#cee8fc'
}, },
rules: [{ token: 'identifier.js', foreground: darkBlueColor }] rules: [{ token: 'identifier.js', foreground: darkBlueColor }]
}); });