Minor improvements

3 files changed, 54 insertions, 38 deletions

diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 4f0ce21..8f9b68b 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -25,8 +25,10 @@ import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
 import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
+import Header from "../Header";
 import LinkPopover from "../objects/LinkPopover";
 import "../panels/common.scss";
+import "./common.scss";
 import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
@@ -113,9 +115,13 @@ class ConfigurationPage extends Component {
         </tr>);
 
         return (
-            <div className="configuration-page">
-                <div className="pane">
-                    <div className="pane-container">
+            <div className="page configuration-page">
+                <div className="page-header">
+                    <Header />
+                </div>
+
+                <div className="page-content">
+                    <div className="pane-container configuration-pane">
                         <div className="pane-section">
                             <div className="section-header">
                                 <span className="api-request">POST /setup</span>
diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss
index 4509865..4254547 100644
--- a/frontend/src/components/pages/ConfigurationPage.scss
+++ b/frontend/src/components/pages/ConfigurationPage.scss
@@ -1,18 +1,30 @@
 @import "../../colors";
 
 .configuration-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
   background-color: $color-primary-0;
 
-  .pane {
-    flex-basis: 900px;
-    margin-bottom: 200px;
+  .header-title {
+    margin: 50px auto;
   }
 
-  .pane-container {
-    padding-bottom: 1px;
+  .configuration-pane {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    padding-top: 100px;
+
+    .section-content {
+      background-color: $color-primary-3;
+      margin-top: 15px;
+    }
+
+    .section-table table {
+      background-color: red !important;
+    }
+
+    .section-footer {
+      background-color: $color-primary-3;
+    }
   }
 }
+
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index a542e3f..c4dcd20 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -16,7 +16,7 @@
  */
 
 import React, {Component} from "react";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {Route, Switch} from "react-router-dom";
 import Filters from "../dialogs/Filters";
 import Header from "../Header";
 import Connections from "../panels/ConnectionsPane";
@@ -42,34 +42,32 @@ class MainPage extends Component {
 
         return (
             <div className="page main-page">
-                <Router>
-                    <div className="page-header">
-                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
-                    </div>
-
-                    <div className="page-content">
-                        <div className="pane connections-pane">
-                            <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
-                        </div>
-                        <div className="pane details-pane">
-                            <Switch>
-                                <Route path="/searches" children={<SearchPane/>}/>
-                                <Route path="/pcaps" children={<PcapsPane/>}/>
-                                <Route path="/rules" children={<RulesPane/>}/>
-                                <Route path="/services" children={<ServicesPane/>}/>
-                                <Route exact path="/connections/:id"
-                                       children={<StreamsPane connection={this.state.selectedConnection}/>}/>
-                                <Route children={<MainPane version={this.props.version}/>}/>
-                            </Switch>
-                        </div>
+                <div className="page-header">
+                    <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/>
+                </div>
 
-                        {modal}
+                <div className="page-content">
+                    <div className="pane connections-pane">
+                        <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
                     </div>
-
-                    <div className="page-footer">
-                        <Timeline/>
+                    <div className="pane details-pane">
+                        <Switch>
+                            <Route path="/searches" children={<SearchPane/>}/>
+                            <Route path="/pcaps" children={<PcapsPane/>}/>
+                            <Route path="/rules" children={<RulesPane/>}/>
+                            <Route path="/services" children={<ServicesPane/>}/>
+                            <Route exact path="/connections/:id"
+                                   children={<StreamsPane connection={this.state.selectedConnection}/>}/>
+                            <Route children={<MainPane version={this.props.version}/>}/>
+                        </Switch>
                     </div>
-                </Router>
+
+                    {modal}
+                </div>
+
+                <div className="page-footer">
+                    <Timeline/>
+                </div>
             </div>
         );
     }