feat: authorize screen (#4687)

* authorize screen

* lint fix

* add BlankLayout on Authorize route

* typo fix

* route decorator fix

* Unrelated fix

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx

@@ -0,0 +1,31 @@
+import { Outlet } from 'react-router-dom';
+import { css, Global, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const StyledLayout = styled.div`
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+  scrollbar-width: 4px;
+  width: 100%;
+`;
+
+export const BlankLayout = () => {
+  const theme = useTheme();
+  return (
+    <>
+      <Global
+        styles={css`
+          body {
+            background: ${theme.background.tertiary};
+          }
+        `}
+      />
+      <StyledLayout>
+        <Outlet />
+      </StyledLayout>
+    </>
+  );
+};

packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -1,4 +1,5 @@
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
+import { Outlet } from 'react-router-dom';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
@@ -63,11 +64,7 @@ const StyledMainContainer = styled.div`
   overflow: hidden;
 `;
 
-type DefaultLayoutProps = {
-  children: ReactNode;
-};
-
-export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
+export const DefaultLayout = () => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
@@ -125,12 +122,16 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
                 <SignInBackgroundMockPage />
                 <AnimatePresence mode="wait">
                   <LayoutGroup>
-                    <AuthModal>{children}</AuthModal>
+                    <AuthModal>
+                      <Outlet />
+                    </AuthModal>
                   </LayoutGroup>
                 </AnimatePresence>
               </>
             ) : (
-              <AppErrorBoundary>{children}</AppErrorBoundary>
+              <AppErrorBoundary>
+                <Outlet />
+              </AppErrorBoundary>
             )}
           </StyledMainContainer>
         </StyledPageContainer>

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -42,8 +42,8 @@ export const ScrollWrapper = ({
     ({ set }) =>
       (overlayScroll: OverlayScrollbars) => {
         const target = overlayScroll.elements().scrollOffsetElement;
-        set(scrollTopState(), target.scrollTop);
-        set(scrollLeftState(), target.scrollLeft);
+        set(scrollTopState, target.scrollTop);
+        set(scrollLeftState, target.scrollLeft);
       },
     [],
   );