chore: made path param hint easier on the eyes and ux

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
-import has from 'lodash/has';
+import Tooltip from 'components/Tooltip';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
@@ -103,7 +103,7 @@ const QueryParams = ({ item, collection }) => {
   return (
     <StyledWrapper className="w-full flex flex-col">
       <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Query</div>
+        <div className="mb-2 title text-xs">Query</div>
         <table>
           <thead>
             <tr>
@@ -173,7 +173,22 @@ const QueryParams = ({ item, collection }) => {
         <button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={handleAddQueryParam}>
           +&nbsp;<span>Add Param</span>
         </button>
-        <div className="mb-1 title text-xs">Path</div>
+        <div className="mb-2 title text-xs flex items-stretch">
+          <span>Path</span>
+          <Tooltip
+            text={`
+            <div>
+              Path variables are automatically added whenever the
+              <code className="font-mono mx-2">:name</code>
+              template is used in the URL. <br/> For example:
+              <code className="font-mono mx-2">
+                https://example.com/v1/users/<span>:id</span>
+              </code>
+            </div>
+          `}
+            tooltipId="path-param-tooltip"
+          />
+        </div>
         <table>
           <thead>
             <tr>
@@ -226,12 +241,7 @@ const QueryParams = ({ item, collection }) => {
         </table>
         {!(pathParams && pathParams.length) ?
           <div className="title pr-2 py-3 mt-2 text-xs">
-            Path variables are automatically added whenever the
+            
-            <code className="font-mono mx-2">:name</code>
-            template is used in the URL, for example:
-            <code className="font-mono mx-2">
-              https://example.com/v1/users/<span>:id</span>
-            </code>
           </div>
         : null}
       </div>

packages/bruno-app/src/components/Tooltip/index.js

@@ -13,7 +13,6 @@ const Tooltip = ({ text, tooltipId }) => {
         fill="currentColor"
         className="inline-block ml-2 cursor-pointer"
         viewBox="0 0 16 16"
-        style={{ marginTop: 1 }}
       >
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
         <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />