39 create subscription and success modale (#4208)

* Init add choose your plan page component

* Update price format

* Add billing refund trial duration env variable

* Add billing benefits

* Add Button

* Call checkout endpoint

* Fix theme color

* Add Payment success modale

* Add loader to createWorkspace submit button

* Fix lint

* Fix dark mode

* Code review returns

* Use a resolver for front requests

* Fix 'create workspace' loader at sign up

* Fix 'create workspace' with enter key bug

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

@@ -11,7 +11,7 @@ const StyledContent = styled(UIModal.Content)`
 type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
-  <UIModal isOpen={true}>
+  <UIModal isOpen={true} padding={'none'}>
     <StyledContent>{children}</StyledContent>
   </UIModal>
 );

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

@@ -5,24 +5,30 @@ import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEase
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;
+  withMarginTop?: boolean;
 };
 
-const StyledTitle = styled.div`
+const StyledTitle = styled.div<Pick<TitleProps, 'withMarginTop'>>`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme, withMarginTop }) =>
+    withMarginTop ? theme.spacing(4) : 0};
 `;
 
-export const Title = ({ children, animate = false }: TitleProps) => {
+export const Title = ({
+  children,
+  animate = false,
+  withMarginTop = true,
+}: TitleProps) => {
   if (animate) {
     return (
-      <StyledTitle>
+      <StyledTitle withMarginTop={withMarginTop}>
         <AnimatedEaseIn>{children}</AnimatedEaseIn>
       </StyledTitle>
     );
   }
 
-  return <StyledTitle>{children}</StyledTitle>;
+  return <StyledTitle withMarginTop={withMarginTop}>{children}</StyledTitle>;
 };