Fix onboarding modals spacings (#20682)

closes
https://discord.com/channels/1130383047699738754/1496415056085389422

packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts

@@ -0,0 +1,8 @@
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+export const StyledOnboardingContentContainer = styled.div`
+  margin-bottom: ${themeCssVariables.spacing[8]};
+  margin-top: ${themeCssVariables.spacing[4]};
+  min-width: 240px;
+`;

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

@@ -6,7 +6,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { ClickToActionLink, UndecoratedLink } from 'twenty-ui/navigation';
 
-import { useAuth } from '@/auth/hooks/useAuth';
+import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials';
 import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle';
 import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft';
@@ -23,7 +23,6 @@ import { isDDLLockedState } from '@/client-config/states/isDDLLockedState';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { isNonEmptyString } from '@sniptt/guards';
-import { motion } from 'framer-motion';
 import { useContext } from 'react';
 import {
   Avatar,
@@ -35,20 +34,12 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type AvailableWorkspace } from '~/generated-metadata/graphql';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 
-const StyledContentContainer = styled(motion.div)`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-  min-width: 200px;
-`;
-
 const StyledWorkspaceContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.light};
   border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-direction: column;
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
   overflow: hidden;
   width: 100%;
 
@@ -123,11 +114,6 @@ const StyledChevronIcon = styled.div`
   display: flex;
 `;
 
