Set style for code UAST toggle switch

Signed-off-by: Carlos Martín <[email protected]>

Author: carlosms

frontend/package.json

@@ -14,6 +14,7 @@
     "react-helmet": "^5.2.0",
     "react-scripts": "1.1.4",
     "react-split-pane": "^0.1.77",
+    "react-switch": "^3.0.4",
     "react-table": "^6.8.2",
     "uast-viewer": "^0.0.4"
   },

frontend/src/components/CodeViewer.js

@@ -3,6 +3,7 @@ import { Modal } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import SplitPane from 'react-split-pane';
 import UASTViewer, { Editor, withUASTEditor } from 'uast-viewer';
+import Switch from 'react-switch';
 import api from '../api';
 import './CodeViewer.less';
 
@@ -145,14 +146,21 @@ class CodeViewer extends Component {
         <Modal.Header closeButton>
           <Modal.Title>
             CODE
-            <label>
-              <input
-                type="checkbox"
-                checked={showUast}
-                onChange={this.handleShowUastChange}
-                disabled={!language}
-              />UAST
-            </label>
+            <Switch
+              checked={showUast}
+              onChange={this.handleShowUastChange}
+              disabled={!language}
+              checkedIcon={<span className="switch-text checked">UAST</span>}
+              uncheckedIcon={
+                <span className="switch-text unchecked">UAST</span>
+              }
+              onColor="#ffba34"
+              offColor="#e1e1e1"
+              width={100}
+              handleDiameter={20}
+              className="code-toggler"
+              aria-label="Toggle UAST view"
+            />
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>

frontend/src/components/CodeViewer.less

@@ -1,3 +1,5 @@
+@import '../variables.less';
+
 .code-viewer {
     position: relative;
     height: 100%;
@@ -21,3 +23,22 @@
 .editor-pane {
     height: 100%;
 }
+
+.code-toggler {
+    margin-left: 40px;
+
+    .switch-text {
+        font-size: 18px;
+        font-weight: @btn-font-weight;
+    }
+
+    .switch-text.checked {
+        color:    @btn-gbpl-tertiary-color;
+        padding-left: 28px;
+    }
+
+    .switch-text.unchecked {
+        color: #979797;
+        margin-left: -29px;
+    }
+}

frontend/yarn.lock

@@ -5944,6 +5944,12 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
+react-switch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-3.0.4.tgz#52958b2736b4d21b4f0050997955c5365019ca7b"
+  dependencies:
+    prop-types "^15.6.1"
+
 react-table@^6.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.8.2.tgz#3a5aefabc85953300d16786fa307c30610db9adc"