Update landing page (creation) & rename pipeline (#4601)

Author: jpggvilaca

ui/src/features/inference/toolbar.tsx

@@ -112,8 +112,8 @@ export const Toolbar = () => {
                 <Divider orientation='vertical' size='S' />
 
                 <Flex marginStart='auto' gap='size-100'>
-                    <Button href={paths.pipeline.index({})} variant='secondary'>
-                        View pipeline
+                    <Button href={paths.project.index({})} variant='secondary'>
+                        View project
                     </Button>
                 </Flex>
             </Flex>

ui/src/features/pipelines/label-selection.module.scss

@@ -17,7 +17,7 @@ import classes from './label-selection.module.scss';
 
 const ColorPicker = ({ onChange, value }: SpectrumColorPickerProps) => {
     return (
-        <SpectrumColorPicker value={value} onChange={onChange}>
+        <SpectrumColorPicker value={value} onChange={onChange} rounding={'none'}>
             <Flex direction='column' gap='size-300'>
                 <ColorEditor />
                 <ColorSwatchPicker>
@@ -103,15 +103,28 @@ export const LabelSelection = () => {
     };
 
     return (
-        <Flex direction={'column'} alignItems={'center'} width={'100%'}>
+        <Flex
+            direction={'column'}
+            alignItems={'center'}
+            height={'100%'}
+            width={'100%'}
+            gap={'size-300'}
+            UNSAFE_style={{ overflow: 'auto' }}
+        >
+            <Flex>
+                <Text UNSAFE_style={{ color: 'var(--spectrum-global-color-gray-700)' }}>
+                    What objects should the model learn to detect?
+                </Text>
+            </Flex>
+
             <Flex direction={'column'} alignItems={'center'} gap={'size-100'} width={'100%'}>
                 {items.map((item) => {
                     return <LabelItem key={item.id} onDelete={handleDeleteItem} {...item} />;
                 })}
             </Flex>
 
             <Flex gap={'size-200'}>
-                <Button width={'size-2000'} variant={'secondary'} marginTop={'size-400'} onPress={handleAddItem}>
+                <Button width={'size-2000'} variant={'secondary'} onPress={handleAddItem}>
                     <Text>Add next object</Text>
                     <Add fill='white' />
                 </Button>

ui/src/features/pipelines/label-selection.component.test.tsx renamed to ui/src/features/project/label-selection.component.test.tsx

@@ -0,0 +1,8 @@
+.labelInput {
+    padding: var(--spectrum-global-dimension-size-75) var(--spectrum-global-dimension-size-150);
+}
+
+.deleteButton {
+    cursor: pointer;
+    background-color: transparent;
+}

ui/src/features/pipelines/label-selection.component.tsx renamed to ui/src/features/project/label-selection.component.tsx

@@ -11,7 +11,7 @@ import classes from './new-project-link.module.scss';
 
 export const NewProjectLink = () => {
     return (
-        <Link to={paths.pipeline.new.pattern} className={classes.link}>
+        <Link to={paths.project.new.pattern} className={classes.link}>
             <AddCircle />
             <Text>Add another project</Text>
         </Link>