feat(CommentForm): form redesign

taskany-inc · Jun 9, 2023 · 5bad2f0 · 5bad2f0
1 parent 09289a0
commit 5bad2f0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 32 deletions.
diff --git a/src/components/CommentCreateForm/CommentCreateForm.tsx b/src/components/CommentCreateForm/CommentCreateForm.tsx
@@ -142,14 +142,7 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({ goalId, states, o
                             />
                         </StyledStateUpdate>
                     ) : (
-                        <Button
-                            size="m"
-                            view="primary"
-                            disabled={busy}
-                            outline={!isValid}
-                            type="submit"
-                            text={tr('Comment')}
-                        />
+                        <Button size="m" view="primary" disabled={busy} outline type="submit" text={tr('Comment')} />
                     )
                 }
             />

diff --git a/src/components/CommentForm/CommentForm.i18n/en.json b/src/components/CommentForm/CommentForm.i18n/en.json
@@ -1,5 +1,4 @@
 {
     "Leave a comment": "Leave a comment...",
-    "Cancel": "Cancel",
-    "Markdown supported": "Styling with markdown is supported"
+    "Cancel": "Cancel"
 }
diff --git a/src/components/CommentForm/CommentForm.i18n/ru.json b/src/components/CommentForm/CommentForm.i18n/ru.json
@@ -1,5 +1,4 @@
 {
     "Leave a comment": "Оставить комментарий...",
-    "Cancel": "Отменить",
-    "Markdown supported": "Текст можно стилизовать с помощью Markdown разметки"
+    "Cancel": "Отменить"
 }
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
@@ -1,15 +1,14 @@
 import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Controller, Control } from 'react-hook-form';
-import { backgroundColor, gapS, gray4, gray6 } from '@taskany/colors';
+import { backgroundColor, gapM, gray4, gray9 } from '@taskany/colors';
 import {
     Button,
     Link,
     Form,
     FormCard,
     FormAction,
     FormActions,
-    MarkdownIcon,
     QuestionIcon,
     nullable,
     useClickOutside,
@@ -18,7 +17,6 @@ import {
 import { usePageContext } from '../../hooks/usePageContext';
 import { routes } from '../../hooks/router';
 import { FormEditor } from '../FormEditor/FormEditor';
-import { Tip } from '../Tip';
 
 import { tr } from './CommentForm.i18n';
 
@@ -42,7 +40,7 @@ const StyledFormBottom = styled.div`
     align-items: center;
     justify-content: space-between;
 
-    padding: ${gapS} ${gapS} 0 ${gapS};
+    padding-top: ${gapM};
 `;
 
 const StyledCommentForm = styled(FormCard)`
@@ -67,10 +65,6 @@ const StyledCommentForm = styled(FormCard)`
     }
 `;
 
-const StyledTip = styled(Tip)`
-    padding: 0;
-`;
-
 export const CommentForm: React.FC<CommentFormProps> = ({
     autoFocus,
     control,
@@ -117,7 +111,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                             {...field}
                             disabled={busy}
                             placeholder={tr('Leave a comment')}
-                            height={commentFocused ? 120 : 60}
+                            height={commentFocused ? 120 : 40}
                             onCancel={onCommentCancel}
                             onFocus={onCommentFocus}
                             autoFocus={autoFocus}
@@ -127,8 +121,16 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                 />
 
                 {nullable(commentFocused, () => (
-                    <FormActions focused={commentFocused}>
-                        <FormAction left inline />
+                    <FormActions>
+                        <FormAction left inline>
+                            {nullable(commentFocused, () => (
+                                <StyledFormBottom>
+                                    <Link href={routes.help(locale, 'comments')}>
+                                        <QuestionIcon size="s" color={gray9} />
+                                    </Link>
+                                </StyledFormBottom>
+                            ))}
+                        </FormAction>
                         <FormAction right inline>
                             {nullable(!busy, () => (
                                 <Button size="m" outline text={tr('Cancel')} onClick={onCommentCancel} />
@@ -139,15 +141,6 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                     </FormActions>
                 ))}
             </Form>
-
-            {nullable(commentFocused, () => (
-                <StyledFormBottom>
-                    <StyledTip icon={<MarkdownIcon size="s" color={gray6} />}>{tr('Markdown supported')}</StyledTip>
-                    <Link href={routes.help(locale, 'comments')}>
-                        <QuestionIcon size="s" color={gray6} />
-                    </Link>
-                </StyledFormBottom>
-            ))}
         </StyledCommentForm>
     );
 };