adjustments

Author: rickyzhangca

src/components/EditorPane.tsx

@@ -37,9 +37,9 @@ export const EditorPane = () => {
   };
 
   return (
-    <div className="absolute z-50 flex flex-col w-3/12 max-w-lg bg-white border shadow-xl rounded-xl inset-y-3 right-3 border-slate-200">
+    <div className="absolute z-50 flex flex-col w-3/12 max-w-lg min-w-[320px] bg-white border shadow-xl rounded-xl inset-y-3 right-3 border-slate-200">
       <div className="px-4 py-3 border-b border-slate-300">
-        <span className="text-xl font-medium">Edit data</span>
+        <span className="text-xl font-medium">Link to theme</span>
       </div>
       <div className="flex flex-col flex-1 gap-2 px-4 py-4 overflow-y-auto">
         <p className="font-semibold text-md">Node changes</p>

src/components/editor/NodeChange.tsx

@@ -39,18 +39,25 @@ export const NodeChange = ({
     return <></>;
   }
   const colors = typeColorMap(nodeChange.type);
-  const propsToShow: { name: string; type: SupportedTypes }[] = [
+  const propsToShow: {
+    name: string;
+    type: SupportedTypes;
+    isLinkable: boolean;
+  }[] = [
     {
       name: 'name',
       type: 'string',
+      isLinkable: false,
     },
     {
       name: 'cornerRadius',
       type: 'number',
+      isLinkable: true,
     },
     {
       name: 'fontSize',
       type: 'number',
+      isLinkable: true,
     },
   ];
   return (
@@ -78,6 +85,7 @@ export const NodeChange = ({
                     //@ts-expect-error
                     value={nodeChange[p.name]}
                     type={p.type}
+                    isLinkable={p.isLinkable}
                     linkPath={[...parentLinkPath, p.name]}
                   />
                 </Prop.Root>

src/components/editor/Prop.tsx

@@ -40,7 +40,7 @@ const Value = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={twMerge(
-      'flex gap-1 items-center px-2 py-0.5 rounded-md text-slate-900 bg-slate-100',
+      'flex gap-1 h-full items-center px-2 py-0.5 rounded-md text-slate-900 bg-slate-100',
       className,
     )}
     {...props}
@@ -86,7 +86,6 @@ const String = ({
       )}
       {isLinkable && (
         <Value>
-          ...
           <ChevronDown
             size={16}
             onClick={() => {}}
@@ -116,7 +115,6 @@ const Number = ({
       )}
       {isLinkable && (
         <Value>
-          ...
           <ChevronDown
             size={16}
             onClick={() => {}}