Implemented issue create modal, further polish

client/src/Project/IssueDetails/Comments/BodyForm/Styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { Button } from 'shared/components';
+
+export const Actions = styled.div`
+  display: flex;
+  padding-top: 10px;
+`;
+
+export const FormButton = styled(Button)`
+  margin-right: 6px;
+`;

client/src/Project/IssueDetails/Comments/BodyForm/index.jsx

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { Textarea } from 'shared/components';
+import { Actions, FormButton } from './Styles';
+
+const propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  isWorking: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsCommentsBodyForm = ({
+  value,
+  onChange,
+  isWorking,
+  onSubmit,
+  onCancel,
+}) => {
+  const $textareaRef = useRef();
+  return (
+    <>
+      <Textarea
+        autoFocus
+        placeholder="Add a comment..."
+        value={value}
+        onChange={onChange}
+        ref={$textareaRef}
+      />
+      <Actions>
+        <FormButton
+          color="primary"
+          working={isWorking}
+          onClick={() => {
+            if ($textareaRef.current.value.trim()) {
+              onSubmit();
+            }
+          }}
+        >
+          Save
+        </FormButton>
+        <FormButton color="empty" onClick={onCancel}>
+          Cancel
+        </FormButton>
+      </Actions>
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsCommentsBodyForm.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsCommentsBodyForm;

client/src/Project/IssueDetails/Comments/Comment/Styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+import { Avatar } from 'shared/components';
+
+export const Comment = styled.div`
+  position: relative;
+  margin-top: 25px;
+  ${font.size(15)}
+`;
+
+export const UserAvatar = styled(Avatar)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+export const Content = styled.div`
+  padding-left: 44px;
+`;
+
+export const Username = styled.div`
+  display: inline-block;
+  padding-right: 12px;
+  padding-bottom: 10px;
+  color: ${color.textDark};
+  ${font.medium}
+`;
+
+export const CreatedAt = styled.div`
+  display: inline-block;
+  padding-bottom: 10px;
+  color: ${color.textDark};
+  ${font.size(14.5)}
+`;
+
+export const Body = styled.p`
+  padding-bottom: 10px;
+  white-space: pre-wrap;
+`;
+
+const actionLinkStyles = css`
+  display: inline-block;
+  padding: 2px 0;
+  color: ${color.textMedium};
+  ${font.size(14.5)}
+  ${mixin.clickable}
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const EditLink = styled.div`
+  margin-right: 12px;
+  ${actionLinkStyles}
+`;
+
+export const DeleteLink = styled.div`
+  ${actionLinkStyles}
+  &:before {
+    position: relative;
+    right: 6px;
+    content: '·';
+    display: inline-block;
+  }
+`;

client/src/Project/IssueDetails/Comments/Comment/index.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import api from 'shared/utils/api';
+import toast from 'shared/utils/toast';
+import { formatDateTimeConversational } from 'shared/utils/dateTime';
+import { ConfirmModal } from 'shared/components';
+import BodyForm from '../BodyForm';
+import {
+  Comment,
+  UserAvatar,
+  Content,
+  Username,
+  CreatedAt,
+  Body,
+  EditLink,
+  DeleteLink,
+} from './Styles';
+
+const propTypes = {
+  comment: PropTypes.object.isRequired,
+  fetchIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {
+  const [isFormOpen, setFormOpen] = useState(false);
+  const [isUpdating, setUpdating] = useState(false);
+  const [body, setBody] = useState(comment.body);
+
+  const handleCommentDelete = async () => {
+    try {
+      await api.delete(`/comments/${comment.id}`);
+      await fetchIssue();
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+  const handleCommentUpdate = async () => {
+    try {
+      setUpdating(true);
+      await api.put(`/comments/${comment.id}`, { body });
+      await fetchIssue();
+      setUpdating(false);
+      setFormOpen(false);
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+  return (
+    <Comment>
+      <UserAvatar name={comment.user.name} avatarUrl={comment.user.avatarUrl} />
+      <Content>
+        <Username>{comment.user.name}</Username>
+        <CreatedAt>{formatDateTimeConversational(comment.createdAt)}</CreatedAt>
+        {isFormOpen ? (
+          <BodyForm
+            value={body}
+            onChange={setBody}
+            isWorking={isUpdating}
+            onSubmit={handleCommentUpdate}
+            onCancel={() => setFormOpen(false)}
+          />
+        ) : (
+          <>
+            <Body>{comment.body}</Body>
+            <EditLink onClick={() => setFormOpen(true)}>Edit</EditLink>
+            <ConfirmModal
+              title="Are you sure you want to delete this comment?"
+              message="Once you delete, it's gone for good."
+              confirmText="Delete Comment"
+              onConfirm={handleCommentDelete}
+              renderLink={modal => <DeleteLink onClick={modal.open}>Delete</DeleteLink>}
+            />
+          </>
+        )}
+      </Content>
+    </Comment>
+  );
+};
+
+ProjectBoardIssueDetailsComment.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsComment;

client/src/Project/IssueDetails/Comments/Create/ProTip/Styles.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Tip = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: 8px;
+  color: ${color.textMedium};
+  ${font.size(13)}
+  strong {
+    padding-right: 4px;
+  }
+`;
+
+export const TipLetter = styled.span`
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  margin: 0 4px;
+  padding: 0 4px;
+  border-radius: 2px;
+  color: ${color.textDarkest};
+  background: ${color.backgroundMedium};
+  ${font.bold}
+  ${font.size(12)}
+`;

client/src/Project/IssueDetails/Comments/Create/ProTip/index.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { KeyCodes } from 'shared/constants/keyCodes';
+import { isFocusedElementEditable } from 'shared/utils/dom';
+import { Tip, TipLetter } from './Styles';
+
+const propTypes = {
+  setFormOpen: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsCommentsCreateProTip = ({ setFormOpen }) => {
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (!isFocusedElementEditable() && event.keyCode === KeyCodes.M) {
+        event.preventDefault();
+        setFormOpen(true);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [setFormOpen]);
+
+  return (
+    <Tip>
+      <strong>Pro tip:</strong>press<TipLetter>M</TipLetter>to comment
+    </Tip>
+  );
+};
+
+ProjectBoardIssueDetailsCommentsCreateProTip.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsCommentsCreateProTip;

client/src/Project/IssueDetails/Comments/Create/Styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+import { Avatar } from 'shared/components';
+
+export const Create = styled.div`
+  position: relative;
+  margin-top: 25px;
+  ${font.size(15)}
+`;
+
+export const UserAvatar = styled(Avatar)`
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+export const Right = styled.div`
+  padding-left: 44px;
+`;
+
+export const FakeTextarea = styled.div`
+  padding: 12px 16px;
+  border-radius: 4px;
+  border: 1px solid ${color.borderLightest};
+  color: ${color.textLight};
+  ${mixin.clickable}
+  &:hover {
+    border: 1px solid ${color.borderLight};
+  }
+`;

client/src/Project/IssueDetails/Comments/Create/index.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import api from 'shared/utils/api';
+import useApi from 'shared/hooks/api';
+import toast from 'shared/utils/toast';
+import BodyForm from '../BodyForm';
+import ProTip from './ProTip';
+import { Create, UserAvatar, Right, FakeTextarea } from './Styles';
+
+const propTypes = {
+  issueId: PropTypes.number.isRequired,
+  fetchIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {
+  const [isFormOpen, setFormOpen] = useState(false);
+  const [isCreating, setCreating] = useState(false);
+  const [body, setBody] = useState('');
+
+  const [{ data: currentUserData }] = useApi.get('/currentUser');
+  const currentUser = currentUserData && currentUserData.currentUser;
+
+  const handleCommentCreate = async () => {
+    try {
+      setCreating(true);
+      await api.post(`/comments`, { body, issueId, userId: currentUser.id });
+      await fetchIssue();
+      setFormOpen(false);
+      setCreating(false);
+      setBody('');
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
+  return (
+    <Create>
+      {currentUser && <UserAvatar name={currentUser.name} avatarUrl={currentUser.avatarUrl} />}
+      <Right>
+        {isFormOpen ? (
+          <BodyForm
+            value={body}
+            onChange={setBody}
+            isWorking={isCreating}
+            onSubmit={handleCommentCreate}
+            onCancel={() => setFormOpen(false)}
+          />
+        ) : (
+          <>
+            <FakeTextarea onClick={() => setFormOpen(true)}>Add a comment...</FakeTextarea>
+            <ProTip setFormOpen={setFormOpen} />
+          </>
+        )}
+      </Right>
+    </Create>
+  );
+};
+
+ProjectBoardIssueDetailsCommentsCreate.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsCommentsCreate;

client/src/Project/IssueDetails/Comments/Styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { font } from 'shared/utils/styles';
+
+export const Comments = styled.div`
+  padding-top: 40px;
+`;
+
+export const Title = styled.div`
+  ${font.medium}
+  ${font.size(15)}
+`;

client/src/Project/IssueDetails/Comments/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Create from './Create';
+import Comment from './Comment';
+import { Comments, Title } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  fetchIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsComments = ({ issue, fetchIssue }) => (
+  <Comments>
+    <Title>Comments</Title>
+    <Create issueId={issue.id} fetchIssue={fetchIssue} />
+    {sortByNewestFirst(issue.comments).map(comment => (
+      <Comment key={comment.id} comment={comment} fetchIssue={fetchIssue} />
+    ))}
+  </Comments>
+);
+
+const sortByNewestFirst = items => items.sort((a, b) => -a.createdAt.localeCompare(b.createdAt));
+
+ProjectBoardIssueDetailsComments.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsComments;

client/src/Project/IssueDetails/Dates/Styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Dates = styled.div`
+  margin-top: 11px;
+  padding-top: 13px;
+  line-height: 22px;
+  border-top: 1px solid ${color.borderLightest};
+  color: ${color.textMedium};
+  ${font.size(13)}
+`;

client/src/Project/IssueDetails/Dates/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { formatDateTimeConversational } from 'shared/utils/dateTime';
+import { Dates } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+};
+
+const ProjectBoardIssueDetailsDates = ({ issue }) => (
+  <Dates>
+    <div>Created at {formatDateTimeConversational(issue.createdAt)}</div>
+    <div>Updated at {formatDateTimeConversational(issue.updatedAt)}</div>
+  </Dates>
+);
+
+ProjectBoardIssueDetailsDates.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsDates;

client/src/Project/IssueDetails/Delete.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import api from 'shared/utils/api';
+import toast from 'shared/utils/toast';
+import { Button, ConfirmModal } from 'shared/components';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  fetchProject: PropTypes.func.isRequired,
+  modalClose: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsDelete = ({ issue, fetchProject, modalClose }) => {
+  const handleIssueDelete = async () => {
+    try {
+      await api.delete(`/issues/${issue.id}`);
+      await fetchProject();
+      modalClose();
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+  return (
+    <ConfirmModal
+      title="Are you sure you want to delete this issue?"
+      message="Once you delete, it's gone for good."
+      confirmText="Delete issue"
+      onConfirm={handleIssueDelete}
+      renderLink={modal => <Button icon="trash" iconSize={19} color="empty" onClick={modal.open} />}
+    />
+  );
+};
+
+ProjectBoardIssueDetailsDelete.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsDelete;

client/src/Project/IssueDetails/Description/Styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+
+export const Title = styled.div`
+  padding: 20px 0 6px;
+  ${font.size(15)}
+  ${font.medium}
+`;
+
+export const EmptyLabel = styled.div`
+  margin-left: -7px;
+  padding: 7px;
+  border-radius: 3px;
+  color: ${color.textMedium}
+  transition: background 0.1s;
+  ${font.size(15)}
+  ${mixin.clickable}
+  &:hover {
+    background: ${color.backgroundLight};
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  padding-top: 12px;
+  & > button {
+    margin-right: 6px;
+  }
+`;

client/src/Project/IssueDetails/Description/index.jsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { getTextContentsFromHtmlString } from 'shared/utils/html';
+import { TextEditor, TextEditedContent, Button } from 'shared/components';
+import { Title, EmptyLabel, Actions } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsDescription = ({ issue, updateIssue }) => {
+  const [value, setValue] = useState(issue.description);
+  const [isEditing, setEditing] = useState(false);
+
+  const renderPresentingMode = () =>
+    isDescriptionEmpty(issue.description) ? (
+      <EmptyLabel onClick={() => setEditing(true)}>Add a description...</EmptyLabel>
+    ) : (
+      <TextEditedContent content={issue.description} onClick={() => setEditing(true)} />
+    );
+
+  const renderEditingMode = () => (
+    <>
+      <TextEditor placeholder="Describe the issue" defaultValue={value} onChange={setValue} />
+      <Actions>
+        <Button
+          color="primary"
+          onClick={() => {
+            setEditing(false);
+            updateIssue({ description: value });
+          }}
+        >
+          Save
+        </Button>
+        <Button color="empty" onClick={() => setEditing(false)}>
+          Cancel
+        </Button>
+      </Actions>
+    </>
+  );
+  return (
+    <>
+      <Title>Description</Title>
+      {isEditing ? renderEditingMode() : renderPresentingMode()}
+    </>
+  );
+};
+
+const isDescriptionEmpty = description =>
+  getTextContentsFromHtmlString(description).trim().length === 0;
+
+ProjectBoardIssueDetailsDescription.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsDescription;

client/src/Project/IssueDetails/Feedback/Styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { font } from 'shared/utils/styles';
+
+export const FeedbackDropdown = styled.div`
+  padding: 16px 24px 24px;
+`;
+
+export const FeedbackImageCont = styled.div`
+  padding: 24px 56px 20px;
+`;
+
+export const FeedbackImage = styled.img`
+  width: 100%;
+`;
+
+export const FeedbackParagraph = styled.p`
+  margin-bottom: 12px;
+  ${font.size(15)}
+  &:last-of-type {
+    margin-bottom: 22px;
+  }
+`;

client/src/Project/IssueDetails/Feedback/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Button, Tooltip } from 'shared/components';
+import feedbackImage from './assets/feedback.png';
+import { FeedbackDropdown, FeedbackImageCont, FeedbackImage, FeedbackParagraph } from './Styles';
+
+const ProjectBoardIssueDetailsFeedback = () => (
+  <Tooltip
+    width={300}
+    offset={{ top: -15 }}
+    renderLink={linkProps => (
+      <Button icon="feedback" color="empty" {...linkProps}>
+        Give feedback
+      </Button>
+    )}
+    renderContent={() => (
+      <FeedbackDropdown>
+        <FeedbackImageCont>
+          <FeedbackImage src={feedbackImage} alt="Give feedback" />
+        </FeedbackImageCont>
+        <FeedbackParagraph>
+          This simplified Jira clone is built with React on the front-end and Node/TypeScript on the
+          back-end.
+        </FeedbackParagraph>
+        <FeedbackParagraph>
+          {'Read more on our website or reach out via '}
+          <a href="mailto:ivor@codetree.co">
+            <strong>ivor@codetree.co</strong>
+          </a>
+        </FeedbackParagraph>
+        <a href="https://codetree.co/" target="_blank" rel="noreferrer noopener">
+          <Button color="primary">Visit Website</Button>
+        </a>
+        <a href="https://github.com/oldboyxx/jira_clone" target="_blank" rel="noreferrer noopener">
+          <Button style={{ marginLeft: 10 }} icon="github">
+            Github Repo
+          </Button>
+        </a>
+      </FeedbackDropdown>
+    )}
+  />
+);
+
+export default ProjectBoardIssueDetailsFeedback;

client/src/Project/IssueDetails/Loader.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const IssueDetailsLoader = () => (
+  <div style={{ padding: 40 }}>
+    <ContentLoader
+      height={260}
+      width={940}
+      speed={2}
+      primaryColor="#f3f3f3"
+      secondaryColor="#ecebeb"
+    >
+      <rect x="0" y="0" rx="3" ry="3" width="627" height="24" />
+      <rect x="0" y="29" rx="3" ry="3" width="506" height="24" />
+      <rect x="0" y="77" rx="3" ry="3" width="590" height="16" />
+      <rect x="0" y="100" rx="3" ry="3" width="627" height="16" />
+      <rect x="0" y="123" rx="3" ry="3" width="480" height="16" />
+      <rect x="0" y="187" rx="3" ry="3" width="370" height="16" />
+      <circle cx="18" cy="239" r="18" />
+      <rect x="46" y="217" rx="3" ry="3" width="548" height="42" />
+      <rect x="683" y="3" rx="3" ry="3" width="135" height="14" />
+      <rect x="683" y="33" rx="3" ry="3" width="251" height="24" />
+      <rect x="683" y="90" rx="3" ry="3" width="135" height="14" />
+      <rect x="683" y="120" rx="3" ry="3" width="251" height="24" />
+      <rect x="683" y="177" rx="3" ry="3" width="135" height="14" />
+      <rect x="683" y="207" rx="3" ry="3" width="251" height="24" />
+    </ContentLoader>
+  </div>
+);
+
+export default IssueDetailsLoader;

client/src/Project/IssueDetails/Priority/Styles.js

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Priority = styled.div`
+  display: flex;
+  align-items: center;
+  ${props =>
+    props.isValue &&
+    css`
+      padding: 3px 4px 3px 0px;
+      border-radius: 4px;
+      &:hover,
+      &:focus {
+        background: ${color.backgroundLight};
+      }
+    `}
+`;
+
+export const Label = styled.div`
+  padding: 0 3px 0 8px;
+  ${font.size(14.5)}
+`;

client/src/Project/IssueDetails/Priority/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues';
+import { Select, IssuePriorityIcon } from 'shared/components';
+import { Priority, Label } from './Styles';
+import { SectionTitle } from '../Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => {
+  const renderPriorityItem = (priority, isValue) => (
+    <Priority isValue={isValue}>
+      <IssuePriorityIcon priority={priority} />
+      <Label>{IssuePriorityCopy[priority]}</Label>
+    </Priority>
+  );
+  return (
+    <>
+      <SectionTitle>Priority</SectionTitle>
+      <Select
+        variant="empty"
+        dropdownWidth={343}
+        value={issue.priority}
+        options={Object.values(IssuePriority).map(priority => ({
+          value: priority,
+          label: IssuePriorityCopy[priority],
+        }))}
+        onChange={priority => updateIssue({ priority })}
+        renderValue={({ value }) => renderPriorityItem(value, true)}
+        renderOption={({ value }) => renderPriorityItem(value)}
+      />
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsPriority.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsPriority;

client/src/Project/IssueDetails/Status/Styles.js

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components';
+
+import { issueStatusColors, issueStatusBackgroundColors, mixin } from 'shared/utils/styles';
+
+export const Status = styled.div`
+  text-transform: uppercase;
+  transition: all 0.1s;
+  ${props => mixin.tag(issueStatusBackgroundColors[props.color], issueStatusColors[props.color])}
+  ${props =>
+    props.isValue &&
+    css`
+      padding: 0 12px;
+      height: 32px;
+      &:hover {
+        transform: scale(1.05);
+      }
+    `}
+`;

client/src/Project/IssueDetails/Status/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';
+import { Select, Icon } from 'shared/components';
+import { Status } from './Styles';
+import { SectionTitle } from '../Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (
+  <>
+    <SectionTitle>Status</SectionTitle>
+    <Select
+      variant="empty"
+      dropdownWidth={343}
+      value={issue.status}
+      options={Object.values(IssueStatus).map(status => ({
+        value: status,
+        label: IssueStatusCopy[status],
+      }))}
+      onChange={status => updateIssue({ status })}
+      renderValue={({ value: status }) => (
+        <Status isValue color={status}>
+          <div>{IssueStatusCopy[status]}</div>
+          <Icon type="chevron-down" size={18} />
+        </Status>
+      )}
+      renderOption={({ value: status }) => (
+        <Status color={status}>{IssueStatusCopy[status]}</Status>
+      )}
+    />
+  </>
+);
+
+ProjectBoardIssueDetailsStatus.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsStatus;

client/src/Project/IssueDetails/Styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export const Content = styled.div`
+  display: flex;
+  padding: 0 30px 60px;
+`;
+
+export const Left = styled.div`
+  width: 65%;
+  padding-right: 50px;
+`;
+
+export const Right = styled.div`
+  width: 35%;
+  padding-top: 5px;
+`;
+
+export const TopActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 21px 18px 0;
+`;
+
+export const TopActionsRight = styled.div`
+  display: flex;
+  align-items: center;
+  & > * {
+    margin-left: 4px;
+  }
+`;
+
+export const SectionTitle = styled.div`
+  margin: 24px 0 5px;
+  text-transform: uppercase;
+  color: ${color.textMedium};
+  ${font.size(12.5)}
+  ${font.bold}
+`;

client/src/Project/IssueDetails/Title/Styles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+import { Textarea } from 'shared/components';
+
+export const TitleTextarea = styled(Textarea)`
+  margin: 18px 0 0 -8px;
+  height: 44px;
+  width: 100%;
+  textarea {
+    padding: 7px 7px 8px;
+    line-height: 1.28;
+    border: none;
+    resize: none;
+    background: #fff;
+    border: 1px solid transparent;
+    box-shadow: 0 0 0 1px transparent;
+    transition: background 0.1s;
+    ${font.size(24)}
+    ${font.medium}
+    &:hover:not(:focus) {
+      background: ${color.backgroundLight};
+    }
+  }
+`;
+
+export const ErrorText = styled.div`
+  padding-top: 4px;
+  color: ${color.danger};
+  ${font.size(13)}
+  ${font.medium}
+`;

client/src/Project/IssueDetails/Title/index.jsx

@@ -0,0 +1,53 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { KeyCodes } from 'shared/constants/keyCodes';
+import { is, generateErrors } from 'shared/utils/validation';
+import { TitleTextarea, ErrorText } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {
+  const $titleInputRef = useRef();
+  const [error, setError] = useState(null);
+
+  const handleTitleChange = () => {
+    setError(null);
+
+    const title = $titleInputRef.current.value;
+    if (title === issue.title) return;
+
+    const errors = generateErrors({ title }, { title: [is.required(), is.maxLength(200)] });
+
+    if (errors.title) {
+      setError(errors.title);
+    } else {
+      updateIssue({ title });
+    }
+  };
+
+  return (
+    <>
+      <TitleTextarea
+        minRows={1}
+        placeholder="Short summary"
+        defaultValue={issue.title}
+        ref={$titleInputRef}
+        onBlur={handleTitleChange}
+        onKeyDown={event => {
+          if (event.keyCode === KeyCodes.ENTER) {
+            event.target.blur();
+          }
+        }}
+      />
+      {error && <ErrorText>{error}</ErrorText>}
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsTitle.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsTitle;

client/src/Project/IssueDetails/Tracking/Styles.js

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+import { Icon } from 'shared/components';
+
+export const TrackingLink = styled.div`
+  padding: 4px 4px 2px 0;
+  border-radius: 4px;
+  transition: background 0.1s;
+  ${mixin.clickable}
+  &:hover {
+    background: ${color.backgroundLight};
+  }
+`;
+
+export const Tracking = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const WatchIcon = styled(Icon)`
+  color: ${color.textMedium};
+`;
+
+export const Right = styled.div`
+  width: 90%;
+`;
+
+export const BarCont = styled.div`
+  height: 5px;
+  border-radius: 4px;
+  background: ${color.backgroundMedium};
+`;
+
+export const Bar = styled.div`
+  height: 5px;
+  border-radius: 4px;
+  background: ${color.primary};
+  transition: all 0.1s;
+  width: ${props => props.width}%;
+`;
+
+export const Values = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: 3px;
+  ${font.size(14.5)};
+`;
+
+export const ModalContents = styled.div`
+  padding: 20px 25px 25px;
+`;
+
+export const ModalTitle = styled.div`
+  padding-bottom: 14px;
+  ${font.medium}
+  ${font.size(20)}
+`;
+
+export const Inputs = styled.div`
+  display: flex;
+  margin: 20px -5px 30px;
+`;
+
+export const InputCont = styled.div`
+  margin: 0 5px;
+  width: 50%;
+`;
+
+export const InputLabel = styled.div`
+  padding-bottom: 5px;
+  color: ${color.textMedium};
+  ${font.medium};
+  ${font.size(13)};
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;

client/src/Project/IssueDetails/Tracking/index.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isNil } from 'lodash';
+
+import { InputDebounced, Modal, Button } from 'shared/components';
+import {
+  TrackingLink,
+  Tracking,
+  WatchIcon,
+  Right,
+  BarCont,
+  Bar,
+  Values,
+  ModalContents,
+  ModalTitle,
+  Inputs,
+  InputCont,
+  InputLabel,
+  Actions,
+} from './Styles';
+import { SectionTitle } from '../Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsTracking = ({ issue, updateIssue }) => {
+  const renderHourInput = fieldName => (
+    <InputDebounced
+      placeholder="Number"
+      filter={/^\d{0,6}$/}
+      value={isNil(issue[fieldName]) ? '' : issue[fieldName]}
+      onChange={stringValue => {
+        const value = stringValue.trim() ? Number(stringValue) : null;
+        updateIssue({ [fieldName]: value });
+      }}
+    />
+  );
+
+  const calculateTrackingBarWidth = () => {
+    const { timeSpent, timeRemaining, estimate } = issue;
+
+    if (!timeSpent) {
+      return 0;
+    }
+    if (isNil(timeRemaining) && isNil(estimate)) {
+      return 100;
+    }
+    if (!isNil(timeRemaining)) {
+      return (timeSpent / (timeSpent + timeRemaining)) * 100;
+    }
+    if (!isNil(estimate)) {
+      return Math.min((timeSpent / estimate) * 100, 100);
+    }
+  };
+
+  const renderRemainingOrEstimate = () => {
+    const { timeRemaining, estimate } = issue;
+
+    if (isNil(timeRemaining) && isNil(estimate)) {
+      return null;
+    }
+    if (!isNil(timeRemaining)) {
+      return <div>{`${timeRemaining}h remaining`}</div>;
+    }
+    if (!isNil(estimate)) {
+      return <div>{`${estimate}h estimated`}</div>;
+    }
+  };
+
+  const renderTrackingPreview = (onClick = () => {}) => (
+    <Tracking onClick={onClick}>
+      <WatchIcon type="stopwatch" size={26} top={-1} />
+      <Right>
+        <BarCont>
+          <Bar width={calculateTrackingBarWidth()} />
+        </BarCont>
+        <Values>
+          <div>{issue.timeSpent ? `${issue.timeSpent}h logged` : 'No time logged'}</div>
+          {renderRemainingOrEstimate()}
+        </Values>
+      </Right>
+    </Tracking>
+  );
+
+  const renderEstimate = () => (
+    <>
+      <SectionTitle>Original Estimate (hours)</SectionTitle>
+      {renderHourInput('estimate')}
+    </>
+  );
+
+  const renderTracking = () => (
+    <>
+      <SectionTitle>Time Tracking</SectionTitle>
+      <Modal
+        width={400}
+        renderLink={modal => <TrackingLink>{renderTrackingPreview(modal.open)}</TrackingLink>}
+        renderContent={modal => (
+          <ModalContents>
+            <ModalTitle>Time tracking</ModalTitle>
+            {renderTrackingPreview()}
+            <Inputs>
+              <InputCont>
+                <InputLabel>Time spent (hours)</InputLabel>
+                {renderHourInput('timeSpent')}
+              </InputCont>
+              <InputCont>
+                <InputLabel>Time remaining (hours)</InputLabel>
+                {renderHourInput('timeRemaining')}
+              </InputCont>
+            </Inputs>
+            <Actions>
+              <Button color="primary" onClick={modal.close}>
+                Done
+              </Button>
+            </Actions>
+          </ModalContents>
+        )}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {renderEstimate()}
+      {renderTracking()}
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsTracking.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsTracking;

client/src/Project/IssueDetails/Type/Styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+import { Button } from 'shared/components';
+
+export const TypeButton = styled(Button)`
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: ${color.textMedium};
+  ${font.size(13)}
+`;
+
+export const Type = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const TypeLabel = styled.div`
+  padding: 0 5px 0 7px;
+  ${font.size(15)}
+`;

client/src/Project/IssueDetails/Type/index.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { IssueType, IssueTypeCopy } from 'shared/constants/issues';
+import { IssueTypeIcon, Select } from 'shared/components';
+import { TypeButton, Type, TypeLabel } from './Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (
+  <Select
+    variant="empty"
+    dropdownWidth={150}
+    value={issue.type}
+    options={Object.values(IssueType).map(type => ({
+      value: type,
+      label: IssueTypeCopy[type],
+    }))}
+    onChange={type => updateIssue({ type })}
+    renderValue={({ value: type }) => (
+      <TypeButton color="empty" icon={<IssueTypeIcon type={type} />}>
+        {`${type}-${issue.id}`}
+      </TypeButton>
+    )}
+    renderOption={({ value: type }) => (
+      <Type key={type} onClick={() => updateIssue({ type })}>
+        <IssueTypeIcon type={type} top={1} />
+        <TypeLabel>{IssueTypeCopy[type]}</TypeLabel>
+      </Type>
+    )}
+  />
+);
+
+ProjectBoardIssueDetailsType.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsType;

client/src/Project/IssueDetails/Users/Styles.js

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+
+import { color, font, mixin } from 'shared/utils/styles';
+
+export const User = styled.div`
+  display: flex;
+  align-items: center;
+  ${mixin.clickable}
+  ${props =>
+    props.isSelectValue &&
+    css`
+      margin: 0 10px ${props.withBottomMargin ? 5 : 0}px 0;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: ${color.backgroundLight};
+      transition: background 0.1s;
+      &:hover {
+        background: ${color.backgroundMedium};
+      }
+    `}
+`;
+
+export const Username = styled.div`
+  padding: 0 3px 0 8px;
+  ${font.size(14.5)}
+`;

client/src/Project/IssueDetails/Users/index.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Avatar, Select, Icon } from 'shared/components';
+import { User, Username } from './Styles';
+import { SectionTitle } from '../Styles';
+
+const propTypes = {
+  issue: PropTypes.object.isRequired,
+  updateIssue: PropTypes.func.isRequired,
+  projectUsers: PropTypes.array.isRequired,
+};
+
+const ProjectBoardIssueDetailsUsers = ({ issue, updateIssue, projectUsers }) => {
+  const getUserById = userId => projectUsers.find(user => user.id === userId);
+
+  const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));
+
+  const renderUser = (user, isSelectValue, removeOptionValue) => (
+    <User
+      key={user.id}
+      isSelectValue={isSelectValue}
+      withBottomMargin={!!removeOptionValue}
+      onClick={() => removeOptionValue && removeOptionValue()}
+    >
+      <Avatar avatarUrl={user.avatarUrl} name={user.name} size={24} />
+      <Username>{user.name}</Username>
+      {removeOptionValue && <Icon type="close" top={1} />}
+    </User>
+  );
+
+  const renderAssignees = () => (
+    <>
+      <SectionTitle>Assignees</SectionTitle>
+      <Select
+        isMulti
+        variant="empty"
+        dropdownWidth={343}
+        placeholder="Unassigned"
+        value={issue.userIds}
+        options={userOptions}
+        onChange={userIds => {
+          updateIssue({ userIds, users: userIds.map(getUserById) });
+        }}
+        renderValue={({ value, removeOptionValue }) =>
+          renderUser(getUserById(value), true, removeOptionValue)
+        }
+        renderOption={({ value }) => renderUser(getUserById(value), false)}
+      />
+    </>
+  );
+
+  const renderReporter = () => (
+    <>
+      <SectionTitle>Reporter</SectionTitle>
+      <Select
+        variant="empty"
+        dropdownWidth={343}
+        value={issue.reporterId}
+        options={userOptions}
+        onChange={userId => updateIssue({ reporterId: userId })}
+        renderValue={({ value }) => renderUser(getUserById(value), true)}
+        renderOption={({ value }) => renderUser(getUserById(value))}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {renderAssignees()}
+      {renderReporter()}
+    </>
+  );
+};
+
+ProjectBoardIssueDetailsUsers.propTypes = propTypes;
+
+export default ProjectBoardIssueDetailsUsers;

client/src/Project/IssueDetails/index.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import api from 'shared/utils/api';
+import useApi from 'shared/hooks/api';
+import { PageError, CopyLinkButton, Button } from 'shared/components';
+import Loader from './Loader';
+import Type from './Type';
+import Feedback from './Feedback';
+import Delete from './Delete';
+import Title from './Title';
+import Description from './Description';
+import Comments from './Comments';
+import Status from './Status';
+import Users from './Users';
+import Priority from './Priority';
+import Tracking from './Tracking';
+import Dates from './Dates';
+import { TopActions, TopActionsRight, Content, Left, Right } from './Styles';
+
+const propTypes = {
+  issueId: PropTypes.string.isRequired,
+  projectUsers: PropTypes.array.isRequired,
+  fetchProject: PropTypes.func.isRequired,
+  updateLocalIssuesArray: PropTypes.func.isRequired,
+  modalClose: PropTypes.func.isRequired,
+};
+
+const ProjectBoardIssueDetails = ({
+  issueId,
+  projectUsers,
+  fetchProject,
+  updateLocalIssuesArray,
+  modalClose,
+}) => {
+  const [{ data, error, setLocalData }, fetchIssue] = useApi.get(`/issues/${issueId}`);
+
+  if (!data) return <Loader />;
+  if (error) return <PageError />;
+
+  const { issue } = data;
+
+  const updateLocalIssue = fields =>
+    setLocalData(currentData => ({ issue: { ...currentData.issue, ...fields } }));
+
+  const updateIssue = updatedFields => {
+    api.optimisticUpdate({
+      url: `/issues/${issueId}`,
+      updatedFields,
+      currentFields: issue,
+      setLocalData: fields => {
+        updateLocalIssue(fields);
+        updateLocalIssuesArray(issue.id, fields);
+      },
+    });
+  };
+
+  return (
+    <>
+      <TopActions>
+        <Type issue={issue} updateIssue={updateIssue} />
+        <TopActionsRight>
+          <Feedback />
+          <CopyLinkButton color="empty" />
+          <Delete issue={issue} fetchProject={fetchProject} modalClose={modalClose} />
+          <Button icon="close" iconSize={24} color="empty" onClick={modalClose} />
+        </TopActionsRight>
+      </TopActions>
+      <Content>
+        <Left>
+          <Title issue={issue} updateIssue={updateIssue} />
+          <Description issue={issue} updateIssue={updateIssue} />
+          <Comments issue={issue} fetchIssue={fetchIssue} />
+        </Left>
+        <Right>
+          <Status issue={issue} updateIssue={updateIssue} />
+          <Users issue={issue} updateIssue={updateIssue} projectUsers={projectUsers} />
+          <Priority issue={issue} updateIssue={updateIssue} />
+          <Tracking issue={issue} updateIssue={updateIssue} />
+          <Dates issue={issue} />
+        </Right>
+      </Content>
+    </>
+  );
+};
+
+ProjectBoardIssueDetails.propTypes = propTypes;
+
+export default ProjectBoardIssueDetails;