Improve login & signup dialogs design (#7152)

4ian · Nov 13, 2024 · 602dc9d · 602dc9d
1 parent 162a703
commit 602dc9d
Show file tree

Hide file tree

Showing 9 changed files with 378 additions and 607 deletions.
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/GetStartedSection/index.js
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageHeader.js
@@ -18,6 +18,7 @@ import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindow
 import SaveProjectIcon from '../../SaveProjectIcon';
 import Mobile from '../../../UI/CustomSvgIcons/Mobile';
 import Desktop from '../../../UI/CustomSvgIcons/Desktop';
+import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext';
 const electron = optionalRequire('electron');
 
 type Props = {|
@@ -38,6 +39,7 @@ export const HomePageHeader = ({
   canSave,
 }: Props) => {
   const { isMobile } = useResponsiveWindowSize();
+  const { profile } = React.useContext(AuthenticatedUserContext);
 
   return (
     <I18n>
@@ -92,7 +94,7 @@ export const HomePageHeader = ({
                   />
                 ))}
               <UserChip onOpenProfile={onOpenProfile} />
-              <NotificationChip />
+              {profile && <NotificationChip />}
               {isMobile ? (
                 <IconButton size="small" onClick={onOpenLanguageDialog}>
                   <TranslateIcon fontSize="small" />

diff --git a/newIDE/app/src/Profile/CreateAccountDialog.js b/newIDE/app/src/Profile/CreateAccountDialog.js
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import { Trans } from '@lingui/macro';
-import { t } from '@lingui/macro';
 
 import FlatButton from '../UI/FlatButton';
 import Dialog, { DialogPrimaryButton } from '../UI/Dialog';
@@ -12,23 +11,21 @@ import {
 } from '../Utils/GDevelopServices/Authentication';
 import { type UsernameAvailability } from '../Utils/GDevelopServices/User';
 import LeftLoader from '../UI/LeftLoader';
-import BackgroundText from '../UI/BackgroundText';
-import { ColumnStackLayout, LineStackLayout } from '../UI/Layout';
-import { MarkdownText } from '../UI/MarkdownText';
+import { ColumnStackLayout } from '../UI/Layout';
 import { isUsernameValid } from './UsernameField';
 import HelpButton from '../UI/HelpButton';
 import Text from '../UI/Text';
 import GDevelopGLogo from '../UI/CustomSvgIcons/GDevelopGLogo';
-import { Column } from '../UI/Grid';
-import Link from '../UI/Link';
 import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
 import CreateAccountForm from './CreateAccountForm';
 
 const getStyles = ({ isMobile }) => {
   return {
     formContainer: {
-      width: isMobile ? '95%' : '60%',
+      display: 'flex',
+      width: isMobile ? '95%' : '90%',
       marginTop: 10,
+      flexDirection: 'column',
     },
   };
 };
@@ -182,7 +179,7 @@ const CreateAccountDialog = ({
       onRequestClose={() => {
         if (!createAccountInProgress) onClose();
       }}
-      maxWidth="sm"
+      maxWidth="md"
       open
       flexColumnBody
     >
@@ -194,24 +191,8 @@ const CreateAccountDialog = ({
       >
         <GDevelopGLogo fontSize="large" />
         <Text size="section-title" align="center" noMargin>
-          <Trans>Sign up for free!</Trans>
+          <Trans>Welcome to GDevelop!</Trans>
         </Text>
-        <Column noMargin alignItems="center">
-          <LineStackLayout noMargin>
-            <Text size="body2" noMargin align="center">
-              <Trans>Already a member?</Trans>
-            </Text>
-            <Link
-              href="#"
-              onClick={onGoToLogin}
-              disabled={createAccountInProgress}
-            >
-              <Text size="body2" noMargin color="inherit">
-                <Trans>Log in to your account</Trans>
-              </Text>
-            </Link>
-          </LineStackLayout>
-        </Column>
         <div style={styles.formContainer}>
           <CreateAccountForm
             onCreateAccount={createAccount}
@@ -230,13 +211,9 @@ const CreateAccountDialog = ({
             onChangeUsernameAvailability={setUsernameAvailability}
             isValidatingUsername={isValidatingUsername}
             onChangeIsValidatingUsername={setIsValidatingUsername}
+            onGoToLogin={onGoToLogin}
           />
         </div>
-        <BackgroundText>
-          <MarkdownText
-            translatableSource={t`By creating an account and using GDevelop, you agree to the [Terms and Conditions](https://gdevelop.io/page/terms-and-conditions).`}
-          />
-        </BackgroundText>
       </ColumnStackLayout>
     </Dialog>
   );