Fix style issues

7 files changed, 48 insertions, 49 deletions

diff --git a/README.md b/README.md
index 0251be1..75158e2 100644
--- a/README.md
+++ b/README.md
@@ -13,23 +13,23 @@ The patterns can be defined as regex or using protocol specific rules.
 The connection flows are saved into a database and can be visualized with the web application. REST API are also provided.
 
 ## Features
-- immediate installation with docker-compose
-- no configuration file, settings can be changed via GUI or API
-- the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI
-    - it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap
-- rules can be created to identify connections that contain certain strings
-    - pattern matching is done through regular expressions (regex)
-    - regex in UTF-8 and Unicode format are also supported
-    - it is possible to add an additional filter to the connections identified through pattern matching by type of connection
-- the connections can be labeled by type of service, identified by the port number
-    - each service can be assigned a different color
-- it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules
-- supports both IPv4 and IPv6 addresses
-    - if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used
-- the detected HTTP connections are automatically reconstructed
-    - HTTP requests can be replicated through `curl`, `fetch` and `python requests`
-    - compressed HTTP responses (gzip/deflate) are automatically decompressed
-- it is possible to export and view the content of connections in various formats, including hex and base64
+-   immediate installation with docker-compose
+-   no configuration file, settings can be changed via GUI or API
+-   the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI
+    -   it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap
+-   rules can be created to identify connections that contain certain strings
+    -   pattern matching is done through regular expressions (regex)
+    -   regex in UTF-8 and Unicode format are also supported
+    -   it is possible to add an additional filter to the connections identified through pattern matching by type of connection
+-   the connections can be labeled by type of service, identified by the port number
+    -   each service can be assigned a different color
+-   it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules
+-   supports both IPv4 and IPv6 addresses
+    -   if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used
+-   the detected HTTP connections are automatically reconstructed
+    -   HTTP requests can be replicated through `curl`, `fetch` and `python requests`
+    -   compressed HTTP responses (gzip/deflate) are automatically decompressed
+-   it is possible to export and view the content of connections in various formats, including hex and base64
 
 ## Installation
 There are two ways to install Caronte:
@@ -77,16 +77,16 @@ The backend, written in Go language, it is designed as a service. It exposes RES
 ## Screenshots
 Below there are some screenshots showing the main features of the tool.
 
-#### Viewing the contents of a connection
+### Viewing the contents of a connection
 ![Connection Content](frontend/screenshots/connection_content.png)
 
-#### Loading pcaps and analysis details
+### Loading pcaps and analysis details
 ![Connection Content](frontend/screenshots/pcaps.png)
 
-#### Creating new pattern matching rules
+### Creating new pattern matching rules
 ![Connection Content](frontend/screenshots/rules.png)
 
-#### Creating or editing services
+### Creating or editing services
 ![Connection Content](frontend/screenshots/services.png)
 
 ## License
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
index b0c334b..bec7734 100644
--- a/frontend/src/components/Notifications.scss
+++ b/frontend/src/components/Notifications.scss
@@ -2,27 +2,22 @@
 
 .notifications {
   position: absolute;
-
-  left: 30px;
-  bottom: 50px;
   z-index: 50;
-
-  .notifications-list {
-
-  }
+  bottom: 50px;
+  left: 30px;
 
   .notification {
-    background-color: $color-green;
-    border-left: 5px solid $color-green-dark;
-    padding: 10px;
-    margin: 10px 0;
+    overflow: hidden;
     width: 250px;
-    color: $color-green-light;
-    transform: translateX(-300px);
+    margin: 10px 0;
+    padding: 10px;
     transition: all 1s ease;
+    transform: translateX(-300px);
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
+    color: $color-green-light;
+    border-left: 5px solid $color-green-dark;
+    background-color: $color-green;
 
     .notification-title {
       font-size: 0.9em;
@@ -41,8 +36,5 @@
       transform: translateY(-50px);
       opacity: 0;
     }
-
   }
-
-
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index 0b5e510..c8c7ff1 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -19,7 +19,7 @@
       border-radius: 5px;
       background-color: $color-primary-2;
 
-      &:after {
+      &::after {
         position: absolute;
         right: 10px;
         content: "⋎";
@@ -58,7 +58,7 @@
       display: block;
     }
 
-    .field-value:after {
+    .field-value::after {
       content: "⋏";
     }
   }
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index 7cc34d9..e8ef46a 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -28,7 +28,7 @@
         display: none;
       }
 
-      .file-label:after {
+      .file-label::after {
         position: absolute;
         top: 0;
         right: 0;
@@ -47,12 +47,13 @@
       background-color: $color-primary-4 !important;
     }
 
-    .field-value input, .field-value .file-label {
+    .field-value input,
+    .field-value .file-label {
       color: $color-primary-3 !important;
       background-color: $color-primary-4 !important;
     }
 
-    .file-label:after {
+    .file-label::after {
       background-color: $color-secondary-4 !important;
     }
   }
@@ -63,12 +64,13 @@
       background-color: $color-secondary-2 !important;
     }
 
-    .field-value input, .field-value .file-label {
+    .field-value input,
+    .field-value .file-label {
       color: $color-primary-4 !important;
       background-color: $color-secondary-2 !important;
     }
 
-    .file-label:after {
+    .file-label::after {
       background-color: $color-secondary-1 !important;
     }
   }
@@ -90,7 +92,8 @@
     .field-input {
       width: 100%;
 
-      input, .file-label {
+      input,
+      .file-label {
         padding-left: 3px;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
index f37369e..8fbef0d 100644
--- a/frontend/src/components/fields/common.scss
+++ b/frontend/src/components/fields/common.scss
@@ -1,7 +1,8 @@
 @import "../../colors.scss";
 
 .field {
-  input, textarea {
+  input,
+  textarea {
     width: 100%;
     padding: 7px 10px;
     color: $color-primary-4;
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 2e5b6b9..9d6afc4 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -1,7 +1,9 @@
 @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%;
diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss
index 5c5bd99..87661c3 100644
--- a/frontend/src/views/App.scss
+++ b/frontend/src/views/App.scss
@@ -9,7 +9,8 @@
     flex: 1 1;
   }
 
-  .main-header, .main-footer {
+  .main-header,
+  .main-footer {
     flex: 0 0;
   }
 }