fix: standardize table border colors and improve table styling (#6597)

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

@@ -6,10 +6,10 @@ const StyledWrapper = styled.div`
   height: 100%;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid ${(props) => props.theme.console.border};
+  border: 1px solid ${(props) => props.theme.table.border};
 
   .result-type-selector {
-    border-bottom: 1px solid ${(props) => props.theme.console.border};
+    border-bottom: 1px solid ${(props) => props.theme.table.border};
   }
 `;
 

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

@@ -1,6 +1,12 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  .table-wrapper {
+    border: 1px solid ${(props) => props.theme.table.border};
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
   table {
     width: 100%;
     border-collapse: collapse;
@@ -9,12 +15,24 @@ const Wrapper = styled.div`
       color: #777777;
       font-size: ${(props) => props.theme.font.size.sm};
       font-weight: 500;
-      text-transform: uppercase;
+
+      td {
+        border-top: none;
+      }
     }
 
     td {
+      border: 1px solid ${(props) => props.theme.table.border};
       padding: 6px 10px;
 
+      &:first-child {
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+
       &.value {
         word-break: break-all;
       }
@@ -24,6 +42,10 @@ const Wrapper = styled.div`
       tr:nth-child(odd) {
         background-color: ${(props) => props.theme.table.striped};
       }
+
+      tr:last-child td {
+        border-bottom: none;
+      }
     }
   }
 `;

packages/bruno-app/src/components/ResponsePane/ResponseHeaders/index.js

@@ -6,26 +6,28 @@ const ResponseHeaders = ({ headers }) => {
 
   return (
     <StyledWrapper className="pb-4 w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-          </tr>
-        </thead>
-        <tbody>
-          {headersArray && headersArray.length
-            ? headersArray.map((header, index) => {
-                return (
-                  <tr key={index}>
-                    <td className="key">{header[0]}</td>
-                    <td className="value">{header[1]}</td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
+      <div className="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <td>Name</td>
+              <td>Value</td>
+            </tr>
+          </thead>
+          <tbody>
+            {headersArray && headersArray.length
+              ? headersArray.map((header, index) => {
+                  return (
+                    <tr key={index}>
+                      <td className="key">{header[0]}</td>
+                      <td className="value">{header[1]}</td>
+                    </tr>
+                  );
+                })
+              : null}
+          </tbody>
+        </table>
+      </div>
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js

@@ -129,7 +129,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           <ResponseSize size={size} />
         </div>
       </div>
-      <section className="flex flex-col flex-grow overflow-auto">
+      <section className="flex flex-col pt-3 flex-grow overflow-auto">
         {hasScriptError && showScriptErrorCard && (
           <ScriptError
             item={item}