chore: updated styles for request headers

This commit is contained in:
Anoop M D 2022-01-19 00:11:51 +05:30
parent 3133f5e253
commit 6b549f2baf
3 changed files with 31 additions and 16 deletions

View File

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

View File

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

View File

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