extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-11-21 23:43:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated request tab close icon styles

Browse Source
This commit is contained in:
Anoop M D 2022-01-18 00:21:46 +05:30
parent b7dcc80e77
commit f719922072
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
View File

@ -9,7 +9,7 @@ const Wrapper = styled.div`
border-bottom: 1px solid #cfcfcf;
li {
display: inline-block;
display: inline-flex;
width: 150px;
border: 1px solid transparent;
border-bottom: none;
@ -22,8 +22,10 @@ const Wrapper = styled.div`
padding-right: 0;
cursor: pointer;
font-size: 0.8125rem;
height: 40px;
.tab-container {
width: 100%;
border-left: 1px solid #dcdcdc;
}
@ -49,17 +51,31 @@ const Wrapper = styled.div`
.close-icon-container {
min-height: 20px;
border-radius: 3px;
display: none;
.close-icon {
color: #9f9f9f;
width: 8px;
padding-bottom: 3px;
padding-top: 3px;
padding-bottom: 6px;
padding-top: 6px;
}
&:hover .close-icon{
color: rgb(142, 68, 173);
transform: scale(1.1);
&:hover, &:hover .close-icon {
background-color: #eaeaea;
color: rgb(76 76 76);
}
}
&.active {
.close-icon-container {
display: block;
}
}
&:hover{
.close-icon-container {
display: block;
}
}

16
packages/grafnode-components/src/components/RequestTabs/index.js
View File

@ -54,18 +54,16 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
<ul role="tablist">
{requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
<div className="flex items-center justify-between tab-container">
<div className="flex items-center tab-label pl-3">
<div className="flex items-center justify-between tab-container px-1">
<div className="flex items-center tab-label pl-2">
<span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
</div>
{rt.id === activeRequestTabId ? (
<div className="flex pl-2 pr-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
</svg>
</div>
) : null}
<div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
</svg>
</div>
</div>
</li>
}) : null}