From 6204c99e69d1707a79c5e56685b47310106c60b0 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 2 Oct 2020 17:49:00 +0200
Subject: Minor scss improvements

---
 frontend/src/colors.scss                           | 42 ++++++++++-----------
 frontend/src/components/Connection.scss            | 12 +++---
 frontend/src/components/ConnectionContent.scss     | 40 +++++++++-----------
 .../src/components/ConnectionMatchedRules.scss     |  2 +-
 frontend/src/components/MessageAction.scss         |  6 +--
 frontend/src/components/fields/ButtonField.scss    |  3 +-
 frontend/src/components/fields/CheckField.scss     |  6 +--
 frontend/src/components/fields/ChoiceField.scss    | 16 ++++----
 frontend/src/components/fields/InputField.scss     | 44 +++++++++++-----------
 frontend/src/components/fields/TextField.scss      | 18 ++++-----
 frontend/src/components/fields/common.scss         | 31 ++++++++-------
 .../components/fields/extensions/ColorField.scss   |  8 ++--
 .../components/fields/extensions/NumericField.js   |  2 +-
 .../components/filters/RulesConnectionsFilter.scss | 40 ++++++++++----------
 frontend/src/components/objects/LinkPopover.scss   |  6 +--
 .../src/components/panels/ConfigurationPane.scss   |  5 +--
 frontend/src/components/panels/MainPane.scss       |  5 +--
 frontend/src/components/panels/PcapPane.scss       |  5 +--
 frontend/src/components/panels/RulePane.scss       |  4 +-
 frontend/src/components/panels/ServicePane.scss    |  2 +-
 frontend/src/components/panels/common.scss         | 20 +++++-----
 frontend/src/index.scss                            | 26 ++++++-------
 frontend/src/utils.js                              |  4 +-
 frontend/src/validation.js                         |  2 +-
 frontend/src/views/App.scss                        |  2 +-
 frontend/src/views/Connections.scss                | 20 +++++-----
 frontend/src/views/Footer.scss                     |  2 +-
 frontend/src/views/Header.scss                     |  8 ++--
 28 files changed, 185 insertions(+), 196 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/colors.scss b/frontend/src/colors.scss
index d982f03..b29f532 100644
--- a/frontend/src/colors.scss
+++ b/frontend/src/colors.scss
@@ -10,30 +10,30 @@ $color-secondary-2: #df3030;
 $color-secondary-3: #ff9d9d;
 $color-secondary-4: #ffdfdf;
 
-$color-red: #E53935;
-$color-red-light: #FFEBEE;
-$color-red-dark: #B71C1C;
+$color-red: #e53935;
+$color-red-light: #ffebee;
+$color-red-dark: #b71c1c;
 
-$color-pink: #D81B60;
-$color-pink-light: #FCE4EC;
-$color-pink-dark: #880E4F;
+$color-pink: #d81b60;
+$color-pink-light: #fce4ec;
+$color-pink-dark: #880e4f;
 
-$color-purple: #8E24AA;
-$color-purple-light: #F3E5F5;
-$color-purple-dark: #4A148C;
+$color-purple: #8e24aa;
+$color-purple-light: #f3e5f5;
+$color-purple-dark: #4a148c;
 
-$color-deep-purple: #5E35B1;
-$color-deep-purple-light: #EDE7F6;
-$color-deep-purple-dark: #311B92;
+$color-deep-purple: #5e35b1;
+$color-deep-purple-light: #ede7f6;
+$color-deep-purple-dark: #311b92;
 
-$color-indigo: #3949AB;
-$color-indigo-light: #E8EAF6;
-$color-indigo-dark: #1A237E;
+$color-indigo: #3949ab;
+$color-indigo-light: #e8eaf6;
+$color-indigo-dark: #1a237e;
 
-$color-green: #43A047;
-$color-green-light: #E8F5E9;
-$color-green-dark: #1B5E20;
+$color-green: #43a047;
+$color-green-light: #e8f5e9;
+$color-green-dark: #1b5e20;
 
-$color-blue: #1E88E5;
-$color-blue-light: #E3F2FD;
-$color-blue-dark: #0D47A1;
+$color-blue: #1e88e5;
+$color-blue-light: #e3f2fd;
+$color-blue-dark: #0d47a1;
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;
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 9ba23de..2e5b6b9 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -1,22 +1,20 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
-
-@import-normalize;
-
-@import 'colors.scss';
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap");
 
