chore: minor style updates

This commit is contained in:
Anoop M D 2022-01-17 23:53:17 +05:30
parent 4f7b5187be
commit b7dcc80e77
4 changed files with 20 additions and 17 deletions

View File

@ -25,8 +25,6 @@ const Wrapper = styled.div`
.tab-container { .tab-container {
border-left: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc;
padding-left: 12px;
padding-right: 12px;
} }
&.active { &.active {
@ -55,10 +53,13 @@ const Wrapper = styled.div`
.close-icon { .close-icon {
color: #9f9f9f; color: #9f9f9f;
width: 8px; width: 8px;
padding-bottom: 3px;
padding-top: 3px;
} }
&:hover .close-icon{ &:hover .close-icon{
color: rgb(142, 68, 173); color: rgb(142, 68, 173);
transform: scale(1.1);
} }
} }

View File

@ -55,12 +55,12 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
{requestTabs && requestTabs.length ? requestTabs.map((rt, index) => { {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}> 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 justify-between tab-container">
<div className="flex items-center tab-label"> <div className="flex items-center tab-label pl-3">
<span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span> <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span> <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
</div> </div>
{rt.id === activeRequestTabId ? ( {rt.id === activeRequestTabId ? (
<div className="flex pl-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}> <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"> <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> <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> </svg>

View File

@ -45,20 +45,21 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
<span className="ml-2">Collections</span> <span className="ml-2">Collections</span>
<div className="collection-dropdown flex flex-grow items-center justify-end"> <div className="collection-dropdown flex flex-grow items-center justify-end">
<Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'> <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
<div> <div className="dropdown-item" onClick={(e) => {
<div className="dropdown-item" onClick={(e) => { menuDropdownTippyRef.current.hide();
menuDropdownTippyRef.current.hide(); setModalOpen(true);
setModalOpen(true); }}>
}}> Create Collection
Create Collection
</div>
</div> </div>
<div> <div className="dropdown-item" onClick={(e) => {
<div className="dropdown-item" onClick={(e) => { menuDropdownTippyRef.current.hide();
menuDropdownTippyRef.current.hide(); }}>
}}> Import Collection
Settings </div>
</div> <div className="dropdown-item" onClick={(e) => {
menuDropdownTippyRef.current.hide();
}}>
Settings
</div> </div>
</Dropdown> </Dropdown>
</div> </div>

View File

@ -8,6 +8,7 @@ const Wrapper = styled.div`
aside { aside {
min-width: 230px; min-width: 230px;
width: 230px;
border-right: solid 1px #e1e1e1; border-right: solid 1px #e1e1e1;
background-color: #F6F8FA; background-color: #F6F8FA;
} }