Closes twentyhq#710: Add the number of opportunities on each stage (twentyhq#1011)

* Add the number of oppurtunities on each stage

* Remove excess css properties in Boardcolumn.tsx and use theme

* Remove padding from oppurnities counters

Author: proof3

front/src/modules/pipeline/components/EntityBoardColumn.tsx

@@ -104,6 +104,7 @@ export function EntityBoardColumn({
           pipelineStageId={column.pipelineStageId}
           totalAmount={boardColumnTotal}
           isFirstColumn={column.index === 0}
+          numChildren={column.pipelineProgressIds.length}
         >
           <BoardColumnCardsContainer droppableProvided={droppableProvided}>
             {column.pipelineProgressIds.map((pipelineProgressId, index) => (

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -60,6 +60,19 @@ const StyledAmount = styled.div`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledNumChildren = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border-radius: ${({ theme }) => theme.border.radius.rounded};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  margin-left: auto;
+  width: 16px;
+`;
+
 type OwnProps = {
   color?: string;
   title: string;
@@ -69,6 +82,7 @@ type OwnProps = {
   totalAmount?: number;
   children: React.ReactNode;
   isFirstColumn: boolean;
+  numChildren: number;
 };
 
 export function BoardColumn({
@@ -79,6 +93,7 @@ export function BoardColumn({
   totalAmount,
   children,
   isFirstColumn,
+  numChildren,
 }: OwnProps) {
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
     React.useState(false);
@@ -112,6 +127,7 @@ export function BoardColumn({
       <StyledHeader>
         <Tag onClick={handleTitleClick} color={color} text={title} />
         {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
+        <StyledNumChildren>{numChildren}</StyledNumChildren>
       </StyledHeader>
       {isBoardColumnMenuOpen && (
         <BoardColumnMenu