Customização do admin e dashboards ReactJS.

public/styles/login.css

@@ -0,0 +1,9 @@
+
+body {
+    background: #555555;
+}
+
+.btn-primary, .btn-primary:hover, .btn-primary:active {
+    background-color: #000000 !important;
+    border-color: #000000 !important;
+}

public/styles/main.css

@@ -5,9 +5,14 @@ HERE YOUR CUSTOM CSS
 **/
 
 .navbar, .navbar-inverse {
-    background-color: #5b5ce1 !important;
+    background-color: #000000 !important;
 }
 
 .dev .navbar, .dev .navbar-inverse {
     background-color: #333333 !important;
 }
+
+.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-search {
+    background-color: #000000 !important;
+    border-color: #000000 !important;
+}

ui/src/containers/Dashboard2Container/index.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import Spin from 'antd/lib/spin';
+import "./index.less";
+
+export default class Dashboard2Container extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            menuClick: false
+        };
+    }
+
+    componentWillMount() {
+        
+    }
+
+    navigationClick() {
+        this.setState({ menuClick: false });
+        setTimeout(()=>this.setState({ menuClick: true }), 3000);
+    }
+
+    render() {
+        const { menuClick } = this.state;
+        if (menuClick) {
+            return (
+                <div className="my-dashboard2">
+                    <h1>Dashboard 2 REACT!!!</h1>
+                </div>
+            );
+        }
+        return <div><Spin /></div>;
+    }
+}

ui/src/index.jsx

@@ -1,17 +1,41 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import DashboardContainer from "./containers/DashboardContainer/index.jsx";
 
+import Dashboard2Container from "./containers/Dashboard2Container/index.jsx";
+
 const dashboardDiv = document.getElementById("app-dashboard");
 
 const dashboardContainer = dashboardDiv ? ReactDOM.render(<DashboardContainer />, dashboardDiv) : false;
 
 netuno.addNavigationLoad(() => {
+    const navigation = $('[netuno-navigation]');
+    navigation.children().first().after(`
+    <li>
+        <a netuno-navigation-dashboard2 href="#netuno_dashboard2">
+            <i class="fa fa-fw fa-dashboard"></i> Dashboard 2
+        </a>
+    </li>
+    `);
+
+    const containers = $('[netuno-containers]');
+    containers.children().first().after(`
+    <div netuno-container-dashboard2 id="netuno_dashboard2" style="display: none;">Novo Dashboard</div>
+    `);
+
+    const dashboard2Div = document.getElementById("netuno_dashboard2");
+    const dashboard2Container = dashboard2Div ? ReactDOM.render(<Dashboard2Container />, dashboard2Div) : false;
+
     $('[netuno-navigation]').find('a').on('netuno:click', (e)=> {
         const link = $(e.target);
         if (dashboardContainer && link.is('[netuno-navigation-dashboard]')) {
             // Menu > Dashboard > Clicked!
         }
+
+        if (dashboard2Container && link.is('[netuno-navigation-dashboard2]')) {
+            dashboard2Container.navigationClick();
+        }
     });
 });
 

ui/webpack.config.js

@@ -56,8 +56,8 @@ module.exports = {
                         loader: 'less-loader', // compiles Less to CSS
                         options: {
                             modifyVars: {
-                                'primary-color': '#5b5ce1',
-                                'link-color': '#5b5ce1',
+                                'primary-color': '#000000',
+                                'link-color': '#000000',
                                 'border-radius-base': '5px'
                             },
                             javascriptEnabled: true