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/pages/settings/SettingsProfile.tsx

@@ -0,0 +1,24 @@
+import { useRecoilValue } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { SettingsPage } from '@/settings/components/SettingsPage';
+import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
+
+export function SettingsProfile() {
+  const currentUser = useRecoilValue(currentUserState);
+  return (
+    <SettingsPage>
+      <>
+        <TopTitle title="Profile" />
+        <div>
+          <h5>Name</h5>
+          <span>{currentUser?.displayName} </span>
+        </div>
+        <div>
+          <h5>Email</h5>
+          <span>{currentUser?.email} </span>
+        </div>
+      </>
+    </SettingsPage>
+  );
+}

front/src/pages/settings/__stories__/settings.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsProfile } from '../SettingsProfile';
+
+import { render } from './shared';
+
+const meta: Meta<typeof SettingsProfile> = {
+  title: 'Pages/SettingsProfile',
+  component: SettingsProfile,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsProfile>;
+
+export const Default: Story = {
+  render,
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/src/pages/settings/__stories__/shared.tsx

@@ -0,0 +1,22 @@
+import { MemoryRouter } from 'react-router-dom';
+import { ApolloProvider } from '@apollo/client';
+import { RecoilRoot } from 'recoil';
+
+import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
+import { mockedClient } from '~/testing/mockedClient';
+
+import { SettingsProfile } from '../SettingsProfile';
+
+export function render() {
+  return (
+    <RecoilRoot>
+      <ApolloProvider client={mockedClient}>
+        <MemoryRouter>
+          <FullHeightStorybookLayout>
+            <SettingsProfile />
+          </FullHeightStorybookLayout>
+        </MemoryRouter>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+}