fix: update PluginCard styling for hover border and transparent background

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginCard.tsx

@@ -26,7 +26,7 @@ const PluginCard = ({
 
     return (
         <div
-            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' : ''}`}
+            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' : 'dc__border-transparent dc__hover-border-n1--imp'}`}
             role="button"
             tabIndex={0}
             onClick={handleSelection}

src/Shared/Components/Plugin/PluginCardSkeletonList.tsx

@@ -19,7 +19,7 @@ const PluginCardSkeleton = () => (
     </div>
 )
 
-const PluginCardSkeletonList = ({ count = 3 }: PluginCardSkeletonListProps) => (
+const PluginCardSkeletonList = ({ count = 2 }: PluginCardSkeletonListProps) => (
     <>
         {Array(count)
             .fill(0)

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -222,7 +222,7 @@ const PluginListContainer = ({
 
             <APIResponseHandler
                 isLoading={isLoadingPluginData || getIsRequestAborted(pluginDataError)}
-                customLoader={<PluginCardSkeletonList count={5} />}
+                customLoader={<PluginCardSkeletonList />}
                 error={pluginDataError}
                 errorScreenManagerProps={{
                     code: pluginDataError?.code,

src/Shared/Components/Plugin/pluginListContainer.scss

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