Implemented issue create modal, further polish

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;