gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: commandline chic

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2019-08-19 18:54:04 +03:00
committed by mrugesh
parent f0329da61a
commit 31e3d9b27e
75 changed files with 1303 additions and 635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/gatsby-config.js
View File

@ -21,6 +21,7 @@ module.exports = {
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-postcss',
{
resolve: 'gatsby-plugin-create-client-paths',
options: {
@ -115,17 +116,17 @@ module.exports = {
/* eslint-disable camelcase */
short_name: 'fCC',
start_url: '/',
theme_color: '#006400',
theme_color: '#0a0a23',
background_color: '#fff',
/* eslint-enable camelcase */
display: 'minimal-ui',
icon: 'src/images/square_puck.png'
icon: 'src/assets/images/square_puck.png'
}
},
{
resolve: 'gatsby-plugin-google-fonts',
options: {
fonts: ['Lato:400,400i,500']
fonts: ['Lato:400,400i,500', 'Roboto Mono:400,700']
}
},
'gatsby-plugin-sitemap',

428
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
client/package.json
View File

@ -29,14 +29,15 @@
"gatsby-link": "^2.2.5",
"gatsby-plugin-create-client-paths": "^2.1.3",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-manifest": "^2.2.5",
"gatsby-plugin-react-helmet": "^3.1.3",
"gatsby-plugin-manifest": "^2.2.0",
"gatsby-plugin-postcss": "^2.1.3",
"gatsby-plugin-react-helmet": "^3.1.0",
"gatsby-plugin-remove-fingerprints": "^0.0.2",
"gatsby-plugin-remove-serviceworker": "^1.0.0",
"gatsby-plugin-sitemap": "^2.2.6",
"gatsby-remark-prismjs": "^3.3.5",
"gatsby-source-filesystem": "^2.1.9",
"gatsby-transformer-remark": "^2.6.14",
"gatsby-plugin-sitemap": "^2.2.0",
"gatsby-remark-prismjs": "^3.3.0",
"gatsby-source-filesystem": "^2.1.0",
"gatsby-transformer-remark": "^2.5.0",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"loop-protect": "^2.1.6",
@ -92,6 +93,7 @@
},
"devDependencies": {
"@testing-library/react": "^8.0.5",
"autoprefixer": "^9.6.1",
"babel-plugin-transform-imports": "^1.5.1",
"chokidar": "^2.1.5",
"copy-webpack-plugin": "^4.6.0",

7
client/postcss.config.js Normal file
View File

@ -0,0 +1,7 @@
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['last 2 versions']
}
}
};

2
client/src/components/icons/Caret.js → client/src/assets/icons/Caret.js
View File

