Datamapper improve styling

src/main/frontend/app/components/datamapper/basic-components/close-button.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx'
+
+export default function CloseButton({ onClick, className }: { onClick: () => void; className?: string }) {
+  return (
+    <button
+      className={clsx(
+        'text-error text-3xl leading-none font-bold drop-shadow-[0_0_1px_black] hover:opacity-80',
+        className,
+      )}
+      onClick={(event) => {
+        event.stopPropagation()
+        onClick()
+      }}
+    >
+      &times;
+    </button>
+  )
+}

src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx

@@ -1,18 +1,16 @@
 import clsx from 'clsx'
+import TrashBinIcon from '/icons/solar/Trash Bin.svg?react'
 
 export default function DeleteButton({ onClick, className }: { onClick: () => void; className?: string }) {
   return (
     <button
-      className={clsx(
-        'text-error text-3xl leading-none font-bold drop-shadow-[0_0_1px_black] hover:opacity-80',
-        className,
-      )}
+      className={clsx('drop-shadow-[0_0_1px_black] hover:opacity-70', className)}
       onClick={(event) => {
         event.stopPropagation()
         onClick()
       }}
     >
-      &times;
+      <TrashBinIcon className="h-6" />
     </button>
   )
 }

src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx

@@ -1,16 +1,16 @@
 import clsx from 'clsx'
+import TextCircle from '/icons/solar/Text Circle.svg?react'
 
 export default function EditButton({ onClick, className }: { onClick: () => void; className?: string }) {
   return (
     <button
-      className={clsx('text-lg drop-shadow-[0_0_1px_black] hover:opacity-70', className)}
+      className={clsx('drop-shadow-[0_0_1px_black] hover:opacity-70', className)}
       onClick={(event) => {
         event.stopPropagation()
         onClick()
       }}
     >
-      ✏️
-      {/* <Settings className="fill-border" /> */}
+      <TextCircle className="h-6" />
     </button>
   )
 }

src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx

@@ -16,7 +16,7 @@ export default function GenerateButton({
 
   return (
     <Button
-      className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-[var(--color-neutral-900)] transition hover:brightness-110"
+      className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900 transition hover:brightness-110"
       onClick={async () => {
         highlightUnset()
         if (!project) {

src/main/frontend/app/components/datamapper/basic-components/highlight-button.tsx

@@ -1,15 +1,16 @@
 import clsx from 'clsx'
+import LightBulb from '/icons/solar/Lightbulb.svg?react'
 
 export default function HighlightButton({ onClick, className }: { onClick: () => void; className?: string }) {
   return (
     <button
-      className={clsx('text-lg drop-shadow-[0_0_1px_black] hover:opacity-70', className)}
+      className={clsx('drop-shadow-[0_0_1px_black] hover:opacity-70', className)}
       onClick={(event) => {
         event.stopPropagation()
         onClick()
       }}
     >
-      💡
+      <LightBulb className="h-6" />
     </button>
   )
 }

src/main/frontend/app/components/datamapper/forms/add-mapping-form.tsx

@@ -122,7 +122,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
   const scrollable = 'flex-1 min-h-0 overflow-y-auto space-y-2'
 
   return (
-    <div className="text-foreground mx-auto flex max-h-[90vh] min-h-0 w-full max-w-[900px] flex-col">
+    <div className="text-foreground mx-auto flex max-h-[90vh] min-h-0 w-full max-w-225 flex-col">
       <h1 className="mb-4 shrink-0 text-xl font-bold">Add Mapping</h1>
 
       {/* Main grid with lists */}

src/main/frontend/app/components/datamapper/react-flow/array-group-node.tsx

@@ -42,7 +42,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
     <div
       onClick={updateChecked}
       className={clsx(
-        'h-full cursor-pointer',
+        'group h-full cursor-pointer',
         checked ? 'border-foreground-active border-rounded rounded-md border-4' : 'border-none',
       )}
     >
@@ -53,9 +53,9 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
         {/* Header */}
         <div className="bg-backdrop w-full rounded-md px-2 py-2 text-sm font-semibold">{data.label ?? 'Group'}</div>
 
-        <div className="bg-backdrop border-border absolute bottom-0 flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm opacity-80">
-          <span>({data.variableType})</span>
-          <div className="flex gap-3">
+        <div className="bg-backdrop border-border absolute bottom-0 flex w-full items-center justify-between rounded-md border text-sm opacity-80">
+          <span className="px-4 py-2">({data.variableType})</span>
+          <div className="hidden gap-3 group-hover:flex">
             <HighlightButton
               onClick={() => {
                 onHighlight?.(id)
@@ -77,7 +77,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
               width: 10,
               height: 10,
             }} //Can't set this with tailwind for some reason
-            className={`${variant == 'source' ? '' : 'translate-x-[5px]'} transition-opacity transition-transform ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+            className={`${variant == 'source' ? '' : 'translate-x-1.25'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
           />
         </div>
 

src/main/frontend/app/components/datamapper/react-flow/array-mapping-node.tsx

@@ -14,7 +14,7 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope
   return (
     <div
       onClick={() => onClick?.(id)}
-      className={`relative flex max-h-[50px] justify-between overflow-hidden rounded-md p-2`}
+      className={`relative flex max-h-12.5 justify-between overflow-hidden rounded-md p-2`}
       style={{
         backgroundColor: data.colour || 'var(--color-backdrop)',
         width: `${MAPPING_WIDTH}px`,
@@ -27,7 +27,7 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope
       </div>
 
       {/* Right: Buttons (top and bottom) */}
-      <div className="z-5 flex h-[25px] w-[5px] flex-col justify-between">
+      <div className="z-5 flex h-6.25 w-1.25 flex-col justify-between">
         <DeleteButton
           className="absolute top-4 right-0 z-4"
           onClick={() => {
@@ -41,13 +41,13 @@ function ArrayMappingNode({ id, data, onClick, onDelete }: ArrayMappingNodePrope
         type="target"
         position={Position.Left}
         isConnectable={false}
-        className="pointer-events-none h-0 w-0 translate-x-[5px] opacity-0"
+        className="pointer-events-none h-0 w-0 translate-x-1.25 opacity-0"
       />
       <Handle
         type="source"
         position={Position.Right}
         isConnectable={false}
-        className="pointer-events-none h-0 w-0 -translate-x-[5px] opacity-0"
+        className="pointer-events-none h-0 w-0 -translate-x-1.25 opacity-0"
       />
     </div>
   )

src/main/frontend/app/components/datamapper/react-flow/extra-source-node.tsx

@@ -14,17 +14,17 @@ export interface ExtraSourceNodeProperties {
 function ExtraSourceNode({ id, data, onDelete, onHighlight }: ExtraSourceNodeProperties) {
   return (
     <div
-      className="bg-selected relative flex h-full flex-col gap-1 rounded-md border border-gray-400 p-0"
+      className="bg-selected group relative flex h-full flex-col gap-1 rounded-md border border-gray-400 p-0"
       style={{ width: `${GROUP_WIDTH + 30}px` }}
     >
       {/* Header */}
       <div className="bg-info w-full rounded-md px-2 py-2 text-sm font-semibold">
         {data.label ? `extra source: ${data.label}` : 'ExtraSource'}
       </div>
 
-      <div className="border-border bg-info absolute bottom-0 flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm opacity-80">
-        <span>(Source )</span>
-        <div className="flex gap-3">
+      <div className="border-border bg-info absolute bottom-0 flex w-full items-center justify-between rounded-md border text-sm opacity-80">
+        <span className="px-4 py-2">(Source )</span>
+        <div className="hidden gap-3 group-hover:flex">
           <HighlightButton
             onClick={() => {
               onHighlight?.(id)

src/main/frontend/app/components/datamapper/react-flow/labeled-group-node.tsx

@@ -16,15 +16,15 @@ export interface LabeledGroupNodeProperties {
 function LabeledGroupNode({ id, data, onEdit, onDelete, onHighlight }: LabeledGroupNodeProperties) {
   return (
     <div
-      className="bg-selected relative flex h-full flex-col gap-1 rounded-md border border-gray-400 p-0"
+      className="bg-selected group relative flex h-full flex-col gap-1 rounded-md border border-gray-400 p-0"
       style={{ width: `${GROUP_WIDTH}px` }}
     >
       {/* Header */}
       <div className="bg-backdrop w-full rounded-md px-2 py-2 text-sm font-semibold">{data.label ?? 'Group'}</div>
 
-      <div className="bg-backdrop border-border absolute bottom-0 flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm opacity-80">
-        <span>({data.variableType})</span>
-        <div className="flex gap-3">
+      <div className="bg-backdrop border-border absolute bottom-0 flex w-full items-center justify-between rounded-md border text-sm opacity-80">
+        <span className="px-4 py-2">({data.variableType})</span>
+        <div className="hidden gap-3 group-hover:flex">
           <HighlightButton
             onClick={() => {
               onHighlight?.(id)

src/main/frontend/app/components/datamapper/react-flow/mapping-node.tsx

@@ -17,7 +17,7 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
   return (
     <div
       onClick={() => onClick?.(id)}
-      className={`relative flex max-h-[50px] justify-between overflow-hidden rounded-md p-2`}
+      className={`group relative flex max-h-12.5 justify-between rounded-md p-2`}
       style={{
         backgroundColor: data.colour || 'var(--color-backdrop)',
         width: `${MAPPING_WIDTH}px`,
@@ -29,16 +29,16 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
       </div>
 
       {/* Right: Buttons (top and bottom) */}
-      <div className="z-5 flex h-[25px] w-[5px] flex-col justify-between">
+      <div className="absolute right-0 bottom-6 z-5 hidden text-xl group-hover:block">
         <EditButton
-          className="absolute right-0 bottom-5 text-sm"
+          className=""
           onClick={() => {
             onEdit?.(data)
           }}
         />
 
         <DeleteButton
-          className="absolute top-4 right-0 z-4"
+          className=""
           onClick={() => {
             onDelete?.(id)
           }}
@@ -50,13 +50,13 @@ function MappingNode({ id, data, onClick, onDelete, onEdit }: MappingNodePropert
         type="target"
         position={Position.Left}
         isConnectable={false}
-        className="pointer-events-none h-0 w-0 translate-x-[5px] opacity-0"
+        className="pointer-events-none h-0 w-0 translate-x-1.25 opacity-0"
       />
       <Handle
         type="source"
         position={Position.Right}
         isConnectable={false}
-        className="pointer-events-none h-0 w-0 -translate-x-[5px] opacity-0"
+        className="pointer-events-none h-0 w-0 -translate-x-1.25 opacity-0"
       />
     </div>
   )

src/main/frontend/app/components/datamapper/react-flow/one-edge-node.tsx

@@ -44,40 +44,38 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig
     <div
       onClick={updateChecked}
       className={clsx(
-        'border-border flex cursor-pointer flex-row gap-1 rounded-md border p-2',
+        'border-border group flex cursor-pointer items-center gap-2 rounded-md p-2',
         checked ? 'bg-foreground-active text-neutral' : 'bg-backdrop',
       )}
       style={{ width: `${PROPERTY_WIDTH}px` }}
     >
-      {/* Label */}
-      <div className="ml-2 max-w-40 text-left break-words">{data.label}</div>
+      {/* Left side */}
+      <span className="shrink-0">
+        ({data.isAttribute && 'attribute: '}
+        {data.variableType})
+      </span>
 
-      {/* Footer */}
-      <div className="ml-auto flex items-center text-sm opacity-80">
-        <span>
-          ({data.isAttribute && 'attribute: '}
-          {data.variableType})
-        </span>
+      <div className="min-w-0 flex-1 truncate text-left">{data.label}</div>
 
-        <div className="ml-4 flex h-[22px] gap-3">
-          <HighlightButton
-            onClick={() => {
-              onHighlight?.(id)
-            }}
-          />
+      {/* Right side */}
+      <div className="ml-auto hidden items-center gap-1 group-hover:flex">
+        <HighlightButton
+          onClick={() => {
+            onHighlight?.(id)
+          }}
+        />
 
-          <EditButton
-            onClick={() => {
-              onEdit?.(data)
-            }}
-          />
+        <EditButton
+          onClick={() => {
+            onEdit?.(data)
+          }}
+        />
 
-          <DeleteButton
-            onClick={() => {
-              onDelete?.(id)
-            }}
-          />
-        </div>
+        <DeleteButton
+          onClick={() => {
+            onDelete?.(id)
+          }}
+        />
       </div>
 
       {/* Active handle */}
@@ -90,7 +88,7 @@ function OneEdgeNode({ id, data, variant = 'source', onEdit, onDelete, onHighlig
           width: 10,
           height: 10,
         }} //Can't set this with tailwind for some reason
-        className={`${variant == 'source' ? '' : 'translate-x-[5px]'} transition-opacity transition-transform ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+        className={`${variant == 'source' ? '' : 'translate-x-1.25'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
       />
 
       {/* Hidden opposite handle */}

src/main/frontend/app/components/modal.tsx

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { useTheme } from '~/hooks/use-theme'
-import DeleteButton from './datamapper/basic-components/delete-button'
+
+import CloseButton from './datamapper/basic-components/close-button'
 
 interface ModalProperties {
   isOpen: boolean
@@ -27,7 +28,7 @@ function Modal({ isOpen, onClose, title, children }: ModalProperties) {
       >
         {title && <h2 className="mb-4 text-xl font-bold">{title}</h2>}
         <div>{children}</div>
-        <DeleteButton onClick={onClose} className="absolute top-2 right-2 text-3xl hover:opacity-80" />
+        <CloseButton onClick={onClose} className="absolute top-2 right-2 text-3xl hover:opacity-80" />
       </div>
     </div>,
     document.body,

src/main/frontend/app/routes/datamapper/initialize.tsx

@@ -85,7 +85,7 @@ function Initialize({ config, configDispatch, confirmed, setRoute }: InitializeP
       {/* Confirm Button */}
       <div className="flex justify-center" hidden={confirmed}>
         <Button
-          className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-[var(--color-neutral-900)] transition hover:brightness-110"
+          className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900 transition hover:brightness-110"
           disabled={confirmed || !config.formatTypes.target || !config.formatTypes.source}
           onClick={configConfirmDispatched}
         >

src/main/frontend/app/routes/datamapper/property-list.tsx

@@ -422,22 +422,22 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
         />
       </Modal>
       {!addMappingModal && !addFieldModal && (
-        <div className="pointer-events-none fixed right-0 bottom-4 left-0 z-5 z-60 min-w-[300px]">
+        <div className="pointer-events-none fixed right-0 bottom-4 left-0 z-60 min-w-75">
           <div className="pointer-events-auto relative flex w-full justify-between px-12">
             <Button
-              className="absolute bottom-[2vh] left-1/4 z-10 rounded rounded-2xl rounded-md border px-4 py-2"
+              className="absolute bottom-[2vh] left-1/4 z-10 rounded-md border px-4 py-2"
               onClick={() => openAddFieldModal('source')}
             >
               Add Source
             </Button>
             <Button
-              className="bg-foreground-active text-foreground hover:bg-hover absolute bottom-[2vh] left-1/2 z-10 -translate-x-1/2 rounded-2xl border px-4 py-2 text-neutral-900"
+              className="bg-foreground-active hover:bg-hover absolute bottom-[2vh] left-1/2 z-10 -translate-x-1/2 rounded-2xl border px-4 py-2 text-neutral-900"
               onClick={openMapping}
             >
               MAP
             </Button>
             <Button
-              className="absolute right-1/4 bottom-[2vh] z-10 rounded rounded-2xl rounded-md border px-4 py-2"
+              className="absolute right-1/4 bottom-[2vh] z-10 rounded-2xl border px-4 py-2"
               onClick={() => openAddFieldModal('target')}
             >
               Add target