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} />

front/src/modules/ui/navbar/components/NavCollapseButton.tsx

@@ -7,7 +7,6 @@ import {
   IconLayoutSidebarRightCollapse,
 } from '@/ui/icon';
 import { isNavbarOpenedState } from '@/ui/layout/states/isNavbarOpenedState';
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledCollapseButton = styled.div<{
   hide: boolean;
@@ -25,14 +24,14 @@ const StyledCollapseButton = styled.div<{
   cursor: pointer;
 
   display: flex;
-  height: 32px;
+  height: 24px;
   justify-content: center;
 
   padding: 0;
 
   user-select: none;
   visibility: ${({ hide }) => (hide ? 'visible' : 'hidden')};
-  width: 32px;
+  width: 24px;
 
   @keyframes fadeIn {
     0% {
@@ -56,7 +55,7 @@ export default function NavCollapseButton({
   const [isNavbarOpened, setIsNavbarOpened] =
     useRecoilState(isNavbarOpenedState);
 
-  const iconSize = useIsMobile() ? 'small' : 'medium';
+  const iconSize = 'small';
 
   return (
     <>

front/src/modules/ui/navbar/components/NavItem.tsx

@@ -134,7 +134,7 @@ function NavItem({
       danger={danger}
       soon={soon}
     >
-      {Icon && <Icon size={theme.icon.size.md} />}
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
       <StyledItemLabel>{label}</StyledItemLabel>
       {soon && <StyledSoonPill>Soon</StyledSoonPill>}
       {!!count && <StyledItemCount>{count}</StyledItemCount>}