fix: LOPS-170: Labeling ui annotation tab improvements (#1376)

* fix: LOPS-170: Labeling ui annotation tab improvements

* fix styles and add new hovers

* Update src/common/TimeAgo/TimeAgo.tsx

---------

Co-authored-by: bmartel <[email protected]>
Co-authored-by: juliosgarbi <[email protected]>

Author: juliosgarbi

src/common/TimeAgo/TimeAgo.tsx

@@ -51,13 +51,18 @@ export const TimeAgo = ({ date, ...rest }: TimeAgoProps) => {
     };
   }, [date, timestamp]);
 
+  // Replace the longer english text when less than a minute in time. This is done this way due to a limiting API
+  // with the date-fns function. If we require an entire overhaul to the messaging for the en-US locale, revisit this and replace with an entire locale override option.
+  const text = formatDistanceToNow(fromTS, { addSuffix: true }) === 'less than a minute ago' ? 'seconds ago' : formatDistanceToNow(fromTS, { addSuffix: true });
+
+
   return (
     <time
       dateTime={format(fromTS, 'yyyy-MM-dd\'T\'HH:mm:ss.SSSxxx')}
       title={format(fromTS, 'PPpp')}
       {...rest}
     >
-      {formatDistanceToNow(fromTS, { addSuffix: true })}
+      {text}
     </time>
   );
 };

src/components/AnnotationsCarousel/AnnotationButton.styl

@@ -4,17 +4,22 @@
   border-radius 4px 4px 0 0
   border-width 1px 1px 0px 1px
   border-style solid
-  border-color rgba(137, 128, 152, 0.16)
   background-color rgba(137, 128, 152, 0.08)
+  border-color transparent
   margin-top 2px
   align-items center
   gap 8px
   cursor pointer
-  height calc(100% - 4px)
+  height calc(100% - 3px)
+  min-width 186px
+
+  &__main
+    flex: 1 0 auto;
   &__mainSection
     display flex
     align-items center
     gap 8px
+    flex: 1 0 auto;
     .annotation-button__userpic_prediction
       background-color #EFDBFF
       color #7735D6
@@ -24,6 +29,7 @@
     line-height 16px
     letter-spacing 0.4px
     text-align left
+    color: #898098;
   &__entity-id
     font-size 10px
     font-weight 400
@@ -38,12 +44,31 @@
     line-height 16px
     letter-spacing 0.4px
     text-align left
-    color #413C4A
+    color #898098
+
+  &:hover
+    background-color rgba(9, 109, 217, 0.12)
+    border 1px solid rgba(9, 109, 217, 0.16)
+    border-bottom-color transparent
+    .annotation-button__ellipsisIcon
+      visibility visible
 
   &_selected
     background-color #FFFFFF
-  &:hover
-    background-color rgba(9, 109, 217, 0.08)
+    border-color rgba(137, 128, 152, 0.16)
+
+    &:hover
+      background-color #FFFFFF
+      border-color rgba(137, 128, 152, 0.16)
+      border-bottom-color transparent
+
+    .annotation-button__ellipsisIcon
+      visibility visible
+    .annotation-button__created
+      color #413C4A
+    .annotation-button__name
+      color #413C4A
+
   &__icons
     display inline-flex
     align-items center
@@ -60,6 +85,11 @@
     transform rotate(90deg)
     display flex
     border-radius 4px
+    color #898098
+    visibility hidden
+    &:hover
+      color #096DD9
+      background rgba(9, 109, 217, 0.12)
   &__picSection
     position relative
   &__status

src/components/TopBar/TopBar.js

@@ -27,6 +27,7 @@ export const TopBar = observer(({ store }) => {
           {store.hasInterface('annotations:view-all')  && (
             <Tooltip title="View all annotations">
               <Button
+                className={'topbar__button'}
                 icon={<IconViewAll />}
                 type="text"
                 aria-label="View All"
@@ -45,6 +46,7 @@ export const TopBar = observer(({ store }) => {
             <Tooltip placement="topLeft" title="Create a new annotation">
               <Button
                 icon={<LsPlus />}
+                className={'topbar__button'}
                 type="text"
                 aria-label="View All"
                 onClick={event => {

src/components/TopBar/TopBar.styl

@@ -12,6 +12,10 @@
   position sticky
   top 0
 
+  &__button
+    &:hover
+      background-color rgba(9, 109, 217, 0.12)
+
   &__group
     display flex
     align-items stretch