A few polish on tasks (#1023)

A few polishing on tasks

front/src/modules/ui/tab/components/Tab.tsx

@@ -16,9 +16,10 @@ const StyledTab = styled.div<{ active?: boolean }>`
     active ? theme.border.color.inverted : 'transparent'};
   color: ${({ theme, active }) =>
     active ? theme.font.color.primary : theme.font.color.secondary};
-
   cursor: pointer;
+
   display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
 
@@ -38,7 +39,8 @@ export function Tab({
 }: OwnProps) {
   return (
     <StyledTab onClick={onClick} active={active} className={className}>
-      {icon} {title}
+      {icon}
+      {title}
     </StyledTab>
   );
 }

front/src/modules/ui/table/table-header/components/TableHeader.tsx

@@ -63,6 +63,7 @@ export function TableHeader<SortField>({
           {viewName}
         </>
       }
+      displayBottomBorder={false}
       rightComponents={[
         <FilterDropdownButton
           context={TableContext}

front/src/modules/ui/theme/constants/theme.ts

@@ -32,6 +32,7 @@ const common = {
     },
   },
   spacing: (multiplicator: number) => `${multiplicator * 4}px`,
+  betweenSiblingsGap: `2px`,
   table: {
     horizontalCellMargin: '8px',
     checkboxColumnWidth: '32px',

front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx

@@ -11,12 +11,12 @@ const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
   font-size: inherit;
 
   font-weight: inherit;
+  max-width: 100%;
   overflow: hidden;
   text-decoration: inherit;
-  text-overflow: ellipsis;
 
+  text-overflow: ellipsis;
   white-space: nowrap;
-  width: 100%;
 `;
 
 export function OverflowingTextWithTooltip({

front/src/modules/ui/top-bar/TopBar.tsx

@@ -5,6 +5,7 @@ type OwnProps = {
   leftComponent?: ReactNode;
   rightComponents?: ReactNode[];
   bottomComponent?: ReactNode;
+  displayBottomBorder?: boolean;
 };
 
 const StyledContainer = styled.div`
@@ -12,13 +13,16 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-const StyledTableHeader = styled.div`
+const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
   align-items: center;
+  border-bottom: ${({ displayBottomBorder, theme }) =>
+    displayBottomBorder ? `1px solid ${theme.border.color.light}` : 'none'};
+  box-sizing: border-box;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: row;
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  height: 40px;
+  height: 39px;
   justify-content: space-between;
   padding-left: ${({ theme }) => theme.spacing(3)};
   padding-right: ${({ theme }) => theme.spacing(2)};
@@ -31,20 +35,21 @@ const StyledLeftSection = styled.div`
 const StyledRightSection = styled.div`
   display: flex;
   font-weight: ${({ theme }) => theme.font.weight.regular};
-  gap: 2px;
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
 `;
 
 export function TopBar({
   leftComponent,
   rightComponents,
   bottomComponent,
+  displayBottomBorder = true,
 }: OwnProps) {
   return (
     <StyledContainer>
-      <StyledTableHeader>
+      <StyledTopBar displayBottomBorder={displayBottomBorder}>
         <StyledLeftSection>{leftComponent}</StyledLeftSection>
         <StyledRightSection>{rightComponents}</StyledRightSection>
-      </StyledTableHeader>
+      </StyledTopBar>
       {bottomComponent}
     </StyledContainer>
   );