Replaced the old fields with the new ones

13 files changed, 78 insertions, 93 deletions

diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 1149584..7887185 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import './Connection.scss';
-import {Button, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {Form, OverlayTrigger, Popover} from "react-bootstrap";
 import backend from "../backend";
 import {formatSize} from "../utils";
+import ButtonField from "./fields/ButtonField";
 
 class Connection extends Component {
 
@@ -96,9 +97,8 @@ class Connection extends Component {
             <tr className={classes}>
                 <td>
                     <span className="connection-service">
-                        <Button size="sm" style={{
-                            "backgroundColor": serviceColor
-                        }} onClick={() => this.props.addServicePortFilter(conn.port_dst)}>{serviceName}</Button>
+                        <ButtonField small fullSpan color={serviceColor} name={serviceName}
+                                     onClick={() => this.props.addServicePortFilter(conn.port_dst)} />
                     </span>
                 </td>
                 <td className="clickable" onClick={this.props.onSelected}>{conn.ip_src}</td>
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 0069424..318965c 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,8 +1,10 @@
 import React, {Component} from 'react';
 import './ConnectionContent.scss';
-import {Button, Dropdown, Row} from 'react-bootstrap';
+import {Dropdown, Row} from 'react-bootstrap';
 import MessageAction from "./MessageAction";
 import backend from "../backend";
+import ButtonField from "./fields/ButtonField";
+import ChoiceField from "./fields/ChoiceField";
 
 const classNames = require('classnames');
 
@@ -93,12 +95,12 @@ class ConnectionContent extends Component {
         }
 
         return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
-            <Button size="sm" key={actionName + "_button"} onClick={() => {
+            <ButtonField small key={actionName + "_button"} name={actionName} onClick={() => {
                 this.setState({
                     messageActionDialog: <MessageAction actionName={actionName} actionValue={actionValue}
                                                         onHide={() => this.setState({messageActionDialog: null})}/>
                 });
-            }}>{actionName}</Button>
+            }} />
         );
     }
 
@@ -138,56 +140,16 @@ class ConnectionContent extends Component {
                             <span> | <strong>timestamp</strong>: {this.props.connection.started_at}</span>
                         </div>
                         <div className="header-actions col-auto">
-                            <Dropdown onSelect={this.setFormat}>
-                                <Dropdown.Toggle size="sm" id="connection-content-format">
-                                    format
-                                </Dropdown.Toggle>
-
-                                <Dropdown.Menu>
-                                    <Dropdown.Item eventKey="default"
-                                                   active={this.state.format === "default"}>plain</Dropdown.Item>
-                                    <Dropdown.Item eventKey="hex"
-                                                   active={this.state.format === "hex"}>hex</Dropdown.Item>
-                                    <Dropdown.Item eventKey="hexdump"
-                                                   active={this.state.format === "hexdump"}>hexdump</Dropdown.Item>
-                                    <Dropdown.Item eventKey="base32"
-                                                   active={this.state.format === "base32"}>base32</Dropdown.Item>
-                                    <Dropdown.Item eventKey="base64"
-                                                   active={this.state.format === "base64"}>base64</Dropdown.Item>
-                                    <Dropdown.Item eventKey="ascii"
-                                                   active={this.state.format === "ascii"}>ascii</Dropdown.Item>
-                                    <Dropdown.Item eventKey="binary"
-                                                   active={this.state.format === "binary"}>binary</Dropdown.Item>
-                                    <Dropdown.Item eventKey="decimal"
-                                                   active={this.state.format === "decimal"}>decimal</Dropdown.Item>
-                                    <Dropdown.Item eventKey="octal"
-                                                   active={this.state.format === "octal"}>octal</Dropdown.Item>
-                                </Dropdown.Menu>
-                            </Dropdown>
-
-                            <Dropdown>
-                                <Dropdown.Toggle size="sm" id="connection-content-view">
-                                    view_as
-                                </Dropdown.Toggle>
-
-                                <Dropdown.Menu>
-                                    <Dropdown.Item eventKey="default" active={true}>default</Dropdown.Item>
-                                </Dropdown.Menu>
-
-                            </Dropdown>
-
-                            <Dropdown>
-                                <Dropdown.Toggle size="sm" id="connection-content-download">
-                                    download_as
-                                </Dropdown.Toggle>
-
-                                <Dropdown.Menu>
-                                    <Dropdown.Item eventKey="nl_separated">nl_separated</Dropdown.Item>
-                                    <Dropdown.Item eventKey="only_client">only_client</Dropdown.Item>
-                                    <Dropdown.Item eventKey="only_server">only_server</Dropdown.Item>
-                                </Dropdown.Menu>
-
-                            </Dropdown>
+                            <ChoiceField name="format" inline small onlyName
+                                         keys={["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
+                                         values={["plain", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
+                                         onChange={this.setFormat} value={this.state.value} />
+
+                             <ChoiceField name="view_as" inline small onlyName keys={["default"]} values={["default"]} />
+
+                            <ChoiceField name="download_as" inline small onlyName
+                                         keys={["nl_separated", "only_client", "only_server"]}
+                                         values={["nl_separated", "only_client", "only_server"]} />
                         </div>
                     </Row>
                 </div>
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index 8ee31ec..fde54c0 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -51,7 +51,7 @@
     }
 
     &:hover .connection-message-actions {
-      display: block;
+      display: flex;
     }
 
     .connection-message-label {
@@ -89,17 +89,19 @@
   .connection-content-header {
     background-color: $color-primary-2;
     padding: 0;
-    height: 31px;
+    height: 33px;
 
     .header-info {
-      padding-top: 5px;
+      padding-top: 7px;
       padding-left: 20px;
       font-size: 12px;
     }
 
     .header-actions {
-      .dropdown {
-        display: inline-block;
+      display: flex;
+
+      .choice-field {
+        margin-top: -5px;
       }
     }
   }
diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js
index 2c6ebbc..8f4b031 100644
--- a/frontend/src/components/MessageAction.js
+++ b/frontend/src/components/MessageAction.js
@@ -40,8 +40,8 @@ class MessageAction extends Component {
                     <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15} />
                 </Modal.Body>
                 <Modal.Footer className="dialog-footer">
-                    <ButtonField variant="green" onClick={this.copyActionValue} name={this.state.copyButtonText} />
-                    <ButtonField variant="red" onClick={this.props.onHide} name="close" />
+                    <ButtonField variant="green" bordered onClick={this.copyActionValue} name={this.state.copyButtonText} />
+                    <ButtonField variant="red" bordered onClick={this.props.onHide} name="close" />
                 </Modal.Footer>
             </Modal>
         );
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index b32aee8..f2f02fd 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -31,6 +31,15 @@ class ButtonField extends Component {
         if (this.props.border) {
             buttonStyle["borderColor"] = this.props.border;
         }
+        if (this.props.fullSpan) {
+            buttonStyle["width"] = "100%";
+        }
+        if (this.props.rounded) {
+            buttonStyle["borderRadius"] = "3px";
+        }
+        if (this.props.inline) {
+            buttonStyle["marginTop"] = "8px";
+        }
 
         return (
             <div className={classNames( "field", "button-field", {"field-small": this.props.small})}>
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index 933279e..aabe80f 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -9,6 +9,10 @@
 
   &.field-small {
     font-size: 0.8em;
+
+    button {
+      padding: 4px 12px;
+    }
   }
 
   .button-variant-red {
diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss
index 7b0ac5f..ab932b4 100644
--- a/frontend/src/components/fields/CheckField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -31,5 +31,9 @@
 
   &.field-small {
     font-size: 0.8em;
+
+    .field-input label {
+      padding: 7px 15px;
+    }
   }
 }
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
index d409b21..73e950d 100644
--- a/frontend/src/components/fields/ChoiceField.js
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -38,15 +38,24 @@ class ChoiceField extends Component {
             <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span>
         );
 
+        let fieldValue = "";
+        if (inline && name) {
+            fieldValue = name;
+        }
+        if (!this.props.onlyName && inline && name) {
+            fieldValue += ": ";
+        }
+        if (!this.props.onlyName) {
+            fieldValue += this.props.value || "select a value";
+        }
+
         return (
             <div className={classNames( "field", "choice-field", {"field-inline" : inline},
                 {"field-small": this.props.small})}>
                 {!inline && name && <label className="field-name">{name}:</label>}
                 <div className={classNames("field-select", {"select-expanded": this.state.expanded})}
                      tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}>
-                    <div className="field-value">
-                        {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
-                    </div>
+                    <div className="field-value">{fieldValue}</div>
                     <div className="field-options">
                         {options}
                     </div>
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index 7f32b0e..e7683b7 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -16,7 +16,7 @@
       border: none;
       color: $color-primary-4;
       border-radius: 5px;
-      padding: 7px 10px;
+      padding: 7px 25px 7px 10px;
       cursor: pointer;
 
       &:after {
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index edcb720..c1c210f 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {OverlayTrigger, Popover} from "react-bootstrap";
 import './ColorField.scss';
 import InputField from "../InputField";
 
@@ -9,7 +9,6 @@ class ColorField extends Component {
         super(props);
 
         this.state = {
-            invalid: false
         };
 
         this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
@@ -18,8 +17,7 @@ class ColorField extends Component {
 
     render() {
         const colorButtons = this.colors.map((color) =>
-            <span key={"button" + color} className="color-input"
-                  style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+            <span key={"button" + color} className="color-input" style={{"backgroundColor": color}}
                   onClick={() => {
                       this.setState({color: color});
                       if (typeof this.props.onChange === "function") {
@@ -44,16 +42,19 @@ class ColorField extends Component {
             </Popover>
         );
 
+        let buttonStyles = {};
+        if (this.state.color) {
+            buttonStyles["backgroundColor"] = this.state.color;
+        }
+
         return (
-            <div className="color-field">
+            <div className="field color-field">
                 <InputField {...this.props} name="color" />
-
                 <div className="color-picker">
                     <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
-                        <Button variant="picker" size="sm">pick</Button>
+                        <button type="button" className="picker-button" style={buttonStyles}>pick</button>
                     </OverlayTrigger>
                 </div>
-
             </div>
         );
     }
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index c8f617c..1c3931f 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -16,15 +16,14 @@
   .color-picker {
     margin-bottom: 5.5px;
 
-    .btn-picker {
-      padding: 8.5px 15px;
+    .picker-button {
+      font-size: 0.8em;
+      padding: 8px 15px;
       border-bottom-right-radius: 5px;
       border-top-right-radius: 5px;
-      background-color: $color-indigo;
+      background-color: $color-primary-1;
     }
   }
-
-
 }
 
 .colors-container {
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js
index 7e0fa6c..a491dff 100644
--- a/frontend/src/components/panels/PcapPane.js
+++ b/frontend/src/components/panels/PcapPane.js
@@ -3,10 +3,11 @@ import './PcapPane.scss';
 import Table from "react-bootstrap/Table";
 import backend from "../../backend";
 import {createCurlCommand, formatSize, timestampToTime2} from "../../utils";
-import {Button, Col, Container, Row} from "react-bootstrap";
+import {Col, Container, Row} from "react-bootstrap";
 import InputField from "../fields/InputField";
 import CheckField from "../fields/CheckField";
 import TextField from "../fields/TextField";
+import ButtonField from "../fields/ButtonField";
 
 class PcapPane extends Component {
 
@@ -167,7 +168,7 @@ class PcapPane extends Component {
                                             <CheckField name="flush_all" checked={this.state.uploadFlushAll}
                                                         onChange={v => this.setState({uploadFlushAll: v})}/>
                                         </div>
-                                        <Button variant="green" onClick={this.handleUploadPcap}>upload</Button>
+                                        <ButtonField variant="green" bordered onClick={this.handleUploadPcap} name="upload" />
                                     </div>
 
                                     <TextField value={uploadOutput} rows={4} readonly small={true}/>
@@ -192,7 +193,7 @@ class PcapPane extends Component {
                                             <CheckField name="delete_original_file" checked={this.state.uploadFlushAll}
                                                         onChange={v => this.setState({uploadFlushAll: v})}/>
                                         </div>
-                                        <Button variant="blue" onClick={this.handleUploadPcap}>process</Button>
+                                        <ButtonField variant="blue" bordered onClick={this.handleUploadPcap} name="process" />
                                     </div>
 
                                     <TextField value={uploadOutput} rows={4} readonly small={true}/>
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
index fbc8785..2e91d91 100644
--- a/frontend/src/components/panels/RulePane.js
+++ b/frontend/src/components/panels/RulePane.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import './RulePane.scss';
 import Table from "react-bootstrap/Table";
-import {Button, Col, Container, Row} from "react-bootstrap";
+import {Col, Container, Row} from "react-bootstrap";
 import InputField from "../fields/InputField";
 import CheckField from "../fields/CheckField";
 import TextField from "../fields/TextField";
@@ -141,18 +141,12 @@ class RulePane extends Component {
                                         <td><CheckField small /></td>
                                         <td style={{"width": "70px"}}><NumericField small /></td>
                                         <td style={{"width": "70px"}}><NumericField small /></td>
-                                        <td><ChoiceField small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} value="both" /></td>
-                                        <td><Button  variant="green" size="sm">add</Button></td>
+                                        <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} value="both" /></td>
+                                        <td><ButtonField  variant="green" small name="add" inline rounded /></td>
                                     </tr>
                                 </tbody>
                             </Table>
                         </div>
-
-                        <ButtonField name="add_rule" variant="green" bordered />
-                        <br />
-                        <ButtonField name="add_rule" small color="red"/>
-                        <br />
-                        <ButtonField name="add_rule" bordered border={"green"} />
                     </div>
                 </div>