diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
index 53b3ecf9..8999534f 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -46,20 +46,23 @@ export default function PluginCardComponent({
{/* footer */}
-
);
-}
\ No newline at end of file
+}
diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
index 3ec44fd4..1d09d462 100644
--- a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
+++ b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
@@ -41,8 +41,29 @@
.cardFooter {
width: 90%;
height: 30px;
+ position: relative;
}
+.footerContainer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.linkAndToolContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+}
+
+.switchContainer {
+ display: flex;
+ justify-content: flex-end;
+}
.fontGray {
color: #6C6C6C;
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
index 5d96c57f..dcc1dfd0 100644
--- a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
+++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
@@ -1,56 +1,49 @@
-import styles from "./pluginMarketCard.module.css"
-import {GithubOutlined, StarOutlined} from '@ant-design/icons';
-import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
-import {Button} from "antd";
+import styles from "./pluginMarketCard.module.css";
+import { GithubOutlined, StarOutlined } from "@ant-design/icons";
+import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
+import { Button } from "antd";
export default function PluginMarketCardComponent({
- cardVO
+ cardVO
}: {
- cardVO: PluginMarketCardVO
+ cardVO: PluginMarketCardVO;
}) {
+ function handleInstallClick(pluginId: string) {
+ console.log("Install plugin: ", pluginId);
+ }
-
- function handleInstallClick (pluginId: string) {
- console.log("Install plugin: ", pluginId)
- }
-
- return (
-
- {/* header */}
-
- {/* left author */}
-
{cardVO.author}
- {/* right icon */}
-
-
- {/* content */}
-
-
{cardVO.name}
-
{cardVO.description}
-
- {/* footer */}
-
-
-
-
- {cardVO.starCount}
-
-
-
-
+ return (
+
+ {/* header */}
+
+ {/* left author */}
+
{cardVO.author}
+ {/* right icon */}
+
+
+ {/* content */}
+
+
{cardVO.name}
+
{cardVO.description}
+
+ {/* footer */}
+
+
+
+
+ {cardVO.starCount}
+
- );
+
+
+
+ );
}
diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
index 33297b09..97a5e224 100644
--- a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
+++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
@@ -71,5 +71,6 @@
color: #6062E7;
align-self: center;
justify-content: space-between;
+ align-items: center;
}
}
\ No newline at end of file