diff --git a/client/src/components/settings/SolutionViewer.js b/client/src/components/settings/SolutionViewer.js index e5ec12c41d..2a0a39154f 100644 --- a/client/src/components/settings/SolutionViewer.js +++ b/client/src/components/settings/SolutionViewer.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Panel } from '@freecodecamp/react-bootstrap'; import Prism from 'prismjs'; -import Helmet from 'react-helmet'; import './solution-viewer.css'; @@ -13,62 +12,52 @@ const prismLang = { html: 'markup' }; -function SolutionViewer({ +const SolutionViewer = ({ files, solution = '// The solution is not available for this project' -}) { - const solutions = - files && Array.isArray(files) && files.length ? ( - files.map(file => ( - - {file.ext.toUpperCase()} - -
-              
-            
-
-
- )) - ) : ( - - JS +}) => + files && Array.isArray(files) && files.length ? ( + files.map(file => ( + + {file.ext.toUpperCase()}
             
           
- ); - return ( -
- - - - {solutions} -
+ )) + ) : ( + + JS + +
+          
+        
+
+
); -} SolutionViewer.displayName = 'SolutionViewer'; SolutionViewer.propTypes = { diff --git a/client/static/css/prism.css b/client/static/css/prism.css deleted file mode 100644 index b75ef446ce..0000000000 --- a/client/static/css/prism.css +++ /dev/null @@ -1,138 +0,0 @@ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - - code[class*="language-"], - pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, - code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; - } - - pre[class*="language-"]::selection, pre[class*="language-"] ::selection, - code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; - } - - @media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } - } - - /* Code blocks */ - pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - } - - :not(pre) > code[class*="language-"], - pre[class*="language-"] { - background: #f5f2f0; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: slategray; - } - - .token.punctuation { - color: #999; - } - - .namespace { - opacity: .7; - } - - .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.constant, - .token.symbol, - .token.deleted { - color: #905; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: #690; - } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); - } - - .token.atrule, - .token.attr-value, - .token.keyword { - color: #07a; - } - - .token.function, - .token.class-name { - color: #DD4A68; - } - - .token.regex, - .token.important, - .token.variable { - color: #e90; - } - - .token.important, - .token.bold { - font-weight: bold; - } - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - }