feat(plugins): adjust styles plugins

src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx

-import {
-  privateActivePluginsSelector,
-  publicPluginsListSelector,
-} from '@/redux/plugins/plugins.selectors';
 import { DrawerHeading } from '@/shared/DrawerHeading';
-import { useSelector } from 'react-redux';
-import { LoadPlugin } from './LoadPlugin';
 import { LoadPluginFromUrl } from './LoadPluginFromUrl';
+import { PublicPlugins } from './PublicPlugins';
+import { PrivateActivePlugins } from './PrivateActivePlugins';
 
 export const AvailablePluginsDrawer = (): JSX.Element => {
-  const publicPlugins = useSelector(publicPluginsListSelector);
-  const privateActivePlugins = useSelector(privateActivePluginsSelector);
-
   return (
     <div className="h-full max-h-full" data-testid="available-plugins-drawer">
       <DrawerHeading title="Available plugins" />
       <div className="flex flex-col gap-6 p-6">
         <LoadPluginFromUrl />
-        {privateActivePlugins.map(plugin => (
-          <LoadPlugin key={plugin.hash} plugin={plugin} />
-        ))}
-
-        {publicPlugins.map(plugin => (
-          <LoadPlugin key={plugin.hash} plugin={plugin} />
-        ))}
+        <PrivateActivePlugins />
+        <PublicPlugins />
       </div>
     </div>
   );

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx

@@ -14,11 +14,11 @@ export const LoadPlugin = ({ plugin }: Props): JSX.Element => {
   });
 
   return (
-    <div className="flex w-full items-center justify-between">
+    <div className="flex w-full items-center justify-between text-sm">
       <span className="text-cetacean-blue">{plugin.name}</span>
       <Button
         variantStyles="secondary"
-        className="h-10 self-end rounded-e rounded-s"
+        className="h-10 self-end rounded-e rounded-s text-xs font-medium"
         onClick={togglePlugin}
         data-testid="toggle-plugin"
         disabled={isPluginLoading}

src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx

 import { Button } from '@/shared/Button';
+import { Input } from '@/shared/Input';
 import { useLoadPluginFromUrl } from './hooks/useLoadPluginFromUrl';
 
 export const LoadPluginFromUrl = (): JSX.Element => {
@@ -8,8 +9,8 @@ export const LoadPluginFromUrl = (): JSX.Element => {
     <div className="flex w-full">
       <label className="flex w-full flex-col gap-2 text-sm text-cetacean-blue">
         <span>URL:</span>
-        <input
-          className="h-10 w-full bg-cultured p-3"
+        <Input
+          className="h-10 w-full flex-none bg-cultured p-3"
           type="url"
           value={pluginUrl}
           onChange={handleChangePluginUrl}
@@ -18,7 +19,7 @@ export const LoadPluginFromUrl = (): JSX.Element => {
       </label>
       <Button
         variantStyles="secondary"
-        className="h-10 self-end rounded-e rounded-s"
+        className="h-10 self-end rounded-e rounded-s text-xs font-medium"
         onClick={handleLoadPlugin}
         disabled={isPending}
         data-testid="load-plugin-button"

src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx

+import { privateActivePluginsSelector } from '@/redux/plugins/plugins.selectors';
+import { useSelector } from 'react-redux';
+import { LoadPlugin } from '../LoadPlugin';
+
+export const PrivateActivePlugins = (): React.ReactNode => {
+  const privateActivePlugins = useSelector(privateActivePluginsSelector);
+  return privateActivePlugins.map(plugin => <LoadPlugin key={plugin.hash} plugin={plugin} />);
+};

src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts

+export { PrivateActivePlugins } from './PrivateActivePlugins.component';

src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx

+import { publicPluginsListSelector } from '@/redux/plugins/plugins.selectors';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { LoadPlugin } from '../LoadPlugin';
+
+export const PublicPlugins = (): React.ReactNode => {
+  const publicPlugins = useSelector(publicPluginsListSelector);
+  return publicPlugins.map(plugin => <LoadPlugin key={plugin.hash} plugin={plugin} />);
+};

src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts

+export { PublicPlugins } from './PublicPlugins.component';