refactored RelationIcon and removed style-dcomponents

.gitignore

@@ -1 +1,2 @@
 .vscode/settings.json
+node_modules

admin/src/components/CustomNode.js

@@ -5,16 +5,10 @@
  */
 
 import React from "react";
-import {
-  Badge,
-  Box,
-  Divider,
-  Tooltip,
-  Typography,
-} from "@strapi/design-system";
+import { Badge, Box, Divider, Tooltip, Typography } from "@strapi/design-system";
 import { useTheme } from "styled-components";
 import { Handle } from "reactflow";
-import { RelationIndicator } from "./RelationIndicator";
+import { RelationIcon } from "./RelationIcon";
 import { getIcon } from "../utils/themeUtils";
 import "./CustomNode.css";
 
@@ -40,28 +34,13 @@ export default function CustomNode({ data }) {
 
   const theme = useTheme();
   return (
-    <Box
-      background="neutral0"
-      shadow="tableShadow"
-      hasRadius
-      padding="16px 24px"
-      className="cte-plugin-box"
-    >
-      <Typography
-        fontWeight="bold"
-        textColor="buttonPrimary500"
-        padding="16px"
-        className="cte-plugin-header nodrag"
-      >
+    <Box background="neutral0" shadow="tableShadow" hasRadius padding="16px 24px" className="cte-plugin-box">
+      <Typography fontWeight="bold" textColor="buttonPrimary500" padding="16px" className="cte-plugin-header nodrag">
         {data.info.displayName}
       </Typography>
 
       <br />
-      <Typography
-        textColor="neutral400"
-        padding="16px"
-        className="cte-plugin-header nodrag"
-      >
+      <Typography textColor="neutral400" padding="16px" className="cte-plugin-header nodrag">
         {data.key}
         <Handle
           type="target"
@@ -82,11 +61,7 @@ export default function CustomNode({ data }) {
               <p className="cte-plugin-line nodrag">{attr[0]}</p>
 
               {data.options.showTypes && (
-                <Badge
-                  size="M"
-                  backgroundColor="neutral0"
-                  textColor="neutral400"
-                >
+                <Badge size="M" backgroundColor="neutral0" textColor="neutral400">
                   {attr[1].type}
                 </Badge>
               )}
@@ -95,16 +70,9 @@ export default function CustomNode({ data }) {
               {attr[1].type === "relation" && (
                 <>
                   <Tooltip description={attr[1].relation}>
-                    <RelationIndicator theme={theme}>
-                      {getIcon(attr[1].relation)}
-                    </RelationIndicator>
+                    <RelationIcon theme={theme}>{getIcon(attr[1].relation)}</RelationIcon>
                   </Tooltip>
-                  <Handle
-                    type="source"
-                    id={attr[0]}
-                    position="right"
-                    className="cte-plugin-handle"
-                  />
+                  <Handle type="source" id={attr[0]} position="right" className="cte-plugin-handle" />
                 </>
               )}
             </div>

admin/src/components/RelationIcon.css

@@ -0,0 +1,18 @@
+.cte-plugin-relation-icon {
+  height: 20px;
+  width: 20px;
+  font-size: 12px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: -32px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.cte-plugin-relation-icon svg path {
+  fill: var(--cte-plugin-relation-color);
+}

admin/src/components/RelationIcon.js

@@ -0,0 +1,16 @@
+import React from "react";
+import "./RelationIcon.css";
+
+export function RelationIcon({ theme, children }) {
+  return (
+    <span
+      style={{
+        background: theme.colors.neutral0,
+        "--cte-plugin-relation-color": theme.colors.buttonPrimary500,
+      }}
+      className="cte-plugin-relation-icon"
+    >
+      {children}
+    </span>
+  );
+}

admin/src/components/RelationIndicator.js

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-
-export const RelationIndicator = styled.span`
-  height: 20px;
-  width: 20px;
-  font-size: 12px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: ${(props) => props.theme.colors.neutral0};
-  position: absolute;
-  right: -32px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-
-  svg path {
-    fill: ${(props) => props.theme.colors.buttonPrimary500};
-  }
-`;

package.json

@@ -18,8 +18,7 @@
     "@strapi/icons": "^1.6.3",
     "prop-types": "^15.7.2",
     "reactflow": "^11.7.4",
-    "@tisoap/react-flow-smart-edge": "^3.0.0",
-    "styled-components": "^5.3.6"
+    "@tisoap/react-flow-smart-edge": "^3.0.0"
   },
   "peerDependencies": {
     "@strapi/strapi": "^4.0.0"
@@ -37,4 +36,4 @@
     "npm": ">=6.0.0"
   },
   "license": "MIT"
-}
+}