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>
   );