feature completed

Author: durgatechvar

src/components/editorPage/menu-drop-down/menu-drop-down.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State } from '@stencil/core';
+import { Component, h, Host, Prop, State } from '@stencil/core';
 import state from '../store';
 
 @Component({
@@ -28,36 +28,39 @@ export class MenuDropDown {
 
   render() {
     return (
-      <div class="relative">
+      <Host class="relative w-full py-2">
         {/* Header */}
-        <h2 onClick={() => this.toggleDropdown()} class="font-sans text-gray-600 hover:text-indigo-800 cursor-pointer transition text-sm capitalize flex gap-1 items-center">
+        {/* <h2 onClick={() => this.toggleDropdown()} class="font-sans text-gray-600 hover:text-indigo-800 cursor-pointer transition text-sm capitalize flex gap-1 items-center">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
               d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
             />
           </svg>
-        </h2>
+        </h2> */}
+        <div onClick={() => this.toggleDropdown()} class='w-full pl-3 cursor-pointer'>
+          {this.listTitle}
+        </div>
         <backdrop-filter showBackDrop={this.showDropdown} backDropHandler={this.backDropHandler}></backdrop-filter>
         {/* List */}
         <div
           id="dropdownDefaultButton"
           data-dropdown-toggle="dropdown"
           style={{ right: '0px' }}
-          class={this.showDropdown ? 'absolute bg-white z-10 w-44 text-sm list-none mt-2 rounded divide-y right-0 divide-gray-100 shadow ' : 'hidden'}
+          class={this.showDropdown ? 'absolute bg-gray-300 z-50 w-44 text-sm list-none mt-2 rounded-md divide-y -bottom-1  right-0 divide-gray-100 shadow ' : 'hidden'}
         >
-          <ul id="dropdown" class="py-1 bg-white">
+          <ul id="dropdown" class="py-1 bg-gray-300 rounded-b-md">
             {this.list?.map(item => (
               <li>
-                <a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">
+                <a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-1 px-4 text-sm text-gray-700 cursor-pointer">
                   {item}
                 </a>
               </li>
             ))}
           </ul>
         </div>
-      </div>
+      </Host>
     );
   }
 }

src/components/editorPage/node-item/node-item.tsx

@@ -27,8 +27,8 @@ export class NodeItem {
           {state.availableNodes.map(item => {
             return (
               <li>
-                <div class="flex justify-between p-2 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
-                  <div class="ml-3">{item}</div>
+                <div class="flex justify-between text-base font-normal text-gray-900 rounded-lg bg-gray-200">
+                  {/* <div class="ml-3">{item}</div> */}
                   <menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={nodeName => this.nodeChangeHandler(nodeName)}></menu-drop-down>
                 </div>
               </li>