From 52fb05c9601e9cb98ce8ebc5e2b409b1cd65ba51 Mon Sep 17 00:00:00 2001
From: satellitestudiodesign <juancarlos@satellitestud.io>
Date: Thu, 6 Jun 2024 10:12:26 +0200
Subject: [PATCH] remove dev tools and make transition smoother

---
 apps/image-labeler/src/features/project/Project.tsx    |  4 ++--
 .../image-labeler/src/features/project/Task.module.css |  9 +++++++--
 apps/image-labeler/src/routes/__root.tsx               | 10 ++--------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/apps/image-labeler/src/features/project/Project.tsx b/apps/image-labeler/src/features/project/Project.tsx
index 8c3957f00b..e1c070b66a 100644
--- a/apps/image-labeler/src/features/project/Project.tsx
+++ b/apps/image-labeler/src/features/project/Project.tsx
@@ -53,7 +53,7 @@ export function Project() {
     (taskId: string) => {
       const currentIndex = data.findIndex((task) => task.id === taskId)
       setActiveTaskId(data[currentIndex + 1]?.id)
-      window.scrollTo(0, window.scrollY + 71)
+      window.scrollBy({ top: 71, behavior: 'smooth' })
     },
     [data, setActiveTaskId]
   )
@@ -75,7 +75,7 @@ export function Project() {
 
   return (
     <div className={styles.project}>
-      <h1 className={styles.pageTitle}>{taskData.metadata.name}</h1>
+      <h1 className={styles.pageTitle}>Project: {taskData.metadata.name}</h1>
       <div className={styles.projectInfo}>
         <div className={styles.projectInfoItem}>
           <label>Big Query Table</label>
diff --git a/apps/image-labeler/src/features/project/Task.module.css b/apps/image-labeler/src/features/project/Task.module.css
index 8dfa47e7bd..97250e5923 100644
--- a/apps/image-labeler/src/features/project/Task.module.css
+++ b/apps/image-labeler/src/features/project/Task.module.css
@@ -1,10 +1,12 @@
 .task {
+  height: 7.1rem;
   border: var(--border);
   border-bottom: none;
   padding: var(--space-S);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  transition: all 0.2s ease-out;
 }
 
 .task:not(.open) {
@@ -16,16 +18,19 @@
 }
 
 .open {
+  height: 70rem;
+  max-height: 70vh;
   padding: var(--space-L);
   flex-direction: column;
   align-items: center;
   gap: var(--space-S);
+  border: 1px solid var(--color-secondary-blue);
 }
 
 .images {
   display: flex;
   gap: var(--space-S);
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-out;
   width: 100%;
   max-width: 11rem;
   opacity: 0.5;
@@ -34,7 +39,7 @@
 .images img {
   width: 5rem;
   background-color: var(--color-terthiary-blue);
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-out;
 }
 
 .open .images {
diff --git a/apps/image-labeler/src/routes/__root.tsx b/apps/image-labeler/src/routes/__root.tsx
index 801119e4c8..53f7415153 100644
--- a/apps/image-labeler/src/routes/__root.tsx
+++ b/apps/image-labeler/src/routes/__root.tsx
@@ -1,6 +1,5 @@
 import { createRootRoute, Outlet } from '@tanstack/react-router'
-import { TanStackRouterDevtools } from '@tanstack/router-devtools'
-import { Fragment, useCallback } from 'react'
+import { useCallback } from 'react'
 import { GFWAPI } from '@globalfishingwatch/api-client'
 import { Spinner } from '@globalfishingwatch/ui-components/spinner'
 import { useGFWLogin, useGFWLoginRedirect } from '@globalfishingwatch/react-hooks/use-login'
@@ -28,12 +27,7 @@ const RootComponent = () => {
     )
   }
 
-  return (
-    <Fragment>
-      <Outlet />
-      <TanStackRouterDevtools />
-    </Fragment>
-  )
+  return <Outlet />
 }
 
 export const Route = createRootRoute({