From ef9c6c493ebbb07d241daaccdc5420236d4f8b96 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Wed, 16 Mar 2022 01:48:33 +0530
Subject: [PATCH] feat: striped response header table

---
 renderer/components/RequestTabPanel/index.js           |  2 +-
 .../ResponsePane/ResponseHeaders/StyledWrapper.js      | 10 ++++++----
 .../components/ResponsePane/ResponseHeaders/index.js   |  2 +-
 renderer/styles/globals.css                            |  1 +
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/renderer/components/RequestTabPanel/index.js b/renderer/components/RequestTabPanel/index.js
index 552a7e774..41daa1a35 100644
--- a/renderer/components/RequestTabPanel/index.js
+++ b/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}
diff --git a/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js b/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js
index b02e7abf6..c084d6c40 100644
--- a/renderer/components/ResponsePane/ResponseHeaders/StyledWrapper.js
+++ b/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);
+      }
+    }
   }
 `;
 
diff --git a/renderer/components/ResponsePane/ResponseHeaders/index.js b/renderer/components/ResponsePane/ResponseHeaders/index.js
index 08ffe3aa5..d2a02d68e 100644
--- a/renderer/components/ResponsePane/ResponseHeaders/index.js
+++ b/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>
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index a3675f475..c7cc6bd86 100644
--- a/renderer/styles/globals.css
+++ b/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 {