diff --git a/frontend/src/components/CanvasGraph.tsx b/frontend/src/components/CanvasGraph.tsx index 3435dd5..0e262a8 100644 --- a/frontend/src/components/CanvasGraph.tsx +++ b/frontend/src/components/CanvasGraph.tsx @@ -35,9 +35,9 @@ interface CanvasGraphProps { } // Physics constants -const NODE_RADIUS = 30; // Node radius in pixels -const MIN_DISTANCE = 100; // Minimum distance between any two nodes -const MAX_DISTANCE = 300; // Maximum distance between connected nodes +const NODE_RADIUS = 45; // Node radius in pixels +const MIN_DISTANCE = 110; // Minimum distance between any two nodes +const MAX_DISTANCE = 500; // Maximum distance between connected nodes const REPULSION_STRENGTH = 500; // How strongly nodes repel each other when too close const ATTRACTION_STRENGTH = 0.1; // Default attraction between connected nodes const CONSTRAINT_STRENGTH = 0.2; // Strength of distance constraints @@ -488,7 +488,8 @@ const CanvasGraph: React.FC = ({ data, width, height }) => { ctx.lineWidth = 2; ctx.stroke(); - const initials = `${node.firstName.charAt(0)}${node.lastName.charAt(0)}`; + // Draw initials + const initials = `${node.firstName} ${node.lastName.charAt(0)}.`; ctx.fillStyle = 'white'; ctx.font = 'bold 16px sans-serif'; ctx.textAlign = 'center'; diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 936b5a5..f8c8bfd 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -91,7 +91,7 @@ export const PersonFormModal: React.FC = ({ id="birthday" selected={formData.birthday} onChange={(date: Date | null) => setFormData({ ...formData, birthday: date })} - dateFormat="MMMM d, yyyy" + dateFormat="dd.MM.YYYY" placeholderText="Select birthday" className="w-full bg-slate-700 border border-slate-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" @@ -337,7 +337,7 @@ export const PersonDetailModal: React.FC = ({ id="editBirthday" selected={person.birthday ? new Date(person.birthday) : null} onChange={(date: Date | null) => setPerson({ ...person, birthday: date })} - dateFormat="MMMM d, yyyy" + dateFormat="dd.MM.YYYY" placeholderText="Select birthday" className="w-full bg-slate-700 border border-slate-600 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"