feat(ProjectCreateForm): reorder form components

taskany-inc · Jun 9, 2023 · 8bb15f4 · 8bb15f4
1 parent dfafb0e
commit 8bb15f4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/src/components/ProjectCreateForm/ProjectCreateForm.i18n/en.json b/src/components/ProjectCreateForm/ProjectCreateForm.i18n/en.json
@@ -1,7 +1,7 @@
 {
-    "New project": "New project",
-    "Create project": "Create project",
-    "Title": "Title",
+    "Create": "Create",
+    "Cancel": "Cancel",
+    "Project title": "Project title",
     "Short description": "Short description",
     "Pro tip!": "Pro tip!",
     "Press key to create project": "Press {key} to create project.",

diff --git a/src/components/ProjectCreateForm/ProjectCreateForm.i18n/ru.json b/src/components/ProjectCreateForm/ProjectCreateForm.i18n/ru.json
@@ -1,7 +1,7 @@
 {
-    "New project": "Новый проект",
-    "Create project": "Создать проект",
-    "Title": "Название",
+    "Create": "Создать",
+    "Cancel": "Отмена",
+    "Project title": "Название проекта",
     "Short description": "Короткое описание",
     "Pro tip!": "Держи совет!",
     "Press key to create project": "Нажми {key} чтобы создать проект.",

diff --git a/src/components/ProjectCreateForm/ProjectCreateForm.tsx b/src/components/ProjectCreateForm/ProjectCreateForm.tsx
@@ -62,6 +62,11 @@ const StyledProjectKeyInputContainer = styled(InputContainer)`
     padding-right: ${gapS};
 `;
 
+const StyledHelpIcon = styled(QuestionIcon)`
+    display: flex;
+    align-items: center;
+`;
+
 const ProjectCreateForm: React.FC = () => {
     const router = useRouter();
     const { locale } = usePageContext();
@@ -164,16 +169,12 @@ const ProjectCreateForm: React.FC = () => {
 
     return (
         <>
-            <ModalHeader>
-                <FormTitle>{tr('New project')}</FormTitle>
-            </ModalHeader>
-
             <ModalContent>
                 <Form onSubmit={isKeyUnique ? handleSubmit(onCreateProject) : undefined}>
                     <StyledProjectTitleContainer>
                         <FormInput
                             {...register('title')}
-                            placeholder={tr('Title')}
+                            placeholder={tr('Project title')}
                             flat="bottom"
                             brick="right"
                             disabled={busy}
@@ -213,9 +214,10 @@ const ProjectCreateForm: React.FC = () => {
 
                     <FormTextarea
                         {...register('description')}
+                        flat="both"
+                        minHeight={100}
                         disabled={busy}
                         placeholder={tr('Short description')}
-                        flat="both"
                         error={errorsResolver('description')}
                     />
 
@@ -234,30 +236,36 @@ const ProjectCreateForm: React.FC = () => {
                                     />
                                 )}
                             />
+
+                            <Link href={routes.help(locale, 'projects')}>
+                                <StyledHelpIcon size="s" color={gray6} />
+                            </Link>
+                        </FormAction>
+                    </FormActions>
+                    <FormActions flat="top">
+                        <FormAction left>
+                            <Tip title={tr('Pro tip!')} icon={<BulbOnIcon size="s" color={gray10} />}>
+                                {tr.raw('Press key to create project', {
+                                    key: <Keyboard command enter />,
+                                })}
+                            </Tip>
                         </FormAction>
                         <FormAction right inline>
+                            <Button
+                                outline
+                                text={tr('Cancel')}
+                                onClick={dispatchModalEvent(ModalEvent.ProjectCreateModal)}
+                            />
                             <Button
                                 view="primary"
                                 disabled={busy}
                                 outline={!isValid || !isKeyUnique || !isKeyEnoughLength}
                                 type="submit"
-                                text={tr('Create project')}
+                                text={tr('Create')}
                             />
                         </FormAction>
                     </FormActions>
                 </Form>
-
-                <StyledFormBottom>
-                    <Tip title={tr('Pro tip!')} icon={<BulbOnIcon size="s" color={gray10} />}>
-                        {tr.raw('Press key to create project', {
-                            key: <Keyboard command enter />,
-                        })}
-                    </Tip>
-
-                    <Link href={routes.help(locale, 'projects')}>
-                        <QuestionIcon size="s" color={gray6} />
-                    </Link>
-                </StyledFormBottom>
             </ModalContent>
         </>
     );