feat: migration to electron + next complete

renderer/components/GraphQLRequestPane/StyledWrapper.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .react-tabs__tab-list {
+    border-bottom: none !important;
+    padding-top: 0;
+    padding-left: 0 !important;
+    display: flex;
+    align-items: center;
+    margin: 0;
+
+    .react-tabs__tab {
+      padding: 6px 0px;
+      border: none;
+      user-select: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 20px;
+      color: rgb(125 125 125);
+      outline: none !important;
+
+      &:focus, &:active, &:focus-within, &:focus-visible, &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &:after {
+        display: none !important;
+      }
+    }
+  }
+
+  .react-tabs__tab--selected {
+    border: none;
+    color: #322e2c !important;
+    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    border-color: var(--color-tab-active-border) !important;
+    background: inherit;
+    outline: none !important;
+    box-shadow: none !important;
+
+    &:focus, &:active, &:focus-within, &:focus-visible, &:target {
+      border: none;
+      outline: none !important;
+      box-shadow: none !important;
+      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-color: var(--color-tab-active-border) !important;
+      background: inherit;
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+`;
+
+export default StyledWrapper;

renderer/components/GraphQLRequestPane/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
+import StyledWrapper from './StyledWrapper';
+import QueryEditor from '../QueryEditor';
+import RequestHeaders from '../RequestHeaders';
+
+const GraphQLRequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
+  return (
+    <StyledWrapper className="h-full">
+      <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
+        <TabList>
+          <Tab tabIndex="-1">Query</Tab>
+          <Tab tabIndex="-1">Headers</Tab>
+        </TabList>
+        <TabPanel>
+          <div className="mt-4">
+            <QueryEditor
+              schema={schema}
+              width={leftPaneWidth}
+              value={value}
+              onRunQuery={onRunQuery}
+              onEdit={onQueryChange}
+            />
+          </div>
+        </TabPanel>
+        <TabPanel>
+          <RequestHeaders />
+        </TabPanel>
+      </Tabs>
+    </StyledWrapper>
+  )
+};
+
+export default GraphQLRequestPane;