Various fixes (#11567)

In this PR:
- Remove SignUpLoading blank screen by an empty dark overlay =>
VerifyEffect
- Add ModalContent from pages themselves instead of using it the Layout.
This allow for empty dark overlay without showing an empty modal with
padding

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -8,6 +8,7 @@ import { TrialCard } from '@/billing/components/TrialCard';
 import { useHandleCheckoutSession } from '@/billing/hooks/useHandleCheckoutSession';
 import { isBillingPriceLicensed } from '@/billing/utils/isBillingPriceLicensed';
 import { billingState } from '@/client-config/states/billingState';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -171,7 +172,7 @@ export const ChooseYourPlan = () => {
     ?.baseProduct.name;
 
   return (
-    <>
+    <Modal.Content>
       {isDefined(baseProductPrice) && isDefined(billing) ? (
         <>
           <Title noMarginTop>
@@ -250,6 +251,6 @@ export const ChooseYourPlan = () => {
       ) : (
         <StyledChooseYourPlanPlaceholder />
       )}
-    </>
+    </Modal.Content>
   );
 };

packages/twenty-front/src/pages/onboarding/CreateProfile.tsx

@@ -17,6 +17,7 @@ import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -143,7 +144,7 @@ export const CreateProfile = () => {
   );
 
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <Title noMarginTop>
         <Trans>Create profile</Trans>
       </Title>
@@ -218,6 +219,6 @@ export const CreateProfile = () => {
           fullWidth
         />
       </StyledButtonContainer>
-    </>
+    </Modal.Content>
   );
 };

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -14,6 +14,7 @@ import { WorkspaceLogoUploader } from '@/settings/workspace/components/Workspace
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
@@ -106,7 +107,7 @@ export const CreateWorkspace = () => {
   };
 
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <Title noMarginTop>
         <Trans>Create your workspace</Trans>
       </Title>
@@ -156,6 +157,6 @@ export const CreateWorkspace = () => {
           fullWidth
         />
       </StyledButtonContainer>
-    </>
+    </Modal.Content>
   );
 };

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -6,6 +6,7 @@ import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -164,7 +165,7 @@ export const InviteTeam = () => {
   );
 
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <Title>
         <Trans>Invite your team</Trans>
       </Title>
@@ -224,6 +225,6 @@ export const InviteTeam = () => {
           <Trans>Skip</Trans>
         </ClickToActionLink>
       </StyledActionSkipLinkContainer>
-    </>
+    </Modal.Content>
   );
 };

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -2,6 +2,7 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { AppPath } from '@/types/AppPath';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -64,7 +65,7 @@ export const PaymentSuccess = () => {
   };
 
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <AnimatedEaseIn>
         <StyledCheckContainer color={color}>
           <IconCheck color={color} size={24} stroke={3} />
@@ -79,6 +80,6 @@ export const PaymentSuccess = () => {
           onClick={navigateWithSubscriptionCheck}
         />
       </StyledButtonContainer>
-    </>
+    </Modal.Content>
   );
 };

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -17,6 +17,7 @@ import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicros
 import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { AppPath } from '@/types/AppPath';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
 import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
@@ -104,7 +105,7 @@ export const SyncEmails = () => {
   );
 
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <Title noMarginTop>Emails and Calendar</Title>
       <SubTitle>
         Sync your Emails and Calendar with Twenty. Choose your privacy settings.
@@ -147,6 +148,6 @@ export const SyncEmails = () => {
           Continue without sync
         </ClickToActionLink>
       </StyledActionLinkContainer>
-    </>
+    </Modal.Content>
   );
 };