feat: striped response header table

This commit is contained in:
Anoop M D 2022-03-16 01:48:33 +05:30
parent e471d94fbc
commit ef9c6c493e
4 changed files with 9 additions and 6 deletions

View File

@ -125,7 +125,7 @@ const RequestTabPanel = () => {
borderBottom: 'solid 1px var(--color-layout-border)' 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 <QueryUrl
value = {item.request.url} value = {item.request.url}
onChange={onUrlChange} onChange={onUrlChange}

View File

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

View File

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

View File

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