feat: made dropdowns look beautiful

This commit is contained in:
Anoop M D 2022-01-03 13:18:15 +05:30
parent 9d14e89aaa
commit 81f9668375
2 changed files with 27 additions and 10 deletions

View File

@ -10,21 +10,25 @@ const Wrapper = styled.div`
.tippy-box {
min-width: 135px;
background-color: white;
color: rgb(82 82 82);
font-size: 0.8125rem;
color: rgb(48 48 48);
background: #f9f9f9;
box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
.tippy-content {
padding-left: 0;
padding-right: 0;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.dropdown-item {
display: flex;
align-items: center;
padding: .3rem .5rem;
padding: .35rem .6rem;
cursor: pointer;
&:hover {
background-color: #eee;
background-color: #e9e9e9;
}
}
}

View File

@ -88,13 +88,26 @@ const CollectionItem = ({item, collectionId, actions, dispatch, activeRequestTab
</div>
<div className="menu-icon pr-2">
<Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
<div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
addRequest();
}}>
Add Request
</div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Add Folder
</div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Rename
</div>
<div className="dropdown-item" onClick={(e) => {
dropdownTippyRef.current.hide();
}}>
Delete
</div>
</Dropdown>
</div>