feat: using single line editors instead of input boxes

packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js

@@ -4,6 +4,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
+import SingleLineEditor from 'components/SingleLineEditor';
+import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 
 const FormUrlEncodedParams = ({ item, collection }) => {
@@ -19,6 +21,7 @@ const FormUrlEncodedParams = ({ item, collection }) => {
     );
   };
 
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleParamChange = (e, _param, type) => {
     const param = cloneDeep(_param);
     switch (type) {
@@ -82,15 +85,15 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
+                      <SingleLineEditor 
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
                         value={param.value} 
-                        className="mousetrap"
+                        onChange={(newValue) => handleParamChange({
-                        onChange={(e) => handleParamChange(e, param, 'value')}
+                          target: {
+                            value: newValue
+                          }
+                        }, param, 'value')}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>

packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js

@@ -4,6 +4,8 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections';
+import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';
 
 const RequestHeaders = ({ item, collection }) => {
@@ -19,6 +21,7 @@ const RequestHeaders = ({ item, collection }) => {
     );
   };
 
+  const handleRun = () => dispatch(sendRequest(item, collection.uid));
   const handleHeaderValueChange = (e, _header, type) => {
     const header = cloneDeep(_header);
     switch (type) {
@@ -82,15 +85,15 @@ const RequestHeaders = ({ item, collection }) => {
                       />
                     </td>
                     <td>
-                      <input
+                      <SingleLineEditor 
-                        type="text"
-                        autoComplete="off"
-                        autoCorrect="off"
-                        autoCapitalize="off"
-                        spellCheck="false"
                         value={header.value} 
-                        className="mousetrap"
+                        onChange={(newValue) => handleHeaderValueChange({
-                        onChange={(e) => handleHeaderValueChange(e, header, 'value')}
+                          target: {
+                            value: newValue
+                          }
+                        }, header, 'value')}
+                        onRun={handleRun}
+                        collection={collection}
                       />
                     </td>
                     <td>

packages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.js

@@ -5,6 +5,7 @@ const StyledWrapper = styled.div`
     white-space: pre-line;
     word-wrap: break-word;
     word-break: break-all;
+    font-family: Inter, sans-serif !important;
 
     .arrow {
       opacity: 0.5;

packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js

@@ -22,6 +22,8 @@ const StyledWrapper = styled.div`
 
     pre {
       font-family: Inter, sans-serif !important;
+      font-weight: 400;
+      }
     }
   }