Skip to content

Commit 906f84a

Browse files
beNativebeNative
committed
Tighten task builder spacing
1 parent dde7a22 commit 906f84a

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

‎components/modals/RepoFormModal.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -539,9 +539,9 @@ const TaskStepItem: React.FC<{
539539
);
540540

541541
return (
542-
<div className={`bg-white dark:bg-gray-800/50 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 space-y-2 transition-opacity ${!isEnabled ? 'opacity-50' : ''}`}>
543-
<div className="flex items-center justify-between gap-3">
544-
<div className="flex items-center gap-2">
542+
<div className={`bg-white dark:bg-gray-800/50 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 space-y-1.5 transition-opacity ${!isEnabled ? 'opacity-50' : ''}`}>
543+
<div className="flex items-center justify-between gap-2.5">
544+
<div className="flex items-center gap-1.5">
545545
<div className="flex h-6 w-6 items-center justify-center">
546546
{hasDetails ? (
547547
<button
@@ -594,7 +594,7 @@ const TaskStepItem: React.FC<{
594594
</div>
595595
</div>
596596
{hasDetails ? (
597-
<div id={detailsId} className={`mt-2 space-y-2 ${isCollapsed ? 'hidden' : ''}`}>
597+
<div id={detailsId} className={`mt-1.5 space-y-1.5 ${isCollapsed ? 'hidden' : ''}`}>
598598
{detailFields}
599599
</div>
600600
) : (
@@ -774,7 +774,7 @@ const NodejsTaskGenerator: React.FC<{
774774

775775

776776
return (
777-
<div className="p-3 mb-4 bg-green-50 dark:bg-gray-900/50 rounded-lg border border-green-200 dark:border-gray-700">
777+
<div className="p-3 mb-3 bg-green-50 dark:bg-gray-900/50 rounded-lg border border-green-200 dark:border-gray-700">
778778
<div className="flex items-center gap-2 mb-2">
779779
<NodeIcon className="h-5 w-5 text-green-500"/>
780780
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Node.js Project Detected</h3>
@@ -830,7 +830,7 @@ const GoTaskGenerator: React.FC<{
830830
};
831831

832832
return (
833-
<div className="p-3 mb-4 bg-cyan-50 dark:bg-gray-900/50 rounded-lg border border-cyan-200 dark:border-gray-700">
833+
<div className="p-3 mb-3 bg-cyan-50 dark:bg-gray-900/50 rounded-lg border border-cyan-200 dark:border-gray-700">
834834
<div className="flex items-center gap-2 mb-2">
835835
<CodeBracketIcon className="h-5 w-5 text-cyan-500" />
836836
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Go Project Detected</h3>
@@ -895,7 +895,7 @@ const RustTaskGenerator: React.FC<{
895895
};
896896

897897
return (
898-
<div className="p-3 mb-4 bg-amber-50 dark:bg-gray-900/50 rounded-lg border border-amber-200 dark:border-gray-700">
898+
<div className="p-3 mb-3 bg-amber-50 dark:bg-gray-900/50 rounded-lg border border-amber-200 dark:border-gray-700">
899899
<div className="flex items-center gap-2 mb-2">
900900
<CodeBracketIcon className="h-5 w-5 text-amber-500" />
901901
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Rust Project Detected</h3>
@@ -961,7 +961,7 @@ const MavenTaskGenerator: React.FC<{
961961
};
962962

963963
return (
964-
<div className="p-3 mb-4 bg-orange-50 dark:bg-gray-900/50 rounded-lg border border-orange-200 dark:border-gray-700">
964+
<div className="p-3 mb-3 bg-orange-50 dark:bg-gray-900/50 rounded-lg border border-orange-200 dark:border-gray-700">
965965
<div className="flex items-center gap-2 mb-2">
966966
<DocumentTextIcon className="h-5 w-5 text-orange-500" />
967967
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Maven Project Detected</h3>
@@ -1029,7 +1029,7 @@ const DotnetTaskGenerator: React.FC<{
10291029
};
10301030

10311031
return (
1032-
<div className="p-3 mb-4 bg-purple-50 dark:bg-gray-900/50 rounded-lg border border-purple-200 dark:border-gray-700">
1032+
<div className="p-3 mb-3 bg-purple-50 dark:bg-gray-900/50 rounded-lg border border-purple-200 dark:border-gray-700">
10331033
<div className="flex items-center gap-2 mb-2">
10341034
<CubeIcon className="h-5 w-5 text-purple-500" />
10351035
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">.NET Project Detected</h3>
@@ -1097,7 +1097,7 @@ const PythonTaskGenerator: React.FC<{
10971097

10981098

10991099
return (
1100-
<div className="p-3 mb-4 bg-blue-50 dark:bg-gray-900/50 rounded-lg border border-blue-200 dark:border-gray-700">
1100+
<div className="p-3 mb-3 bg-blue-50 dark:bg-gray-900/50 rounded-lg border border-blue-200 dark:border-gray-700">
11011101
<div className="flex items-center gap-2 mb-2">
11021102
<PythonIcon className="h-5 w-5 text-blue-500"/>
11031103
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Python Project Detected</h3>
@@ -1170,7 +1170,7 @@ const DockerTaskGenerator: React.FC<{
11701170
];
11711171

11721172
return (
1173-
<div className="p-3 mb-4 bg-sky-50 dark:bg-gray-900/50 rounded-lg border border-sky-200 dark:border-gray-700">
1173+
<div className="p-3 mb-3 bg-sky-50 dark:bg-gray-900/50 rounded-lg border border-sky-200 dark:border-gray-700">
11741174
<div className="flex items-center gap-2 mb-2">
11751175
<DockerIcon className="h-5 w-5 text-sky-500" />
11761176
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Docker Artifacts Detected</h3>
@@ -1268,7 +1268,7 @@ const DelphiTaskGenerator: React.FC<{
12681268
};
12691269

12701270
return (
1271-
<div className="p-3 mb-4 bg-indigo-50 dark:bg-gray-900/50 rounded-lg border border-indigo-200 dark:border-gray-700">
1271+
<div className="p-3 mb-3 bg-indigo-50 dark:bg-gray-900/50 rounded-lg border border-indigo-200 dark:border-gray-700">
12721272
<div className="flex items-center gap-2 mb-2">
12731273
<BeakerIcon className="h-5 w-5 text-indigo-500"/>
12741274
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Delphi Project Detected</h3>
@@ -1329,7 +1329,7 @@ const LazarusTaskGenerator: React.FC<{
13291329
};
13301330

13311331
return (
1332-
<div className="p-3 mb-4 bg-teal-50 dark:bg-gray-900/50 rounded-lg border border-teal-200 dark:border-gray-700">
1332+
<div className="p-3 mb-3 bg-teal-50 dark:bg-gray-900/50 rounded-lg border border-teal-200 dark:border-gray-700">
13331333
<div className="flex items-center gap-2 mb-2">
13341334
<BeakerIcon className="h-5 w-5 text-teal-500"/>
13351335
<h3 className="text-md font-semibold text-gray-800 dark:text-gray-200">Lazarus/FPC Project Detected</h3>
@@ -1473,7 +1473,7 @@ const TaskStepsEditor: React.FC<{
14731473
}, [repository?.vcs, projectInfo]);
14741474

14751475
return (
1476-
<div className="space-y-4">
1476+
<div className="space-y-3">
14771477
<div className="flex items-center justify-between gap-4">
14781478
<input
14791479
type="text"
@@ -1491,13 +1491,13 @@ const TaskStepsEditor: React.FC<{
14911491
</div>
14921492
</div>
14931493

1494-
<div className="space-y-3">
1494+
<div className="space-y-2.5">
14951495
<TaskVariablesEditor variables={task.variables} onVariablesChange={handleVariablesChange} />
14961496
<TaskEnvironmentVariablesEditor variables={task.environmentVariables} onVariablesChange={handleEnvironmentVariablesChange} />
14971497
</div>
14981498

14991499
{task.steps.length === 0 && (
1500-
<div className="text-center py-6 px-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700">
1500+
<div className="text-center py-5 px-4 bg-gray-50 dark:bg-gray-900/50 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700">
15011501
<CubeTransparentIcon className="mx-auto h-10 w-10 text-gray-400" />
15021502
<h3 className="mt-2 text-sm font-medium text-gray-800 dark:text-gray-200">This task has no steps.</h3>
15031503
<p className="mt-1 text-xs text-gray-500">Add steps manually to begin.</p>
@@ -1514,7 +1514,7 @@ const TaskStepsEditor: React.FC<{
15141514
<LazarusTaskGenerator lazarusCaps={projectInfo?.lazarus} onAddTask={onAddTask} />
15151515
<DelphiTaskGenerator delphiCaps={projectInfo?.delphi} onAddTask={onAddTask} />
15161516

1517-
<div className="space-y-3">
1517+
<div className="space-y-2">
15181518
{task.steps.map((step, index) => (
15191519
<TaskStepItem
15201520
key={step.id}
@@ -1533,15 +1533,15 @@ const TaskStepsEditor: React.FC<{
15331533
</div>
15341534

15351535
{isAddingStep && (
1536-
<div className="space-y-4">
1536+
<div className="space-y-3">
15371537
{STEP_CATEGORIES.map(category => {
15381538
const relevantSteps = category.types.filter(type => availableSteps.includes(type));
15391539
if (relevantSteps.length === 0) return null;
15401540

15411541
return (
15421542
<div key={category.name}>
15431543
<h4 className="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-2">{category.name}</h4>
1544-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
1544+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2.5">
15451545
{relevantSteps.map(type => {
15461546
const { label, icon: Icon, description } = STEP_DEFINITIONS[type];
15471547
return (

0 commit comments

Comments
 (0)