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/modules/app/hooks/useCreateAppRouter.tsx

@@ -1,6 +1,6 @@
 import { AppRouterProviders } from '@/app/components/AppRouterProviders';
 import { SettingsRoutes } from '@/app/components/SettingsRoutes';
-import { Verify } from '@/auth/components/Verify';
+import { VerifyEffect } from '@/auth/components/Verify';
 
 import { VerifyEmailEffect } from '@/auth/components/VerifyEmailEffect';
 import indexAppPath from '@/navigation/utils/indexAppPath';
@@ -39,7 +39,7 @@ export const useCreateAppRouter = (
         loader={async () => Promise.resolve(null)}
       >
         <Route element={<DefaultLayout />}>
-          <Route path={AppPath.Verify} element={<Verify />} />
+          <Route path={AppPath.Verify} element={<VerifyEffect />} />
           <Route path={AppPath.VerifyEmail} element={<VerifyEmailEffect />} />
           <Route path={AppPath.SignInUp} element={<SignInUp />} />
           <Route path={AppPath.Invite} element={<SignInUp />} />

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

@@ -3,7 +3,7 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import React from 'react';
 
-const StyledContent = styled(Modal.Content)`
+const StyledContent = styled.div`
   align-items: center;
   justify-content: center;
 `;

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

@@ -10,9 +10,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
-import { SignInUpLoading } from '~/pages/auth/SignInUpLoading';
 
-export const Verify = () => {
+export const VerifyEffect = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
   const errorMessage = searchParams.get('errorMessage');
@@ -45,5 +44,5 @@ export const Verify = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clientConfigLoaded]);
 
-  return <SignInUpLoading />;
+  return <></>;
 };

packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { Favorite } from '@/favorites/types/Favorite';
 import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
@@ -15,11 +16,15 @@ import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedF
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { isDefined } from 'twenty-shared/utils';
+import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const PrefetchRunFavoriteQueriesEffect = () => {
   const showAuthModal = useShowAuthModal();
   const isSettingsPage = useIsSettingsPage();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const isWorkspaceActive =
+    currentWorkspace?.activationStatus === WorkspaceActivationStatus.ACTIVE;
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
@@ -49,14 +54,14 @@ export const PrefetchRunFavoriteQueriesEffect = () => {
     objectNameSingular: CoreObjectNameSingular.Favorite,
     filter: findAllFavoritesOperationSignature.variables.filter,
     recordGqlFields: findAllFavoritesOperationSignature.fields,
-    skip: showAuthModal || isSettingsPage,
+    skip: showAuthModal || isSettingsPage || !isWorkspaceActive,
   });
 
   const { records: favoriteFolders } = useFindManyRecords({
     objectNameSingular: CoreObjectNameSingular.FavoriteFolder,
     filter: findAllFavoriteFoldersOperationSignature.variables.filter,
     recordGqlFields: findAllFavoriteFoldersOperationSignature.fields,
-    skip: showAuthModal || isSettingsPage,
+    skip: showAuthModal || isSettingsPage || !isWorkspaceActive,
   });
 
   const setPrefetchFavoritesState = useRecoilCallback(

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -7,7 +7,7 @@ import {
   useListenClickOutside,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import React, { useEffect, useRef } from 'react';
@@ -77,12 +77,25 @@ const StyledHeader = styled.div`
   padding: ${({ theme }) => theme.spacing(5)};
 `;
 
-const StyledContent = styled.div`
+const StyledContent = styled.div<{
+  isVerticalCentered?: boolean;
+  isHorizontalCentered?: boolean;
+}>`
   display: flex;
   flex: 1;
   flex: 1 1 0%;
   flex-direction: column;
   padding: ${({ theme }) => theme.spacing(10)};
+  ${({ isVerticalCentered }) =>
+    isVerticalCentered &&
+    css`
+      align-items: center;
+    `}
+  ${({ isHorizontalCentered }) =>
+    isHorizontalCentered &&
+    css`
+      justify-content: center;
+    `}
 `;
 
 const StyledFooter = styled.div`
@@ -125,12 +138,24 @@ const ModalHeader = ({ children, className }: ModalHeaderProps) => (
 
 type ModalContentProps = React.PropsWithChildren & {
   className?: string;
+  isVerticalCentered?: boolean;
+  isHorizontalCentered?: boolean;
 };
 
-const ModalContent = ({ children, className }: ModalContentProps) => (
+const ModalContent = ({
-  <StyledContent className={className}>{children}</StyledContent>
+  children,
+  className,
+  isVerticalCentered,
+  isHorizontalCentered,
+}: ModalContentProps) => (
+  <StyledContent
+    className={className}
+    isVerticalCentered={isVerticalCentered}
+    isHorizontalCentered={isHorizontalCentered}
+  >
+    {children}
+  </StyledContent>
 );
-
 type ModalFooterProps = React.PropsWithChildren & {
   className?: string;
 };

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>
+      <Modal.Content isVerticalCentered isHorizontalCentered>
-        <AnimatedEaseIn>
+        <StyledMainContainer>
-          <Logo secondaryLogo={workspacePublicData?.logo} />
+          <AnimatedEaseIn>
-        </AnimatedEaseIn>
+            <Logo secondaryLogo={workspacePublicData?.logo} />
-        <Title animate>
+          </AnimatedEaseIn>
-          <Trans>Reset Password</Trans>
+          <Title animate>
-        </Title>
+            <Trans>Reset Password</Trans>
-        <StyledContentContainer>
+          </Title>
-          {!email ? (
+          <StyledContentContainer>
-            <SkeletonTheme
+            {!email ? (
-              baseColor={theme.background.quaternary}
+              <SkeletonTheme
-              highlightColor={theme.background.secondary}
+                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,
-                }}
               >
-                <StyledInputContainer>
+                <Skeleton
-                  <TextInputV2
+                  height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
-                    autoFocus
+                  count={2}
-                    value={email}
+                  style={{ marginBottom: theme.spacing(2) }}
-                    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>
+              </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
+                <StyledMainButton
-                variant="secondary"
+                  variant="secondary"
-                title={t`Change Password`}
+                  title={t`Change Password`}
-                type="submit"
+                  type="submit"
-                fullWidth
+                  fullWidth
-                disabled={isUpdatingPassword}
+                  disabled={isUpdatingPassword}
-              />
+                />
-            </StyledForm>
+              </StyledForm>
-          )}
+            )}
-        </StyledContentContainer>
+          </StyledContentContainer>
-      </StyledMainContainer>
+        </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>
   );
 };