-const StyledActionLinkContainer = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
 const StyledForgotPasswordLinkContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -140,7 +126,6 @@ export const SignInUpGlobalScopeForm = () => {
   const isDDLLocked = useAtomStateValue(isDDLLockedState);
   const signInUpStep = useAtomStateValue(signInUpStepState);
   const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
-  const { signOut } = useAuth();
 
   const { createWorkspace } = useSignUpInNewWorkspace();
   const availableWorkspaces = useAtomStateValue(availableWorkspacesState);
@@ -169,7 +154,7 @@ export const SignInUpGlobalScopeForm = () => {
   return (
     <>
       {signInUpStep === SignInUpStep.WorkspaceSelection && (
-        <>
+        <StyledOnboardingContentContainer>
           <StyledWorkspaceContainer>
             {[
               ...availableWorkspaces.availableWorkspacesForSignIn,
@@ -224,15 +209,10 @@ export const SignInUpGlobalScopeForm = () => {
               </StyledWorkspaceItem>
             )}
           </StyledWorkspaceContainer>
-          <StyledActionLinkContainer>
-            <ClickToActionLink onClick={signOut}>
-              <Trans>Log out</Trans>
-            </ClickToActionLink>
-          </StyledActionLinkContainer>
-        </>
+        </StyledOnboardingContentContainer>
       )}
       {signInUpStep !== SignInUpStep.WorkspaceSelection && (
-        <StyledContentContainer>
+        <StyledOnboardingContentContainer>
           {authProviders.google && (
             <SignInUpWithGoogle
               action="list-available-workspaces"
@@ -261,7 +241,7 @@ export const SignInUpGlobalScopeForm = () => {
               </ClickToActionLink>
             </StyledForgotPasswordLinkContainer>
           )}
-        </StyledContentContainer>
+        </StyledOnboardingContentContainer>
       )}
     </>
   );

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

@@ -1,3 +1,4 @@
+import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials';
 import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle';
 import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft';
@@ -9,20 +10,12 @@ import { useWorkspaceBypass } from '@/auth/sign-in-up/hooks/useWorkspaceBypass';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { workspaceAuthBypassProvidersState } from '@/workspace/states/workspaceAuthBypassProvidersState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
-import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { HorizontalSeparator } from 'twenty-ui/display';
 import { ClickToActionLink } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-const StyledContentContainer = styled.div`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-  min-width: 200px;
-`;
-
 export const SignInUpWorkspaceScopeForm = () => {
   const workspaceAuthProviders = useAtomStateValue(workspaceAuthProvidersState);
   const workspaceAuthBypassProviders = useAtomStateValue(
@@ -50,7 +43,7 @@ export const SignInUpWorkspaceScopeForm = () => {
 
   return (
     <>
-      <StyledContentContainer>
+      <StyledOnboardingContentContainer>
         {providers.google && <SignInUpWithGoogle action="join-workspace" />}
 
         {providers.microsoft && (
@@ -71,7 +64,7 @@ export const SignInUpWorkspaceScopeForm = () => {
             <SignInUpWithCredentials />
           </FormProvider>
         )}
-      </StyledContentContainer>
+      </StyledOnboardingContentContainer>
       {signInUpStep === SignInUpStep.Password && (
         <ClickToActionLink
           onClick={handleResetPassword(form.getValues('email'))}

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

@@ -0,0 +1,13 @@
+import { useAuth } from '@/auth/hooks/useAuth';
+import { Trans } from '@lingui/react/macro';
+import { ClickToActionLink } from 'twenty-ui/navigation';
+
+export const WorkspaceSelectionFooter = () => {
+  const { signOut } = useAuth();
+
+  return (
+    <ClickToActionLink onClick={signOut}>
+      <Trans>Log out</Trans>
+    </ClickToActionLink>
+  );
+};

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

@@ -1,22 +1,16 @@
 /* @license Enterprise */
 
+import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
-import { styled } from '@linaria/react';
 
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { HorizontalSeparator } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-const StyledContentContainer = styled.div`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-`;
-
 export const SignInUpSSOIdentityProviderSelection = () => {
   const workspaceAuthProviders = useAtomStateValue(workspaceAuthProvidersState);
 
@@ -24,7 +18,7 @@ export const SignInUpSSOIdentityProviderSelection = () => {
 
   return (
     <>
-      <StyledContentContainer>
+      <StyledOnboardingContentContainer>
         {isDefined(workspaceAuthProviders?.sso) &&
           workspaceAuthProviders?.sso.map((idp) => (
             <React.Fragment key={idp.id}>
@@ -37,7 +31,7 @@ export const SignInUpSSOIdentityProviderSelection = () => {
               <HorizontalSeparator visible={false} />
             </React.Fragment>
           ))}
-      </StyledContentContainer>
+      </StyledOnboardingContentContainer>
     </>
   );
 };

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

@@ -3,6 +3,7 @@ import { Logo } from '@/auth/components/Logo';
 import { Title } from '@/auth/components/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useHasAccessTokenPair } from '@/auth/hooks/useHasAccessTokenPair';
+import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
@@ -61,12 +62,6 @@ const StyledMainContainer = styled.div`
   width: 100%;
 `;
 
-const StyledContentContainer = styled.div`
-  margin-bottom: ${themeCssVariables.spacing[8]};
-  margin-top: ${themeCssVariables.spacing[4]};
-  width: 200px;
-`;
-
 const StyledForm = styled.form`
   align-items: center;
   display: flex;
@@ -229,7 +224,7 @@ export const PasswordReset = () => {
             />
           </AnimatedEaseIn>
           <Title animate>{passwordActionLabel}</Title>
-          <StyledContentContainer>
+          <StyledOnboardingContentContainer>
             {!email ? (
               <SkeletonTheme
                 baseColor={theme.background.quaternary}
@@ -311,7 +306,7 @@ export const PasswordReset = () => {
                 </StyledMainButtonContainer>
               </StyledForm>
             )}
-          </StyledContentContainer>
+          </StyledOnboardingContentContainer>
         </StyledMainContainer>
       </ModalContent>
     )

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

@@ -16,6 +16,7 @@ import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerific
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
 import { SignInUpGlobalScopeForm } from '@/auth/sign-in-up/components/SignInUpGlobalScopeForm';
 import { SignInUpWorkspaceScopeForm } from '@/auth/sign-in-up/components/SignInUpWorkspaceScopeForm';
+import { WorkspaceSelectionFooter } from '@/auth/sign-in-up/components/WorkspaceSelectionFooter';
 import { SignInUpSSOIdentityProviderSelection } from '@/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection';
 import { SignInUpWorkspaceScopeFormEffect } from '@/auth/sign-in-up/components/internal/SignInUpWorkspaceScopeFormEffect';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
@@ -71,6 +72,9 @@ const StandardContent = ({
       </AnimatedEaseIn>
       <Title animate>{title}</Title>
       {signInUpForm}
+      {signInUpStep === SignInUpStep.WorkspaceSelection && (
+        <WorkspaceSelectionFooter />
+      )}
       {![
         SignInUpStep.Password,
         SignInUpStep.TwoFactorAuthenticationProvision,