diff --git a/renderer/components/Dropdown/StyledWrapper.js b/renderer/components/Dropdown/StyledWrapper.js index 1ab423ec..e314363b 100644 --- a/renderer/components/Dropdown/StyledWrapper.js +++ b/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; diff --git a/renderer/components/RequestPane/HttpRequestPane/index.js b/renderer/components/RequestPane/HttpRequestPane/index.js index 43748c08..f6a19ca3 100644 --- a/renderer/components/RequestPane/HttpRequestPane/index.js +++ b/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}) => { -
Body
+
diff --git a/renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js b/renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js new file mode 100644 index 00000000..74fd0468 --- /dev/null +++ b/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; diff --git a/renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js b/renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js new file mode 100644 index 00000000..a57cb537 --- /dev/null +++ b/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 ( +
+ JSON +
+ ); + }); + + return( + +
+ } placement='bottom-start'> +
+ Form +
+
{ + dropdownTippyRef.current.hide(); + }}> + Multipart Form +
+
{ + dropdownTippyRef.current.hide(); + }}> + Form Url Encoded +
+
+ Raw +
+
{ + dropdownTippyRef.current.hide(); + }}> + JSON +
+
{ + dropdownTippyRef.current.hide(); + }}> + XML +
+
{ + dropdownTippyRef.current.hide(); + }}> + TEXT +
+
+ Other +
+
{ + dropdownTippyRef.current.hide(); + }}> + No Body +
+
+
+
+ ); +}; +export default RequestBodyMode; diff --git a/renderer/components/RequestPane/RequestBody/StyledWrapper.js b/renderer/components/RequestPane/RequestBody/StyledWrapper.js new file mode 100644 index 00000000..42da81d6 --- /dev/null +++ b/renderer/components/RequestPane/RequestBody/StyledWrapper.js @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` +`; + +export default Wrapper; diff --git a/renderer/components/RequestPane/RequestBody/index.js b/renderer/components/RequestPane/RequestBody/index.js new file mode 100644 index 00000000..50c8ead6 --- /dev/null +++ b/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( + + + + ); +}; +export default RequestBody; diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css index 1e499e5a..8870e0b6 100644 --- a/renderer/styles/globals.css +++ b/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;