fix: plugin tag select styles

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginTagSelect.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react'
 import ReactSelect, { MenuListProps } from 'react-select'
 import { Option, OptionType } from '../../../Common'
-import { commonSelectStyles, LoadingIndicator, MenuListWithApplyButton } from '../ReactSelect'
+import { LoadingIndicator, MenuListWithApplyButton } from '../ReactSelect'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
 import { PluginTagSelectProps } from './types'
-import { PluginTagSelectValueContainer } from './utils'
+import { PluginTagSelectValueContainer, pluginTagSelectStyles } from './utils'
 
 const PluginTagSelect = ({
     availableTags,
@@ -50,10 +50,9 @@ const PluginTagSelect = ({
         return <MenuListWithApplyButton {...props} handleApplyFilter={handleApplyFilters} />
     }, [])
 
-    // TODO: Look if should close menu on apply
     return (
         <ReactSelect
-            styles={commonSelectStyles}
+            styles={pluginTagSelectStyles}
             options={tagOptions}
             isMulti
             value={localSelectedOptions}

src/Shared/Components/Plugin/utils.tsx

@@ -5,6 +5,7 @@ import { ReactComponent as ICSearch } from '../../../Assets/Icon/ic-search.svg'
 import { ReactComponent as ICFilter } from '../../../Assets/Icon/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '../../../Assets/Icon/ic-filter-applied.svg'
 import { OptionType } from '../../../Common'
+import { commonSelectStyles } from '../ReactSelect'
 
 const parseMinimalPluginVersionsDTO = (
     pluginVersionData: ParentPluginDTO['pluginVersions']['minimalPluginVersionData'],
@@ -117,3 +118,23 @@ export const PluginTagSelectValueContainer = (props: ValueContainerProps<OptionT
         </components.ValueContainer>
     )
 }
+
+// TODO: Should it be in constants?
+export const pluginTagSelectStyles = {
+    ...commonSelectStyles,
+    option: (base, state) => ({
+        ...base,
+        height: '36px',
+        padding: '8px 12px',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        color: 'var(--N900)',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+
+        ':active': {
+            backgroundColor: 'var(--N100)',
+        },
+    }),
+}

src/Shared/Components/ReactSelect/utils.tsx

@@ -191,15 +191,17 @@ export const MenuListWithApplyButton = ({
 }: MenuListProps & { handleApplyFilter: () => void }) => (
     <>
         <components.MenuList {...props} />
-        <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
-            <button
-                type="button"
-                className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
-                onClick={handleApplyFilter}
-                aria-label="Apply filters"
-            >
-                Apply
-            </button>
-        </div>
+        {props.selectProps.options.length > 0 && (
+            <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
+                <button
+                    type="button"
+                    className="dc__unset-button-styles w-100 br-4 h-28 flex bcb-5 cn-0 fw-6 lh-28 fs-12 h-28 br-4 pt-5 pr-12 pb-5 pl-12"
+                    onClick={handleApplyFilter}
+                    aria-label="Apply filters"
+                >
+                    Apply
+                </button>
+            </div>
+        )}
     </>
 )