refactor: ActionMenu - update styling for searchbox and menu items, improve padding and border styles

Author: RohitRaj011

src/Shared/Components/ActionMenu/ActionMenu.component.tsx

@@ -69,14 +69,15 @@ export const ActionMenu = <T extends string | number = string | number>({
                 {isSearchable && (
                     <div
                         role="search"
-                        className="action-menu__searchbox bg__primary px-12 py-8 border__secondary--bottom"
+                        className="action-menu__searchbox bg__primary border__secondary-translucent--bottom"
                     >
                         <CustomInput
                             name="action-menu-search-box"
                             value={searchTerm}
                             placeholder="Search"
                             onChange={handleSearch}
                             fullWidth
+                            autoFocus
                         />
                     </div>
                 )}
@@ -125,13 +126,13 @@ export const ActionMenu = <T extends string | number = string | number>({
                             </li>
                         ))
                     ) : (
-                        <li role="menuitem" className="border__secondary--top py-8 px-12">
+                        <li role="menuitem" className="py-8 px-12">
                             <p className="m-0 fs-13 lh-20 fw-4 cn-7">No options</p>
                         </li>
                     )}
                 </ul>
                 {footerConfig && (
-                    <div className="bg__menu--secondary border__secondary--top">
+                    <div className="bg__menu--secondary border__secondary-translucent--top">
                         <SelectPickerMenuListFooter menuListFooterConfig={footerConfig} />
                     </div>
                 )}

src/Shared/Components/ActionMenu/actionMenu.scss

@@ -2,7 +2,7 @@
     list-style: none;
 
     &__group {
-        border-top: 1px solid var(--border-secondary);
+        border-top: 1px solid var(--border-secondary-translucent);
 
         &:first-child {
             border-top: none;
@@ -29,7 +29,7 @@
 
     &__searchbox input {
         border: none;
-        padding: 0;
+        padding: 8px 12px;
         background-color: transparent;
     }
 }

src/Shared/Components/Header/HeaderWithCreateButton/utils.ts

@@ -13,10 +13,6 @@ export const getCreateActionMenuOptions = (createCustomAppURL: string): CreateAc
                 componentType: 'link',
                 to: createCustomAppURL,
             },
-        ],
-    },
-    {
-        items: [
             {
                 id: CreateActionMenuItems.CHART_STORE,
                 label: 'From Chart store',