feat: add css for pre build list

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginCard.tsx

@@ -23,7 +23,7 @@ const PluginCard = ({
 
     return (
         <div
-            className={`p-12 flexbox dc__gap-16 dc__tab-focus dc__visible-hover dc__visible-hover--parent ${showCardBorder ? 'dc__border br-4 dc__hover-n50' : ''}`}
+            className={`p-12 flexbox dc__gap-16 dc__tab-focus plugin-card dc__visible-hover dc__visible-hover--parent ${showCardBorder ? 'dc__border br-4 dc__hover-n50' : ''}`}
             role="button"
             tabIndex={0}
             onClick={handleSelection}
@@ -61,7 +61,7 @@ const PluginCard = ({
                 <div className="flexbox-col dc__gap-8">
                     <div className="flexbox-col dc__gap-4">
                         <div className="flexbox dc__gap-4">
-                            <h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20">{name}</h4>
+                            <h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20 plugin-card__title">{name}</h4>
                             {!isSelectable && (
                                 <span className="dc__truncate cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
                             )}

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -4,6 +4,7 @@ import { APIResponseHandler } from '../APIResponseHandler'
 import PluginTagSelect from './PluginTagSelect'
 import PluginList from './PluginList'
 import { FilterChips } from '../FilterChips'
+import PluginCardSkeletonList from './PluginCardSkeletonList'
 import { SearchBar, useAsync } from '../../../Common'
 import { getAvailablePluginTags, getPluginStoreData } from './service'
 import {
@@ -16,7 +17,7 @@ import {
 import { DEFAULT_PLUGIN_LIST_FILTERS } from './constants'
 import { ReactComponent as ICCross } from '../../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as ICVisibility } from '../../../Assets/Icon/ic-visibility-on.svg'
-import PluginCardSkeletonList from './PluginCardSkeletonList'
+import './pluginListContainer.scss'
 
 const PluginListContainer = ({
     availableTags,
@@ -35,8 +36,8 @@ const PluginListContainer = ({
     handleParentTotalCount,
     parentFilters,
     handleUpdateParentFilters,
-    rootClassName,
-    showCardBorder,
+    rootClassName = '',
+    showCardBorder = false,
 }: Readonly<PluginListContainerProps>) => {
     const { appId } = useParams<PluginListParamsType>()
 

src/Shared/Components/Plugin/pluginListContainer.scss

@@ -0,0 +1,11 @@
+.pre-build-plugin-list-container {
+    .plugin-card {
+        &:hover {
+            box-shadow: 0 0 4px 1px var(--N200);
+
+            .plugin-card__title {
+                color: var(--B500);
+            }
+        }
+    }
+}