Add new theme to utils

embark-ui/package.json

@@ -55,6 +55,7 @@
     "react-router-dom": "^4.3.1",
     "react-scroll-to-component": "^1.0.2",
     "react-treebeard": "^2.1.0",
+    "reactstrap": "^6.5.0",
     "redux": "^4.0.0",
     "redux-saga": "^0.16.0",
     "resolve": "1.6.0",

embark-ui/src/components/Converter.js

@@ -1,9 +1,22 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Page, Form, Button, Icon} from "tabler-react";
+import {
+  Button,
+  InputGroup,
+  Card,
+  CardBody,
+  CardHeader,
+  Col,
+  FormGroup,
+  Input,
+  Row,
+  InputGroupAddon,
+  Label
+} from 'reactstrap';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 
 import { calculateUnits } from '../services/unitConverter';
+
 class Converter extends React.Component {
   constructor(props) {
     super(props);
@@ -23,22 +36,32 @@ class Converter extends React.Component {
 
   render() {
     return(
-      <Page.Content title="Ether Converter">
+      <Row className="mt-3 justify-content-md-center">
-        <Form.FieldSet>
+        <Col xs="12" sm="9" lg="6">
+          <Card>
+            <CardHeader>
+              <strong>Ether Converter</strong>
+            </CardHeader>
+            <CardBody>
               {
-            this.state.etherConversions.map(unit => {
+                this.state.etherConversions.map(unit => (
-              return (
+                  <FormGroup key={unit.key}>
-                <Form.Group label={unit.name} key={unit.key}>
+                    <Label htmlFor={unit.name}>{unit.name}</Label>
-                  <Form.Input placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
+                    <InputGroup>
+                      <Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
+                      <InputGroupAddon addonType="append">
                         <CopyToClipboard text={unit.value} title="Copy value to clipboard">
-                    <Button color="primary"><Icon name="copy"/></Button>
+                          <Button color="primary"><i className="fa fa-copy"></i></Button>
                         </CopyToClipboard>
-                </Form.Group>
+                      </InputGroupAddon>
-              )
+                    </InputGroup>
-            })
+                  </FormGroup>
+                ))
               }
-        </Form.FieldSet>
+            </CardBody>
-      </Page.Content>
+          </Card>
+        </Col>
+      </Row>
     );
   }
 }

embark-ui/src/components/UtilsLayout.js

@@ -1,45 +1,12 @@
 import React from 'react';
-import {Page, Grid, List} from 'tabler-react'
+import {Route, Switch} from 'react-router-dom';
-import {NavLink, Route, Switch} from 'react-router-dom';
 
 import ConverterContainer from '../containers/ConverterContainer';
 
-const groupItems = [
+const UtilsLayout = () => (
-  {to: "/embark/utilities/converter", icon: "dollar-sign", value: "Ether Converter"}
-];
-
-const className = "d-flex align-items-center";
-
-class UtilsLayout extends React.Component {
-  render() {
-    return (
-      <Grid.Row>
-        <Grid.Col md={3}>
-          <Page.Title className="my-5">Utilities</Page.Title>
-          <div>
-            <List.Group transparent={true}>
-              {groupItems.map((groupItem) => (
-                <List.GroupItem
-                  key={groupItem.value}
-                  className={className}
-                  to={groupItem.to}
-                  icon={groupItem.icon}
-                  RootComponent={NavLink}
-                >
-                  {groupItem.value}
-                </List.GroupItem>
-              ))}
-            </List.Group>
-          </div>
-        </Grid.Col>
-        <Grid.Col md={9}>
   <Switch>
     <Route exact path="/embark/utilities/converter" component={ConverterContainer} />
   </Switch>
-        </Grid.Col>
+);
-      </Grid.Row>
-    );
-  }
-}
 
 export default UtilsLayout;