Minor scss improvements

20 files changed, 133 insertions, 142 deletions

diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index 97ef0a4..cb7fa54 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -1,9 +1,9 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .connection {
-  background-color: $color-primary-0;
   border-top: 3px solid $color-primary-3;
   border-bottom: 3px solid $color-primary-3;
+  background-color: $color-primary-0;
 
   td {
     vertical-align: middle;
@@ -15,14 +15,14 @@
     }
 
     .btn:hover {
-      background-color: $color-primary-1 !important;
       color: $color-primary-4;
+      background-color: $color-primary-1 !important;
     }
   }
 
   .connection-icon {
-    font-weight: 600;
     font-size: 18px;
+    font-weight: 600;
     margin-right: 6px;
     cursor: pointer;
   }
@@ -45,16 +45,16 @@
 }
 
 .connection-popover {
-  background-color: $color-primary-4;
   border: none;
+  background-color: $color-primary-4;
 
   .popover-body {
     color: $color-primary-1;
 
     textarea {
-      background-color: $color-primary-3;
       font-size: 12px;
       width: 200px;
+      background-color: $color-primary-3;
     }
   }
 
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index fde54c0..c97a4b0 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -1,16 +1,16 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .connection-content {
-  background-color: $color-primary-0;
-  padding: 10px 10px 0;
   height: 100%;
+  padding: 10px 10px 0;
+  background-color: $color-primary-0;
 
   pre {
-    word-break: break-word;
-    white-space: pre-wrap;
     overflow-x: hidden;
     height: calc(100% - 31px);
     padding: 0 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
 
     p {
       margin: 0;
@@ -19,28 +19,28 @@
   }
 
   .connection-message {
+    position: relative;
+    margin: 10px 0;
     border: 4px solid $color-primary-3;
     border-top: 0;
-    margin: 10px 0;
-    position: relative;
 
     .connection-message-header {
-      background-color: $color-primary-3;
       height: 25px;
+      background-color: $color-primary-3;
 
       .connection-message-info {
         font-size: 11px;
-        margin-left: -10px;
         margin-top: 6px;
+        margin-left: -10px;
       }
 
       .connection-message-actions {
-        margin-right: -18px;
         display: none;
+        margin-right: -18px;
 
         button {
-          margin: 0 3px;
           font-size: 11px;
+          margin: 0 3px;
           padding: 5px;
         }
       }
@@ -55,19 +55,18 @@
     }
 
     .connection-message-label {
+      font-size: 12px;
       position: absolute;
-      background-color: $color-primary-3;
       top: 0;
       padding: 10px 0;
-      font-size: 12px;
-
+      background-color: $color-primary-3;
       writing-mode: vertical-rl;
       text-orientation: mixed;
     }
 
     &.from-client {
-      color: $color-primary-4;
       margin-right: 100px;
+      color: $color-primary-4;
 
       .connection-message-label {
         right: -22px;
@@ -75,26 +74,25 @@
     }
 
     &.from-server {
-      color: $color-primary-4;
       margin-left: 100px;
+      color: $color-primary-4;
 
       .connection-message-label {
         left: -22px;
         transform: rotate(-180deg);
       }
     }
-
   }
 
   .connection-content-header {
-    background-color: $color-primary-2;
-    padding: 0;
     height: 33px;
+    padding: 0;
+    background-color: $color-primary-2;
 
     .header-info {
+      font-size: 12px;
       padding-top: 7px;
       padding-left: 20px;
-      font-size: 12px;
     }
 
     .header-actions {
@@ -105,6 +103,4 @@
       }
     }
   }
-
-
 }
diff --git a/frontend/src/components/ConnectionMatchedRules.scss b/frontend/src/components/ConnectionMatchedRules.scss
index ed18f3c..65d9ac8 100644
--- a/frontend/src/components/ConnectionMatchedRules.scss
+++ b/frontend/src/components/ConnectionMatchedRules.scss
@@ -1,4 +1,4 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .connection-matches {
   background-color: $color-primary-0;
diff --git a/frontend/src/components/MessageAction.scss b/frontend/src/components/MessageAction.scss
index f3a8772..faa23d3 100644
--- a/frontend/src/components/MessageAction.scss
+++ b/frontend/src/components/MessageAction.scss
@@ -1,8 +1,8 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .message-action-value {
   font-size: 13px;
   padding: 15px;
-  background-color: $color-primary-2;
   color: $color-primary-4;
-}
\ No newline at end of file
+  background-color: $color-primary-2;
+}
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index cfd20ff..9e46b9f 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .button-field {
   font-size: 0.9em;
@@ -119,5 +119,4 @@
       background-color: $color-green-dark;
     }
   }
-
 }
diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss
index ab932b4..14c547e 100644
--- a/frontend/src/components/fields/CheckField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -1,12 +1,12 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .check-field {
   font-size: 0.9em;
   margin: 5px 0;
 
   .field-input {
-    border-radius: 5px;
     width: fit-content;
+    border-radius: 5px;
     background-color: $color-primary-2;
 
     input {
@@ -25,8 +25,8 @@
   }
 
   &.field-checked .field-input {
-    background-color: $color-primary-4 !important;
     color: $color-primary-3;
+    background-color: $color-primary-4 !important;
   }
 
   &.field-small {
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index e7683b7..0b5e510 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .choice-field {
   font-size: 0.9em;
@@ -12,29 +12,29 @@
     margin-top: 5px;
 
     .field-value {
-      background-color: $color-primary-2;
-      border: none;
-      color: $color-primary-4;
-      border-radius: 5px;
       padding: 7px 25px 7px 10px;
       cursor: pointer;
+      color: $color-primary-4;
+      border: none;
+      border-radius: 5px;
+      background-color: $color-primary-2;
 
       &:after {
-        content: "⋎";
         position: absolute;
         right: 10px;
+        content: "⋎";
       }
     }
 
     .field-options {
       position: absolute;
+      z-index: 20;
       top: 35px;
+      display: none;
       width: 100%;
-      z-index: 20;
       border-top: 3px solid $color-primary-0;
       border-radius: 5px;
       background-color: $color-primary-2;
-      display: none;
 
       .field-option {
         display: block;
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index 79e2b7e..7cc34d9 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .input-field {
   font-size: 0.9em;
@@ -15,13 +15,13 @@
 
     .field-value {
       .file-label {
-        background-color: $color-primary-2;
-        margin: 0;
         width: 100%;
-        color: $color-primary-4;
-        border-radius: 5px;
+        margin: 0;
         padding: 7px 10px;
         cursor: pointer;
+        color: $color-primary-4;
+        border-radius: 5px;
+        background-color: $color-primary-2;
       }
 
       input[type="file"] {
@@ -29,27 +29,27 @@
       }
 
       .file-label:after {
-        content: "Browse";
         position: absolute;
-        right: 0;
         top: 0;
+        right: 0;
         padding: 7px 10px 7px 12px;
-        background-color: $color-primary-1;
-        border-bottom-right-radius: 5px;
+        content: "Browse";
         border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        background-color: $color-primary-1;
       }
     }
   }
 
   &.field-active {
     &.field-inline .field-name {
-      background-color: $color-primary-4 !important;
       color: $color-primary-3 !important;
+      background-color: $color-primary-4 !important;
     }
 
     .field-value input, .field-value .file-label {
-      background-color: $color-primary-4 !important;
       color: $color-primary-3 !important;
+      background-color: $color-primary-4 !important;
     }
 
     .file-label:after {
@@ -59,13 +59,13 @@
 
   &.field-invalid {
     &.field-inline .field-name {
-      background-color: $color-secondary-2 !important;
       color: $color-primary-4 !important;
+      background-color: $color-secondary-2 !important;
     }
 
     .field-value input, .field-value .file-label {
-      background-color: $color-secondary-2 !important;
       color: $color-primary-4 !important;
+      background-color: $color-secondary-2 !important;
     }
 
     .file-label:after {
@@ -81,19 +81,19 @@
     display: flex;
 
     .field-name {
-      background-color: $color-primary-2;
       padding: 6px 7px;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
+      background-color: $color-primary-2;
     }
 
     .field-input {
       width: 100%;
 
       input, .file-label {
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
         padding-left: 3px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
 
@@ -103,14 +103,14 @@
   }
 
   .field-clear {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    z-index: 10;
     font-size: 0.9em;
     font-weight: 600;
-    letter-spacing: -0.5px;
+    position: absolute;
+    z-index: 10;
+    top: 8px;
+    right: 8px;
     cursor: pointer;
+    letter-spacing: -0.5px;
   }
 
   &.field-active .field-clear {
@@ -118,8 +118,8 @@
   }
 
   .field-error {
-    padding: 5px 10px;
     font-size: 0.9em;
+    padding: 5px 10px;
     color: $color-secondary-0;
   }
 }
diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss
index de831fb..c2d6ef5 100644
--- a/frontend/src/components/fields/TextField.scss
+++ b/frontend/src/components/fields/TextField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .text-field {
   font-size: 0.9em;
@@ -15,15 +15,15 @@
 
   &.field-active {
     textarea {
-      background-color: $color-primary-4 !important;
       color: $color-primary-3 !important;
+      background-color: $color-primary-4 !important;
     }
   }
 
   &.field-invalid {
     textarea {
-      background-color: $color-secondary-2 !important;
       color: $color-primary-4 !important;
+      background-color: $color-secondary-2 !important;
     }
   }
 
@@ -32,14 +32,14 @@
   }
 
   .field-clear {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    z-index: 10;
     font-size: 0.9em;
     font-weight: 600;
-    letter-spacing: -0.5px;
+    position: absolute;
+    z-index: 10;
+    top: 8px;
+    right: 8px;
     cursor: pointer;
+    letter-spacing: -0.5px;
   }
 
   &.field-active .field-clear {
@@ -47,8 +47,8 @@
   }
 
   .field-error {
-    padding: 5px 10px;
     font-size: 0.9em;
+    padding: 5px 10px;
     color: $color-secondary-0;
   }
 }
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
index f83a988..f37369e 100644
--- a/frontend/src/components/fields/common.scss
+++ b/frontend/src/components/fields/common.scss
@@ -1,48 +1,47 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .field {
-
   input, textarea {
-    background-color: $color-primary-2;
     width: 100%;
-    border: none;
+    padding: 7px 10px;
     color: $color-primary-4;
+    border: none;
     border-radius: 5px;
-    padding: 7px 10px;
+    background-color: $color-primary-2;
 
     &:focus {
-      background-color: $color-primary-1;
       color: $color-primary-4;
-      box-shadow: none;
       outline: none;
+      background-color: $color-primary-1;
+      box-shadow: none;
     }
 
     &[readonly] {
-      background-color: $color-primary-2;
-      border: none;
       color: $color-primary-4;
+      border: none;
+      background-color: $color-primary-2;
     }
 
     &[readonly]:focus {
-      background-color: $color-primary-1;
       color: $color-primary-4;
+      background-color: $color-primary-1;
       box-shadow: none;
     }
   }
 
   button {
-    border-radius: 0;
-    background-color: $color-primary-2;
-    border: none;
+    font-weight: 500;
+    padding: 5px 12px;
     color: $color-primary-4;
+    border: none;
+    border-radius: 0;
     outline: none;
-    padding: 5px 12px;
-    font-weight: 500;
+    background-color: $color-primary-2;
 
     &:hover,
     &:active {
-      background-color: $color-primary-1;
       color: $color-primary-4;
+      background-color: $color-primary-1;
     }
 
     &:focus,
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index 6eabbda..26b21f1 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -1,4 +1,4 @@
-@import '../../../colors.scss';
+@import "../../../colors.scss";
 
 .color-field {
   .color-input {
@@ -9,8 +9,8 @@
       flex: 1;
 
       input {
-        border-bottom-right-radius: 0 !important;
         border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
       }
     }
 
@@ -20,8 +20,8 @@
       .picker-button {
         font-size: 0.8em;
         padding: 8px 15px;
-        border-bottom-right-radius: 5px;
         border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
         background-color: $color-primary-1;
       }
     }
@@ -29,8 +29,8 @@
 
   .color-error {
     font-size: 0.8em;
-    color: $color-secondary-0;
     margin-left: 10px;
+    color: $color-secondary-0;
   }
 }
 
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index ed81ed7..19a9e46 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -21,7 +21,7 @@ class NumericField extends Component {
         value = value.toString().replace(/[^\d]/gi, '');
         let intValue = 0;
         if (value !== "") {
-            intValue = parseInt(value);
+            intValue = parseInt(value, 10);
         }
         const valid =
             (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss
index 5df0006..71efd0d 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.scss
+++ b/frontend/src/components/filters/RulesConnectionsFilter.scss
@@ -1,13 +1,13 @@
-@import '../../colors';
+@import "../../colors";
 
 .react-tags {
+  font-size: 12px;
   position: relative;
+  z-index: 10;
   padding: 0 6px;
+  cursor: text;
   border-radius: 4px;
   background-color: $color-primary-2;
-  font-size: 12px;
-  cursor: text;
-  z-index: 10;
 }
 
 .react-tags.is-focused {
@@ -19,20 +19,20 @@
 }
 
 .react-tags__selected-tag {
+  font-size: 11px;
   display: inline-block;
-  border: none;
   margin: 0 6px 6px 0;
   padding: 2px 4px;
+  color: $color-primary-3;
+  border: none;
   border-radius: 2px;
   background: $color-primary-4;
-  color: $color-primary-3;
-  font-size: 11px;
 }
 
 .react-tags__selected-tag::after {
-  content: '\2715';
-  color: $color-primary-3;
   margin-left: 8px;
+  content: "\2715";
+  color: $color-primary-3;
 }
 
 .react-tags__selected-tag:hover,
@@ -42,8 +42,8 @@
 
 .react-tags__search {
   display: inline-block;
-  padding: 7px 10px;
   max-width: 100%;
+  padding: 7px 10px;
 }
 
 @media screen and (min-width: 30em) {
@@ -53,15 +53,15 @@
 }
 
 .react-tags__search-input {
+  font-size: inherit;
+  line-height: inherit;
   max-width: 100%;
   margin: 0;
   padding: 0;
+  color: $color-primary-4;
   border: 0;
   outline: none;
   background-color: $color-primary-2;
-  color: $color-primary-4;
-  font-size: inherit;
-  line-height: inherit;
 }
 
 .react-tags__search-input::-ms-clear {
@@ -82,30 +82,30 @@
 }
 
 .react-tags__suggestions ul {
+  font-size: 12px;
   margin: 4px -1px;
   padding: 0;
   list-style: none;
-  background: $color-primary-4;
-  border-radius: 2px;
   color: $color-primary-1;
-  font-size: 12px;
+  border-radius: 2px;
+  background: $color-primary-4;
 }
 
 .react-tags__suggestions li {
-  border-bottom: 1px solid #ddd;
   padding: 3px 5px;
+  border-bottom: 1px solid #ddd;
 }
 
 .react-tags__suggestions li mark {
+  font-weight: 600;
   text-decoration: underline;
   background: none;
-  font-weight: 600;
 }
 
 .react-tags__suggestions li:hover {
   cursor: pointer;
-  background: $color-primary-0;
   color: $color-primary-4;
+  background: $color-primary-0;
 }
 
 .react-tags__suggestions li.is-active {
@@ -113,6 +113,6 @@
 }
 
 .react-tags__suggestions li.is-disabled {
-  opacity: 0.5;
   cursor: auto;
+  opacity: 0.5;
 }
diff --git a/frontend/src/components/objects/LinkPopover.scss b/frontend/src/components/objects/LinkPopover.scss
index d5f4879..725224c 100644
--- a/frontend/src/components/objects/LinkPopover.scss
+++ b/frontend/src/components/objects/LinkPopover.scss
@@ -1,7 +1,7 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .link-popover {
-  text-decoration: underline;
   font-weight: 500;
   cursor: pointer;
-}
\ No newline at end of file
+  text-decoration: underline;
+}
diff --git a/frontend/src/components/panels/ConfigurationPane.scss b/frontend/src/components/panels/ConfigurationPane.scss
index 955d2bc..ef48b34 100644
--- a/frontend/src/components/panels/ConfigurationPane.scss
+++ b/frontend/src/components/panels/ConfigurationPane.scss
@@ -1,10 +1,10 @@
-@import '../../colors';
+@import "../../colors";
 
 .configuration-pane {
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   background-color: $color-primary-0;
 
   .pane {
@@ -15,5 +15,4 @@
   .pane-container {
     padding-bottom: 1px;
   }
-
 }
diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss
index 04be347..2973c00 100644
--- a/frontend/src/components/panels/MainPane.scss
+++ b/frontend/src/components/panels/MainPane.scss
@@ -1,8 +1,8 @@
-@import '../../colors';
+@import "../../colors";
 
 .main-pane {
-  height: 100%;
   display: flex;
+  height: 100%;
   padding: 0 15px;
   background-color: $color-primary-2;
 
@@ -19,5 +19,4 @@
     flex: 1 1;
     margin-left: 7.5px;
   }
-
 }
diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss
index 721560a..4dbc2b2 100644
--- a/frontend/src/components/panels/PcapPane.scss
+++ b/frontend/src/components/panels/PcapPane.scss
@@ -1,12 +1,12 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .pcap-pane {
   display: flex;
   flex-direction: column;
 
   .pcap-list {
-    flex: 1;
     overflow: hidden;
+    flex: 1;
 
     .section-content {
       height: 100%;
@@ -35,5 +35,4 @@
       font-size: 0.9em;
     }
   }
-
 }
diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss
index d45c366..992445a 100644
--- a/frontend/src/components/panels/RulePane.scss
+++ b/frontend/src/components/panels/RulePane.scss
@@ -4,8 +4,8 @@
   flex-direction: column;
 
   .rules-list {
-    flex: 2 1;
     overflow: hidden;
+    flex: 2 1;
 
     .section-content {
       height: 100%;
@@ -17,8 +17,8 @@
   }
 
   .rule-edit {
-    flex: 3 0;
     display: flex;
+    flex: 3 0;
     flex-direction: column;
 
     .section-content {
diff --git a/frontend/src/components/panels/ServicePane.scss b/frontend/src/components/panels/ServicePane.scss
index 0b154e6..daf7e79 100644
--- a/frontend/src/components/panels/ServicePane.scss
+++ b/frontend/src/components/panels/ServicePane.scss
@@ -4,8 +4,8 @@
   flex-direction: column;
 
   .services-list {
-    flex: 1;
     overflow: hidden;
+    flex: 1;
 
     .section-content {
       height: 100%;
diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss
index ea8da94..121a917 100644
--- a/frontend/src/components/panels/common.scss
+++ b/frontend/src/components/panels/common.scss
@@ -1,20 +1,20 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
 
 .pane-container {
-  background-color: $color-primary-3;
-  padding: 10px 10px 0;
   height: 100%;
+  padding: 10px 10px 0;
+  background-color: $color-primary-3;
 
   .pane-section {
     margin-bottom: 10px;
     background-color: $color-primary-0;
 
     .section-header {
-      background-color: $color-primary-2;
-      padding: 5px 10px;
-      font-weight: 500;
       font-size: 0.9em;
+      font-weight: 500;
       display: flex;
+      padding: 5px 10px;
+      background-color: $color-primary-2;
 
       .api-request {
         flex: 1;
@@ -31,8 +31,8 @@
 
       .table-error {
         font-size: 0.8em;
-        color: $color-secondary-0;
         margin-left: 10px;
+        color: $color-secondary-0;
       }
     }
 
@@ -40,18 +40,18 @@
       margin-bottom: 0;
 
       tbody tr {
-        background-color: $color-primary-3;
         border-top: 3px solid $color-primary-0;
         border-bottom: 3px solid $color-primary-0;
+        background-color: $color-primary-3;
       }
 
       th {
-        background-color: $color-primary-2;
         font-size: 0.8em;
         position: sticky;
         top: 0;
         padding: 2px 5px;
         border: none;
+        background-color: $color-primary-2;
       }
 
       .row-small {
@@ -74,9 +74,9 @@
 
   .section-footer {
     display: flex;
+    justify-content: flex-end;
     padding: 10px;
     background-color: $color-primary-0;
-    justify-content: flex-end;
 
     .button-field {
       margin-left: 10px;