From 81f9668375d5151617b16d8159097bff095c388e Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Mon, 3 Jan 2022 13:18:15 +0530
Subject: [PATCH] feat: made dropdowns look beautiful

---
 .../src/components/Dropdown/StyledWrapper.js  | 10 ++++---
 .../Collection/CollectionItem/index.js        | 27 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js b/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
index 83ce5785d..6ce7b3feb 100644
--- a/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
@@ -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;
         }
       }
     }
diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
index fc7552899..50812d60b 100644
--- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -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();
+                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>