Refactor input components and update styles across various modals and and components

src/main/frontend/app/app.css

@@ -182,7 +182,8 @@ body {
 }
 
 .monaco-editor .hunk-glyph-unchecked,
-.monaco-editor .hunk-glyph-checked {
+.monaco-editor .hunk-glyph-checked,
+.monaco-editor .hunk-glyph-hit-area {
   cursor: pointer !important;
   display: flex !important;
   align-items: center;
@@ -195,27 +196,25 @@ body {
   display: block;
   width: 14px;
   height: 14px;
-  border-radius: 3px;
-  margin-left: 6px;
-  margin-top: 2px;
-  border: 1.5px solid #6b7280;
-  background: transparent;
-  box-sizing: border-box;
+  margin-left: 5px;
+  background-size: 14px 14px;
+  background-repeat: no-repeat;
 }
 
-.monaco-editor .hunk-glyph-checked::after {
-  border-color: #22c55e;
-  background: #22c55e;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.5L5.5 9.5L10.5 4.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-size: 14px 14px;
+.monaco-editor .hunk-glyph-unchecked::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='%239ca3af' stroke-width='1.5'/%3E%3C/svg%3E");
 }
 
 .monaco-editor .hunk-glyph-unchecked:hover::after {
-  border-color: #22c55e;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='%23fdc300' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.monaco-editor .hunk-glyph-checked::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='%23fdc300' stroke='%23fdc300' stroke-width='1.5'/%3E%3Cpath d='M4.5 8L7 10.5L11.5 5.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
 .monaco-editor .hunk-line-selected {
-  background: rgba(34, 197, 94, 0.08) !important;
+  background: color-mix(in srgb, var(--color-brand) 10%, transparent) !important;
 }
 
 .monaco-flow-attribute {
@@ -233,6 +232,38 @@ body {
   color: #808080 !important;
 }
 
+.react-flow__panel.react-flow__controls {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  fill: var(--color-foreground);
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button:hover {
+  background-color: var(--color-hover);
+}
+
+.react-flow__panel.react-flow__controls .react-flow__controls-button svg {
+  fill: var(--color-foreground);
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.react-flow__attribution {
+  background: transparent !important;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);
@@ -251,3 +282,26 @@ body {
   line-height: 1.4;
   white-space: nowrap;
 }
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-foreground-muted);
+}

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-neutral-900 transition hover:brightness-110"
+      className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900"
       onClick={async () => {
         highlightUnset()
         if (!project) {

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

@@ -19,7 +19,7 @@ function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonPrope
       <label
         htmlFor={inputId}
         className={clsx(
-          'w-full cursor-pointer rounded-lg border px-3 py-3 text-center text-sm font-medium transition-colors',
+          'w-full cursor-pointer rounded-lg border px-3 py-3 text-center text-sm font-medium',
           file && 'border-green-600 bg-green-600 text-white hover:bg-green-500',
           !file && 'border-border bg-backdrop text-foreground hover:bg-hover active:bg-selected',
         )}

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

@@ -228,7 +228,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
       {/* Target → Output */}
       <div className="mb-4 grid shrink-0 grid-cols-[1fr_auto_1fr] items-end gap-4">
         <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-sm font-semibold">Output</label>
+          <label className="text-foreground-muted text-sm font-semibold">Output</label>
           <Dropdown
             className="max-w-50"
             value={output}
@@ -242,7 +242,7 @@ function AddMappingForm({ onSave, sources, targets, initialData }: MappingModalP
         <div className="flex items-center justify-center pb-2 text-2xl">→</div>
 
         <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-sm font-semibold">Target</label>
+          <label className="text-foreground-muted text-sm font-semibold">Target</label>
 
           <Dropdown
             className="max-w-50"

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

@@ -64,7 +64,7 @@ function ArrayGroupNode({ id, data, variant = 'source', onDelete, onHighlight }:
                 height: 10,
                 top: '20px',
               }} //Can't set this with tailwind for some reason
-              className={`${variant == 'source' ? '' : 'translate-x-1.25'} relative transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+              className={`${variant == 'source' ? '' : 'translate-x-1.25'} relative ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
             />
             <Handle
               key={variant === 'source' ? 'target' : 'source'}

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

@@ -99,7 +99,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 == 'target' ? 'translate-x-1.25' : '-translate-x-2.5'} transition-opacity ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
+        className={`${variant == 'target' ? 'translate-x-1.25' : '-translate-x-2.5'} ${isConnectable ? 'opacity-100' : 'opacity-0'} `}
       />
 
       {/* Hidden opposite handle */}

src/main/frontend/app/components/directory-picker/directory-picker.tsx

@@ -6,6 +6,7 @@ import type { FilesystemEntry } from '~/types/filesystem.types'
 import { ApiError } from '~/utils/api'
 import { useDirectoryWatcher } from '~/hooks/use-file-watcher'
 import Button from '../inputs/button'
+import CloseButton from '../inputs/close-button'
 
 interface DirectoryPickerProperties {
   isOpen: boolean
@@ -92,12 +93,7 @@ export default function DirectoryPicker({
       <div className="bg-background border-border flex h-[450px] w-1/3 min-w-[500px] flex-col rounded-lg border shadow-lg">
         <div className="border-border flex items-center justify-between border-b px-4 py-3">
           <h3 className="text-sm font-semibold">Select Directory</h3>
-          <Button
-            onClick={onCancel}
-            className="text-foreground-muted hover:text-foreground cursor-pointer text-lg leading-none"
-          >
-            &times;
-          </Button>
+          <CloseButton onClick={onCancel} />
         </div>
 
         <div className="border-border flex items-center gap-2 border-b px-4 py-2">

src/main/frontend/app/components/file-structure/confirm-delete-dialog.tsx

@@ -38,7 +38,7 @@ export default function ConfirmDeleteDialog({ name, isFolder, onConfirm, onCance
           <Button onClick={onCancel} className="px-3 py-1 text-sm">
             Cancel
           </Button>
-          <Button onClick={onConfirm} className="bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700">
+          <Button variant="destructive" onClick={onConfirm} className="px-3 py-1 text-sm">
             Delete
           </Button>
         </div>