Added the same long text handeling to comments and projects

client/src/components/ui/Comment/index.tsx

@@ -6,6 +6,7 @@ import { getUser, User } from 'adapters/user';
 import { Comment as IComment } from 'adapters/comment';
 
 import Avatar from 'components/ui/Avatar';
+import LongText from 'components/ui/LongText';
 
 import './comment.scss';
 
@@ -39,7 +40,7 @@ export default function Comment({ comment }: CommentProps) {
                     </div>
                 </div>
                 <div className="comment">
-                    {comment.text}
+                    <LongText text={comment.text} />
                 </div>
             </div>
         )

client/src/components/ui/LongText/index.tsx

+
+import { useState } from 'react';
+
+interface Props {
+    text: string;
+}
+
+export default function LongText({ text }: Props) {
+    const [more, setMore] = useState(false);
+
+    return (
+        (text.length < 300)
+            ? <p>{text}</p>
+            : (more
+                ? <>
+                    <p>{text}</p>
+                    <button onClick={() => setMore(false)}>less</button>
+                </>
+                : <>
+                    <p>{text.substr(0, 300) + '... '}</p>
+                    <button onClick={() => setMore(true)}>more</button>
+                </>
+            )
+    );
+}
+

client/src/index.scss

@@ -33,6 +33,7 @@ button {
 }
 
 a, button {
+    font-size: 1em;
     font-weight: s.$weight-semi-bold;
     color: s.$primary;
     text-decoration: none;

client/src/pages/Projects/ProjectDetail/index.tsx

@@ -6,6 +6,7 @@ import { StatusColors } from 'adapters/common';
 import { getProject, Project } from 'adapters/project';
 
 import Tag from 'components/ui/Tag';
+import LongText from 'components/ui/LongText';
 import Tabs, { Tab } from 'components/navigation/Tabs';
 import LoadingScreen from 'components/ui/LoadingScreen';
 
@@ -55,9 +56,7 @@ export default function ProjectDetail() {
                     <Tag label={project.status} color={StatusColors.get(project.status)} />
                     <h1>{project.name}</h1>
                     <div className="description-container">
-                        <p>
-                            {project.text}
-                        </p>
+                        <LongText text={project.text} />
                     </div>
                     {
                         tabs

client/src/pages/Tasks/TaskDetail/index.tsx

@@ -9,6 +9,7 @@ import { getProject, Project } from 'adapters/project';
 import { getTask, getTaskAssignees, Task, TaskAssignment } from 'adapters/task';
 
 import Tag from 'components/ui/Tag';
+import LongText from 'components/ui/LongText';
 import Tabs from 'components/navigation/Tabs';
 import DetailGrid from 'components/layout/DetailGrid';
 import LoadingScreen from 'components/ui/LoadingScreen';
@@ -25,7 +26,6 @@ export interface Params {
 }
 
 export default function TaskDetail() {
-    const [more, setMore] = useState(false);
     const [task, setTask] = useState<Task>();
     const [project, setProject] = useState<Project>();
     const [teamNames, setTeamNames] = useState<string[]>([]);
@@ -49,7 +49,7 @@ export default function TaskDetail() {
             getTaskAssignees(taskId).then(setAssignees);
             setAssignment(task.assigned.find(a => a.user === userId))
         }).catch(() => history.goBack());
-    }, [taskId, history]);
+    }, [taskId, userId, history]);
 
     if (task) {
         return (
@@ -61,20 +61,7 @@ export default function TaskDetail() {
                     <Tag label={task.status} color={StatusColors.get(task.status)} />
                     <h1>{task.name}</h1>
                     <div className="description-container">
-                        {
-                            (task.text.length < 300)
-                                ? <p>{task.text}</p>
-                                : (more
-                                    ? <>
-                                        <p>{task.text}</p>
-                                        <a onClick={() => setMore(false)}>less</a>
-                                    </>
-                                    : <>
-                                        <p>{task.text.substr(0, 300) + '... '}</p>
-                                        <a onClick={() => setMore(true)}>more</a>
-                                    </>
-                              )
-                        }
+                        <LongText text={task.text} />
                     </div>
                     <h2>
                         Details