RI-7554 Rework the actions button on the browser page (#4994)

* fix(ui): rework the actions button on the browser page

Author: valkirilov

redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx

@@ -62,7 +62,7 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
         borderLess
         grow={false}
         justify="center"
-        style={{ paddingTop: '20px' }}
+        style={{ paddingTop: '16px' }}
       >
         <Tabs.Compose
           value={activeTab?.pageName}

redisinsight/ui/src/pages/browser/components/actions/Actions.spec.tsx

@@ -17,6 +17,13 @@ const mockedProps: Props = {
 describe('Actions', () => {
   it('should render', () => {
     expect(render(<Actions {...mockedProps} />)).toBeTruthy()
+
+    // Verify the buttons are present
+    const bulkActionsButton = screen.getByTestId('btn-bulk-actions')
+    const addKeyButton = screen.getByTestId('btn-add-key')
+
+    expect(bulkActionsButton).toBeInTheDocument()
+    expect(addKeyButton).toBeInTheDocument()
   })
 
   it('should show feature dependent items when feature flag is off', async () => {

redisinsight/ui/src/pages/browser/components/actions/Actions.tsx

@@ -6,9 +6,9 @@ import {
   TelemetryEvent,
 } from 'uiSrc/telemetry'
 import {
+  EmptyButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import styles from 'uiSrc/pages/browser/components/browser-search-panel/styles.module.scss'
 import { setBulkActionType } from 'uiSrc/slices/browser/bulkActions'
 import { BulkActionsType, FeatureFlags } from 'uiSrc/constants'
 import { SubscriptionsIcon } from 'uiSrc/components/base/icons'
@@ -46,28 +46,29 @@ const Actions = ({ handleAddKeyPanel, handleBulkActionsPanel }: Props) => {
       onClick={openAddKeyPanel}
       data-testid="btn-add-key"
     >
-      + <span className={styles.addKeyText}>Key</span>
+      Add key
     </SecondaryButton>
   )
   const openBulkActions = () => {
     dispatch(setBulkActionType(BulkActionsType.Delete))
     handleBulkActionsPanel(true)
   }
   const BulkActionsBtn = (
-    <SecondaryButton
+    <EmptyButton
       color="secondary"
       icon={SubscriptionsIcon}
       onClick={openBulkActions}
       data-testid="btn-bulk-actions"
       aria-label="bulk actions"
     >
-      Bulk Actions
-    </SecondaryButton>
+      Bulk actions
+    </EmptyButton>
   )
   return (
     <Row
       grow={false}
       gap="m"
+      align="center"
       style={{
         flexShrink: 0,
         marginLeft: 12,