Refactor Layout (#322)

* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression

front/src/pages/settings/SettingsProfile.tsx

@@ -1,14 +1,20 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { SettingsPage } from '@/settings/components/SettingsPage';
+import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
 import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.spacing(8)};
+`;
 export function SettingsProfile() {
   const currentUser = useRecoilValue(currentUserState);
   return (
-    <SettingsPage>
-      <>
+    <NoTopBarContainer>
+      <StyledContainer>
         <TopTitle title="Profile" />
         <div>
           <h5>Name</h5>
@@ -18,7 +24,7 @@ export function SettingsProfile() {
           <h5>Email</h5>
           <span>{currentUser?.email} </span>
         </div>
-      </>
-    </SettingsPage>
+      </StyledContainer>
+    </NoTopBarContainer>
   );
 }

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

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { SettingsProfile } from '../SettingsProfile';
 
-import { render } from './shared';
-
 const meta: Meta<typeof SettingsProfile> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
@@ -16,7 +15,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsProfile>;
 
 export const Default: Story = {
-  render,
+  render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
   parameters: {
     msw: graphqlMocks,
   },

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

@@ -1,22 +0,0 @@
-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>
-  );
-}