diff --git a/package.json b/package.json
index 2b0557361..524524031 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,6 @@
"react-emotion": "9.2.8",
"react-hot-loader": "4.2.0",
"react-router-dom": "4.2.2",
- "react-syntax-highlighter": "5.8.0",
"rimraf": "2.6.2",
"sass-loader": "7.1.0",
"source-map-loader": "0.2.4",
diff --git a/src/webui/components/CopyToClipBoard/styles.js b/src/webui/components/CopyToClipBoard/styles.js
index e434807d7..a25d7ab33 100644
--- a/src/webui/components/CopyToClipBoard/styles.js
+++ b/src/webui/components/CopyToClipBoard/styles.js
@@ -3,7 +3,8 @@ import IconButton from '@material-ui/core/IconButton/index';
export const ClipBoardCopy = styled.p`
&& {
- padding: 5px 0 0 0;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ padding: 5px 0 5px 0;
margin: 0;
display: flex;
align-items: center;
diff --git a/src/webui/components/Help/help.scss b/src/webui/components/Help/help.scss
deleted file mode 100644
index 5d88beb6c..000000000
--- a/src/webui/components/Help/help.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../styles/variables';
-@import '../../styles/mixins';
-
-.help {
- .noPkg {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 30px 0;
- font-size: $font-size-lg;
- color: $nobel-02;
-
- .noPkgTitle {
- margin: 1em 0;
- padding: 0;
- font-size: $font-size-xl;
- }
-
- .noPkgIntro {
- line-height: $line-height-xxs;
- margin: 0 auto;
- font-size: $font-size-sm;
- }
-
- code {
- font-style: italic;
- }
- }
-}
diff --git a/src/webui/components/Help/index.js b/src/webui/components/Help/index.js
index 63f61d6d8..63f08b0fd 100644
--- a/src/webui/components/Help/index.js
+++ b/src/webui/components/Help/index.js
@@ -1,42 +1,51 @@
-import React from 'react';
-import SyntaxHighlighter, {registerLanguage} from 'react-syntax-highlighter/dist/light';
-import sunburst from 'react-syntax-highlighter/src/styles/sunburst';
-import js from 'react-syntax-highlighter/dist/languages/javascript';
+/**
+ * @prettier
+ * @flow
+ */
-import classes from './help.scss';
-import {getRegistryURL} from '../../utils/url';
+import React, { Fragment } from 'react';
+import type { Node } from 'react';
+import CardActions from '@material-ui/core/CardActions/index';
+import CardContent from '@material-ui/core/CardContent/index';
+import Button from '@material-ui/core/Button/index';
+import Typography from '@material-ui/core/Typography/index';
-registerLanguage('javascript', js);
+import CopyToClipBoard from '../CopyToClipBoard/index';
+import { getRegistryURL } from '../../utils/url';
+import { CardStyled as Card, HelpTitle } from './styles';
-const Help = () => {
- const registryURL = getRegistryURL();
+function renderHeadingClipboardSegments(title: string, text: string): Node {
+ return (
+
copy text
"`; +exports[`copy text
"`; diff --git a/test/unit/webui/components/__snapshots__/help.spec.js.snap b/test/unit/webui/components/__snapshots__/help.spec.js.snap index 4947028d8..3d59cef55 100644 --- a/test/unit/webui/components/__snapshots__/help.spec.js.snap +++ b/test/unit/webui/components/__snapshots__/help.spec.js.snap @@ -1,5 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`npm adduser --registry http://example.com
2. Publishnpm publish --registry http://example.com
3. Refresh this page!npm adduser --registry http://example.com/someOtherPath
2. Publishnpm publish --registry http://example.com/someOtherPath
3. Refresh this page!To publish your first package just:
$ npm adduser --registry http://localhost
$ npm publish --registry http://localhost