Implement additional UX improvements

1. Use normal font for resource list (not Concert One)
2. Center node labels and add configurable font size
3. Add default edge type and color settings with bulk update

Changes:
- Resource list now uses system font for better readability
- Node labels centered within nodes (flex center)
- Added fontSize field to NodeData (configurable per node)
- Added defaultEdgeType and defaultEdgeColor to Settings
- New controls in Settings drawer for edge defaults
- Button to update all edges to default settings
- EditorCanvas uses default edge settings from settings

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/EditorCanvas.tsx

@@ -102,10 +102,10 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
   const defaultEdgeOptions = {
     animated: false,
     style: {
-      stroke: "#94a3b8",
+      stroke: settings?.defaultEdgeColor || "#94a3b8",
       strokeWidth: 2,
     },
-    type: "default",
+    type: settings?.defaultEdgeType || "default",
   };
 
   return (

packages/learningmap/src/EditorDrawerTaskContent.tsx

@@ -93,6 +93,17 @@ export function EditorDrawerTaskContent({
           placeholder={t.placeholderNodeLabel}
         />
       </div>
+      <div className="form-group">
+        <label>Font Size (px)</label>
+        <input
+          type="number"
+          value={localNode.data.fontSize || 14}
+          onChange={(e) => handleFieldChange("fontSize", parseInt(e.target.value) || 14)}
+          placeholder="14"
+          min="8"
+          max="72"
+        />
+      </div>
       <div className="form-group">
         <label>{t.summary}</label>
         <input

packages/learningmap/src/SettingsDrawer.tsx

@@ -17,6 +17,8 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
   // Get state from store
   const isOpen = useEditorStore(state => state.settingsDrawerOpen);
   const settings = useEditorStore(state => state.settings);
+  const edges = useEditorStore(state => state.edges);
+  const setEdges = useEditorStore(state => state.setEdges);
 
   // Get actions from store
   const setSettingsDrawerOpen = useEditorStore(state => state.setSettingsDrawerOpen);
@@ -57,6 +59,22 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
     }));
   };
 
+  const handleUpdateAllEdges = () => {
+    const defaultType = localSettings?.defaultEdgeType || "default";
+    const defaultColor = localSettings?.defaultEdgeColor || "#94a3b8";
+    
+    const updatedEdges = edges.map(edge => ({
+      ...edge,
+      type: defaultType,
+      style: {
+        ...edge.style,
+        stroke: defaultColor,
+      }
+    }));
+    
+    setEdges(updatedEdges);
+  };
+
   return (
     <>
       <div className="drawer-overlay" onClick={onClose} />
@@ -174,6 +192,39 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
               {t.useCurrentViewport}
             </button>
           </div>
+
+          <div className="form-group">
+            <label>Default Edge Type</label>
+            <select
+              value={localSettings?.defaultEdgeType || "default"}
+              onChange={(e) => setLocalSettings(settings => ({ ...settings, defaultEdgeType: e.target.value }))}
+            >
+              <option value="default">Default</option>
+              <option value="straight">Straight</option>
+              <option value="step">Step</option>
+              <option value="smoothstep">Smooth Step</option>
+              <option value="simplebezier">Simple Bezier</option>
+            </select>
+          </div>
+
+          <div className="form-group">
+            <ColorSelector
+              label="Default Edge Color"
+              value={localSettings?.defaultEdgeColor || "#94a3b8"}
+              onChange={color => setLocalSettings(settings => ({ ...settings, defaultEdgeColor: color }))}
+            />
+          </div>
+
+          <div className="form-group">
+            <button
+              onClick={handleUpdateAllEdges}
+              className="secondary-button"
+              style={{ width: '100%' }}
+              type="button"
+            >
+              Update All Edges to Default Settings
+            </button>
+          </div>
         </div>
 
         <div className="drawer-footer">

packages/learningmap/src/index.css

@@ -233,6 +233,10 @@ header.drawer-header {
   padding: 24px;
 }
 
+.drawer-resources ul {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
 .drawer-description {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   line-height: 1.6;

packages/learningmap/src/nodes/TaskNode.tsx

@@ -7,16 +7,16 @@ export const TaskNode = ({ data, selected, isConnectable, ...props }: Node<NodeD
     <>
       {isConnectable && <NodeResizer isVisible={selected} />}
       <CircleCheck className="icon" />
-      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-        <div style={{ fontWeight: 600, fontSize: "14px" }}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", textAlign: "center" }}>
+        <div style={{ fontWeight: 600, fontSize: data.fontSize ? `${data.fontSize}px` : "14px" }}>
           {data.label || "Untitled"}
         </div>
+        {data.summary && (
+          <div style={{ fontSize: "12px", color: "#4b5563", marginTop: "4px" }}>
+            {data.summary}
+          </div>
+        )}
       </div>
-      {data.summary && (
-        <div style={{ fontSize: "12px", color: "#4b5563", marginTop: "4px" }}>
-          {data.summary}
-        </div>
-      )}
 
       {["Bottom", "Top", "Left", "Right"].map((pos) => (
         <Handle

packages/learningmap/src/nodes/TopicNode.tsx

@@ -7,16 +7,16 @@ export const TopicNode = ({ data, selected, isConnectable }: Node<NodeData>) =>
     <>
       {isConnectable && <NodeResizer isVisible={selected} />}
       {data.state === "mastered" && <StarCircle className="icon" />}
-      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-        <div style={{ fontWeight: 600, fontSize: "14px" }}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", textAlign: "center" }}>
+        <div style={{ fontWeight: 600, fontSize: data.fontSize ? `${data.fontSize}px` : "14px" }}>
           {data.label || "Untitled"}
         </div>
+        {data.summary && (
+          <div style={{ fontSize: "12px", color: "#4b5563", marginTop: "4px" }}>
+            {data.summary}
+          </div>
+        )}
       </div>
-      {data.summary && (
-        <div style={{ fontSize: "12px", color: "#4b5563", marginTop: "4px" }}>
-          {data.summary}
-        </div>
-      )}
 
       {["Bottom", "Top", "Left", "Right"].map((pos) => (
         <Handle

packages/learningmap/src/types.ts

@@ -33,6 +33,7 @@ export interface NodeData {
   video?: string;
   resources?: Resource[];
   summary?: string;
+  fontSize?: number;
   [key: string]: any;
 }
 
@@ -64,6 +65,8 @@ export interface Settings {
     y: number;
     zoom: number;
   };
+  defaultEdgeType?: string;
+  defaultEdgeColor?: string;
 }
 
 export interface EdgeConfig {