feature: update task details design

web/src/shared/components/DueDateManager/DueDateManager.stories.tsx

@@ -0,0 +1,32 @@
+import React, { useRef } from 'react';
+import { action } from '@storybook/addon-actions';
+import DueDateManager from '.';
+
+export default {
+  component: DueDateManager,
+  title: 'DueDateManager',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <DueDateManager
+      task={{
+        taskID: '1',
+        taskGroup: { name: 'General', taskGroupID: '1' },
+        name: 'Hello, world',
+        position: 1,
+        labels: [{ labelId: 'soft-skills', color: '#fff', active: true, name: 'Soft Skills' }],
+        description: 'hello!',
+        members: [{ userID: '1', displayName: 'Jordan Knott' }],
+      }}
+      onCancel={action('cancel')}
+      onDueDateChange={action('due date change')}
+    />
+  );
+};

web/src/shared/components/DueDateManager/Styles.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+display: flex
+  flex-direction: column;
+`;
+
+export const DueDatePickerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ConfirmAddDueDate = styled.div`
+  background-color: #5aac44;
+  box-shadow: none;
+  border: none;
+  color: #fff;
+  float: left;
+  margin: 0 4px 0 0;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  line-height: 20px;
+  padding: 6px 12px;
+  text-align: center;
+  border-radius: 3px;
+  font-size: 14px;
+`;
+
+export const CancelDueDate = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+`;
+
+export const ActionWrapper = styled.div`
+  padding-top: 8px;
+  width: 100%;
+  display: flex;
+`;

web/src/shared/components/DueDateManager/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import { Cross } from 'shared/icons';
+
+import { Wrapper, ActionWrapper, DueDatePickerWrapper, ConfirmAddDueDate, CancelDueDate } from './Styles';
+
+import 'react-datepicker/dist/react-datepicker.css';
+
+type DueDateManagerProps = {
+  task: Task;
+  onDueDateChange: (task: Task, newDueDate: Date) => void;
+  onCancel: () => void;
+};
+const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onCancel }) => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  return (
+    <Wrapper>
+      <DueDatePickerWrapper>
+        <DatePicker inline selected={startDate} onChange={date => setStartDate(date ?? new Date())} />
+      </DueDatePickerWrapper>
+      <ActionWrapper>
+        <ConfirmAddDueDate onClick={() => onDueDateChange(task, startDate)}>Save</ConfirmAddDueDate>
+        <CancelDueDate onClick={onCancel}>
+          <Cross size={16} color="#c2c6dc" />
+        </CancelDueDate>
+      </ActionWrapper>
+    </Wrapper>
+  );
+};
+
+export default DueDateManager;