Updated design

Author: sanex3339

App/containers/App.js

@@ -67,8 +67,7 @@ class App extends Component {
         const hasObfuscatedCode = obfuscatedCode.length !== 0;
 
         return (
-            <div>
-
+            <React.Fragment>
                 <CodeContainer
                     code={code}
                     obfuscatedCode={obfuscatedCode}
@@ -83,13 +82,8 @@ class App extends Component {
                     hasObfuscatedCode={hasObfuscatedCode}
                 />
 
-                <div className="ui grid">
-                    <div className="column">
-                        <OptionsContainer/>
-                    </div>
-                </div>
-
-            </div>
+                <OptionsContainer/>
+            </React.Fragment>
         );
     }
 

App/containers/CodeContainer.js

@@ -257,14 +257,12 @@ class CodeContainer extends Component {
         const tabIndex = this.state.selectedTabIndex;
 
         return (
-            <div>
-                <Tab
-                    activeIndex={tabIndex}
-                    menu={{attached: 'top', stackable: true, widths: 'three'}}
-                    panes={this.buildPanes()}
-                    onTabChange={(event, data) => this.onTabClick(data.activeIndex)}
-                />
-            </div>
+            <Tab
+                activeIndex={tabIndex}
+                menu={{attached: 'top', stackable: true, widths: 'three'}}
+                panes={this.buildPanes()}
+                onTabChange={(event, data) => this.onTabClick(data.activeIndex)}
+            />
         );
     }
 }

App/containers/OptionsContainer.js

@@ -7,7 +7,9 @@ const ReactMarkdown = require('react-markdown')
 import {Container, Form, Grid, Header, Segment, Divider, Button} from 'semantic-ui-react';
 
 import EntryInputContainer from '../containers/EntryInputContainer';
-import {emojiSupportRenderer, getOptionsMarkdown, headingRenderer} from "../util/get-options-markdown";
+import {getOptionsMarkdown} from '../util/get-options-markdown';
+import {getHeadingRenderer} from '../util/get-heading-renderer';
+import {getEmojiSupportRenderer} from '../util/get-emoji-support-renderer';
 
 import * as types from '../constants/ActionTypes';
 import * as actions from '../actions';
@@ -433,23 +435,22 @@ const Options = ({dispatch, options}) => {
 
                         </Segment>
                     </Grid.Column>
-
                 </Grid>
             </Form>
 
-            <Container>
+            <Segment secondary>
                 <Header as="h2">
                     Available Options:
                 </Header>
 
                 <ReactMarkdown
                     source={getOptionsMarkdown()}
                     renderers={{
-                        heading: headingRenderer,
-                        text: emojiSupportRenderer
+                        heading: getHeadingRenderer,
+                        text: getEmojiSupportRenderer
                     }}
                 />
-            </Container>
+            </Segment>
         </React.Fragment>
     );
 };

App/styles/main.less

@@ -126,5 +126,6 @@ pre#Html {
 }
 
 code {
-  background-color: #f0f0f0;
+  background-color: #e1e1e4;
+  white-space: pre-wrap;
 }

App/util/get-emoji-support-renderer.js

@@ -0,0 +1,10 @@
+const emojiDictionary = require('emoji-dictionary');
+
+export const getEmojiSupportRenderer = (text) => {
+    return text
+        .value
+        .replace(
+            /:\w+:/gi,
+            (name) => emojiDictionary.getUnicode(name)
+        );
+};

App/util/get-heading-renderer.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+
+const flatten = (text, child) => {
+    return typeof child === 'string'
+        ? text + child
+        : React.Children.toArray(child.props.children).reduce(flatten, text)
+};
+
+export const getHeadingRenderer = (props) => {
+    const children = React.Children.toArray(props.children)
+    const text = children.reduce(flatten, '')
+    const slug = text.toLowerCase().replace(/\W/g, '-')
+
+    return React.createElement('h' + props.level, {id: slug}, props.children)
+};

App/util/get-options-markdown.js

@@ -1,22 +1,4 @@
-import React from 'react';
 const fullReadmeMarkdown = require('javascript-obfuscator/README.md').default;
