fix: FIT-747: Make Annotation tabs stand out (#8585)

Co-authored-by: ricardoantoniocm <ricardoantoniocm@users.noreply.github.com>

Author: ricardoantoniocm

web/libs/editor/src/components/AnnotationsCarousel/AnnotationButton.scss

@@ -1,20 +1,18 @@
 .annotation-button {
   display: flex;
-  padding: 4px 8px;
+  padding: var(--spacing-tighter) var(--spacing-tight);
   border-radius: var(--corner-radius-small) var(--corner-radius-small) 0 0;
   border-width: 1px 1px 0;
   border-style: solid;
   background-color: var(--color-neutral-surface);
-  margin-top: 2px;
+  margin-top: var(--spacing-tightest);
   align-items: flex-start;
-  gap: 8px;
+  gap: var(--spacing-base);
   cursor: pointer;
   height: calc(100% - 3px);
   min-width: 186px;
   border-color: var(--color-neutral-border);
-  transition-property: background-color, border-color;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
+  transition: all 150ms ease-out;
 
   &__user {
     line-height: 16px;
@@ -28,7 +26,7 @@
   &__mainSection {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--spacing-tight);
     flex: 1 0 auto;
 
     & .annotation-button__userpic_prediction {
@@ -43,7 +41,7 @@
     line-height: 16px;
     letter-spacing: 0.4px;
     text-align: left;
-    color: var(--color-neutral-content);
+    color: var(--color-neutral-content-subtle);
   }
 
   &__entity-id {
@@ -79,7 +77,11 @@
     }
 
     & .annotation-button__trigger {
-      visibility: visible;
+      opacity: 1;
+    }
+    
+    & .annotation-button__picSection {
+      opacity: 1;
     }
   }
 
@@ -89,6 +91,11 @@
     transform: translate(0, 1px);
     margin-top: 1px;
     height: calc(100% - 2px);
+    box-shadow: inset 0 4px 2px 0 var(--color-neutral-background), 0 4px 2px 0 rgba(var(--color-neutral-shadow-raw) / 20%);
+
+    & .annotation-button__picSection {
+      opacity: 1;
+    }
 
     &:hover {
       cursor: default;
@@ -97,7 +104,7 @@
     }
 
     & .annotation-button__trigger {
-      visibility: visible;
+      opacity: 1;
     }
 
     & .annotation-button__created {
@@ -131,9 +138,10 @@
     display: flex;
     border-radius: 4px;
     color: var(--color-neutral-content-subtler);
-    visibility: hidden;
+    opacity: 0;
     padding: var(--spacing-tighter);
     border: 1px solid var(--trigger-border-color);
+    transition: opacity 150ms ease-out, background-color 150ms ease-out;
 
     svg {
       width: 20px;
@@ -145,13 +153,18 @@
     &:hover {
       cursor: pointer;
       color: var(--color-neutral-content);
-      background: var(--color-primary-emphasis-subtle);
-      border-color: var(--color-primary-border-subtle);
+      background: var(--color-primary-emphasis);
+
+      svg {
+        color: var(--color-neutral-content);
+      }
     }
   }
 
   &__picSection {
     position: relative;
+    opacity: 0.7;
+    transition: opacity 150ms ease-out;
   }
 
   &__status {

web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.scss

@@ -7,6 +7,27 @@
   min-width: 0;
   flex: 1;
 
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8px;
+    height: 100%;
+    display: block;
+    pointer-events: none;
+    opacity: 0;
+    background: linear-gradient(to right, rgba(var(--color-neutral-shadow-raw) / 16%), rgba(var(--color-neutral-shadow-raw) / 0%));
+    z-index: 1;
+    transition: opacity 300ms ease-out;
+  }
+
+  &_scrolled {
+    &::before {       
+      opacity: 1;
+    }
+  }
+
   &__container {
     display: flex;
     width: 100%;
@@ -18,12 +39,13 @@
   &__carosel {
     flex: 1;
     display: flex;
-    gap: 2px;
+    gap: var(--spacing-tighter);
     white-space: nowrap;
+    padding-left: var(--spacing-tighter);
     padding-right: 77px;
     position: relative;
     transform: translateX(calc(-1 * var(--carousel-left)));
-    transition: all 0.15s ease-in-out 0s;
+    transition: all 200ms ease-out 0s;
   }
 
   &__carousel-controls {
@@ -33,19 +55,23 @@
     top: 50%;
     transform: translateY(-50%);
     display: flex;
-    gap: 4px;
-    padding-right: 4px;
+    gap: var(--spacing-tighter);
+    padding-right: var(--spacing-tighter);
+
+    button:not(:disabled) {
+      box-shadow: 0 2px 6px rgba(var(--color-neutral-shadow-raw) / 20%);
+    }
   }
 
   &__nav {
     padding: 0;
     height: 28px;
     width: 28px;
-    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
+    box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);
 
     &:hover {
       background: var(--color-primary-emphasis-subtle);
-      box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
+      box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);
     }
 
     &_disabled {

web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.tsx

@@ -26,7 +26,7 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
   const [isRightDisabled, setIsRightDisabled] = useState(false);
 
   const updatePosition = useCallback(
-    (e: React.MouseEvent, goLeft = true) => {
+    (_e: React.MouseEvent, goLeft = true) => {
       if (containerRef.current && carouselRef.current) {
         const step = containerRef.current.clientWidth;
         const carouselWidth = carouselRef.current.clientWidth;
@@ -62,7 +62,11 @@ export const AnnotationsCarousel = observer(({ store, annotationStore }: Annotat
   }, [annotationStore, JSON.stringify(annotationStore.predictions), JSON.stringify(annotationStore.annotations)]);
 
   return enableAnnotations || enablePredictions || enableCreateAnnotation ? (
-    <Block name="annotations-carousel" style={{ "--carousel-left": `${currentPosition}px` }}>
+    <Block
+      name="annotations-carousel"
+      mod={{ scrolled: currentPosition > 0 }}
+      style={{ "--carousel-left": `${currentPosition}px` }}
+    >
       <Elem ref={containerRef} name="container">
         <Elem ref={carouselRef} name="carosel">
           {sortAnnotations(entities).map((entity) => (

web/libs/editor/src/components/ContextMenu/ContextMenu.module.scss

@@ -56,5 +56,6 @@
     background-color: var(--color-primary-emphasis);
     color: var(--color-neutral-content);
     border-radius: 4px;
+    opacity: 1;
   }
 }

web/libs/editor/src/components/TopBar/TopBar.scss

@@ -6,7 +6,7 @@
   display: flex;
   align-items: stretch;
   justify-content: space-between;
-  background-color: var(--color-neutral-background);
+  background-color: var(--color-neutral-surface);
   border-bottom: 1px solid var(--color-neutral-border);
   user-select: none;
   position: sticky;
@@ -41,7 +41,7 @@
 
   &_newLabelingUI {
     display: block;
-    background-color: var(--color-neutral-background);
+    background-color: var(--color-neutral-surface);
     height: 42px;
     border-bottom: 1px solid var(--color-neutral-border);