+@import-normalize ;
+@import "colors.scss";
 body {
+  font-family: "Fira Code", monospace;
+  font-size: 100%;
+  height: 100vh;
   margin: 0;
-  font-family: 'Fira Code', monospace;
+  color: $color-primary-4;
+  background-color: $color-primary-2;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: $color-primary-2;
-  color: $color-primary-4;
-  height: 100vh;
-  font-size: 100%;
 }
 
 pre {
-  font-family: 'Fira Code', monospace;
+  font-family: "Fira Code", monospace;
   font-size: 14px;
 }
 
@@ -24,8 +22,8 @@ a {
   color: $color-primary-4;
 
   &:hover {
-    color: $color-primary-4;
     text-decoration: none;
+    color: $color-primary-4;
   }
 }
 
@@ -57,8 +55,8 @@ a {
   background-color: $color-primary-0;
 
   .modal-header {
-    background-color: $color-primary-2;
     border: none;
+    background-color: $color-primary-2;
   }
 
   .modal-footer {
@@ -76,4 +74,4 @@ a {
 
 .popover-header {
   color: $color-primary-1;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index e71067a..8c7fe0f 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -31,13 +31,13 @@ export function cleanNumber(number) {
 
 export function validateMin(min) {
     return function (value) {
-        return parseInt(value) > min;
+        return parseInt(value, 10) > min;
     };
 }
 
 export function validateMax(max) {
     return function (value) {
-        return parseInt(value) < max;
+        return parseInt(value, 10) < max;
     };
 }
 
diff --git a/frontend/src/validation.js b/frontend/src/validation.js
index 8f3409f..7089d7f 100644
--- a/frontend/src/validation.js
+++ b/frontend/src/validation.js
@@ -1,7 +1,7 @@
 
 const validation = {
     isValidColor: (color) => /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(color),
-    isValidPort: (port, required) => parseInt(port) > (required ? 0 : -1) && parseInt(port) <= 65565,
+    isValidPort: (port, required) => parseInt(port, 10) > (required ? 0 : -1) && parseInt(port, 10) <= 65565,
     isValidAddress: (address) => true // TODO
 };
 
diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss
index b25d4c9..5c5bd99 100644
--- a/frontend/src/views/App.scss
+++ b/frontend/src/views/App.scss
@@ -5,8 +5,8 @@
   height: 100vh;
 
   .main-content {
-    flex: 1 1;
     overflow: hidden;
+    flex: 1 1;
   }
 
   .main-header, .main-footer {
diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss
index 7d561a9..c7bd1df 100644
--- a/frontend/src/views/Connections.scss
+++ b/frontend/src/views/Connections.scss
@@ -1,11 +1,11 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .connections {
-  background-color: $color-primary-3;
-  padding: 0 10px;
   position: relative;
-  height: 100%;
   overflow: auto;
+  height: 100%;
+  padding: 0 10px;
+  background-color: $color-primary-3;
 
   .table {
     margin-top: 10px;
@@ -13,22 +13,22 @@
 
   .connections-header-padding {
     position: sticky;
-    height: 10px;
-    background-color: $color-primary-3;
     top: 0;
-    left: 0;
     right: 0;
+    left: 0;
+    height: 10px;
     margin-bottom: -10px;
+    background-color: $color-primary-3;
   }
 
   th {
-    background-color: $color-primary-2;
-    border-top: 3px solid $color-primary-3;
-    border-bottom: 3px solid $color-primary-3;
     font-size: 13.5px;
     position: sticky;
     top: 10px;
     padding: 5px;
+    border-top: 3px solid $color-primary-3;
+    border-bottom: 3px solid $color-primary-3;
+    background-color: $color-primary-2;
   }
 
   &:hover::-webkit-scrollbar-thumb {
diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss
index 4119cfc..6ec4a62 100644
--- a/frontend/src/views/Footer.scss
+++ b/frontend/src/views/Footer.scss
@@ -1,4 +1,4 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .footer {
   padding: 15px 30px;
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index 15d1375..0711159 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -1,22 +1,22 @@
-@import '../colors.scss';
+@import "../colors.scss";
 
 .header {
-  padding: 15px 30px;
   height: 80px;
+  padding: 15px 30px;
 
   > .row {
     background-color: $color-primary-0;
   }
 
   .header-title {
-    margin: 5px 0 5px -5px;
     width: 200px;
+    margin: 5px 0 5px -5px;
   }
 
   .header-buttons {
-    margin: 7px 0;
     display: flex;
     justify-content: flex-end;
+    margin: 7px 0;
 
     .button-field {
       margin-left: 7px;
-- 
cgit v1.2.3-70-g09d2