fix: LSDV-5119: Minor improvements on labeling ui (#1375)

* fix: LSDV-5119: Minor improvements on labeling ui

* fix some issues with css

* fix linter and font size and weight of the menu

* fix spacing and height of the buttons

* remove unused imports

* fix cypress test

* remove unused imports

* fix e2e

---------

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

Author: juliosgarbi

src/common/Dropdown/DropdownComponent.tsx

@@ -6,6 +6,7 @@ import { alignElements } from '../../utils/dom';
 import { aroundTransition } from '../../utils/transition';
 import './Dropdown.styl';
 import { DropdownContext } from './DropdownContext';
+import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 let lastIndex = 1;
 
@@ -200,7 +201,10 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(({
       name="dropdown"
       data-testid={props.dataTestId}
       mix={[props.className, visibilityClasses]}
-      style={compositeStyles}
+      style={{
+        ...compositeStyles,
+        borderRadius: isFF(FF_DEV_3873) && 4,
+      }}
       onClick={(e: MouseEvent) => e.stopPropagation()}
     >
       {content}

src/components/BottomBar/BottomBar.js

@@ -3,6 +3,7 @@ import { Block, Elem } from '../../utils/bem';
 import { Actions } from './Actions';
 import { Controls } from './Controls';
 import './BottomBar.styl';
+import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 export const BottomBar = observer(({ store }) => {
   const annotationStore = store.annotationStore;
@@ -12,7 +13,7 @@ export const BottomBar = observer(({ store }) => {
   const isViewAll = annotationStore?.viewingAll === true;
 
   return store && !isViewAll ? (
-    <Block name="bottombar">
+    <Block name="bottombar" style={{ borderTop: isFF(FF_DEV_3873) && '1px solid rgba(0,0,0,0.1)' }}>
       <Elem name="group">
         <Actions store={store}/>
       </Elem>

src/components/BottomBar/HistoryActions.styl

@@ -1,5 +1,7 @@
 .history-buttons
   display flex
+  gap 8px
+  margin-left: 8px
 
   &__action
     width 36px

src/components/Filter/Filter.styl

@@ -9,8 +9,8 @@
 
 .filter-button
   display flex
-  height 30px
-  padding 0 7px 0 0
+  height 24px
+  padding 0 6px 0 2px
   cursor pointer
   align-items center
   border-radius 4px

src/components/Filter/Filter.tsx

@@ -9,6 +9,7 @@ import './Filter.styl';
 import { FilterInterface, FilterListInterface } from './FilterInterfaces';
 import { FilterRow } from './FilterRow';
 import { FilterItems } from './filter-util';
+import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 export const Filter: FC<FilterInterface> = ({
   availableFilters,
@@ -118,7 +119,11 @@ export const Filter: FC<FilterInterface> = ({
         <Elem name={'icon'}>
           <IconFilter />
         </Elem>
-        <Elem name={'text'}>Filter</Elem>
+        <Elem name={'text'} style={{
+          fontSize:isFF(FF_DEV_3873) && 12,
+          fontWeight:isFF(FF_DEV_3873) && 500,
+          lineHeight:isFF(FF_DEV_3873) && '24px',
+        }}>Filter</Elem>
         {filterList.length > 0 && <Elem name={'filter-length'} data-testid={'filter-length'}>{filterList.length}</Elem>}
       </Block>
     </Dropdown.Trigger>

src/components/Settings/Settings.js

@@ -11,6 +11,7 @@ import { triggerResizeEvent } from '../../utils/utilities';
 import EditorSettings from '../../core/settings/editorsettings';
 import * as TagSettings from './TagSettings';
 import { useMemo } from 'react';
+import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
 
 const HotkeysDescription = () => {
   const columns = [
@@ -87,7 +88,7 @@ const LayoutSettings = observer(({ store }) => {
             setTimeout(triggerResizeEvent);
           }}
         >
-              Move sidepanel to the bottom
+            Move sidepanel to the bottom
         </Checkbox>
       </Elem>
 
@@ -117,7 +118,7 @@ const LayoutSettings = observer(({ store }) => {
             store.settings.togglePredictionsPanel();
           }}
         >
-              Show Predictions panel
+            Show Predictions panel
         </Checkbox>
       </Elem>
 
@@ -132,7 +133,6 @@ const LayoutSettings = observer(({ store }) => {
         >
           Show image in fullsize
         </Checkbox>
-
       </Elem> */}
     </Block>
   );
@@ -141,9 +141,12 @@ const LayoutSettings = observer(({ store }) => {
 const Settings = {
   General: { name: 'General', component: GeneralSettings },
   Hotkeys: { name: 'Hotkeys', component: HotkeysDescription },
-  Layout: { name: 'Layout', component: LayoutSettings },
 };
 
+if (!isFF(FF_DEV_3873)) {
+  Settings.Layout = { name: 'Layout', component: LayoutSettings };
+}
+
 const DEFAULT_ACTIVE = Object.keys(Settings)[0];
 
 export default observer(({ store }) => {

src/components/SidePanels/OutlinerPanel/ViewControls.styl

@@ -14,6 +14,7 @@
 
   &__sort
     display flex
+    align-items center
 
   &__label
     width 100%
@@ -37,6 +38,13 @@
     padding 0
     justify-content flex-start
 
+    &_newUI
+      font-size 12px
+      font-weight 500
+      line-height 24px
+      height 24px
+      box-shadow initial
+
     &__icon
       width 24px
       height 24px

src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -167,7 +167,11 @@ const Grouping = <T extends string>({
     return (
       <Menu
         size="medium"
-        style={{ width: 200, minWidth: 200 }}
+        style={{
+          width: 200,
+          minWidth: 200,
+          borderRadius: isFF(FF_DEV_3873) && 4,
+        }}
         selectedKeys={[value]}
         allowClickSelected={allowClickSelected}
       >
@@ -185,9 +189,13 @@ const Grouping = <T extends string>({
     );
   }, [value, optionsList, readableValue, direction]);
 
+
   return (
     <Dropdown.Trigger content={dropdownContent} style={{ width: 200 }}>
-      <Button type="text" icon={readableValue.icon} style={{ padding: 0, whiteSpace: 'nowrap' }} extra={(
+      <Button type="text" mod={{ newUI: isFF(FF_DEV_3873) }} icon={readableValue.icon} style={{
+        padding: isFF(FF_DEV_3873) ? '0 6px 0 2px': 0,
+        whiteSpace: 'nowrap',
+      }} extra={(
         <DirectionIndicator
           direction={direction}
           name={value}

src/components/TopBar/CurrentTask.js

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import { useEffect, useMemo, useState } from 'react';
 import { Button } from '../../common/Button/Button';
 import { Block, Elem } from '../../utils/bem';
-import { FF_DEV_3034, FF_DEV_4174, isFF } from '../../utils/feature-flags';
+import { FF_DEV_3034, FF_DEV_3873, FF_DEV_4174, isFF } from '../../utils/feature-flags';
 import { guidGenerator } from '../../utils/unique';
 import { isDefined } from '../../utils/utilities';
 import './CurrentTask.styl';
@@ -53,8 +53,11 @@ export const CurrentTask = observer(({ store }) => {
 
   return (
     <Elem name="section">
-      <Block name="current-task" mod={{ 'with-history': historyEnabled }}>
-        <Elem name="task-id">
+      <Block name="current-task" mod={{ 'with-history': historyEnabled }} style={{
+        padding:isFF(FF_DEV_3873) && 0,
+        width:isFF(FF_DEV_3873) && 'auto',
+      }}>
+        <Elem name="task-id" style={{ fontSize:isFF(FF_DEV_3873) ? 12 : 14 }}>
           {store.task.id ?? guidGenerator()}
           {historyEnabled && showCounter && (
             <Elem name="task-count">
@@ -63,15 +66,15 @@ export const CurrentTask = observer(({ store }) => {
           )}
         </Elem>
         {historyEnabled && (
-          <Elem name="history-controls">
+          <Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }} >
             <Elem
               tag={Button}
               name="prevnext"
-              mod={{ prev: true, disabled: !store.canGoPrevTask }}
+              mod={{ prev: true, disabled: !store.canGoPrevTask, newui: isFF(FF_DEV_3873) }}
               type="link"
               disabled={!historyEnabled || !store.canGoPrevTask}
               onClick={store.prevTask}
-              style={{ background: 'none', backgroundColor: 'none' }}
+              style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
             />
             <Elem
               tag={Button}
@@ -80,11 +83,12 @@ export const CurrentTask = observer(({ store }) => {
                 next: true,
                 disabled: !store.canGoNextTask && !canPostpone,
                 postpone: !store.canGoNextTask && canPostpone,
+                newui: isFF(FF_DEV_3873),
               }}
               type="link"
               disabled={!store.canGoNextTask && !canPostpone}
               onClick={store.canGoNextTask ? store.nextTask : store.postponeTask}
-              style={{ background: 'none', backgroundColor: 'none' }}
+              style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
             />
           </Elem>
         )}

src/components/TopBar/CurrentTask.styl

@@ -31,12 +31,20 @@
     display flex
     grid-area buttons
 
+    &_newui
+      gap 8px
+      margin-left 8px
+
   &__prevnext
     width 32px
     height 32px
     align-self center
     justify-self center
 
+    &_newui
+      &:hover
+        background rgba(9, 109, 217, 0.08)
+
     &::before
       top 50%
       left 50%
@@ -65,7 +73,13 @@
     &_hidden
       display none
 
-    &_disabled::before
-      border 2px solid rgba(0, 0, 0, 0.3)
-      border-bottom none
-      border-right none
+    &_disabled
+
+      &:hover
+        background inherit
+
+      &::before
+        border 2px solid rgba(0, 0, 0, 0.3)
+        border-bottom none
+        border-right none
+