Add Auth Index page (#323)

front/src/modules/auth/hooks/useMockData.ts

@@ -0,0 +1,27 @@
+import { graphql, setupWorker } from 'msw';
+
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+export function useMockData() {
+  const worker = setupWorker(...graphqlMocks);
+  worker.start({ quiet: true, onUnhandledRequest: 'bypass' });
+}
+
+const graphqlMocks = [
+  graphql.query('GetCompanies', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        companies: mockedCompaniesData,
+      }),
+    );
+  }),
+
+  graphql.query('GetCurrentUser', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        users: [mockedUsersData[0]],
+      }),
+    );
+  }),
+];

front/src/modules/ui/components/modal/Modal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactModal from 'react-modal';
+import { useTheme } from '@emotion/react';
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const theme = useTheme();
+  return (
+    <ReactModal
+      isOpen
+      style={{
+        overlay: {
+          backgroundColor: theme.modalBackgroundTransparent,
+          zIndex: 2,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        content: { zIndex: 1000, minWidth: 200, inset: 'auto' },
+      }}
+    >
+      {children}
+    </ReactModal>
+  );
+}

front/src/modules/ui/layout/styles/colors/transparent.ts

@@ -5,6 +5,7 @@ export const transparentColorsLight = {
   mediumBackgroundTransparent: 'rgba(0, 0, 0, 0.08)',
   lightBackgroundTransparent: 'rgba(0, 0, 0, 0.04)',
   lighterBackgroundTransparent: 'rgba(0, 0, 0, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };
 
 export const transparentColorsDark = {
@@ -14,4 +15,5 @@ export const transparentColorsDark = {
   mediumBackgroundTransparent: 'rgba(255, 255, 255, 0.06)',
   lightBackgroundTransparent: 'rgba(255, 255, 255, 0.03)',
   lighterBackgroundTransparent: 'rgba(255, 255, 255, 0.02)',
+  modalBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
 };