fix: I should be able to use "enter" key to create profile (#4978)

## Context
Fixes #4808 

TL;DR
Introducing pure stateless modal component ("UI modal") for our auth
modal not to have default hotkeyScope overriding our create-profile
hotkeyScope
+ we dont want the shortcut to be available for all the modal content, only for the input that should not be using a hotkeyscope, so we are using onKeyDown for the specific issue on create profile.

Explanation
create-profile hotkey scope is set by PageChangeEffect; CreateProfile
component adds enter key shortcut; but this scope is overwritten by the
default scope by the Modal component that expects a hotkeyScope to reset
to (and defaults to the default hotkeyScope if none indicated).
In the auth flow we were using that Modal component to give a modal look
to the flow but it is not a modal per say, it's a set of pages contained
within a modal look.
By creating this UI component we are escaping that hotkeyScope
overriding that does not make sense in our context.

## How was it tested
Locally
Storybook

packages/twenty-front/src/modules/auth/components/Modal.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { Modal as UIModal } from '@/ui/layout/modal/components/Modal';
+import { ModalLayout } from '@/ui/layout/modal/components/ModalLayout';
 
-const StyledContent = styled(UIModal.Content)`
+const StyledContent = styled(ModalLayout.Content)`
   align-items: center;
   width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
 `;
@@ -11,7 +11,7 @@ const StyledContent = styled(UIModal.Content)`
 type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
-  <UIModal isOpen={true} padding={'none'}>
+  <ModalLayout padding={'none'}>
     <StyledContent>{children}</StyledContent>
-  </UIModal>
+  </ModalLayout>
 );

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -164,9 +164,9 @@ export const SignInUpForm = () => {
                         }
                       }}
                       error={showErrors ? error?.message : undefined}
-                      onKeyDown={handleKeyDown}
                       fullWidth
                       disableHotkeys
+                      onKeyDown={handleKeyDown}
                     />
                   </StyledInputContainer>
                 )}
@@ -198,10 +198,10 @@ export const SignInUpForm = () => {
                       placeholder="Password"
                       onBlur={onBlur}
                       onChange={onChange}
-                      onKeyDown={handleKeyDown}
                       error={showErrors ? error?.message : undefined}
                       fullWidth
                       disableHotkeys
+                      onKeyDown={handleKeyDown}
                     />
                   </StyledInputContainer>
                 )}

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -5,9 +5,7 @@ import { useParams } from 'react-router-dom';
 import { useNavigateAfterSignInUp } from '@/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
 import { AppPath } from '@/types/AppPath';
-import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 import { useAuth } from '../../hooks/useAuth';
@@ -118,31 +116,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
     ],
   );
 
-  useScopedHotkeys(
-    'enter',
-    () => {
-      if (signInUpStep === SignInUpStep.Init) {
-        continueWithEmail();
-      }
-
-      if (signInUpStep === SignInUpStep.Email) {
-        continueWithCredentials();
-      }
-
-      if (signInUpStep === SignInUpStep.Password) {
-        form.handleSubmit(submitCredentials)();
-      }
-    },
-    PageHotkeyScope.SignInUp,
-    [
-      continueWithEmail,
-      signInUpStep,
-      continueWithCredentials,
-      form,
-      submitCredentials,
-    ],
-  );
-
   return {
     isInviteMode,
     signInUpStep,