style updates

admin/src/components/CustomNode.js

@@ -5,7 +5,13 @@
  */
 
 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 { RelationIcon } from "./RelationIcon";
@@ -34,13 +40,28 @@ 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"
@@ -61,7 +82,11 @@ 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>
               )}
@@ -70,9 +95,16 @@ export default function CustomNode({ data }) {
               {attr[1].type === "relation" && (
                 <>
                   <Tooltip description={attr[1].relation}>
-                    <RelationIcon theme={theme}>{getIcon(attr[1].relation)}</RelationIcon>
+                    <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/OptionsBar.js

@@ -13,7 +13,7 @@ export default function OptionsBar() {
       style={{
         display: "flex",
         justifyContent: "flex-start",
-        alignItems: "center",
+        alignItems: "flex-start",
         padding: "0 56px 24px",
         gap: "24px",
       }}
@@ -25,14 +25,14 @@ export default function OptionsBar() {
         }}
         value={options.showTypes}
       >
-        Fields Data Types
+        Data Types
       </Checkbox>
       <Checkbox
         name="show-icons"
         onValueChange={() => toggleOption("showIcons")}
         value={options.showIcons}
       >
-        Fields Icons
+        Data Type Icons
       </Checkbox>
       <Checkbox
         name="show-default-fields"