Add progress vertical bars to pipeline steps

src/components/ApprovalWorkflows/WorkflowStep.tsx

@@ -57,25 +57,26 @@ export default function WorkflowStep({
     }
 
     return (
-        <div
+
-            className={clsx(
+        <div className="flex w-full">
-                'flex items-center space-x-3 w-[800px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
+            <div className="flex flex-col items-center">
-                { 'bg-mti-purple-ultralight': isSelected }
-            )}
-        >
-            <div className="flex w-full items-center">
-                <div className="flex items-center space-x-3">
                 <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
-                    {stepNumber !== 1 && !finalStep &&
+
-                        <LuGripHorizontal className="cursor-grab active:cursor-grabbing" size={25} />
+                {/* Vertical Bar connecting steps */}
-                    }
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                )}
             </div>
 
+            {stepNumber !== 1 && !finalStep
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
+            }
+
             {/* Only show selects if editView === true and stepType === 'approval-by' */}
             {showSelects && (
-                    <div className="ml-auto">
+                <div className="ml-10">
                     <WorkflowStepSelects
-                            // Provide any relevant options:
                         leftOptions={teacherOptions}
                         rightOptions={teacherOptions}
                         leftValue={leftValue}
@@ -89,13 +90,14 @@ export default function WorkflowStep({
             )}
 
             {stepNumber === 1 && (
-                    <div className="ml-auto">
+                <div className="ml-10">
                     <div className={"flex flex-row gap-0"}>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-l-2xl border-mti-gray-platinum">
+                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
                             <FaWpforms size={20} />
                             <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
                         </div>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-r-2xl border-mti-gray-platinum">
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
                             <span className="text-sm font-normal focus:outline-none">Prof. X</span>
                         </div>
                     </div>
@@ -103,15 +105,17 @@ export default function WorkflowStep({
             )}
 
             {editView && stepNumber !== 1 && !finalStep && (
+                <div className="ml-4 mt-2">
                     <button
                         data-tip="Delete"
-                        className="ml-4 cursor-pointer tooltip"
+                        className="cursor-pointer tooltip"
                         onClick={onDelete}
                     >
                         <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
+                </div>
             )}
         </div>
-        </div>
+
     );
 };

src/components/ApprovalWorkflows/WorkflowStepNumber.tsx

@@ -12,7 +12,7 @@ export default function WorkflowStepNumber({ number, isSelected = false }: Props
     return (
         <div
             className={clsx(
-                'flex items-center justify-center w-10 h-10 rounded-full',
+                'flex items-center justify-center w-11 h-11 rounded-full',
                 {
                     'bg-mti-purple text-mti-purple-ultralight': isSelected,
                     'bg-mti-purple-ultralight text-gray-500': !isSelected,

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -34,7 +34,7 @@ export default function WorkflowStepSelects({
                     onChange={onLeftChange}
                     placeholder={leftPlaceholder}
                     flat
-                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                    className={"px-2 rounded-none rounded-l-2xl"}
                 />
             </div>
             {/* Right Select */}
@@ -45,7 +45,7 @@ export default function WorkflowStepSelects({
                     onChange={onRightChange}
                     placeholder={rightPlaceholder}
                     flat
-                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                    className="px-2 rounded-none rounded-r-2xl"
                 />
             </div>
         </div>

src/pages/approval-workflows/[id].tsx

@@ -180,7 +180,7 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                     axis="y"
                                     values={steps}
                                     onReorder={handleReorder}
-                                    className="flex flex-col gap-4"
+                                    className="flex flex-col gap-0"
                                 >
 
                                     <AnimatePresence>