feat: Sidebar and StoreProvider

packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 38px);
+
+  aside {
+    min-width: 230px;
+    border-right: solid 1px #e1e1e1;
+  }
+
+  section.main {
+    display: flex;
+
+    section.request-pane, section.response-pane {
+    }
+  }
+
+  div.drag-request {
+    display: flex;
+    width: 1px;
+    padding: 0;
+    cursor: col-resize;
+    background: #e1e1e1;
+
+    &:hover {
+      background: silver;
+    }
+  }
+
+  .fw-600 {
+    font-weight: 600;
+  }
+
+  .react-tabs {
+    .react-tabs__tab-list {
+      padding-left: 1rem;
+      border-bottom: 1px solid #cfcfcf;
+
+      .react-tabs__tab--selected {
+        border-color: #cfcfcf;
+      }
+    }
+  }
+
+  .collection-filter {
+    input {
+      border: 1px solid rgb(211 211 211);
+      border-radius: 2px;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+`;
+
+export default Wrapper;