-const emojiDictionary = require('emoji-dictionary');
-
-function flatten(text, child) {
-    return typeof child === 'string'
-        ? text + child
-        : React.Children.toArray(child.props.children).reduce(flatten, text)
-}
-
-export function headingRenderer(props) {
-    const children = React.Children.toArray(props.children)
-    const text = children.reduce(flatten, '')
-    const slug = text.toLowerCase().replace(/\W/g, '-')
-    
-    return React.createElement('h' + props.level, {id: slug}, props.children)
-}
-
-export const emojiSupportRenderer = text => text.value.replace(/:\w+:/gi, name => emojiDictionary.getUnicode(name));
 
 export function getOptionsMarkdown() {
     return fullReadmeMarkdown

package.json

@@ -33,7 +33,7 @@
     "graceful-fs": "4.1.9",
     "html-webpack-plugin": "^3.2.0",
     "inert": "5.1.0",
-    "javascript-obfuscator": "2.4.0",
+    "javascript-obfuscator": "2.4.1",
     "less": "2.7.1",
     "less-loader": "4.1.0",
     "pm2": "3.5.1",

templates/index.html

@@ -49,7 +49,7 @@ <h1>JavaScript Obfuscator Tool</h1>
                 <p>
                     A free and efficient obfuscator for JavaScript (including partial support of ES2019). Make your code harder to copy and
                     prevent people from stealing your work. This tool is a Web UI to the excellent (and open source)
-                    <code><a href="https://github.com/javascript-obfuscator/javascript-obfuscator" target="_new">javascript-obfuscator</a>@2.4.0</code>
+                    <code><a href="https://github.com/javascript-obfuscator/javascript-obfuscator" target="_new">javascript-obfuscator</a>@2.4.1</code>
                     created by Timofey Kachalov.
                 </p>
                 <div id="GithubBadges">
@@ -133,7 +133,7 @@ <h3>Sounds great!</h3>
 
     <div class="row">
         <div class="column">
-            <h2 id="FAQ">FAQ</h2>
+            <h2 class="header" id="FAQ">FAQ</h2>
 
             <h4>Why would I want to obfuscate my JavaScript code?</h4>
             <p>There are numerous reasons why it's a good idea to protect your code, such as:</p>

yarn.lock

@@ -2791,21 +2791,21 @@ [email protected]:
     jsx-ast-utils "^2.0.1"
     prop-types "^15.6.0"
 
-eslint-scope@^3.7.1, eslint-scope@~3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-scope@^5.1.1:
+[email protected]:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
+eslint-scope@^3.7.1, eslint-scope@~3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
@@ -4341,10 +4341,10 @@ iterate-object@^1.3.0, iterate-object@^1.3.1:
   resolved "https://registry.yarnpkg.com/iterate-object/-/iterate-object-1.3.4.tgz#fa50b1d9e58e340a7dd6b4c98c8a5e182e790096"
   integrity sha512-4dG1D1x/7g8PwHS9aK6QV5V94+ZvyP4+d19qDv43EzImmrndysIl4prmJ1hWWIGCqrZHyaHBm6BSEWHOLnpoNw==
 
-[email protected].0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/javascript-obfuscator/-/javascript-obfuscator-2.4.0.tgz#f907723cb5193ac8d9ba52d6595d11fab48056e0"
-  integrity sha512-KYclayLFyw3XtMXx56axp82d6cGOaUDd5O5DxtpBaDSb+4wWT/wnG9Ecws0pfUXAL338lRoy/kkKeomQUglr/Q==
+[email protected].1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/javascript-obfuscator/-/javascript-obfuscator-2.4.1.tgz#04931775ef96dd18a42afd1e5cbd7d3f8d2b9d48"
+  integrity sha512-+yQruRVl21PKtJGp/gXC3Y9VFdCajpYGY6E2jARVIo2m8hMlr0vB+GGOJXZcF9gOE0Ely4opbz7KKaXfeJWiGg==
   dependencies:
     "@gradecam/tsenum" "1.2.0"
     "@nuxtjs/opencollective" "0.2.2"
@@ -4354,7 +4354,7 @@ [email protected]:
     class-validator "0.12.2"
     commander "6.1.0"
     escodegen "2.0.0"
-    eslint-scope "^5.1.1"
+    eslint-scope "5.1.1"
     estraverse "5.2.0"
     eventemitter3 "4.0.7"
     fast-deep-equal "3.1.3"