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

src/main/frontend/app/app.css

@@ -233,6 +233,34 @@ 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;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);
@@ -251,3 +279,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/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/directory-picker/directory-picker.tsx

@@ -5,6 +5,7 @@ import { filesystemService } from '~/services/filesystem-service'
 import type { FilesystemEntry } from '~/types/filesystem.types'
 import { ApiError } from '~/utils/api'
 import Button from '../inputs/button'
+import CloseButton from '../inputs/close-button'
 
 interface DirectoryPickerProperties {
   isOpen: boolean
@@ -89,12 +90,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/editor-file-structure.tsx

@@ -30,6 +30,7 @@ import { useTreeStore } from '~/stores/tree-store'
 import EditorFilesDataProvider, { type FileNode } from './editor-data-provider'
 import { useFileTreeContextMenu } from './use-file-tree-context-menu'
 import FileTreeDialogs from './file-tree-dialogs'
+import TreeActionButton from './tree-action-button'
 
 const TREE_ID = 'editor-files-tree'
 
@@ -366,8 +367,6 @@ export default function EditorFileStructure() {
 
     const isHighlighted = highlightedItemId === item.index
 
-    const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
-
     return (
       <div
         className="group/row flex h-full w-full items-center"
@@ -383,72 +382,36 @@ export default function EditorFileStructure() {
         </span>
         <div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
           {item.isFolder && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New File"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleNewFile)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFile)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFile)}
             >
               <CodeFileIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
           {item.isFolder && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Folder"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleNewFolder)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleNewFolder)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleNewFolder)}
             >
               <FolderIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Rename"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleRename)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleRename)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleRename)}
             >
-              <Pen className="stroke-foreground h-3.5 w-3.5" />
-            </div>
+              <Pen className="fill-foreground h-3.5 w-3.5" />
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Delete"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, editorContextMenu.handleDelete)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, editorContextMenu.handleDelete)
-              }
+              onAction={() => triggerItemAction(item.index, editorContextMenu.handleDelete)}
             >
               <TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
         </div>
       </div>

src/main/frontend/app/components/file-structure/inline-rename-input.tsx

@@ -1,4 +1,5 @@
 import type { TreeItemIndex } from 'react-complex-tree'
+import Input from '~/components/inputs/input'
 
 interface InlineRenameInputProps {
   icon: React.ComponentType<{ className?: string }>
@@ -20,9 +21,10 @@ export default function InlineRenameInput({
   return (
     <div className="flex items-center" onContextMenu={(e) => e.preventDefault()}>
       <Icon className="fill-foreground w-4 flex-shrink-0" />
-      <input
+      <Input
         autoFocus
-        className="bg-background border-border text-foreground ml-1 rounded-sm border px-1 text-sm focus:outline-none"
+        wrapperClassName="ml-1"
+        inputClassName="py-0.5 text-sm"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={(e) => {

src/main/frontend/app/components/file-structure/studio-file-structure.tsx

@@ -33,6 +33,7 @@ import { useProjectStore } from '~/stores/project-store'
 import { useTreeStore } from '~/stores/tree-store'
 import { useStudioContextMenu, detectItemType, getItemName, resolveItemPaths } from './use-studio-context-menu'
 import StudioFileTreeDialogs from './studio-file-tree-dialogs'
+import TreeActionButton from './tree-action-button'
 
 const TREE_ID = 'studio-files-tree'
 
@@ -410,7 +411,6 @@ export default function StudioFileStructure() {
     }
 
     const isHighlighted = highlightedItemId == item.index
-    const actionBtnClass = 'cursor-pointer rounded p-0.5 hover:bg-hover flex-shrink-0'
 
     return (
       <div
@@ -427,99 +427,54 @@ export default function StudioFileStructure() {
         </span>
         <div className="ml-1 hidden items-center gap-0.5 group-hover/row:flex">
           {(isRoot || isPlainFolder) && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Configuration File"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewConfiguration)}
             >
               <SettingsIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
           {(isRoot || isPlainFolder) && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Folder"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewFolder)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewFolder)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewFolder)}
             >
               <FolderIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
           {isConfigFile && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="New Adapter"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleNewAdapter)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleNewAdapter)}
             >
               <CodeIcon className="fill-foreground h-4 w-4" />
-            </div>
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Rename"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleRename)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleRename)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleRename)}
             >
               <Pen className="stroke-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
           {!isRoot && (
-            <div
-              role="button"
-              tabIndex={0}
-              className={actionBtnClass}
+            <TreeActionButton
               title="Delete"
-              onClick={(mouseEvent) => {
-                mouseEvent.stopPropagation()
-                triggerItemAction(item.index, studioContextMenu.handleDelete)
-              }}
-              onKeyDown={(keyboardEvent) =>
-                keyboardEvent.key === 'Enter' && triggerItemAction(item.index, studioContextMenu.handleDelete)
-              }
+              onAction={() => triggerItemAction(item.index, studioContextMenu.handleDelete)}
             >
               <TrashBinIcon className="fill-foreground h-3.5 w-3.5" />
-            </div>
+            </TreeActionButton>
           )}
         </div>
       </div>
     )
   }
 
-  if (!project) return <p className="text-muted-foreground p-4 text-sm">No Project Selected</p>
+  if (!project) return <p className="text-foreground-muted p-4 text-sm">No Project Selected</p>
   if (providerLoading) return <LoadingSpinner message="Loading configurations..." className="p-8" />
   if (!dataProvider)
-    return <p className="text-muted-foreground p-4 text-sm">No configurations found in src/main/configurations</p>
+    return <p className="text-foreground-muted p-4 text-sm">No configurations found in src/main/configurations</p>
 
   const toolbarBtnClass = 'cursor-pointer rounded p-1 hover:bg-hover text-foreground'
 

src/main/frontend/app/components/file-structure/tree-action-button.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+interface TreeActionButtonProps {
+  title: string
+  onAction: () => void
+  children: React.ReactNode
+}
+
+export default function TreeActionButton({ title, onAction, children }: TreeActionButtonProps) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="hover:bg-hover flex-shrink-0 cursor-pointer rounded p-0.5"
+      title={title}
+      onClick={(mouseEvent) => {
+        mouseEvent.stopPropagation()
+        onAction()
+      }}
+      onKeyDown={(keyboardEvent) => keyboardEvent.key === 'Enter' && onAction()}
+    >
+      {children}
+    </div>
+  )
+}