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/auth/PasswordReset.tsx

@@ -10,6 +10,7 @@ import { AppPath } from '@/types/AppPath';
 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 { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -169,89 +170,91 @@ export const PasswordReset = () => {
 
   return (
     isTokenValid && (
-      <StyledMainContainer>
-        <AnimatedEaseIn>
-          <Logo secondaryLogo={workspacePublicData?.logo} />
-        </AnimatedEaseIn>
-        <Title animate>
-          <Trans>Reset Password</Trans>
-        </Title>
-        <StyledContentContainer>
-          {!email ? (
-            <SkeletonTheme
-              baseColor={theme.background.quaternary}
-              highlightColor={theme.background.secondary}
-            >
-              <Skeleton
-                height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
-                count={2}
-                style={{ marginBottom: theme.spacing(2) }}
-              />
-            </SkeletonTheme>
-          ) : (
-            <StyledForm onSubmit={handleSubmit(onSubmit)}>
-              <StyledFullWidthMotionDiv
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                transition={{
-                  type: 'spring',
-                  stiffness: 800,
-                  damping: 35,
-                }}
+      <Modal.Content isVerticalCentered isHorizontalCentered>
+        <StyledMainContainer>
+          <AnimatedEaseIn>
+            <Logo secondaryLogo={workspacePublicData?.logo} />
+          </AnimatedEaseIn>
+          <Title animate>
+            <Trans>Reset Password</Trans>
+          </Title>
+          <StyledContentContainer>
+            {!email ? (
+              <SkeletonTheme
+                baseColor={theme.background.quaternary}
+                highlightColor={theme.background.secondary}
               >
-                <StyledInputContainer>
-                  <TextInputV2
-                    autoFocus
-                    value={email}
-                    placeholder={t`Email`}
-                    fullWidth
-                    disabled
-                  />
-                </StyledInputContainer>
-              </StyledFullWidthMotionDiv>
-              <StyledFullWidthMotionDiv
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                transition={{
-                  type: 'spring',
-                  stiffness: 800,
-                  damping: 35,
-                }}
-              >
-                <Controller
-                  name="newPassword"
-                  control={control}
-                  render={({
-                    field: { onChange, onBlur, value },
-                    fieldState: { error },
-                  }) => (
-                    <StyledInputContainer>
-                      <TextInputV2
-                        autoFocus
-                        value={value}
-                        type="password"
-                        placeholder={t`New Password`}
-                        onBlur={onBlur}
-                        onChange={onChange}
-                        error={error?.message}
-                        fullWidth
-                      />
-                    </StyledInputContainer>
-                  )}
+                <Skeleton
+                  height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+                  count={2}
+                  style={{ marginBottom: theme.spacing(2) }}
                 />
-              </StyledFullWidthMotionDiv>
+              </SkeletonTheme>
+            ) : (
+              <StyledForm onSubmit={handleSubmit(onSubmit)}>
+                <StyledFullWidthMotionDiv
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 800,
+                    damping: 35,
+                  }}
+                >
+                  <StyledInputContainer>
+                    <TextInputV2
+                      autoFocus
+                      value={email}
+                      placeholder={t`Email`}
+                      fullWidth
+                      disabled
+                    />
+                  </StyledInputContainer>
+                </StyledFullWidthMotionDiv>
+                <StyledFullWidthMotionDiv
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 800,
+                    damping: 35,
+                  }}
+                >
+                  <Controller
+                    name="newPassword"
+                    control={control}
+                    render={({
+                      field: { onChange, onBlur, value },
+                      fieldState: { error },
+                    }) => (
+                      <StyledInputContainer>
+                        <TextInputV2
+                          autoFocus
+                          value={value}
+                          type="password"
+                          placeholder={t`New Password`}
+                          onBlur={onBlur}
+                          onChange={onChange}
+                          error={error?.message}
+                          fullWidth
+                        />
+                      </StyledInputContainer>
+                    )}
+                  />
+                </StyledFullWidthMotionDiv>
 
-              <StyledMainButton
-                variant="secondary"
-                title={t`Change Password`}
-                type="submit"
-                fullWidth
-                disabled={isUpdatingPassword}
-              />
-            </StyledForm>
-          )}
-        </StyledContentContainer>
-      </StyledMainContainer>
+                <StyledMainButton
+                  variant="secondary"
+                  title={t`Change Password`}
+                  type="submit"
+                  fullWidth
+                  disabled={isUpdatingPassword}
+                />
+              </StyledForm>
+            )}
+          </StyledContentContainer>
+        </StyledMainContainer>
+      </Modal.Content>
     )
   );
 };

packages/twenty-front/src/pages/auth/SignInUp.tsx

@@ -20,11 +20,12 @@ import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/consta
 import { useMemo } from 'react';
 
 import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useLingui } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router-dom';
-import { PublicWorkspaceDataOutput } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
 import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { PublicWorkspaceDataOutput } from '~/generated/graphql';
 
 const StandardContent = ({
   workspacePublicData,
@@ -38,14 +39,14 @@ const StandardContent = ({
   title: string;
 }) => {
   return (
-    <>
+    <Modal.Content isVerticalCentered isHorizontalCentered>
       <AnimatedEaseIn>
         <Logo secondaryLogo={workspacePublicData?.logo} />
       </AnimatedEaseIn>
       <Title animate>{title}</Title>
       {signInUpForm}
       {signInUpStep !== SignInUpStep.Password && <FooterNote />}
-    </>
+    </Modal.Content>
   );
 };
 

packages/twenty-front/src/pages/auth/SignInUpLoading.tsx

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-
-const StyledContentContainer = styled(motion.div)`
-  height: 480px;
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
-`;
-
-export const SignInUpLoading = () => {
-  return <StyledContentContainer />;
-};

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>
   );
 };