Change design for icons in 'MainNavbar' and 'Pageheader' (#1560)

* adjusted MainNavbar icons size from 'md' to 'sm'

* reduced CollapseButton size from 32px to 24px

* Added margin-left of 4px to the left chevron icon

* removed 8px padding

* updated the stroke for the NavItem

front/src/modules/ui/layout/components/PageHeader.tsx

@@ -44,6 +44,7 @@ const StyledTitleContainer = styled.div`
 `;
 
 const StyledTopBarButtonContainer = styled.div`
+  margin-left: ${({ theme }) => theme.spacing(1)};
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
@@ -51,11 +52,14 @@ const StyledBackIconButton = styled(IconButton)`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledTopBarIconStyledTitleContainer = styled.div`
+const StyledTopBarIconStyledTitleContainer = styled.div<{
+  hideLeftPadding?: boolean;
+}>`
   align-items: center;
   display: flex;
   flex-direction: row;
-  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme, hideLeftPadding }) =>
+    hideLeftPadding ? theme.spacing(2) : undefined};
   width: 100%;
 `;
 
@@ -104,7 +108,7 @@ export function PageHeader({
             />
           </StyledTopBarButtonContainer>
         )}
-        <StyledTopBarIconStyledTitleContainer>
+        <StyledTopBarIconStyledTitleContainer hideLeftPadding={!hasBackButton}>
           {Icon && <Icon size={theme.icon.size.md} />}
           <StyledTitleContainer data-testid="top-bar-title">
             <OverflowingTextWithTooltip text={title} />