[MOB-100] Job manager design improvements (#2531)

* design improvements job manager mob

* centering

apps/mobile/src/components/job/Job.tsx

@@ -1,3 +1,4 @@
+import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
 import {
 	Copy,
 	Fingerprint,
@@ -10,8 +11,7 @@ import {
 } from 'phosphor-react-native';
 import { memo } from 'react';
 import { View, ViewStyle } from 'react-native';
-import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
-import { tw } from '~/lib/tailwind';
+import { tw, twStyle } from '~/lib/tailwind';
 
 import { ProgressBar } from '../animation/ProgressBar';
 import JobContainer from './JobContainer';
@@ -33,7 +33,7 @@ const JobIcon: Record<string, Icon> = {
 	object_validator: Fingerprint
 };
 
-function Job({ job, isChild, progress }: JobProps) {
+function Job({ job, isChild, progress, containerStyle }: JobProps) {
 	const jobData = useJobInfo(job, progress);
 
 	if (job.status === 'CompletedWithErrors') {
@@ -42,7 +42,7 @@ function Job({ job, isChild, progress }: JobProps) {
 		// 	<pre className="custom-scroll inspector-scroll max-h-[300px] rounded border border-app-darkBox bg-app-darkBox/80 p-3">
 		// 		{job.errors_text.map((error, i) => (
 		// 			<p
-		// 				className="mb-1 w-full overflow-auto whitespace-normal break-words text-sm"
+		// 				className="w-full mb-1 overflow-auto text-sm break-words whitespace-normal"
 		// 				key={i}
 		// 			>
 		// 				{error.trim()}
@@ -70,6 +70,7 @@ function Job({ job, isChild, progress }: JobProps) {
 
 	return (
 		<JobContainer
+			containerStyle={twStyle(containerStyle)}
 			name={jobData.name}
 			icon={JobIcon[job.name]}
 			textItems={

apps/mobile/src/components/job/JobContainer.tsx

@@ -24,14 +24,14 @@ export default function JobContainer(props: JobContainerProps) {
 	return (
 		<View
 			style={twStyle(
-				'flex flex-row justify-center',
+				'relative z-40 flex-row justify-center',
 				'border-b border-app-line/30 px-8 py-4',
-				isChild && 'my-1.5 border-b-0 p-2 pl-12',
+				isChild && 'border-b-0 pl-12',
 				restProps.containerStyle
 			)}
 		>
 			{typeof Icon === 'number' ? (
-				<Image source={Icon} style={tw`ml-4 mr-1 h-8 w-8`} />
+				<Image source={Icon} style={tw`relative z-40 ml-4 mr-1 h-8 w-8`} />
 			) : (
 				Icon && (
 					<View
@@ -51,22 +51,24 @@ export default function JobContainer(props: JobContainerProps) {
 					return (
 						<Text
 							key={index}
-							style={tw`mt-[2px] pl-1.5 text-[13px] text-ink-faint`}
+							style={tw`ml-1.5 mt-0.5 text-sm text-ink-faint`}
 							numberOfLines={1}
 						>
 							{filteredItems.map((item, index) => {
 								const Icon = item?.icon;
 								return (
 									<Fragment key={index}>
+										<View style={tw`flex-row gap-1`}>
 										{Icon && (
 											<Icon
 												weight="fill"
-												// TODO: this might be ugly
-												style={tw`-mt-0.5 ml-[5px] inline`}
+												size={14}
+												color={tw.color('ink-faint')}
 											/>
 										)}
-										<Text key={index}>{item?.text}</Text>
-										{index < filteredItems.length - 1 && <Text> • </Text>}
+										<Text style={tw`text-xs text-ink-faint`} key={index}>{item?.text}</Text>
+										{index < filteredItems.length - 1 && <Text style={tw`text-ink-faint`}>• </Text>}
+										</View>
 									</Fragment>
 								);
 							})}

apps/mobile/src/components/job/JobGroup.tsx

@@ -126,14 +126,22 @@ export default function ({ group, progress }: JobGroupProps) {
 						</JobContainer>
 					</Pressable>
 					{showChildJobs && (
-						<AnimatedHeight style={tw`mb-4`}>
-							{jobs.map((job) => (
+						<AnimatedHeight>
+							{jobs.map((job, i) => (
+								<View style={tw`relative`} key={job.id}>
+									<View style={twStyle(`absolute bottom-0 left-9 top-0.5 w-px bg-app-button`, {
+										height: i === jobs.length - 1 ? 28 : '100%',
+									})}/>
+								<View
+									style={tw`top-7.5 absolute left-9 h-px w-4 bg-app-button`}
+								/>
 								<Job
+									containerStyle={tw`ml-5`}
 									isChild={jobs.length > 1}
-									key={job.id}
 									job={job}
 									progress={progress[job.id] ?? null}
 								/>
+								</View>
 							))}
 						</AnimatedHeight>
 					)}