diff --git a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx b/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx index d0ff55684..6cbe0d9b3 100644 --- a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx +++ b/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)} > }> - } /> + } /> } /> } /> } /> diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index 97734af3a..8277ee828 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/auth/components/Verify.tsx b/packages/twenty-front/src/modules/auth/components/Verify.tsx index 25a8a6a1f..a70bbe8e4 100644 --- a/packages/twenty-front/src/modules/auth/components/Verify.tsx +++ b/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 ; + return <>; }; diff --git a/packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx b/packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx index 96dc949f2..e873b497a 100644 --- a/packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx +++ b/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( diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index 16466b51e..150c1e9a9 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/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) => ( - {children} +const ModalContent = ({ + children, + className, + isVerticalCentered, + isHorizontalCentered, +}: ModalContentProps) => ( + + {children} + ); - type ModalFooterProps = React.PropsWithChildren & { className?: string; }; diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 55c0442d0..bc83bf914 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/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 && ( - - - - - - <Trans>Reset Password</Trans> - - - {!email ? ( - - - - ) : ( - - + + + + + + <Trans>Reset Password</Trans> + + + {!email ? ( + - - - - - - ( - - - - )} + - + + ) : ( + + + + + + + + ( + + + + )} + /> + - - - )} - - + + + )} + + + ) ); }; diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index 3c50251e2..70cfcd3df 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/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 ( - <> + {title} {signInUpForm} {signInUpStep !== SignInUpStep.Password && } - + ); }; diff --git a/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx b/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx deleted file mode 100644 index 42be13efb..000000000 --- a/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx +++ /dev/null @@ -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 ; -}; diff --git a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx index 83400c7bf..890c0704b 100644 --- a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx +++ b/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 ( - <> + {isDefined(baseProductPrice) && isDefined(billing) ? ( <> @@ -250,6 +251,6 @@ export const ChooseYourPlan = () => { ) : ( <StyledChooseYourPlanPlaceholder /> )} - </> + </Modal.Content> ); }; diff --git a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx index 02f6c4352..74a98c958 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx +++ b/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> @@ -218,6 +219,6 @@ export const CreateProfile = () => { fullWidth /> - + ); }; diff --git a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx index ae36b074e..9d12ea755 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx +++ b/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 ( - <> + <Trans>Create your workspace</Trans> @@ -156,6 +157,6 @@ export const CreateWorkspace = () => { fullWidth /> - + ); }; diff --git a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx b/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx index 408af5825..392f9a35d 100644 --- a/packages/twenty-front/src/pages/onboarding/InviteTeam.tsx +++ b/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 ( - <> + <Trans>Invite your team</Trans> @@ -224,6 +225,6 @@ export const InviteTeam = () => { Skip - + ); }; diff --git a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx b/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx index 4ffafd9bf..099ec1d8b 100644 --- a/packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx +++ b/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 ( - <> + @@ -79,6 +80,6 @@ export const PaymentSuccess = () => { onClick={navigateWithSubscriptionCheck} /> - + ); }; diff --git a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx index ab788a56b..a47f62b21 100644 --- a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx +++ b/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 ( - <> + Emails and Calendar Sync your Emails and Calendar with Twenty. Choose your privacy settings. @@ -147,6 +148,6 @@ export const SyncEmails = () => { Continue without sync - + ); };