@ -5,7 +5,7 @@ function Caret() {
<svg viewBox='0 0 100 100' width='25px'>
<polygon
points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196'
style={{ stroke: '#aaa', fill: '#aaa', strokeWidth: '1px' }}
style={{ stroke: '#858591', fill: '#858591', strokeWidth: '1px' }}
transform={
'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
}

4
client/src/templates/Challenges/components/icons/Fail.js → client/src/assets/icons/Fail.js
View File

@ -13,9 +13,9 @@ function RedFail() {
<circle
cx='100'
cy='99'
fill='#555'
fill='#858591'
r='95'
stroke='#555'
stroke='#858591'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

2
client/src/templates/Challenges/components/icons/GreenNotCompleted.js → client/src/assets/icons/GreenNotCompleted.js
View File

@ -20,7 +20,7 @@ function GreenNotCompleted(props) {
cy='99'
fill='#FFFFFF'
r='95'
stroke='#006400'
stroke='#858591'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

4
client/src/templates/Challenges/components/icons/GreenPass.js → client/src/assets/icons/GreenPass.js
View File

@ -16,9 +16,9 @@ function GreenPass(props) {
<circle
cx='100'
cy='99'
fill='#006400'
fill='#858591'
r='95'
stroke='#006400'
stroke='#858591'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

4
client/src/templates/Challenges/components/icons/Initial.js → client/src/assets/icons/Initial.js
View File

@ -14,9 +14,9 @@ function Initial(props) {
<circle
cx='100'
cy='99'
fill='#555'
fill='#858591'
r='95'
stroke='#555'
stroke='#858591'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'

25
client/src/assets/icons/Spacer.js Normal file
View File

@ -0,0 +1,25 @@
import React, { Fragment } from 'react';
function Spacer(props) {
return (
<Fragment>
<span className='sr-only'>Passed</span>
<svg
height='50'
viewBox='-10 -45 200 200'
width='50'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<g>
<title>Spacer</title>
<rect fillOpacity='0' height='200' paddingtop='5' width='200' />
</g>
</svg>
</Fragment>
);
}
Spacer.displayName = 'Spacer';
export default Spacer;

68
client/src/assets/icons/ToggleCheck.js Normal file
View File

@ -0,0 +1,68 @@
import React, { Fragment } from 'react';
function ToggleCheck(props) {
return (
<Fragment>
<span className='sr-only'>Passed</span>
<svg
height='50'
viewBox='-10 -45 200 200'
width='50'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<g>
<title>Passed</title>
<rect
fill='white'
height='60'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
transform='rotate(-45, 66.75, 123.75)'
width='148.85878'
x='65.57059'
y='75.32089'
/>
<rect
fill='white'
height='60'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
transform='rotate(45, 66.75, 123.75)'
width='120.66548'
x='-42.41726'
y='99.75'
/>
<rect
fill='black'
height='30'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
transform='rotate(-45, 66.75, 123.75)'
width='128.85878'
x='65.57059'
y='92.32089'
/>
<rect
fill='black'
height='30'
strokeDasharray='null'
strokeLinecap='null'
strokeLinejoin='null'
transform='rotate(-135, 66.75, 123.75)'
width='88.85878'
x='68.57059'
y='103.32089'
/>
</g>
</svg>
</Fragment>
);
}
ToggleCheck.displayName = 'ToggleCheck';
export default ToggleCheck;

2
client/src/images/freeCodeCamp-404.svg → client/src/assets/images/freeCodeCamp-404.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 609.4 238.2" enable-background="new 0 0 609.4 238.2">
<g fill="#006400">
<g fill="#858591">
<path d="M327.4,111.5c0.5,2.3,0.8,4.1,1.3,5.9c0.7,2.8,1.8,5.7-0.9,8c-2.9,2.5-6.3,3.1-9.9,1.7c-3.5-1.3-4.6-4.4-4.7-7.7
c-0.1-3.3,0.1-6.6,0.4-9.9c0.8-8.3-3.9-13.4-9.9-17.8c-0.9-0.7-2.1-1.1-3.2-1.3c-0.6-0.1-1.8,0.1-1.9,0.5
c-0.3,0.6-0.2,1.8,0.2,2.2c3.4,3.4,3.9,7.5,3.2,11.9c-0.7,4.4-3.1,7.9-6.4,10.8c-3.5,3.1-7,6.2-10.4,9.5
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
client/src/assets/images/square_puck.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

2
client/src/components/Donation/Donation.css
View File

@ -54,7 +54,7 @@
}
.donation-email-container input {
color: #006400;
color: var(--secondary-background);
font-weight: normal;
}

2
client/src/components/Donation/components/StripeCardForm.js
View File

@ -15,7 +15,7 @@ const propTypes = {
const style = {
base: {
color: '#006400',
color: '#0a0a23',
fontSize: '18px'
}
};

6
client/src/components/Donation/components/poweredByStripe.js
View File

@ -6,19 +6,19 @@ function PoweredByStripe() {
<svg height='26px' width='119px' xmlns='http://www.w3.org/2000/svg'>
<path
d='M113.000,26.000 L6.000,26.000 C2.686,26.000 -0.000,23.314 -0.000,20.000 L-0.000,6.000 C-0.000,2.686 2.686,-0.000 6.000,-0.000 L113.000,-0.000 C116.314,-0.000 119.000,2.686 119.000,6.000 L119.000,20.000 C119.000,23.314 116.314,26.000 113.000,26.000 ZM118.000,6.000 C118.000,3.239 115.761,1.000 113.000,1.000 L6.000,1.000 C3.239,1.000 1.000,3.239 1.000,6.000 L1.000,20.000 C1.000,22.761 3.239,25.000 6.000,25.000 L113.000,25.000 C115.761,25.000 118.000,22.761 118.000,20.000 L118.000,6.000 Z'
fill='rgb(66, 71, 112)'
fill='#858591'
fillRule='evenodd'
opacity='0.349'
/>
<path
d='M60.700,18.437 L59.395,18.437 L60.405,15.943 L58.395,10.871 L59.774,10.871 L61.037,14.323 L62.310,10.871 L63.689,10.871 L60.700,18.437 ZM55.690,16.259 C55.238,16.259 54.774,16.091 54.354,15.764 L54.354,16.133 L53.007,16.133 L53.007,8.566 L54.354,8.566 L54.354,11.229 C54.774,10.913 55.238,10.745 55.690,10.745 C57.100,10.745 58.068,11.881 58.068,13.502 C58.068,15.122 57.100,16.259 55.690,16.259 ZM55.406,11.902 C55.038,11.902 54.669,12.060 54.354,12.376 L54.354,14.628 C54.669,14.943 55.038,15.101 55.406,15.101 C56.164,15.101 56.690,14.449 56.690,13.502 C56.690,12.555 56.164,11.902 55.406,11.902 ZM47.554,15.764 C47.144,16.091 46.681,16.259 46.218,16.259 C44.818,16.259 43.840,15.122 43.840,13.502 C43.840,11.881 44.818,10.745 46.218,10.745 C46.681,10.745 47.144,10.913 47.554,11.229 L47.554,8.566 L48.912,8.566 L48.912,16.133 L47.554,16.133 L47.554,15.764 ZM47.554,12.376 C47.249,12.060 46.881,11.902 46.513,11.902 C45.744,11.902 45.218,12.555 45.218,13.502 C45.218,14.449 45.744,15.101 46.513,15.101 C46.881,15.101 47.249,14.943 47.554,14.628 L47.554,12.376 ZM39.535,13.870 C39.619,14.670 40.251,15.217 41.134,15.217 C41.619,15.217 42.155,15.038 42.702,14.722 L42.702,15.849 C42.103,16.122 41.503,16.259 40.913,16.259 C39.324,16.259 38.209,15.101 38.209,13.460 C38.209,11.871 39.303,10.745 40.808,10.745 C42.187,10.745 43.123,11.829 43.123,13.375 C43.123,13.523 43.123,13.691 43.102,13.870 L39.535,13.870 ZM40.756,11.786 C40.103,11.786 39.598,12.271 39.535,12.997 L41.829,12.997 C41.787,12.281 41.356,11.786 40.756,11.786 ZM35.988,12.618 L35.988,16.133 L34.641,16.133 L34.641,10.871 L35.988,10.871 L35.988,11.397 C36.367,10.976 36.830,10.745 37.282,10.745 C37.430,10.745 37.577,10.755 37.724,10.797 L37.724,11.997 C37.577,11.955 37.409,11.934 37.251,11.934 C36.809,11.934 36.335,12.176 35.988,12.618 ZM29.979,13.870 C30.063,14.670 30.694,15.217 31.578,15.217 C32.062,15.217 32.599,15.038 33.146,14.722 L33.146,15.849 C32.546,16.122 31.946,16.259 31.357,16.259 C29.768,16.259 28.653,15.101 28.653,13.460 C28.653,11.871 29.747,10.745 31.252,10.745 C32.630,10.745 33.567,11.829 33.567,13.375 C33.567,13.523 33.567,13.691 33.546,13.870 L29.979,13.870 ZM31.199,11.786 C30.547,11.786 30.042,12.271 29.979,12.997 L32.273,12.997 C32.231,12.281 31.799,11.786 31.199,11.786 ZM25.274,16.133 L24.200,12.555 L23.137,16.133 L21.927,16.133 L20.117,10.871 L21.464,10.871 L22.527,14.449 L23.590,10.871 L24.810,10.871 L25.873,14.449 L26.936,10.871 L28.283,10.871 L26.484,16.133 L25.274,16.133 ZM17.043,16.259 C15.454,16.259 14.328,15.112 14.328,13.502 C14.328,11.881 15.454,10.745 17.043,10.745 C18.632,10.745 19.748,11.881 19.748,13.502 C19.748,15.112 18.632,16.259 17.043,16.259 ZM17.043,11.871 C16.254,11.871 15.707,12.534 15.707,13.502 C15.707,14.470 16.254,15.133 17.043,15.133 C17.822,15.133 18.369,14.470 18.369,13.502 C18.369,12.534 17.822,11.871 17.043,11.871 ZM11.128,13.533 L9.918,13.533 L9.918,16.133 L8.571,16.133 L8.571,8.892 L11.128,8.892 C12.602,8.892 13.654,9.850 13.654,11.218 C13.654,12.586 12.602,13.533 11.128,13.533 ZM10.939,9.987 L9.918,9.987 L9.918,12.439 L10.939,12.439 C11.718,12.439 12.265,11.944 12.265,11.218 C12.265,10.482 11.718,9.987 10.939,9.987 Z'
fill='rgb(66, 71, 112)'
fill='#858591'
fillRule='evenodd'
opacity='0.502'
/>
<path
d='M111.116,14.051 L105.557,14.051 C105.684,15.382 106.659,15.774 107.766,15.774 C108.893,15.774 109.781,15.536 110.555,15.146 L110.555,17.433 C109.784,17.861 108.765,18.169 107.408,18.169 C104.642,18.169 102.704,16.437 102.704,13.013 C102.704,10.121 104.348,7.825 107.049,7.825 C109.746,7.825 111.154,10.120 111.154,13.028 C111.154,13.303 111.129,13.898 111.116,14.051 ZM107.031,10.140 C106.321,10.140 105.532,10.676 105.532,11.955 L108.468,11.955 C108.468,10.677 107.728,10.140 107.031,10.140 ZM98.108,18.169 C97.114,18.169 96.507,17.750 96.099,17.451 L96.093,20.664 L93.254,21.268 L93.253,8.014 L95.753,8.014 L95.901,8.715 C96.293,8.349 97.012,7.825 98.125,7.825 C100.119,7.825 101.997,9.621 101.997,12.927 C101.997,16.535 100.139,18.169 98.108,18.169 ZM97.446,10.340 C96.795,10.340 96.386,10.578 96.090,10.903 L96.107,15.122 C96.383,15.421 96.780,15.661 97.446,15.661 C98.496,15.661 99.200,14.518 99.200,12.989 C99.200,11.504 98.485,10.340 97.446,10.340 ZM89.149,8.014 L91.999,8.014 L91.999,17.966 L89.149,17.966 L89.149,8.014 ZM89.149,4.836 L91.999,4.230 L91.999,6.543 L89.149,7.149 L89.149,4.836 ZM86.110,11.219 L86.110,17.966 L83.272,17.966 L83.272,8.014 L85.727,8.014 L85.905,8.853 C86.570,7.631 87.897,7.879 88.275,8.015 L88.275,10.625 C87.914,10.508 86.781,10.338 86.110,11.219 ZM80.024,14.475 C80.024,16.148 81.816,15.627 82.179,15.482 L82.179,17.793 C81.801,18.001 81.115,18.169 80.187,18.169 C78.502,18.169 77.237,16.928 77.237,15.247 L77.250,6.138 L80.022,5.548 L80.024,8.014 L82.180,8.014 L82.180,10.435 L80.024,10.435 L80.024,14.475 ZM76.485,14.959 C76.485,17.003 74.858,18.169 72.497,18.169 C71.518,18.169 70.448,17.979 69.392,17.525 L69.392,14.814 C70.345,15.332 71.559,15.721 72.500,15.721 C73.133,15.721 73.589,15.551 73.589,15.026 C73.589,13.671 69.273,14.181 69.273,11.038 C69.273,9.028 70.808,7.825 73.111,7.825 C74.052,7.825 74.992,7.969 75.933,8.344 L75.933,11.019 C75.069,10.552 73.972,10.288 73.109,10.288 C72.514,10.288 72.144,10.460 72.144,10.903 C72.144,12.181 76.485,11.573 76.485,14.959 Z'
fill='rgb(66, 71, 112)'
fill='#858591'
fillRule='evenodd'
opacity='0.502'
/>

138
client/src/components/Footer/footer.css
View File

@ -1,39 +1,129 @@
.footer {
background-color: #f1f5f8;
font-size: 0.9em;
width: 100%;
.site-footer {
position: relative;
color: var(--tertiary-color);
background: var(--tertiary-background);
line-height: 1.6;
font-family: 'Lato', sans-serif;
font-size: 15px;
}
.footer-container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 40px;
margin-top: auto;
padding-bottom: 40px;
font-size: 15px;
overflow-x: hidden;
}
.footer .col-header {
.footer-container p {
font-family: 'Lato', sans-serif;
margin: 0 0 1.45rem;
font-size: 15px;
}
.footer-container a {
color: var(--tertiary-color);
}
.footer-container .col-header {
padding-bottom: 5px;
padding-left: 5px;
font-weight: bold;
font-weight: 700;
}
.footer-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.footer a:not([class*='inline']) {
display: block;
padding-left: 5px;
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
display: flex;
flex-direction: column;
flex: 0 0 100%;
padding-left: 15px;
padding-right: 15px;
font-size: 15px;
margin: 0 0 1.45rem;
}
.footer a:hover {
outline-offset: 1px;
outline: 1px dashed #a0a0a0;
background-color: #ffbe41;
.footer-col-1 a,
.footer-col-2 a,
.footer-col-3 a,
.footer-col-4 a {
text-decoration: none;
}
.night .footer {
color: #606f7b;
background: #222;
.footer-col-1 a:hover,
.footer-col-2 a:hover,
.footer-col-3 a:hover,
.footer-col-4 a:hover {
text-decoration: underline;
}
.night .footer a {
color: #006400;
.footer-desc-col {
flex: 1 0 90%;
display: flex;
flex-direction: column;
padding-left: 15px;
padding-right: 15px;
}
.night .footer a:hover {
color: #606f7b;
outline-offset: 1px;
outline: 1px dashed #a0a0a0;
.footer-desc-col a {
text-decoration: underline;
}
@media (min-width: 500px) {
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
flex: 1 0 45%;
height: auto;
font-size: 16.5;
}
}
@media (min-width: 800px) {
.footer-container {
width: 750px;
}
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
flex: 1 0 100px;
height: auto;
font-size: 16.5;
}
.footer-col-4 {
flex: 1 0 180px;
}
}
@media (min-width: 1020px) {
.footer-container {
width: 850px;
}
}
@media (min-width: 1200px) {
.footer-container {
width: 1170px;
}
.footer-desc-col {
flex: 1 0 31%;
}
.footer-col-1,
.footer-col-2,
.footer-col-3 {
flex: 1 0 120px;
}
.footer-col-4 {
flex: 4 0 100px;
}
}

202
client/src/components/Footer/index.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Link from '../helpers/Link';
@ -19,10 +18,10 @@ ColHeader.propTypes = propTypes;
function Footer() {
return (
<footer className='footer'>
<Grid>
<Row>
<Col lg={5} sm={6}>
<footer className='site-footer'>
<div className='footer-container'>
<div className='footer-row'>
<div className='footer-desc-col'>
<p>
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
organization (United States Federal Tax Identification Number:
@ -37,52 +36,171 @@ function Footer() {
<p>
Donations to freeCodeCamp go toward our education initiatives, and
help pay for servers, services, and staff. You can&nbsp;
<Link className='inline' external={true} to='/donate'>
<Link
className='inline'
external={true}
to='https://freecodecamp.org/donate'
>
make a tax-deductible donation here
</Link>
.
</p>
</Col>
<Col sm={2} xs={6}>
<ColHeader>Our Nonprofit</ColHeader>
<Link to='/about'>About</Link>
<Link to='/donate'>Donate</Link>
<Link to='https://shop.freecodecamp.org'>Shop</Link>
<Link to='/sponsors'>Sponsors</Link>
<a href='mailto:team@freecodecamp.org'>Email Us</a>
</Col>
<Col sm={2} xs={6}>
<ColHeader>Our Community</ColHeader>
<Link external={true} to='/news'>
News
</div>
<div className='footer-col-1'>
<div className='col-header'>Our Nonprofit</div>
<Link to='https://www.freecodecamp.org/news/about-freecodecamp/'>
About
</Link>
<Link to='https://www.linkedin.com/school/free-code-camp/people/'>
<Link to='https://freecodecamp.org/donate'>Donate</Link>
<Link external={true} to='https://www.freecodecamp.org/news/shop/'>
Shop
</Link>
<Link
external={true}
to='https://www.linkedin.com/school/free-code-camp/people/'
>
Alumni Network
</Link>
<Link to='https://study-group-directory.freecodecamp.org'>
Study Groups
<Link to='https://github.com/freeCodeCamp/'>Open Source</Link>
<Link to='https://www.freecodecamp.org/news/support/'>Support</Link>
<Link to='https://www.freecodecamp.org/news/our-sponsors/'>
Sponsors
</Link>
<Link external={true} to='/forum'>
Forum
<Link to='https://www.freecodecamp.org/news/academic-honesty-policy/'>
Academic Honesty
</Link>
<Link to='https://gitter.im/FreeCodeCamp/home'>Gitter</Link>
<Link to='https://github.com/freeCodeCamp/'>GitHub</Link>
<Link to='/support'>Support</Link>
<Link to='/academic-honesty'>Academic Honesty</Link>
<Link to='/code-of-conduct'>Code of Conduct</Link>
<Link to='/privacy-policy'>Privacy Policy</Link>
<Link to='/terms-of-service'>Terms of Service</Link>
</Col>
<Col lg={3} sm={2} xs={12}>
<ColHeader>Our Learning Resources</ColHeader>
<Link to='/learn'>Learn</Link>
<Link to='https://www.youtube.com/freecodecamp'>Youtube</Link>
<Link to='https://podcast.freecodecamp.org'>Podcast</Link>
<Link to='https://twitter.com/freecodecamp'>Twitter</Link>
<Link to='https://instagram.com/freecodecamp'>Instagram</Link>
</Col>
</Row>
</Grid>
<Link to='https://www.freecodecamp.org/news/code-of-conduct/'>
Code of Conduct
</Link>
<Link to='https://www.freecodecamp.org/news/privacy-policy/'>
Privacy Policy
</Link>
<Link to='https://www.freecodecamp.org/news/freecodecamps-terms-of-service/'>
Terms of Service
</Link>
<Link to='https://www.freecodecamp.org/news/copyright-policy/'>
Copyright Policy
</Link>
</div>
<div className='footer-col-2'>
<div className='col-header'>Best Tutorials</div>
<Link to='https://www.freecodecamp.org/news/best-python-tutorial/'>
Python Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-git-tutorial/'>
Git Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/the-best-linux-tutorials/'>
Linux Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-javascript-tutorial/'>
JavaScript Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-react-javascript-tutorial/'>
React Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-html-html5-tutorial/'>
HTML Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-css-and-css3-tutorial/'>
CSS Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-sql-database-tutorial/'>
SQL Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-java-8-tutorial/'>
Java Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-angular-tutorial-angularjs/'>
Angular Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-wordpress-tutorial/'>
WordPress Tutorial
</Link>
<Link to='https://www.freecodecamp.org/news/best-bootstrap-tutorial-responsive-web-design/'>
Bootstrap Tutorial
</Link>
</div>
<div className='footer-col-3'>
<div className='col-header'>Best Examples</div>
<Link to='https://www.freecodecamp.org/news/python-example/'>
Python Example{' '}
</Link>
<Link to='https://www.freecodecamp.org/news/javascript-example/'>
JavaScript Example
</Link>
<Link to='https://www.freecodecamp.org/news/react-examples-reactjs/'>
React Example
</Link>
<Link to='https://www.freecodecamp.org/news/linux-example-bash-command-line/'>
Linux Example
</Link>
<Link to='https://www.freecodecamp.org/news/html-and-html5-example/'>
HTML Example
</Link>
<Link to='https://www.freecodecamp.org/news/css-example-css3/'>
CSS Example
</Link>
<Link to='https://www.freecodecamp.org/news/sql-example/'>
SQL Example
</Link>
<Link to='https://www.freecodecamp.org/news/java-example/'>
Java Example
</Link>
<Link to='https://www.freecodecamp.org/news/the-best-angular-examples/'>
Angular Example
</Link>
<Link to='https://www.freecodecamp.org/news/the-best-jquery-examples/'>
jQuery Example
</Link>
<Link to='https://www.freecodecamp.org/news/the-best-bootstrap-examples/'>
Bootstrap Example
</Link>
<Link to='https://www.freecodecamp.org/news/the-best-php-examples/'>
PHP Example
</Link>
</div>
<div className='footer-col-4'>
<div className='col-header'>Trending Reference</div>
<Link to='https://www.freecodecamp.org/news/2019-web-developer-roadmap/'>
2019 Web Developer Roadmap
</Link>
<Link to='https://www.freecodecamp.org/news/linux-command-line-bash-tutorial/'>
Linux Command Line Guide
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-git-reset-and-git-revert/'>
Git Reset and Git Revert
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-git-merge-and-git-rebase/'>
Git Merge and Git Rebase
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-array-methods-map/'>
JavaScript Array Map
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-array-methods-reduce/'>
JavaScript Array Reduce
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-date-and-moment-js/'>
JavaScript Date
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-javascript-string-methods-split/'>
JavaScript String Split
</Link>
<Link to='https://www.freecodecamp.org/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/'>
CSS Flexbox Guide
</Link>
<Link to='https://www.freecodecamp.org/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/'>
CSS Grid Guide
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-linux-creating-a-sudo-user/'>
Create a Linux Sudo User
</Link>
<Link to='https://www.freecodecamp.org/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/'>
How to Set Up SSH Keys
</Link>
</div>
</div>
</div>
</footer>
);
}

24
client/src/components/FourOhFour/404.css
View File

@ -14,10 +14,9 @@
}
.quote-wrapper {
background-color: #eee;
background-color: var(--tertiary-background);
padding: 20px 20px 20px 42px;
border-width: 0;
border-radius: 5px;
position: relative;
max-width: 980px;
}
@ -32,12 +31,13 @@
.quote-wrapper span {
font-size: 50px;
font-weight: 600;
color: #a5a5a5;
color: var(--tertiary-color);
font-family: 'Arial', sans-serif;
font-style: normal;
padding-left: 15px;
padding-top: 5px;
position: absolute;
border-radius: 0;
top: 0;
left: 0;
}
@ -46,21 +46,3 @@
text-align: right;
margin: 0;
}
.btn-curriculum {
margin-top: 20px;
background-color: #ffac33;
background-image: linear-gradient(#ffcc4d, #ffac33);
border: 1px solid #f1a02a;
color: #292f33;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
max-height: 38px;
padding: 8px 12px;
border-radius: 4px;
text-align: center;
}
.btn-curriculum:hover {
text-decoration: none;
color: inherit;
}

4
client/src/components/FourOhFour/index.js
View File

@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
import Spinner from 'react-spinkit';
import { Link } from 'gatsby';
import notFoundLogo from '../../images/freeCodeCamp-404.svg';
import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
import { quotes } from '../../resources/quotes.json';
import './404.css';
@ -49,7 +49,7 @@ class NotFoundPage extends Component {
) : (
<Spinner color='#006400' name='ball-clip-rotate-multiple' />
)}
<Link className='btn-curriculum' to='/learn'>
<Link className='btn btn-cta' to='/learn'>
View the Curriculum
</Link>
</div>

18
client/src/components/Header/components/SignedIn.js
View File

@ -1,18 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';
function SignedIn() {
return (
<Link className='top-right-nav-link' to='/settings'>
Settings
</Link>
);
}
SignedIn.displayName = 'SignedIn';
SignedIn.propTypes = {
picture: PropTypes.string
};
export default SignedIn;

10
client/src/components/Header/components/UserState.js
View File

@ -2,11 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Link } from 'gatsby';
import Spinner from 'react-spinkit';
import { isSignedInSelector, userFetchStateSelector } from '../../../redux';
import Login from './Login';
import SignedIn from './SignedIn';
const mapStateToProps = createSelector(
userFetchStateSelector,
@ -41,7 +41,13 @@ function UserState(props) {
/>
);
}
return isSignedIn ? <SignedIn /> : <Login />;
return isSignedIn ? (
<Link className='top-right-nav-link' to='/settings'>
Settings
</Link>
) : (
<Login />
);
}
UserState.displayName = 'UserState';

20
client/src/components/Header/components/login.css
View File

@ -1,23 +1,3 @@
.signup-btn {
background-color: #ffac33;
background-image: linear-gradient(#ffcc4d, #ffac33);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#ffac33, GradientType=0)';
border-color: #f1a02a;
color: #292f33 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
padding: 4px 12px;
}
.signup-btn:hover,
.signup-btn:focus,
.signup-btn:active:hover {
background-color: #e99110;
background-image: linear-gradient(#ffcc4d, #e99110);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#e99110, GradientType=0)';
border-color: #ec8b11;
color: #292f33 !important;
}
.signup-btn:active {
background-color: #f2a330;
background-image: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

3
client/src/components/Header/components/menuButton.css
View File

@ -4,12 +4,11 @@
margin: 0 20px 0 12px;
padding: 2px 14px;
border: 1px solid #fff;
border-radius: 3px;
}
#top-nav .menu-button-open {
background: white;
color: #006400;
color: var(--theme-color);
}
@media (min-width: 735px) {

8
client/src/components/Header/components/menuLinks.css
View File

@ -4,7 +4,6 @@
list-style: none;
justify-content: space-between;
align-items: center;
background-color: #006400;
}
#top-right-nav li {
@ -16,13 +15,14 @@
color: #fff;
font-size: 18px;
padding: 8px 15px;
text-decoration: none;
}
.top-right-nav-link:hover,
.top-right-nav-link:focus,
.top-right-nav-link:active {
background-color: #fff;
color: #006400;
color: var(--theme-color);
text-decoration: none;
}
@ -35,6 +35,10 @@
animation-duration: 1.5s !important;
}
.top-nav-expanded {
background-color: var(--theme-color);
}
#top-right-nav .signup-btn,
#top-right-nav .settings-link {
margin: 0 15px;

10
client/src/components/Header/header.css
View File

@ -1,7 +1,3 @@
:root {
--header-height: 38px;
}
header {
top: 0;
position: fixed;
@ -10,7 +6,7 @@ header {
}
#top-nav {
background: #006400;
background: var(--theme-color);
height: var(--header-height);
margin-bottom: 0;
border-radius: 0;
@ -26,6 +22,10 @@ header {
align-items: center;
}
#top-nav .home-link:hover {
background-color: var(--theme-color);
}
/* Navbar logo */
#top-nav .nav-logo {

6
client/src/components/Map/components/Block.js
View File

@ -8,11 +8,11 @@ import { Link } from 'gatsby';
import ga from '../../../analytics';
import { makeExpandedBlockSelector, toggleBlock } from '../redux';
import { userSelector } from '../../../redux';
import Caret from '../../icons/Caret';
import Caret from '../../../assets/icons/Caret';
import { blockNameify } from '../../../../utils/blockNameify';
/* eslint-disable max-len */
import GreenPass from '../../../templates/Challenges/components/icons/GreenPass';
import GreenNotCompleted from '../../../templates/Challenges/components/icons/GreenNotCompleted';
import GreenPass from '../../../assets/icons/GreenPass';
import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
/* eslint-enable max-len */
const mapStateToProps = (state, ownProps) => {
const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);

2
client/src/components/Map/components/SuperBlock.js
View File

@ -8,7 +8,7 @@ import { uniq, find } from 'lodash';
import Block from './Block';
import { makeExpandedSuperBlockSelector, toggleSuperBlock } from '../redux';
import Caret from '../../icons/Caret';
import Caret from '../../../assets/icons/Caret';
import { ChallengeNode } from '../../../redux/propTypes';
const mapStateToProps = (state, ownProps) => {

43
client/src/components/Map/map.css
View File

@ -1,28 +1,29 @@
.map-ui {
height: 100%;
margin-left: 35px;
}
@media screen, (max-width: 630px) {
.map-ui {
margin: 0 auto;
}
}
.map-ui ul {
list-style: none;
color: #006400;
color: var(--secondary-color);
}
.map-title {
.map-ui > ul {
padding: 0;
}
button.map-title {
display: flex;
align-items: center;
padding-top: 10px;
padding-bottom: 20px;
cursor: pointer;
padding-top: 18px;
padding-bottom: 18px;
background: transparent;
border: none;
border-bottom: 1px solid #e2e2e2;
background-color: transparent;
width: 100%;
}
button.map-title:hover {
color: var(--tertiary-color);
background-color: var(--tertiary-background);
}
.map-title > h4 {
@ -35,10 +36,12 @@
padding-left: 20px;
}
.map-title > svg {
.superblock .map-title svg {
width: 14px;
margin-right: 5px;
flex-shrink: 0;
fill: var(--color-quaternary) !important;
stroke: var(--color-quaternary);
}
li.open > .map-title svg:first-child {
@ -50,12 +53,6 @@ li.open > .map-title svg:first-child {
max-width: 28rem;
}
.night .map-challenge-title a,
.night .map-title h4,
.night .map-title-completed {
color: #67d269;
}
.map-challenge-title-completed {
opacity: 0.5;
.block a {
text-decoration: none;
}

20
client/src/components/helpers/ToggleButton.js
View File

@ -6,6 +6,8 @@ import {
} from '@freecodecamp/react-bootstrap';
import './toggle-button.css';
import ToggleCheck from '../../assets/icons/ToggleCheck';
import Spacer from '../../assets/icons/Spacer';
const propTypes = {
name: PropTypes.string.isRequired,
@ -26,21 +28,30 @@ export default function ToggleButton({
onLabel = 'On',
offLabel = 'Off'
}) {
const checkIconStyle = {
height: '15px',
width: '20px'
};
return (
<Fragment>
<BSBG name={name} onChange={onChange} type='radio'>
<TB
bsSize='lg'
bsSize='sm'
bsStyle='primary'
className={`toggle-${getActiveClass(value)}`}
disabled={value}
type='radio'
value={1}
>
{value ? (
<ToggleCheck style={checkIconStyle} />
) : (
<Spacer style={checkIconStyle} />
)}
{onLabel}
</TB>
<TB
bsSize='lg'
bsSize='sm'
bsStyle='primary'
className={`toggle-${getActiveClass(!value)}`}
disabled={!value}
@ -48,6 +59,11 @@ export default function ToggleButton({
value={2}
>
{offLabel}
{!value ? (
<ToggleCheck style={checkIconStyle} />
) : (
<Spacer style={checkIconStyle} />
)}
</TB>
</BSBG>
</Fragment>

2
client/src/components/helpers/loader.css
View File

@ -8,5 +8,5 @@
.full-screen-wrapper .sk-spinner {
transform: scale(2);
color: #006400;
color: var(--secondary-color);
}

35
client/src/components/helpers/toggle-button.css
View File

@ -1,32 +1,29 @@
.toggle-active.btn[disabled] {
background-color: #006400;
background-color: var(--secondary-color);
color: var(--secondary-background);
opacity: 1;
}
.night .toggle-active {
color: #ddd;
}
.toggle-not-active.btn-primary.active {
background-color: #006400;
}
.toggle-not-active {
background-color: #ffffff;
color: rgb(0, 49, 0);
background-color: var(--quaternary-background);
color: var(--secondary-color);
}
.night .toggle-not-active {
background-color: #dedede;
color: #333;
.toggle-not-active:hover {
color: var(--secondary-background);
}
.toggle-not-active:hover,
.toggle-not-active:focus {
background-color: #006400;
background-color: var(--secondary-color);
}
.night .toggle-not-active:hover,
.night .toggle-not-active:focus {
color: #ddd;
.btn .toggle-not-active,
.btn .toggle-active {
border-color: var(--secondary-color);
}
.btn-group .btn-primary,
.btn-group .btn-primary:focus,
.btn-group .btn-primary:hover {
border-color: var(--secondary-color);
}

23
client/src/components/layouts/Default.js
View File

@ -11,7 +11,8 @@ import {
fetchUser,
isSignedInSelector,
onlineStatusChange,
isOnlineSelector
isOnlineSelector,
userSelector
} from '../../redux';
import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
@ -25,7 +26,7 @@ import Footer from '../Footer';
import './global.css';
import './layout.css';
import './night.css';
import './variables.css';
fontawesome.config = {
autoAddCss: false
@ -70,18 +71,21 @@ const propTypes = {
onlineStatusChange: PropTypes.func.isRequired,
pathname: PropTypes.string.isRequired,
removeFlashMessage: PropTypes.func.isRequired,
showFooter: PropTypes.bool
showFooter: PropTypes.bool,
theme: PropTypes.string
};
const mapStateToProps = createSelector(
isSignedInSelector,
flashMessageSelector,
isOnlineSelector,
(isSignedIn, flashMessage, isOnline) => ({
userSelector,
(isSignedIn, flashMessage, isOnline, user) => ({
isSignedIn,
flashMessage,
hasMessage: !!flashMessage.message,
isOnline
isOnline,
theme: user.theme
})
);
const mapDispatchToProps = dispatch =>
@ -131,11 +135,15 @@ class DefaultLayout extends Component {
isSignedIn,
landingPage,
removeFlashMessage,
showFooter = true
showFooter = true,
theme
} = this.props;
return (
<Fragment>
<Helmet
bodyAttributes={{
class: `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
}}
meta={[
{
name: 'description',
@ -151,7 +159,8 @@ class DefaultLayout extends Component {
<WithInstantSearch>
<Header disableSettings={landingPage} />
<div
className={`default-layout ${landingPage ? 'landing-page' : ''}`}
className={`default-layout
${landingPage ? 'landing-page' : ''}`}
>
<OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
{hasMessage && flashMessage ? (

305
client/src/components/layouts/global.css
View File

@ -1,3 +1,13 @@
html {
font-size: 18px;
}
body {
font-family: 'Roboto Mono', monospace;
color: var(--secondary-color);
background: var(--secondary-background);
}
.btn-cta-big {
max-height: 100%;
font-size: 40px;
@ -7,13 +17,46 @@
.big-heading {
font-size: 50px !important;
}
h1,
h2,
h3,
.default-layout {
display: block;
margin-top: var(--header-height);
background: var(--secondary-background);
}
h1 {
color: var(--secondary-color);
font-weight: 700;
font-size: 1.5rem;
font-family: 'Roboto Mono', monospace;
margin: 1.2rem 0 1.2rem;
}
h2 {
color: var(--secondary-color);
font-weight: 700;
font-size: 1.2rem;
font-family: 'Roboto Mono', monospace;
margin: 1.2rem 0 1.2rem;
}
h3 {
color: var(--secondary-color);
font-weight: 700;
font-size: 1.1rem;
font-family: 'Roboto Mono', monospace;
margin: 0 0 1.2rem;
}
h4,
h5,
h6 {
h6,
p,
td,
th {
color: var(--secondary-color);
font-weight: 400;
font-size: 1rem;
font-family: 'Roboto Mono', monospace;
margin: 0 0 1.2rem;
}
.text-center {
@ -21,26 +64,266 @@ h6 {
}
.green-text {
color: #006400;
color: var(--secondary-color);
}
.btn-invert {
background-color: #fff;
color: #006400;
a:hover {
color: var(--tertiary-color);
background-color: var(--tertiary-background);
}
a {
color: inherit;
text-decoration: underline;
}
a:hover,
a:focus {
text-decoration: none;
}
/* modal */
.fcc-modal {
background-color: #006400;
color: #fff;
background-color: var(--secondary-background);
color: var(--secondary-color);
}
.fcc-modal .close {
color: #fff;
color: var(--secondary-color);
opacity: 100%;
font-size: 28px;
text-shadow: none;
}
.modal-content {
background-color: var(--secondary-background);
}
/* button */
.btn {
background-color: var(--quaternary-background);
border-width: 3px;
border-color: var(--secondary-color);
color: var(--secondary-color);
border-radius: 0px;
text-decoration: none;
/* outline: none; */
}
.btn:hover,
.btn-primary:hover {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
color: var(--secondary-background);
}
.btn:active,
.btn-primary:active {
background-color: var(--secondary-background);
}
.btn:focus,
.btn-primary:focus,
.btn-primary.focus {
background-color: var(--quaternary-background);
color: var(--secondary-color);
border-color: var(--secondary-color);
}
.btn:active:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
background-color: var(--secondary-color);
color: var(--secondary-background);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
cursor: not-allowed;
background-color: var(--quaternary-background);
border-color: var(--quaternary-color);
color: var(--quaternary-color);
}
/* .btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
} */
.btn-cta {
background-color: #ffac33;
background-image: linear-gradient(#ffcc4d, #ffac33);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#ffac33, GradientType=0)';
border-color: #f1a02a;
color: #0a0a23 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border: none;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active:hover {
background-color: #e99110;
background-image: linear-gradient(#ffcc4d, #e99110);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#e99110, GradientType=0)';
color: #0a0a23 !important;
}
.btn-cta:active {
background-image: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}
strong {
color: var(--secondary-color);
}
.form-control {
color: var(--theme-color);
outline: none;
border-color: var(--quaternary-background);
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0px;
}
input {
outline: none;
border-color: var(--quaternary-background);
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0px;
}
form {
margin-bottom: 5px;
}
.form-control:focus,
input:focus {
border-color: var(--tertiary-color);
}
code {
background-color: var(--quaternary-background);
color: var(--tertiary-color);
border-radius: 0px;
font-family: 'Roboto Mono', monospace;
}
.panel {
border-radius: 0;
background-color: transparent;
}
.help-block em {
font-size: 0.8rem;
}
hr {
border-top: 1px solid var(--quaternary-background);
}
.panel-default {
background: var(--secondary-background);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover {
background-color: var(--secondary-color);
color: var(--secondary-background);
}
.open > .dropdown-menu {
border-radius: 0px;
}
.dropdown-menu > li > a {
color: var(--secondary-background);
}
.dropdown-menu {
background-color: var(--secondary-color);
}
.table-striped > tbody > tr:nth-child(2n + 1) > td,
.table-striped > tbody > tr:nth-child(2n + 1) > th {
background-color: var(--tertiary-background);
}
.help-block {
color: var(--quaternary-color);
}
.panel-default > .panel-heading {
background-color: transparent;
}
.challenge-output span {
font-size: 1rem;
}
.breadcrumb {
background: var(--tertiary-background);
border-radius: 0px;
}
code[class*='language-'],
pre[class*='language-'] {
border-radius: 0px;
}
pre {
color: inherit;
background-color: inherit;
border: none;
border-radius: 0;
}
.list-group-item {
background: transparent;
border: none;
border-radius: 0;
}
.intro-toc .list-group-item:hover {
background-color: var(--tertiary-background) !important;
border-radius: 0;
}
.panel-primary > .panel-heading {
background-color: transparent;
border-color: var(--color-primary);
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
color: var(--highlight-color);
}

4
client/src/components/layouts/layout.css
View File

@ -1,4 +1,4 @@
html {
/* html {
font-family: 'Lato', sans-serif;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
@ -603,4 +603,4 @@ pre code {
flex-direction: column;
margin-top: var(--header-height);
min-height: calc(100vh - var(--header-height));
}
} */

12
client/src/components/layouts/learn.css
View File

@ -3,9 +3,7 @@
}
#learn-app-wrapper .reflex-container.vertical .reflex-splitter:hover {
border-left: 2px solid #006400;
border-right: 2px solid #006400;
background-color: #006400;
background-color: var(--tertiary-color);
}
#learn-app-wrapper .reflex-container.vertical > .reflex-splitter {
@ -13,11 +11,13 @@
}
#learn-app-wrapper .reflex-container.horizontal .reflex-splitter:hover {
border-top: 2px solid #006400;
border-bottom: 2px solid #006400;
background-color: #006400;
background-color: var(--quaternary-background);
width: 5px;
border: none;
}
#learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
height: 5px;
background-color: var(--quaternary-background);
border: none;
}

51
client/src/components/layouts/night.css
View File

@ -1,51 +0,0 @@
.night body {
background-color: #333;
color: #ddd;
}
.night .btn-invert {
background-color: #ddd;
color: #006400;
}
.night .btn-invert:hover,
.night .btn-invert:focus {
background-color: #006400;
color: #ddd;
}
.night input,
.night textarea {
background-color: #ddd;
color: #333;
}
.night a {
color: #f8f8f8;
}
.night .table-striped > tbody > tr:nth-child(odd) {
background-color: #555555;
}
.night .challenge-preview {
background: #fff;
}
.night .test-result:nth-child(2n + 1) {
color: #fff;
background: #2a2a2a;
}
.night .challenge-instructions pre,
.night .challenge-instructions pre code,
.night .challenge-instructions blockquote,
.night blockquote,
.night code,
.night pre {
background-color: #242424;
color: #02a902;
}
.night .list-group-item {
background-color: unset;
}

6
client/src/components/layouts/prism-night.css
View File

@ -7,7 +7,7 @@
.night code[class*='language-'],
.night pre[class*='language-'] {
color: #ccc;
color: var(--secondary-color);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
@ -29,7 +29,7 @@
}
.night pre[class*='language-'] code[class*='language-'] {
color: #d4d4d4;
color: var(--quaternary-color);
}
/* Code blocks */
@ -41,7 +41,7 @@
.night :not(pre) > code[class*='language-'],
.night pre[class*='language-'] {
background: #242424;
background: var(--primary-background);
}
/* Inline code */

40
client/src/components/layouts/variables.css Normal file
View File

@ -0,0 +1,40 @@
:root {
--header-height: 38px;
--theme-color: #0a0a23;
--gray-05: #f5f6f7;
--gray-mid: #858591;
}
.dark-palette {
--primary-color: #ffffff;
--secondary-color: #f5f6f7;
--tertiary-color: #dfdfe2;
--quaternary-color: #d0d0d5;
--quaternary-background: #3b3b4f;
--tertiary-background: #2a2a40;
--secondary-background: #1b1b32;
--primary-background: #0a0a23;
--highlight-color: #99c9ff;
--highlight-background: #002ead;
--success-color: #87d98e;
--success-background: #004d00;
--danger-color: #ffadad;
--danger-background: #850000;
}
.light-palette {
--primary-color: #0a0a23;
--secondary-color: #1b1b32;
--tertiary-color: #2a2a40;
--quaternary-color: #3b3b4f;
--quaternary-background: #d0d0d5;
--tertiary-background: #dfdfe2;
--secondary-background: #f5f6f7;
--primary-background: #ffffff;
--highlight-color: #002ead;
--highlight-background: #99c9ff;
--success-color: #004d00;
--success-background: #87d98e;
--danger-color: #850000;
--danger-background: #ffadad;
}

4
client/src/components/profile/components/heatmap.css
View File

@ -3,11 +3,11 @@
justify-content: space-around;
align-items: center;
font-size: 18px;
color: #006400;
color: var(--secondary-color);
}
.streak strong {
color: #333;
color: var(--secondary-color);
}
.night .streak strong {

18
client/src/components/search/searchBar/searchbar-base.css
View File

@ -136,7 +136,7 @@
height: 20px;
background-color: #fff;
border: 1px solid #333;
border-radius: 50%;
border-radius: 0;
cursor: -webkit-grab;
cursor: grab;
}
@ -242,7 +242,7 @@ a[class^='ais-'] {
font-size: 0.8rem;
color: #fff;
background-color: #0096db;
border-radius: 5px;
border-radius: 0px;
-webkit-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
outline: none;
@ -309,7 +309,7 @@ a[class^='ais-'] {
display: -ms-flexbox;
display: flex;
background-color: #495588;
border-radius: 5px;
border-radius: 0px;
}
.ais-CurrentRefinements-category {
margin-left: 0.3em;
@ -383,7 +383,7 @@ a[class^='ais-'] {
font-size: 0.8rem;
color: #3a4570;
background-color: #dfe2ee;
border-radius: 8px;
border-radius: 0px;
}
.ais-HierarchicalMenu-showMore,
.ais-Menu-showMore,
@ -449,7 +449,7 @@ a[class^='ais-'] {
background-size: 10px 10px;
background-position: 92% 50%;
border: 1px solid #c4c8d8;
border-radius: 5px;
border-radius: 0px;
}
.ais-Panel-header {
margin-bottom: 0.5rem;
@ -484,7 +484,7 @@ a[class^='ais-'] {
color: #fff;
background-color: #0096db;
border: none;
border-radius: 5px;
border-radius: 0px;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
outline: none;
@ -508,7 +508,7 @@ a[class^='ais-'] {
padding: 0.3rem 0.6rem;
display: block;
border: 1px solid #c4c8d8;
border-radius: 5px;
border-radius: 0px;
-webkit-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}
@ -600,8 +600,8 @@ a[class^='ais-'] {
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #c4c8d8;
border-radius: 5px;
border: none;
border-radius: 0px;
}
.ais-SearchBox-input::-webkit-input-placeholder {
color: #a5aed1;

2
client/src/components/search/searchBar/searchbar.css
View File

@ -6,7 +6,7 @@
.fcc_searchBar .ais-SearchBox-input,
.fcc_searchBar .ais-Hits {
background-color: #fff;
background-color: var(--quaternary-background);
}
.fcc_searchBar .ais-SearchBox-form {

3
client/src/components/settings/Portfolio.js
View File

@ -17,8 +17,6 @@ import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
import SectionHeader from './SectionHeader';
import BlockSaveButton from '../helpers/form/BlockSaveButton';
import './portfolio.css';
const propTypes = {
picture: PropTypes.string,
portfolio: PropTypes.arrayOf(
@ -285,7 +283,6 @@ class PortfolioSettings extends Component {
block={true}
bsSize='lg'
bsStyle='danger'
className='btn-delete-portfolio'
onClick={() => this.handleRemoveItem(id)}
type='button'
>

21
client/src/components/settings/danger-zone.css
View File

@ -1,22 +1,27 @@
.btn-danger {
background-color: #fff;
color: #ad1601;
border-color: #ad1601;
background-color: var(--danger-color);
color: var(--danger-background);
border-color: var(--danger-background);
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #ad1601;
color: var(--danger-color);
background-color: var(--danger-background);
border-color: var(--danger-background);
}
.danger-zone .panel-heading {
background-color: #ad1601;
color: #fff;
color: var(--danger-color);
background-color: var(--danger-background);
border-radius: 0;
border: none;
}
.danger-zone .panel-danger {
border-color: #ad1601;
border-color: var(--danger-background);
}
.danger-zone p {
color: #ad1601;
color: var(--danger-color);
}

16
client/src/components/settings/honesty.css
View File

@ -11,9 +11,12 @@
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 100, 0, 0.8);
background-color: var(--quaternary-color);
color: #fff;
border-color: #006400;
}
div .agreed p {
color: white;
}
.honesty-policy .agreed p {
@ -21,11 +24,6 @@
margin-bottom: 0;
}
.night .honesty-panel {
color: #333333;
background-color: #cccccc;
}
.night .honesty-panel a {
color: darkgreen;
.honesty-panel .btn-invert {
color: var(--primary-background);
}

4
client/src/components/settings/portfolio.css
View File

@ -1,4 +0,0 @@
.btn-delete-portfolio {
background-color: #fff;
color: #f11e00;
}

4
client/src/components/settings/solution-viewer.css
View File

@ -2,3 +2,7 @@
.solution-viewer pre {
margin-bottom: 0px;
}
.solution-viewer {
border-color: var(--color-primary);
}

1
client/src/components/settings/toggle-setting.css
View File

@ -1,7 +1,6 @@
.toggle-setting-container .form-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.toggle-setting-container .form-group label {

BIN
client/src/images/square_puck.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.9 KiB

15
client/src/pages/certification.css
View File

@ -14,7 +14,7 @@
max-width: 1500px;
width: 100%;
padding: 30px;
border: darkgreen 15px solid;
border: var(--theme-color) 15px solid;
border-radius: 3px;
}
@ -35,7 +35,7 @@
.certification-namespace header {
width: 100%;
height: 140px;
background-color: darkgreen;
background-color: var(--theme-color);
position: relative;
}
@ -63,7 +63,7 @@
margin-top: -20px;
height: 380px;
text-align: center;
background-color: #efefef;
background-color: var(--gray-05);
}
.certification-namespace .information-container {
@ -78,7 +78,8 @@
}
.certification-namespace h3 {
font-size: 30px;
font-size: 25px;
font-weight: normal;
}
.certification-namespace h4 {
@ -88,13 +89,13 @@
.certification-namespace h1 {
font-size: 40px;
color: #006400;
color: var(--theme-color);
}
.certification-namespace .signatures {
text-align: center;
margin: 0 auto;
background-color: #efefef;
background-color: var(--gray-05);
}
.certification-namespace .signatures img {
@ -113,7 +114,7 @@
font-size: 15px;
text-align: center;
word-wrap: break-word;
background-color: #efefef;
background-color: var(--gray-05);
}
/*mobile media queries*/

12
client/src/pages/common-pages.css
View File

@ -1,3 +1,15 @@
.questions > h4 {
font-size: 1.25rem;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border: none;
font-size: 1rem;
font-weight: bold;
padding-left: 0;
}

27
client/src/pages/index.css
View File

@ -1,26 +1,5 @@
/*
Embrace the cascade to override night mode styles
This ensures a consistent landing page, even for users with nigt mode enabled
*/
.night body .landing-page {
background-color: #fff;
color: #333;
}
.night .landing-page #top-right-nav li > a,
.night #top-right-nav li > span {
color: #fff;
}
.night .landing-page a {
color: #006400;
}
.night .landing-page a:hover {
color: #001800;
}
/* End night mode override */
.black-text {
color: #333;
color: var(--secondary-color);
font-weight: 400;
font-size: 40px;
}
@ -39,7 +18,7 @@
}
.landing-skill-icon {
color: #006400;
color: var(--secondary-color);
margin-top: -15px;
padding-bottom: 15px;
height: 150px;
@ -50,7 +29,7 @@
border-radius: 5px;
height: 200px;
width: 200px;
color: #006400;
color: var(--secondary-color);
}
.testimonial-copy {

9
client/src/pages/learn.css
View File

@ -1,19 +1,18 @@
.learn-page-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
top: 38px;
}
@media screen and (max-width: 630px) {
.learn-page-wrapper {
padding: 0 15px;
padding: 0 40px;
}
}
.learn-page-wrapper p {
margin-bottom: 0.75rem;
.map-ui p {
margin-bottom: 0rem;
}

3
client/src/pages/learn.js
View File

@ -40,7 +40,7 @@ const IndexPage = ({
<Helmet title='Learn | freeCodeCamp.org' />
<Spacer />
<Spacer />
<h2>Welcome to the freeCodeCamp curriculum</h2>
<h1 className='text-center'>Welcome to the freeCodeCamp curriculum</h1>
<p>
We have thousands of coding lessons to help you improve your skills.
</p>
@ -57,7 +57,6 @@ const IndexPage = ({
If you are new to coding, we recommend you{' '}
<Link to={slug}>start at the beginning</Link>.
</p>
<Spacer />
<Map
introNodes={mdEdges.map(({ node }) => node)}
nodes={edges

12
client/src/pages/welcome.css
View File

@ -10,7 +10,7 @@
.update-link {
text-decoration: underline;
font-size: 1.4em;
color: #006400;
color: var(--secondary-color);
}
p.stats {
@ -18,13 +18,5 @@ p.stats {
}
p.stats span {
color: #006400;
}
.night p.stats span {
color: #67d269;
}
.night .quote-partial .blockquote {
background-color: #333;
color: var(--secondary-color);
}

6
client/src/pages/welcome.js
View File

@ -89,11 +89,13 @@ function Welcome({
<title>Welcome | freeCodeCamp.org</title>
</Helmet>
<main>
<Grid className='text-center'>
<Grid>
<Row>
<Col xs={12}>
<Spacer />
<h1 className='big-heading'>Welcome {name ? name : 'Camper'}!</h1>
<h1 className='big-heading text-center'>
Welcome {name ? name : 'Camper'}!
</h1>
</Col>
</Row>
<Spacer />

13
client/src/templates/Challenges/classic/Editor.js
View File

@ -51,6 +51,9 @@ const defineMonacoThemes = monaco => {
monaco.editor.defineTheme('vs-dark-custom', {
base: 'vs-dark',
inherit: true,
colors: {
'editor.background': '#2a2a40'
},
rules: [
{ token: 'delimiter.js', foreground: lightBlueColor },
{ token: 'delimiter.parenthesis.js', foreground: yellowCollor },
@ -70,6 +73,12 @@ class Editor extends Component {
super(...props);
this.options = {
fontSize: '18px',
scrollBeyondLastLine: false,
selectionHighlight: false,
overviewRulerBorder: false,
hideCursorInOverviewRuler: true,
renderIndentGuides: false,
minimap: {
enabled: false
},
@ -78,7 +87,9 @@ class Editor extends Component {
scrollbar: {
horizontal: 'hidden',
vertical: 'visible',
verticalHasArrows: true
verticalHasArrows: false,
useShadows: false,
verticalScrollbarSize: 5
}
};

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

@ -3,7 +3,7 @@
}
.monaco-menu .action-label {
color: #a2bd9b;
color: var(--highlight-color);
letter-spacing: 0.02em;
}

2
client/src/templates/Challenges/components/Challenge-Title.js
View File

@ -25,7 +25,7 @@ function ChallengeTitle({
if (isCompleted) {
icon = (
// TODO Use SVG here
<i className='ion-checkmark-circled text-primary' title='Completed' />
<i className='ion-checkmark text-primary' title='Completed' />
);
}
return (

2
client/src/templates/Challenges/components/CompletionModal.js
View File

@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
import { Button, Modal } from '@freecodecamp/react-bootstrap';
import ga from '../../../analytics';
import GreenPass from './icons/GreenPass';
import GreenPass from '../../../assets/icons/GreenPass';
import { dasherize } from '../../../../utils';

2
client/src/templates/Challenges/components/Side-Panel.js
View File

@ -6,7 +6,6 @@ import ChallengeTitle from './Challenge-Title';
import ChallengeDescription from './Challenge-Description';
import ToolPanel from './Tool-Panel';
import TestSuite from './Test-Suite';
import Spacer from '../../../components/helpers/Spacer';
import { challengeTestsSelector } from '../redux';
import { createSelector } from 'reselect';
@ -71,7 +70,6 @@ export class SidePanel extends Component {
} = this.props;
return (
<div className='instructions-panel' role='complementary'>
<Spacer />
<div>
<ChallengeTitle
introPath={introPath}

6
client/src/templates/Challenges/components/Test-Suite.js
View File

@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import GreenPass from './icons/GreenPass';
import Fail from './icons/Fail';
import Initial from './icons/Initial';
import GreenPass from '../../../assets/icons/GreenPass';
import Fail from '../../../assets/icons/Fail';
import Initial from '../../../assets/icons/Initial';
import './test-suite.css';

2
client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
View File

@ -16,7 +16,7 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
>
title text
<i
className="ion-checkmark-circled text-primary"
className="ion-checkmark text-primary"
title="Completed"
/>
</h2>

25
client/src/templates/Challenges/components/challenge-description.css
View File

@ -1,24 +1,9 @@
.challenge-instructions {
font-size: 16px;
}
.challenge-instructions blockquote,
.challenge-instructions pre {
background-color: #eee;
color: #c7254e;
padding: 10px 10px 10px 15px;
.challenge-instructions blockquote {
background-color: var(--tertiary-background);
color: var(--tertiary-color);
padding: 10px;
width: 100%;
margin: 0;
margin-bottom: 1.45rem;
font-family: monospace;
font-size: 16px;
border: none;
}
.challenge-instructions pre code {
line-height: 1.42;
text-shadow: none;
font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono',
'Liberation Mono', Menlo, Courier, monospace;
color: #c7254e;
font-size: 0.9rem;
}

9
client/src/templates/Challenges/components/completion-modal.css
View File

@ -10,15 +10,6 @@
width: 30vh;
}
.night .challenge-list-header {
background-color: #333;
border-bottom-color: #222;
}
.night .challenge-success-modal .modal-content {
background-color: #333;
}
@media screen and (max-width: 767px) {
.challenge-success-modal .btn-lg {
font-size: 16px;

8
client/src/templates/Challenges/components/help-modal.css
View File

@ -7,11 +7,3 @@
.night .help-modal-header .close {
color: #fff;
}
.night .help-modal-body,
.night .help-modal-header {
background-color: #333;
}
.night .help-modal-header {
border-bottom-color: #222;
}

32
client/src/templates/Challenges/components/reset-modal.css
View File

@ -1,29 +1,29 @@
.reset-modal p {
color: var(--danger-color);
}
.reset-modal-header {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
color: var(--danger-color);
background-color: var(--danger-background);
border: none;
}
.reset-modal-header h4 {
color: var(--danger-color);
}
.reset-modal .modal-footer {
border-color: var(--danger-color);
}
.reset-modal-header .close {
color: #fff;
color: var(--danger-color);
font-size: 28px;
text-shadow: none;
}
.night .reset-modal-header .close {
color: #222;
}
@media screen and (max-width: 767px) {
.reset-modal .btn-lg {
font-size: 16px;
}
}
.night .reset-modal-body,
.night .reset-modal-footer {
background-color: #333;
}
.night .reset-modal-footer {
border-top-color: #222;
}

2
client/src/templates/Challenges/components/test-suite.css
View File

@ -12,7 +12,7 @@
}
.test-result:nth-child(odd) {
background-color: #eee;
background-color: var(--tertiary-background);
}
.test-output {

12
client/src/templates/Challenges/components/video-modal.css
View File

@ -30,15 +30,3 @@
.video-modal p {
margin-bottom: 0;
}
.night .video-modal-header .close {
color: #fff;
}
.night .video-modal-body,
.night .video-modal-header {
background-color: #333;
}
.night .video-modal-header {
border-bottom-color: #222;
}

20
client/src/templates/Challenges/rechallenge/builders.js
View File

@ -9,12 +9,13 @@ import {
} from 'lodash';
import { compileHeadTail, setExt, transformContents } from '../utils/polyvinyl';
import { nightThemeStyle } from './displayStyle.js';
const htmlCatch = '\n<!--fcc-->\n';
const jsCatch = '\n;/*fcc*/\n';
const defaultTemplate = ({ source }) => `
<body style='margin:8px;'>
<body id='display-body'style='margin:8px;'>
<!-- fcc-start-source -->
${source}
<!-- fcc-end-source -->
@ -56,14 +57,15 @@ export const cssToHtml = cond([
[stubTrue, identity]
]);
// FileStream::concatHtml(
// required: [ ...Object ],
// template: String,
// files: [ polyVinyl ]
// ) => String
export function concatHtml({ required = [], template, files = [] } = {}) {
export function concatHtml({
required = [],
template,
files = [],
theme = 'night'
} = {}) {
theme = theme === '' ? 'night' : theme;
const createBody = template ? _template(template) : defaultTemplate;
const displayTheme = theme === 'night' ? nightThemeStyle : ` `;
const head = required
.map(({ link, src }) => {
if (link && src) {
@ -79,7 +81,7 @@ A required file can not have both a src and a link: src = ${src}, link = ${link}
}
return '';
})
.reduce((head, element) => head.concat(element), '');
.reduce((head, element) => head.concat(element), displayTheme);
const source = files.reduce(
(source, file) => source.concat(file.contents, htmlCatch),

10
client/src/templates/Challenges/rechallenge/displayStyle.js Normal file
View File

@ -0,0 +1,10 @@
export const nightThemeStyle = `
<style>
html{
color: white;
}
a {
color: #99c9ff;
}
</style>
`;

3
client/src/templates/Challenges/redux/index.js
View File

@ -15,6 +15,7 @@ import { createIdToNameMapSaga } from './id-to-name-map-saga';
import { createExecuteChallengeSaga } from './execute-challenge-saga';
import { createCurrentChallengeSaga } from './current-challenge-saga';
import { challengeTypes } from '../../../../utils/challengeTypes';
import { userSelector } from '../../../redux';
export const ns = 'challenge';
export const backendNS = 'backendChallenge';
@ -182,6 +183,7 @@ export const projectFormValuesSelector = state =>
state[ns].projectFormValues || {};
export const challengeDataSelector = state => {
const { theme } = userSelector(state);
const { challengeType } = challengeMetaSelector(state);
let challengeData = { challengeType };
if (
@ -223,6 +225,7 @@ export const challengeDataSelector = state => {
template
};
}
challengeData.theme = theme;
return challengeData;
};

9
client/src/templates/Challenges/utils/build.js
View File

@ -108,7 +108,12 @@ async function getDOMTestRunner(buildData, proxyLogger, document) {
runTestInTestFrame(document, testString, testTimeout);
}
export function buildDOMChallenge({ files, required = [], template = '' }) {
export function buildDOMChallenge({
files,
required = [],
template = '',
theme = ``
}) {
const finalRequires = [...globalRequires, ...required, ...frameRunner];
const loadEnzyme = Object.keys(files).some(key => files[key].ext === 'jsx');
const toHtml = [jsToHtml, cssToHtml];
@ -120,7 +125,7 @@ export function buildDOMChallenge({ files, required = [], template = '' }) {
.then(checkFilesErrors)
.then(files => ({
challengeType: challengeTypes.html,
build: concatHtml({ required: finalRequires, template, files }),
build: concatHtml({ required: finalRequires, template, files, theme }),
sources: buildSourceMap(files),
loadEnzyme
}));

4
client/src/templates/Introduction/intro.css
View File

@ -13,11 +13,11 @@
}
.intro-toc .list-group-item:hover {
background-color: #eee;
background-color: var(--secondary-background);
}
.intro-toc a:hover {
text-decoration: none;
text-decoration-style: none;
color: #006400;
color: var(--secondary-color);
}

55
package-lock.json generated
View File

@ -4144,7 +4144,7 @@
},
"duplexer": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
"resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
"integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
"dev": true
},
@ -5200,7 +5200,7 @@
"dependencies": {
"combined-stream": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
"resolved": "http://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
"integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
"dev": true,
"requires": {
@ -5304,8 +5304,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -5326,14 +5325,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -5348,20 +5345,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -5478,8 +5472,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -5491,7 +5484,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -5506,7 +5498,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -5514,14 +5505,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -5540,7 +5529,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -5621,8 +5609,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -5634,7 +5621,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -5720,8 +5706,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -5757,7 +5742,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -5777,7 +5761,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -5821,14 +5804,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@ -5966,7 +5947,7 @@
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"requires": {
@ -6003,7 +5984,7 @@
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
@ -9199,7 +9180,7 @@
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
@ -11202,7 +11183,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}
@ -11921,7 +11902,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
}