chore: updated styles for request headers

packages/grafnode-components/src/components/QueryUrl/StyledWrapper.js

@@ -6,12 +6,19 @@ const Wrapper = styled.div`
   div.method-selector {
     border: solid 1px #cfcfcf;
     border-right: none;
+    background-color: #F6F8FA;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
   }
 
   div.input-container {
     border: solid 1px #cfcfcf;
+    background-color: #F6F8FA;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 
     input {
+      background-color: #F6F8FA;
       outline: none;
       box-shadow: none;
 

packages/grafnode-components/src/components/RequestHeaders/StyledWrapper.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: #777777;
+      color: #616161;
       font-size: 0.75rem;
     }
     td {
@@ -34,6 +34,10 @@ const Wrapper = styled.div`
       border: solid 1px transparent;
     }
   }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
 `;
 
 export default Wrapper;

packages/grafnode-components/src/components/RequestHeaders/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { nanoid } from 'nanoid';
+import { IconTrash } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const initialState = [{
@@ -37,10 +38,9 @@ const RequestHeaders = () => {
       <table>
         <thead>
           <tr>
-            <td></td>
-            <td>KEY</td>
-            <td>VALUE</td>
-            <td>DESCRIPTION</td>
+            <td>Key</td>
+            <td>Value</td>
+            <td>Description</td>
             <td></td>
           </tr>
         </thead>
@@ -48,18 +48,11 @@ const RequestHeaders = () => {
           {headers && headers.length ? headers.map((header, index) => {
             return (
               <tr key={header.uid}>
-                <td>
-                  <input
-                    type="checkbox"
-                    defaultChecked={header.enabled}
-                    name="enabled"
-                    onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
-                  />
-                </td>
                 <td>
                   <input
                     type="text"
                     name="key"
+                    autocomplete="off"
                     defaultValue={headers[index].key}
                     onChange={(e) => handleHeaderValueChange(e, index, 'key')}
                   />
@@ -68,6 +61,7 @@ const RequestHeaders = () => {
                   <input
                     type="text"
                     name="value"
+                    autocomplete="off"
                     defaultValue={headers[index].value}
                     onChange={(e) => handleHeaderValueChange(e, index, 'value')}
                   />
@@ -76,14 +70,24 @@ const RequestHeaders = () => {
                   <input
                     type="text"
                     name="description"
+                    autocomplete="off"
                     defaultValue={headers[index].description}
                     onChange={(e) => handleHeaderValueChange(e, index, 'description')}
                   />
                 </td>
                 <td>
-                  <button onClick={() => handleRemoveHeader(index)}>
-                    remove
-                  </button>
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      className="mr-3"
+                      defaultChecked={header.enabled}
+                      name="enabled"
+                      onChange={(e) => handleHeaderValueChange(e, index, 'enabled')}
+                    />
+                    <button onClick={() => handleRemoveHeader(index)}>
+                      <IconTrash strokeWidth={1.5} size={20}/>
+                    </button>
+                  </div>
                 </td>
               </tr>
             );