Add settings page (#273)

* Add settings page

* Add 'soon' pill and logout

* Refactor components and layout

* Begin improving mobile display

* Add stories and refactor

front/src/modules/ui/layout/SecondaryLayout.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+
+import { NavbarContainer } from './navbar/NavbarContainer';
+import { MOBILE_VIEWPORT } from './styles/themes';
+
+type OwnProps = {
+  children: JSX.Element;
+  Navbar: () => JSX.Element;
+};
+
+const StyledLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: 100vh;
+  background: ${(props) => props.theme.noisyBackground};
+  position: relative;
+`;
+const MainContainer = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+`;
+
+const SubContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: ${(props) => props.theme.primaryBackground};
+  border-radius: ${(props) => props.theme.spacing(2)};
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  padding: ${(props) => props.theme.spacing(2)};
+  margin: ${(props) => props.theme.spacing(4)};
+  width: 100%;
+  max-width: calc(100vw - 500px);
+  padding: 32px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 100%;
+    max-width: none;
+  }
+`;
+
+const SubSubContainer = styled.div`
+  display: flex;
+  width: 350px;
+  flex-direction: column;
+  gap: 32px;
+  color: ${(props) => props.theme.text100};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 100%;
+  }
+`;
+
+export const SecondaryLayout = ({ children, Navbar }: OwnProps) => {
+  return (
+    <StyledLayout>
+      <NavbarContainer layout="secondary">
+        <Navbar />
+      </NavbarContainer>
+      <MainContainer>
+        <SubContainer>
+          <SubSubContainer>{children}</SubSubContainer>
+        </SubContainer>
+      </MainContainer>
+    </StyledLayout>
+  );
+};