Introduce accent for chips (#911)

* Introduce accent for chips

* Add top bar on Mobile on Settings pages

* Various fixes

* Fix according to peer review

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

@@ -1,20 +1,29 @@
 import styled from '@emotion/styled';
 
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { TopBar } from '../top-bar/components/TopBar';
+
 import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {
   children: JSX.Element | JSX.Element[];
+  title: string;
+  icon: React.ReactNode;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
-  padding-top: ${({ theme }) => theme.spacing(4)};
+  flex-direction: column;
+  padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(4) : 0)};
   width: 100%;
 `;
 
-export function SubMenuTopBarContainer({ children }: OwnProps) {
+export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
+  const isMobile = useIsMobile();
+
   return (
-    <StyledContainer>
+    <StyledContainer isMobile={isMobile}>
+      {isMobile && <TopBar title={title} icon={icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

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

@@ -74,11 +74,8 @@ export function TopBar({
   const navigate = useNavigate();
   const navigateBack = useCallback(() => navigate(-1), [navigate]);
 
-  const isMobile = useIsMobile();
   const isNavbarOpened = useRecoilValue(isNavbarOpenedState);
 
-  const showNavCollapseButton = isMobile || !isNavbarOpened;
-
   const iconSize = useIsMobile()
     ? navbarIconSize.mobile
     : navbarIconSize.desktop;
@@ -87,7 +84,7 @@ export function TopBar({
     <>
       <TopBarContainer>
         <StyledLeftContainer>
-          {showNavCollapseButton && (
+          {!isNavbarOpened && (
             <TopBarButtonContainer>
               <NavCollapseButton direction="right" />
             </TopBarButtonContainer>