feat: request body selector

renderer/components/Dropdown/StyledWrapper.js

@@ -21,6 +21,12 @@ const Wrapper = styled.div`
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
 
+      .label-item {
+        display: flex;
+        align-items: center;
+        padding: .35rem .6rem;
+      }
+
       .dropdown-item {
         display: flex;
         align-items: center;

renderer/components/RequestPane/HttpRequestPane/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
+import RequestBody from 'components/RequestPane/RequestBody';
 import StyledWrapper from './StyledWrapper';
 
 const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
@@ -18,7 +19,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
           <QueryParams />
         </TabPanel>
         <TabPanel>
-          <div>Body</div>
+          <RequestBody />
         </TabPanel>
         <TabPanel>
           <RequestHeaders item={item} collection={collection}/>

renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .body-mode-selector {
+    background: #efefef;
+    border-radius: 3px;
+
+    .dropdown-item {
+      padding: .2rem .6rem !important;
+      padding-left: 1.5rem !important;
+    }
+
+    .label-item  {
+      padding: .2rem .6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+`;
+
+export default Wrapper;

renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js

@@ -0,0 +1,66 @@
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
+
+const RequestBodyMode = () => {
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
+        JSON <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
+      </div>
+    );
+  });
+
+  return(
+    <StyledWrapper>
+      <div className="inline-flex items-center cursor-pointer body-mode-selector">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-start'>
+          <div className="label-item font-medium">
+            Form
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            Multipart Form
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            Form Url Encoded
+          </div>
+          <div className="label-item font-medium">
+            Raw
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            JSON
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            XML
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            TEXT
+          </div>
+          <div className="label-item font-medium">
+            Other
+          </div>
+          <div className="dropdown-item" onClick={() => {
+            dropdownTippyRef.current.hide();
+          }}>
+            No Body
+          </div>
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default RequestBodyMode;

renderer/components/RequestPane/RequestBody/StyledWrapper.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+`;
+
+export default Wrapper;

renderer/components/RequestPane/RequestBody/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import RequestBodyMode from './RequestBodyMode';
+import StyledWrapper from './StyledWrapper';
+
+const RequestBody = () => {
+  return(
+    <StyledWrapper className="mt-3">
+      <RequestBodyMode />
+    </StyledWrapper>
+  );
+};
+export default RequestBody;

renderer/styles/globals.css

@@ -25,7 +25,7 @@ html, body {
   margin: 0;
   padding: 0;
   font-size: 1rem;
-  color: rgb(48 48 48);
+  color: rgb(52 52 52);
 
   font-kerning: none;
   text-rendering: optimizeSpeed;