1 files changed, 116 insertions, 0 deletions
diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss
new file mode 100644
index 0000000..1f641f3
--- /dev/null
+++ b/frontend/src/components/panels/StreamsPane.scss
@@ -0,0 +1,116 @@
+@import "../../colors";
+
+.stream-pane {
+  background-color: $color-primary-0;
+
+  pre {
+    overflow-x: hidden;
+    height: calc(100% - 31px);
+    padding: 0 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: $color-secondary-2;
+    }
+  }
+
+  .connection-message {
+    position: relative;
+    margin: 10px 0;
+    border: 4px solid $color-primary-3;
+    border-top: 0;
+
+    .connection-message-header {
+      height: 25px;
+      background-color: $color-primary-3;
+
+      .connection-message-info {
+        font-size: 11px;
+        margin-top: 6px;
+        margin-left: -10px;
+      }
+
+      .connection-message-actions {
+        display: none;
+        margin-right: -18px;
+
+        button {
+          font-size: 11px;
+          margin: 0 3px;
+          padding: 5px;
+        }
+      }
+    }
+
+    .message-content {
+      padding: 10px;
+
+      .react-json-view {
+        background-color: inherit !important;
+      }
+    }
+
+    &:hover .connection-message-actions {
+      display: flex;
+    }
+
+    .connection-message-label {
+      font-size: 12px;
+      position: absolute;
+      top: 0;
+      padding: 10px 0;
+      background-color: $color-primary-3;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    &.from-client {
+      margin-right: 100px;
+      color: $color-primary-4;
+
+      .connection-message-label {
+        right: -22px;
+      }
+    }
+
+    &.from-server {
+      margin-left: 100px;
+      color: $color-primary-4;
+
+      .connection-message-label {
+        left: -22px;
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  .stream-pane-header {
+    height: 33px;
+    padding: 0;
+    background-color: $color-primary-3;
+
+    .header-info {
+      font-size: 12px;
+      padding-top: 7px;
+      padding-left: 25px;
+    }
+
+    .header-actions {
+      display: flex;
+
+      .choice-field {
+        margin-top: -5px;
+
+        .field-value {
+          background-color: $color-primary-3;
+        }
+      }
+    }
+  }
+}