Replaced the old fields with the new ones

2 files changed, 7 insertions, 12 deletions

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>