feat: striped response header table

renderer/components/RequestTabPanel/index.js

@@ -125,7 +125,7 @@ const RequestTabPanel = () => {
           borderBottom: 'solid 1px var(--color-layout-border)'
         }}
       >
-        <div className="pt-2 text-gray-600">{item.name}</div>
+        <div className="pt-1 text-gray-600">{item.name}</div>
         <QueryUrl
           value = {item.request.url}
           onChange={onUrlChange}

renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js

@@ -5,10 +5,6 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
 
-    thead, td {
-      border: 1px solid #efefef;
-    }
-
     thead {
       color: #777777;
       font-size: 0.75rem;
@@ -23,6 +19,12 @@ const Wrapper = styled.div`
         word-break: break-all;
       }
     }
+
+    tbody {
+      tr:nth-child(odd) {
+        background-color: var(--color-table-stripe);
+      }
+    }
   }
 `;
 

renderer/components/ResponsePane/ResponseHeaders/index.js

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({headers}) => {
   return (
-    <StyledWrapper className="mt-3 px-3 pb-4">
+    <StyledWrapper className="mt-3 px-3 pb-4 w-full">
       <table>
         <thead>
           <tr>

renderer/styles/globals.css

@@ -16,6 +16,7 @@
   --color-method-put: #8e44ad;
   --color-method-delete: #8e44ad;
   --color-method-patch: #8e44ad;
+  --color-table-stripe: #f3f3f3;
 }
 
 html, body {