From 45fe70b98430f7010ada695ad67eab7322e8dc3e Mon Sep 17 00:00:00 2001
From: Mateusz Winiarczyk <mateusz.winiarczyk@appunite.com>
Date: Tue, 30 Jan 2024 20:51:08 +0100
Subject: [PATCH] feat(plugins): adjust styles plugins
---
.../AvailablePluginsDrawer.component.tsx | 20 ++++---------------
.../LoadPlugin/LoadPlugin.component.tsx | 4 ++--
.../LoadPluginFromUrl.component.tsx | 7 ++++---
.../PrivateActivePlugins.component.tsx | 8 ++++++++
.../PrivateActivePlugins/index.ts | 1 +
.../PublicPlugins/PublicPlugins.component.tsx | 9 +++++++++
.../PublicPlugins/index.ts | 1 +
7 files changed, 29 insertions(+), 21 deletions(-)
create mode 100644 src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx
create mode 100644 src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts
create mode 100644 src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx
create mode 100644 src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
index 9022c581..80af258e 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
@@ -1,28 +1,16 @@
-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>
);
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
index 64b71325..f129d79d 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
+++ b/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}
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
index fac9bd0d..f57224d0 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
@@ -1,4 +1,5 @@
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"
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx
new file mode 100644
index 00000000..557b9974
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx
@@ -0,0 +1,8 @@
+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} />);
+};
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts
new file mode 100644
index 00000000..4a8bc8b5
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts
@@ -0,0 +1 @@
+export { PrivateActivePlugins } from './PrivateActivePlugins.component';
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx
new file mode 100644
index 00000000..674b8875
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx
@@ -0,0 +1,9 @@
+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} />);
+};
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts
new file mode 100644
index 00000000..7c1fd8a7
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts
@@ -0,0 +1 @@
+export { PublicPlugins } from './PublicPlugins.component';
--
GitLab