feat: implement task group actions

- allow sorting specifc task groups
- duplicate task group
- delete all tasks in task group

.github/ISSUE_TEMPLATE/bug_report.md

@@ -18,8 +18,6 @@ If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.
 
-Please send the Taskcafe web service logs if applicable.
-
 <!--
 
 Please read the contributing guide before working on any new pull requests!

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Request
-    url: https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas
-    about: Share ideas for new features
-  - name: Ask a Question
-    url: https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a
-    about: Ask the community for help

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,30 @@
+---
+name: Feature request
+about: Create a feature request to help improve Taskcafe
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
+
+<!--
+
+Be aware, not all feature requests will get accepted.
+
+Please read the contributing guide before working on any new pull requests!
+
+If you would like to ask a question regarding a possible bug or feature request, please
+join the Taskcafe discord - https://discord.gg/JkQDruh
+
+-->

.tmuxinator.yml

@@ -21,4 +21,4 @@ windows:
   - database:
       root: ./
       panes:
-        - pgcli postgres://taskcafe:taskcafe_test@localhost:8855/taskcafe
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe

CHANGELOG.md

@@ -9,7 +9,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Task sorting & filtering
 - Redesigned the Task Details UI
-- Implement task group actions (duplicate/delete all tasks/sort)
 
 ### Fixed
 - removed CORS middleware to fix security issue

CONTRIBUTING.md

@@ -6,9 +6,7 @@ Thanks for wanting to contribute to Taskcafe!
 
 So you want to contribute to Taskcafe? Great!
 
-If you have noticed a bug, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
+If you have noticed a bug or want to add a new feature, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
-
-If there is a [new feature you'd like added](https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas) or [have a question](https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a), please visit the [discussions section](https://github.com/JordanKnott/taskcafe/discussions)
 
 Alternatively you can join the [Taskcafe discord](https://discord.gg/JkQDruh) and ask in the #questions channel.
 
@@ -34,10 +32,6 @@ The `description` is a decriptive summary of the change the PR will make.
 - One PR per fix or feature
 - Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`
 
-### Unwanted PRs
-
-- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
-
 ### Git Commit Message Style
 
 This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.

Pipfile

@@ -9,4 +9,4 @@ verify_ssl = true
 pre-commit = "*"
 
 [requires]
-python_version = "3.9"
+python_version = "3.8"

Pipfile.lock

@@ -1,11 +1,11 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "76a59164ad995ef4d02794470696e6f1dd199ede126c2d92a2bc1011eb288f69"
+            "sha256": "83ec7c0175ee9763b335b1855d3d226b2fe799fcd4cafd8e08eb7294cb5ddd07"
         },
         "pipfile-spec": 6,
         "requires": {
-            "python_version": "3.9"
+            "python_version": "3.8"
         },
         "sources": [
             {
@@ -47,77 +47,64 @@
         },
         "identify": {
             "hashes": [
-                "sha256:70b638cf4743f33042bebb3b51e25261a0a10e80f978739f17e7fd4837664a66",
+                "sha256:69c4769f085badafd0e04b1763e847258cbbf6d898e8678ebffc91abdb86f6c6",
-                "sha256:9dfb63a2e871b807e3ba62f029813552a24b5289504f5b071dea9b041aee9fe4"
+                "sha256:d6ae6daee50ba1b493e9ca4d36a5edd55905d2cf43548fdc20b2a14edef102e7"
             ],
             "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==1.5.13"
+            "version": "==1.4.28"
         },
         "nodeenv": {
             "hashes": [
-                "sha256:5304d424c529c997bc888453aeaa6362d242b6b4631e90f3d4bf1b290f1c84a9",
+                "sha256:4b0b77afa3ba9b54f4b6396e60b0c83f59eaeb2d63dc3cc7a70f7f4af96c82bc"
-                "sha256:ab45090ae383b716c4ef89e690c41ff8c2b257b85b309f01f3654df3d084bd7c"
             ],
-            "version": "==1.5.0"
+            "version": "==1.4.0"
         },
         "pre-commit": {
             "hashes": [
-                "sha256:16212d1fde2bed88159287da88ff03796863854b04dc9f838a55979325a3d20e",
+                "sha256:1657663fdd63a321a4a739915d7d03baedd555b25054449090f97bb0cb30a915",
-                "sha256:399baf78f13f4de82a29b649afd74bef2c4e28eb4f021661fc7f29246e8c7a3a"
+                "sha256:e8b1315c585052e729ab7e99dcca5698266bedce9067d21dc909c23e3ceed626"
             ],
             "index": "pypi",
-            "version": "==2.10.1"
+            "version": "==2.6.0"
         },
         "pyyaml": {
             "hashes": [
-                "sha256:08682f6b72c722394747bddaf0aa62277e02557c0fd1c42cb853016a38f8dedf",
+                "sha256:06a0d7ba600ce0b2d2fe2e78453a470b5a6e000a985dd4a4e54e436cc36b0e97",
-                "sha256:0f5f5786c0e09baddcd8b4b45f20a7b5d61a7e7e99846e3c799b05c7c53fa696",
+                "sha256:240097ff019d7c70a4922b6869d8a86407758333f02203e0fc6ff79c5dcede76",
-                "sha256:129def1b7c1bf22faffd67b8f3724645203b79d8f4cc81f674654d9902cb4393",
+                "sha256:4f4b913ca1a7319b33cfb1369e91e50354d6f07a135f3b901aca02aa95940bd2",
-                "sha256:294db365efa064d00b8d1ef65d8ea2c3426ac366c0c4368d930bf1c5fb497f77",
+                "sha256:69f00dca373f240f842b2931fb2c7e14ddbacd1397d57157a9b005a6a9942648",
-                "sha256:3b2b1824fe7112845700f815ff6a489360226a5609b96ec2190a45e62a9fc922",
+                "sha256:73f099454b799e05e5ab51423c7bcf361c58d3206fa7b0d555426b1f4d9a3eaf",
-                "sha256:3bd0e463264cf257d1ffd2e40223b197271046d09dadf73a0fe82b9c1fc385a5",
+                "sha256:74809a57b329d6cc0fdccee6318f44b9b8649961fa73144a98735b0aaf029f1f",
-                "sha256:4465124ef1b18d9ace298060f4eccc64b0850899ac4ac53294547536533800c8",
+                "sha256:7739fc0fa8205b3ee8808aea45e968bc90082c10aef6ea95e855e10abf4a37b2",
-                "sha256:49d4cdd9065b9b6e206d0595fee27a96b5dd22618e7520c33204a4a3239d5b10",
+                "sha256:95f71d2af0ff4227885f7a6605c37fd53d3a106fcab511b8860ecca9fcf400ee",
-                "sha256:4e0583d24c881e14342eaf4ec5fbc97f934b999a6828693a99157fde912540cc",
+                "sha256:b8eac752c5e14d3eca0e6dd9199cd627518cb5ec06add0de9d32baeee6fe645d",
-                "sha256:5accb17103e43963b80e6f837831f38d314a0495500067cb25afab2e8d7a4018",
+                "sha256:cc8955cfbfc7a115fa81d85284ee61147059a753344bc51098f3ccd69b0d7e0c",
-                "sha256:607774cbba28732bfa802b54baa7484215f530991055bb562efbed5b2f20a45e",
+                "sha256:d13155f591e6fcc1ec3b30685d50bf0711574e2c0dfffd7644babf8b5102ca1a"
-                "sha256:6c78645d400265a062508ae399b60b8c167bf003db364ecb26dcab2bda048253",
-                "sha256:74c1485f7707cf707a7aef42ef6322b8f97921bd89be2ab6317fd782c2d53183",
-                "sha256:8c1be557ee92a20f184922c7b6424e8ab6691788e6d86137c5d93c1a6ec1b8fb",
-                "sha256:bb4191dfc9306777bc594117aee052446b3fa88737cd13b7188d0e7aa8162185",
-                "sha256:c20cfa2d49991c8b4147af39859b167664f2ad4561704ee74c1de03318e898db",
-                "sha256:d2d9808ea7b4af864f35ea216be506ecec180628aced0704e34aca0b040ffe46",
-                "sha256:dd5de0646207f053eb0d6c74ae45ba98c3395a571a2891858e87df7c9b9bd51b",
-                "sha256:e1d4970ea66be07ae37a3c2e48b5ec63f7ba6804bdddfdbd3cfd954d25a82e63",
-                "sha256:e4fac90784481d221a8e4b1162afa7c47ed953be40d31ab4629ae917510051df",
-                "sha256:fa5ae20527d8e831e8230cbffd9f8fe952815b2b7dae6ffec25318803a7528fc"
             ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3, 3.4, 3.5'",
+            "version": "==5.3.1"
-            "version": "==5.4.1"
         },
         "six": {
             "hashes": [
                 "sha256:30639c035cdb23534cd4aa2dd52c3bf48f06e5f4a941509c8bafd8ce11080259",
                 "sha256:8b74bedcbbbaca38ff6d7491d76f2b06b3592611af620f8426e82dddb04a5ced"
             ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
+            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2'",
             "version": "==1.15.0"
         },
         "toml": {
             "hashes": [
-                "sha256:806143ae5bfb6a3c6e736a764057db0e6a0e05e338b5630894a5f779cabb4f9b",
+                "sha256:926b612be1e5ce0634a2ca03470f95169cf16f939018233a670519cb4ac58b0f",
-                "sha256:b3bda1d108d5dd99f4a20d24d9c348e91c4db7ab1b749200bded2f839ccbe68f"
+                "sha256:bda89d5935c2eac546d648028b9901107a595863cb36bae0c73ac804a9b4ce88"
             ],
-            "markers": "python_version >= '2.6' and python_version not in '3.0, 3.1, 3.2, 3.3'",
+            "version": "==0.10.1"
-            "version": "==0.10.2"
         },
         "virtualenv": {
             "hashes": [
-                "sha256:147b43894e51dd6bba882cf9c282447f780e2251cd35172403745fc381a0a80d",
+                "sha256:43add625c53c596d38f971a465553f6318decc39d98512bc100fa1b1e839c8dc",
-                "sha256:2be72df684b74df0ea47679a7df93fd0e04e72520022c57b479d8f881485dbe3"
+                "sha256:e0305af10299a7fb0d69393d8f04cb2965dda9351140d11ac8db4e5e3970451b"
             ],
             "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==20.4.2"
+            "version": "==20.0.31"
         }
     },
     "develop": {}

README.md

@@ -9,43 +9,31 @@
     <img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
   </a>
   <a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
-    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
   </a>
   <a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
     <img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
   </a>
-  <a href="">
-    <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
-  </a>
 </p>
-
-  <p align="center">
-    <a href="https://github.com/JordanKnott/taskcafe/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
-    ·
-    <a href="https://github.com/JordanKnott/taskcafe/discussions/new?category=ideas">Request Feature</a>
-     ·
-    <a href="https://github.com/JordanKnott/taskcafe/discussions/new?category=q-a">Ask a Question</a>
-  </p>
 <p align="center">
 Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
 </p>
-<p align="center">
- This project is still in <strong>alpha development</strong></p>
 
-![Taskcafe](./.github/taskcafe_preview.png)
+**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
 
 ## Features
 
-The following features have been implemented:
+Currently Taskcafe only offers basic task tracking through a Kanban board.
 
-- Manage tasks through a Kanban board interface (set due dates, labels, add checklists)
+Currently you can do the following to tasks:
-- View all your current assigned tasks through the My Tasks view
-- Personal projects
-- Task comments and activity
 
-This project is still in active development, so some options may not be fully implemented yet.
+- Task sorting & filtering
-
+- Add colors & named labels
-**For updates on development, join the [Discord server](https://discord.gg/JkQDruh).**
+- Add due dates
+- Descriptions written in Markdown
+- Assign members
+- Checklists
+- Mark tasks as complete
 
 For a list of planned features, check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
 

conf/air.toml

@@ -1,47 +0,0 @@
-# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
-
-# Working directory
-# . or absolute path, please note that the directories following must be under root.
-root = "."
-tmp_dir = "tmp"
-
-[build]
-# Just plain old shell command. You could use `make` as well.
-cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
-# Binary file yields from `cmd`.
-bin = "dist/taskcafe"
-# Customize binary.
-full_bin = "./dist/taskcafe web"
-# Watch these filename extensions.
-include_ext = ["go"]
-# Ignore these filename extensions or directories.
-exclude_dir = ["dist", "frontend"]
-# Watch these directories if you specified.
-include_dir = []
-# Exclude files.
-exclude_file = []
-# This log file places in your tmp_dir.
-log = "air.log"
-# It's not necessary to trigger build each time file changes if it's too frequent.
-delay = 1000 # ms
-# Stop running old binary when build errors occur.
-stop_on_error = true
-# Send Interrupt signal before killing process (windows does not support this feature)
-send_interrupt = false
-# Delay after sending Interrupt signal
-kill_delay = 500 # ms
-
-[log]
-# Show log time
-time = false
-
-[color]
-# Customize each part's color. If no color found, use the raw app log.
-main = "magenta"
-watcher = "cyan"
-build = "yellow"
-runner = "green"
-
-[misc]
-# Delete tmp directory on exit
-clean_on_exit = true

conf/taskcafe.example.toml

@@ -1,5 +1,5 @@
-[server]
+[general]
-hostname = '0.0.0.0:3333'
+host = '0.0.0.0:3333'
 
 [email_notifications]
 enabled = true
@@ -17,9 +17,8 @@ user = 'taskcafe'
 password = 'taskcafe_test'
 
 [smtp]
-username = 'taskcafe@example.com'
+username = 'admin@example.com'
-password = ''
+password = 'example'
-from = 'no-reply@taskcafe.com'
+server = 'mail.example.com'
-host = 'localhost'
+port = 465
-port = 11500
+connection_security = 'STARTTLS'
-skip_verify = false

docker-compose.dev.yml

@@ -12,7 +12,7 @@ services:
     volumes:
       - taskcafe-postgres:/var/lib/postgresql/data
     ports:
-      - 8855:5432
+      - 5432:5432
   mailhog:
     image: mailhog/mailhog:latest
     restart: always

frontend/.eslintrc.json

@@ -31,9 +31,7 @@
     "@typescript-eslint/no-unused-vars": "off",
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "no-case-declarations": "off",
-    "no-plusplus": "off",
     "react/prop-types": 0,
-    "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",
     "import/extensions": [

frontend/package.json

@@ -6,16 +6,21 @@
     "@apollo/client": "^3.0.0-rc.8",
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-brands-svg-icons": "^5.12.1",
+    "@fortawesome/free-regular-svg-icons": "^5.12.1",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
     "@types/axios": "^0.14.0",
     "@types/color": "^3.0.1",
     "@types/date-fns": "^2.6.0",
-    "@types/dompurify": "^2.0.4",
-    "@types/emoji-mart": "^3.0.4",
     "@types/jest": "^24.0.0",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.0.0",
-    "@types/query-string": "^6.3.0",
     "@types/react": "^16.9.21",
     "@types/react-beautiful-dnd": "^12.1.1",
     "@types/react-datepicker": "^2.11.0",
@@ -32,38 +37,32 @@
     "apollo-link-http": "^1.5.16",
     "apollo-link-state": "^0.4.2",
     "apollo-utilities": "^1.3.3",
-    "axios": "^0.21.1",
+    "axios": "^0.19.2",
     "axios-auth-refresh": "^2.2.7",
     "color": "^3.1.2",
     "date-fns": "^2.14.0",
-    "dayjs": "^1.9.1",
-    "dompurify": "^2.2.6",
-    "emoji-mart": "^3.0.0",
-    "emoticon": "^3.2.0",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "history": "^4.10.1",
-    "immer": "^8.0.1",
+    "immer": "^6.0.3",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.15",
-    "node-emoji": "^1.10.0",
+    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
-    "query-string": "^6.13.7",
     "react": "^16.12.0",
     "react-autosize-textarea": "^7.0.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-datepicker": "^2.14.1",
     "react-dom": "^16.12.0",
-    "react-emoji-render": "^1.2.4",
     "react-hook-form": "^6.0.6",
     "react-markdown": "^4.3.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "react-select": "^3.1.0",
+    "rich-markdown-editor": "^10.6.5",
     "react-timeago": "^4.4.0",
     "react-toastify": "^6.0.8",
-    "rich-markdown-editor": "^10.6.5",
     "styled-components": "^5.0.1",
     "typescript": "~3.7.2"
   },
@@ -73,6 +72,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public",
     "generate": "graphql-codegen",
     "lint": "eslint --ext js,ts,tsx src",
     "tsc": "tsc"
@@ -97,6 +98,16 @@
     "@graphql-codegen/typescript": "^1.13.2",
     "@graphql-codegen/typescript-operations": "^1.13.2",
     "@graphql-codegen/typescript-react-apollo": "^1.13.2",
+    "@storybook/addon-actions": "^5.3.13",
+    "@storybook/addon-backgrounds": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.13",
+    "@storybook/addon-storysource": "^5.3.17",
+    "@storybook/addon-viewport": "^5.3.17",
+    "@storybook/addons": "^5.3.13",
+    "@storybook/preset-create-react-app": "^1.5.2",
+    "@storybook/react": "^5.3.13",
     "@typescript-eslint/eslint-plugin": "^2.20.0",
     "@typescript-eslint/parser": "^2.20.0",
     "eslint": "^6.8.0",

frontend/src/Admin/index.tsx

@@ -5,7 +5,6 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
   useUsersQuery,
   useDeleteUserAccountMutation,
-  useDeleteInvitedUserAccountMutation,
   useCreateUserAccountMutation,
   UsersDocument,
   UsersQuery,
@@ -82,7 +81,7 @@ const AddUserInput = styled(Input)`
 `;
 
 const InputError = styled.span`
-  color: ${props => props.theme.colors.danger};
+  color: rgba(${props => props.theme.colors.danger});
   font-size: 12px;
 `;
 
@@ -172,27 +171,16 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
 
 const AdminRoute = () => {
   useEffect(() => {
-    document.title = 'Admin | Taskcafé';
+    document.title = 'Taskcafé | Admin';
   }, []);
-  const { loading, data } = useUsersQuery({ fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useUsersQuery();
   const { showPopup, hidePopup } = usePopup();
   const { user } = useCurrentUser();
-  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
-    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.invitedUsers = cache.invitedUsers.filter(
-            u => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
-          );
-        }),
-      );
-    },
-  });
   const [deleteUser] = useDeleteUserAccountMutation({
     update: (client, response) => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
         produce(cache, draftCache => {
-          draftCache.users = cache.users.filter(u => u.id !== response.data?.deleteUserAccount.userAccount.id);
+          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
         }),
       );
     },
@@ -203,7 +191,7 @@ const AdminRoute = () => {
         query: UsersDocument,
       });
       const newData = produce(cacheData, (draftState: any) => {
-        draftState.users = [...draftState.users, { ...createData.data?.createUserAccount }];
+        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
       });
 
       client.writeQuery({
@@ -214,6 +202,9 @@ const AdminRoute = () => {
       });
     },
   });
+  if (loading) {
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
+  }
   if (data && user) {
     if (user.roles.org !== 'admin') {
       return <Redirect to="/" />;
@@ -224,16 +215,11 @@ const AdminRoute = () => {
         <Admin
           initialTab={0}
           users={data.users}
-          invitedUsers={data.invitedUsers}
           canInviteUser={user.roles.org === 'admin'}
           onInviteUser={NOOP}
           onUpdateUserPassword={() => {
             hidePopup();
           }}
-          onDeleteInvitedUser={invitedUserID => {
-            deleteInvitedUser({ variables: { invitedUserID } });
-            hidePopup();
-          }}
           onDeleteUser={(userID, newOwnerID) => {
             deleteUser({ variables: { userID, newOwnerID } });
             hidePopup();
@@ -256,7 +242,7 @@ const AdminRoute = () => {
       </>
     );
   }
-  return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
+  return <span>error</span>;
 };
 
 export default AdminRoute;

frontend/src/App/BaseStyles.ts

@@ -126,8 +126,4 @@ export default createGlobalStyle`
   }
 
   ${mixin.placeholderColor(color.textLight)}
-
-  .picker-hidden {
-    display: none;
-  }
 `;

frontend/src/App/ProjectFinder.tsx

@@ -1,239 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import styled from 'styled-components/macro';
-import { useGetProjectsQuery } from 'shared/generated/graphql';
-import { Link } from 'react-router-dom';
-import LoadingSpinner from 'shared/components/LoadingSpinner';
-import theme from './ThemeStyles';
-import ControlledInput from 'shared/components/ControlledInput';
-import { CaretDown, CaretRight } from 'shared/icons';
-import useStickyState from 'shared/hooks/useStickyState';
-import { usePopup } from 'shared/components/PopupMenu';
-
-const colors = [theme.colors.primary, theme.colors.secondary];
-
-const TeamContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin: 0 4px;
-`;
-
-const TeamTitle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const TeamTitleText = styled.span`
-  font-size: 14px;
-  font-weight: 700;
-`;
-const TeamProjects = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 8px;
-  margin-bottom: 4px;
-`;
-
-const TeamProjectLink = styled(Link)`
-  display: flex;
-  font-weight: 700;
-  height: 36px;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-  text-decoration: none;
-  user-select: none;
-`;
-
-const TeamProjectBackground = styled.div<{ idx: number }>`
-  background-image: url(null);
-  background-color: ${props => props.theme.colors.multiColors[props.idx % 5]};
-
-  background-size: cover;
-  background-position: 50%;
-  position: absolute;
-  width: 100%;
-  height: 36px;
-  opacity: 1;
-  border-radius: 3px;
-  &:before {
-    background: ${props => props.theme.colors.bg.secondary};
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0.88;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-`;
-const Empty = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const TeamProjectAvatar = styled.div<{ idx: number }>`
-  background-image: url(null);
-  background-color: ${props => props.theme.colors.multiColors[props.idx % 5]};
-
-  display: inline-block;
-  flex: 0 0 auto;
-  background-size: cover;
-  border-radius: 3px 0 0 3px;
-  height: 36px;
-  width: 36px;
-  position: relative;
-  opacity: 0.7;
-`;
-
-const TeamProjectContent = styled.div`
-  display: flex;
-  position: relative;
-  flex: 1;
-  width: 100%;
-  padding: 9px 0 9px 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const TeamProjectTitle = styled.div`
-  font-weight: 700;
-  display: block;
-  padding-right: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const TeamProjectContainer = styled.div`
-  box-sizing: border-box;
-  border-radius: 3px;
-  position: relative;
-  margin: 0 4px 4px 0;
-  min-width: 0;
-  &:hover ${TeamProjectTitle} {
-    color: ${props => props.theme.colors.text.secondary};
-  }
-  &:hover ${TeamProjectAvatar} {
-    opacity: 1;
-  }
-  &:hover ${TeamProjectBackground}:before {
-    opacity: 0.78;
-  }
-`;
-const Search = styled(ControlledInput)`
-  margin: 0 4px 4px 4px;
-  & input {
-    width: 100%;
-  }
-`;
-
-const Minify = styled.div`
-  height: 28px;
-  min-height: 28px;
-  min-width: 28px;
-  width: 28px;
-  border-radius: 6px;
-  user-select: none;
-
-  margin-right: 4px;
-
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  justify-content: center;
-  transition-duration: 0.2s;
-  transition-property: background, border, box-shadow, fill;
-  cursor: pointer;
-  svg {
-    fill: ${props => props.theme.colors.text.primary};
-    transition-duration: 0.2s;
-    transition-property: background, border, box-shadow, fill;
-  }
-
-  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
-  }
-`;
-
-const ProjectFinder = () => {
-  const { data } = useGetProjectsQuery({ fetchPolicy: 'cache-and-network' });
-  const [search, setSearch] = useState('');
-  const [minified, setMinified] = useStickyState<Array<string>>([], 'project_finder_minified');
-  const { hidePopup } = usePopup();
-  if (data) {
-    const { teams } = data;
-    const projects = data.projects.filter(p => {
-      if (search.trim() === '') return true;
-      return p.name.toLowerCase().startsWith(search.trim().toLowerCase());
-    });
-    const personalProjects = projects.filter(p => p.team === null);
-    const projectTeams = [
-      { id: 'personal', name: 'Personal', projects: personalProjects.sort((a, b) => a.name.localeCompare(b.name)) },
-      ...teams.map(team => {
-        return {
-          id: team.id,
-          name: team.name,
-          projects: projects
-            .filter(project => project.team && project.team.id === team.id)
-            .sort((a, b) => a.name.localeCompare(b.name)),
-        };
-      }),
-    ];
-    return (
-      <>
-        <Search
-          autoFocus
-          variant="alternate"
-          value={search}
-          onChange={e => setSearch(e.currentTarget.value)}
-          placeholder="Find projects by name..."
-        />
-        {projectTeams.map(team => {
-          const isMinified = minified.find(m => m === team.id);
-          if (team.projects.length === 0) return null;
-          return (
-            <TeamContainer key={team.id}>
-              <TeamTitle>
-                <TeamTitleText>{team.name}</TeamTitleText>
-                {isMinified ? (
-                  <Minify onClick={() => setMinified(prev => prev.filter(m => m !== team.id))}>
-                    <CaretRight width={16} height={16} />
-                  </Minify>
-                ) : (
-                  <Minify onClick={() => setMinified(prev => [...prev, team.id])}>
-                    <CaretDown width={16} height={16} />
-                  </Minify>
-                )}
-              </TeamTitle>
-              {!isMinified && (
-                <TeamProjects>
-                  {team.projects.map((project, idx) => (
-                    <TeamProjectContainer key={project.id}>
-                      <TeamProjectLink onClick={e => hidePopup()} to={`/projects/${project.id}`}>
-                        <TeamProjectBackground idx={idx} />
-                        <TeamProjectAvatar idx={idx} />
-                        <TeamProjectContent>
-                          <TeamProjectTitle>{project.name}</TeamProjectTitle>
-                        </TeamProjectContent>
-                      </TeamProjectLink>
-                    </TeamProjectContainer>
-                  ))}
-                </TeamProjects>
-              )}
-            </TeamContainer>
-          );
-        })}
-      </>
-    );
-  }
-  return (
-    <Empty>
-      <LoadingSpinner />
-    </Empty>
-  );
-};
-
-export default ProjectFinder;

frontend/src/App/Routes.tsx

@@ -1,21 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { Switch, Route, useHistory } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 import * as H from 'history';
 
 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
-import MyTasks from 'MyTasks';
-import Confirm from 'Confirm';
 import Projects from 'Projects';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
-import Register from 'Register';
+import Install from 'Install';
 import Profile from 'Profile';
 import styled from 'styled-components';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';
 
 const MainContent = styled.div`
   padding: 0 0 0 0;
@@ -26,56 +21,6 @@ const MainContent = styled.div`
   flex-grow: 1;
 `;
 
-type RefreshTokenResponse = {
-  accessToken: string;
-  setup?: null | { confirmToken: string };
-};
-
-const AuthorizedRoutes = () => {
-  const history = useHistory();
-  const [loading, setLoading] = useState(true);
-  const { setUser } = useCurrentUser();
-  useEffect(() => {
-    fetch('/auth/refresh_token', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 400) {
-        history.replace('/login');
-      } else {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, setup } = response;
-        if (setup) {
-          history.replace(`/register?confirmToken=${setup.confirmToken}`);
-        } else {
-          const claims: JWTToken = JwtDecode(accessToken);
-          const currentUser = {
-            id: claims.userId,
-            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-          };
-          setUser(currentUser);
-          setAccessToken(accessToken);
-        }
-      }
-      setLoading(false);
-    });
-  }, []);
-  return loading ? null : (
-    <Switch>
-      <MainContent>
-        <Route exact path="/" component={Dashboard} />
-        <Route exact path="/projects" component={Projects} />
-        <Route path="/projects/:projectID" component={Project} />
-        <Route path="/teams/:teamID" component={Teams} />
-        <Route path="/profile" component={Profile} />
-        <Route path="/admin" component={Admin} />
-        <Route path="/tasks" component={MyTasks} />
-      </MainContent>
-    </Switch>
-  );
-};
-
 type RoutesProps = {
   history: H.History;
 };
@@ -83,9 +28,15 @@ type RoutesProps = {
 const Routes: React.FC<RoutesProps> = () => (
   <Switch>
     <Route exact path="/login" component={Login} />
-    <Route exact path="/register" component={Register} />
+    <Route exact path="/install" component={Install} />
-    <Route exact path="/confirm" component={Confirm} />
+    <MainContent>
-    <AuthorizedRoutes />
+      <Route exact path="/" component={Dashboard} />
+      <Route exact path="/projects" component={Projects} />
+      <Route path="/projects/:projectID" component={Project} />
+      <Route path="/teams/:teamID" component={Teams} />
+      <Route path="/profile" component={Profile} />
+      <Route path="/admin" component={Admin} />
+    </MainContent>
   </Switch>
 );
 

frontend/src/App/ThemeStyles.ts

@@ -1,28 +1,26 @@
 import { DefaultTheme } from 'styled-components';
-import Color from 'color';
 
 const theme: DefaultTheme = {
   borderRadius: {
-    primary: '3x',
+    primary: '3px',
     alternate: '6px',
   },
   colors: {
-    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
+    primary: '115, 103, 240',
-    primary: 'rgb(115, 103, 240)',
+    secondary: '216, 93, 216',
-    secondary: 'rgb(216, 93, 216)',
+    alternate: '65, 69, 97',
-    alternate: 'rgb(65, 69, 97)',
+    success: '40, 199, 111',
-    success: 'rgb(40, 199, 111)',
+    danger: '234, 84, 85',
-    danger: 'rgb(234, 84, 85)',
+    warning: '255, 159, 67',
-    warning: 'rgb(255, 159, 67)',
+    dark: '30, 30, 30',
-    dark: 'rgb(30, 30, 30)',
     text: {
-      primary: 'rgb(194, 198, 220)',
+      primary: '194, 198, 220',
-      secondary: 'rgb(255, 255, 255)',
+      secondary: '255, 255, 255',
     },
-    border: 'rgb(65, 69, 97)',
+    border: '65, 69, 97',
     bg: {
-      primary: 'rgb(16, 22, 58)',
+      primary: '16, 22, 58',
-      secondary: 'rgb(38, 44, 73)',
+      secondary: '38, 44, 73',
     },
   },
 };

frontend/src/App/TopNavbar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
+import styled from 'styled-components/macro';
 import { ProfileMenu } from 'shared/components/DropdownMenu';
 import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
 import { useHistory } from 'react-router';
@@ -8,18 +9,164 @@ import {
   RoleCode,
   useTopNavbarQuery,
   useDeleteProjectMutation,
+  useGetProjectsQuery,
   GetProjectsDocument,
 } from 'shared/generated/graphql';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { History } from 'history';
 import produce from 'immer';
+import { Link } from 'react-router-dom';
 import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
+import NOOP from 'shared/utils/noop';
 import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
-import theme from './ThemeStyles';
-import ProjectFinder from './ProjectFinder';
 
+const TeamContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 8px;
+`;
+
+const TeamTitle = styled.h3`
+  font-size: 14px;
+  font-weight: 700;
+`;
+
+const TeamProjects = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+  margin-bottom: 4px;
+`;
+
+const TeamProjectLink = styled(Link)`
+  display: flex;
+  font-weight: 700;
+  height: 36px;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  text-decoration: none;
+  user-select: none;
+`;
+
+const TeamProjectBackground = styled.div<{ color: string }>`
+  background-image: url(null);
+  background-color: ${props => props.color};
+
+  background-size: cover;
+  background-position: 50%;
+  position: absolute;
+  width: 100%;
+  height: 36px;
+  opacity: 1;
+  border-radius: 3px;
+  &:before {
+    background: rgba(${props => props.theme.colors.bg.secondary});
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0.88;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+`;
+
+const TeamProjectAvatar = styled.div<{ color: string }>`
+  background-image: url(null);
+  background-color: ${props => props.color};
+
+  display: inline-block;
+  flex: 0 0 auto;
+  background-size: cover;
+  border-radius: 3px 0 0 3px;
+  height: 36px;
+  width: 36px;
+  position: relative;
+  opacity: 0.7;
+`;
+
+const TeamProjectContent = styled.div`
+  display: flex;
+  position: relative;
+  flex: 1;
+  width: 100%;
+  padding: 9px 0 9px 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const TeamProjectTitle = styled.div`
+  font-weight: 700;
+  display: block;
+  padding-right: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const TeamProjectContainer = styled.div`
+  box-sizing: border-box;
+  border-radius: 3px;
+  position: relative;
+  margin: 0 4px 4px 0;
+  min-width: 0;
+  &:hover ${TeamProjectTitle} {
+    color: rgba(${props => props.theme.colors.text.secondary});
+  }
+  &:hover ${TeamProjectAvatar} {
+    opacity: 1;
+  }
+  &:hover ${TeamProjectBackground}:before {
+    opacity: 0.78;
+  }
+`;
+
+const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+
+const ProjectFinder = () => {
+  const { loading, data } = useGetProjectsQuery();
+  if (loading) {
+    return <span>loading</span>;
+  }
+  if (data) {
+    const { projects, teams } = data;
+    const projectTeams = teams.map(team => {
+      return {
+        id: team.id,
+        name: team.name,
+        projects: projects.filter(project => project.team.id === team.id),
+      };
+    });
+    return (
+      <>
+        {projectTeams.map(team => (
+          <TeamContainer key={team.id}>
+            <TeamTitle>{team.name}</TeamTitle>
+            <TeamProjects>
+              {team.projects.map((project, idx) => (
+                <TeamProjectContainer key={project.id}>
+                  <TeamProjectLink to={`/projects/${project.id}`}>
+                    <TeamProjectBackground color={colors[idx % 5]} />
+                    <TeamProjectAvatar color={colors[idx % 5]} />
+                    <TeamProjectContent>
+                      <TeamProjectTitle>{project.name}</TeamProjectTitle>
+                    </TeamProjectContent>
+                  </TeamProjectLink>
+                </TeamProjectContainer>
+              ))}
+            </TeamProjects>
+          </TeamContainer>
+        ))}
+      </>
+    );
+  }
+  return <span>error</span>;
+};
 type ProjectPopupProps = {
-  history: any;
+  history: History<History.PoorMansUnknown>;
   name: string;
   projectID: string;
 };
@@ -34,7 +181,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
 
       const newData = produce(cacheData, (draftState: any) => {
         draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
+          (project: any) => project.id !== deleteData.data.deleteProject.project.id,
         );
       });
 
@@ -83,12 +230,10 @@ type GlobalTopNavbarProps = {
   menuType?: Array<MenuItem>;
   onChangeRole?: (userID: string, roleCode: RoleCode) => void;
   projectMembers?: null | Array<TaskUser>;
-  projectInvitedMembers?: null | Array<InvitedUser>;
   onSaveProjectName?: (projectName: string) => void;
   onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
   onSetTab?: (tab: number) => void;
   onRemoveFromBoard?: (userID: string) => void;
-  onRemoveInvitedFromBoard?: (email: string) => void;
 };
 
 const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
@@ -101,10 +246,8 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   name,
   popupContent,
   projectMembers,
-  projectInvitedMembers,
   onInviteUser,
   onSaveProjectName,
-  onRemoveInvitedFromBoard,
   onRemoveFromBoard,
 }) => {
   const { user, setUserRoles, setUser } = useCurrentUser();
@@ -181,7 +324,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
             />
           ))}
         </NotificationPopup>,
-        { width: 415, borders: false, diamondColor: theme.colors.primary },
+        { width: 415, borders: false, diamondColor: '#7367f0' },
       );
     }
   };
@@ -190,34 +333,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
     return null;
   }
   const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          onRemoveFromBoard={() => {
-            if (onRemoveInvitedFromBoard) {
-              onRemoveInvitedFromBoard(member.email);
-            }
-          }}
-          invited
-          user={{
-            id: member.email,
-            fullName: member.email,
-            bio: 'Invited',
-            profileIcon: {
-              bgColor: '#000',
-              url: null,
-              initials: member.email.charAt(0),
-            },
-          }}
-          bio=""
-        />,
-      );
-    }
-  };
-
   const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
     const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
     const warning =
@@ -267,7 +382,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         canEditProjectName={userIsTeamOrProjectAdmin}
         canInviteUser={userIsTeamOrProjectAdmin}
         onMemberProfile={onMemberProfile}
-        onInvitedMemberProfile={onInvitedMemberProfile}
         onInviteUser={onInviteUser}
         onChangeRole={onChangeRole}
         onChangeProjectOwner={onChangeProjectOwner}
@@ -277,11 +391,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         onDashboardClick={() => {
           history.push('/');
         }}
-        onMyTasksClick={() => {
-          history.push('/tasks');
-        }}
         projectMembers={projectMembers}
-        projectInvitedMembers={projectInvitedMembers}
         onProfileClick={onProfileClick}
         onSaveName={onSaveProjectName}
         onOpenSettings={onOpenSettings}

frontend/src/App/index.tsx

@@ -28,13 +28,13 @@ const StyledContainer = styled(ToastContainer).attrs({
     color: #fff;
   }
   .Toastify__toast--error {
-    background: ${props => props.theme.colors.danger};
+    background: rgba(${props => props.theme.colors.danger});
   }
   .Toastify__toast--warning {
-    background: ${props => props.theme.colors.warning};
+    background: rgba(${props => props.theme.colors.warning});
   }
   .Toastify__toast--success {
-    background: ${props => props.theme.colors.success};
+    background: rgba(${props => props.theme.colors.success});
   }
   .Toastify__toast-body {
   }
@@ -46,8 +46,13 @@ const StyledContainer = styled(ToastContainer).attrs({
 `;
 
 const history = createBrowserHistory();
+type RefreshTokenResponse = {
+  accessToken: string;
+  isInstalled: boolean;
+};
 
 const App = () => {
+  const [loading, setLoading] = useState(true);
   const [user, setUser] = useState<CurrentUserRaw | null>(null);
   const setUserRoles = (roles: CurrentUserRoles) => {
     if (user) {
@@ -58,6 +63,32 @@ const App = () => {
     }
   };
 
+  useEffect(() => {
+    fetch('/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      if (status === 400) {
+        history.replace('/login');
+      } else {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, isInstalled } = response;
+        const claims: JWTToken = jwtDecode(accessToken);
+        const currentUser = {
+          id: claims.userId,
+          roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+        };
+        setUser(currentUser);
+        setAccessToken(accessToken);
+        if (!isInstalled) {
+          history.replace('/install');
+        }
+      }
+      setLoading(false);
+    });
+  }, []);
+
   return (
     <>
       <UserContext.Provider value={{ user, setUser, setUserRoles }}>
@@ -66,7 +97,13 @@ const App = () => {
           <BaseStyles />
           <Router history={history}>
             <PopupProvider>
+              {loading ? (
+                <div>loading</div>
+              ) : (
+                <>
                   <Routes history={history} />
+                </>
+              )}
             </PopupProvider>
           </Router>
           <StyledContainer

frontend/src/Auth/index.tsx

@@ -52,21 +52,8 @@ const Auth = () => {
     }).then(async x => {
       const { status } = x;
       if (status === 200) {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, setup } = response;
-        if (setup) {
-          history.replace(`/register?confirmToken=${setup.confirmToken}`);
-        } else {
-          const claims: JWTToken = JwtDecode(accessToken);
-          const currentUser = {
-            id: claims.userId,
-            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-          };
-          setUser(currentUser);
-          setAccessToken(accessToken);
         history.replace('/projects');
       }
-      }
     });
   }, []);
 

frontend/src/Confirm/index.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Confirm from 'shared/components/Confirm';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
-import { useCurrentUser } from 'App/context';
-
-const UsersConfirm = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  const { setUser } = useCurrentUser();
-  return (
-    <Container>
-      <LoginWrapper>
-        <Confirm
-          hasConfirmToken={params.confirmToken !== undefined}
-          onConfirmUser={setFailed => {
-            fetch('/auth/confirm', {
-              method: 'POST',
-              body: JSON.stringify({
-                confirmToken: params.confirmToken,
-              }),
-            })
-              .then(async x => {
-                const { status } = x;
-                if (status === 200) {
-                  const response = await x.json();
-                  const { accessToken } = response;
-                  const claims: JWTToken = JwtDecode(accessToken);
-                  const currentUser = {
-                    id: claims.userId,
-                    roles: {
-                      org: claims.orgRole,
-                      teams: new Map<string, string>(),
-                      projects: new Map<string, string>(),
-                    },
-                  };
-                  setUser(currentUser);
-                  setAccessToken(accessToken);
-                  history.push('/');
-                } else {
-                  setFailed();
-                }
-              })
-              .catch(() => {
-                setFailed();
-              });
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersConfirm;

frontend/src/Install/index.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useContext } from 'react';
+import axios from 'axios';
+import Register from 'shared/components/Register';
+import { useHistory } from 'react-router';
+import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
+import UserContext from 'App/context';
+import jwtDecode from 'jwt-decode';
+import { Container, LoginWrapper } from './Styles';
+
+const Install = () => {
+  const history = useHistory();
+  const { setUser } = useContext(UserContext);
+  useEffect(() => {
+    fetch('/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      const response: RefreshTokenResponse = await x.json();
+      const { isInstalled } = response;
+      if (status === 200 && isInstalled) {
+        history.replace('/projects');
+      }
+    });
+  }, []);
+  return (
+    <Container>
+      <LoginWrapper>
+        <Register
+          onSubmit={(data, setComplete, setError) => {
+            const accessToken = getAccessToken();
+            if (data.password !== data.password_confirm) {
+              setError('password', { type: 'error', message: 'Passwords must match' });
+              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
+            } else {
+              axios
+                .post(
+                  '/auth/install',
+                  {
+                    user: {
+                      username: data.username,
+                      roleCode: 'admin',
+                      email: data.email,
+                      password: data.password,
+                      initials: data.initials,
+                      fullname: data.fullname,
+                    },
+                  },
+                  {
+                    headers: {
+                      Authorization: `Bearer ${accessToken}`,
+                    },
+                  },
+                )
+                .then(async x => {
+                  const { status } = x;
+                  if (status === 400) {
+                    history.replace('/login');
+                  } else {
+                    const response: RefreshTokenResponse = await x.data;
+                    const { accessToken: newToken, isInstalled } = response;
+                    const claims: JWTToken = jwtDecode(accessToken);
+                    const currentUser = {
+                      id: claims.userId,
+                      roles: {
+                        org: claims.orgRole,
+                        teams: new Map<string, string>(),
+                        projects: new Map<string, string>(),
+                      },
+                    };
+                    setUser(currentUser);
+                    setAccessToken(accessToken);
+                    if (!isInstalled) {
+                      history.replace('/install');
+                    }
+                  }
+                  history.push('/projects');
+                });
+            }
+            setComplete(true);
+          }}
+        />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default Install;

frontend/src/MyTasks/MyTasksSort.tsx

@@ -1,145 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
-import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
-import Input from 'shared/components/ControlledInput';
-import { Popup, usePopup } from 'shared/components/PopupMenu';
-import produce from 'immer';
-import { mixin } from 'shared/utils/styles';
-import Member from 'shared/components/Member';
-import { MyTasksSort } from 'shared/generated/graphql';
-
-const FilterMember = styled(Member)`
-  margin: 2px 0;
-  &:hover {
-    cursor: pointer;
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const Labels = styled.ul`
-  list-style: none;
-  margin: 0 8px;
-  padding: 0;
-  margin-bottom: 8px;
-`;
-
-export const Label = styled.li`
-  position: relative;
-`;
-
-export const CardLabel = styled.span<{ active: boolean; color: string }>`
-  ${props =>
-    props.active &&
-    css`
-      margin-left: 4px;
-      box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
-      border-radius: 3px;
-    `}
-
-  cursor: pointer;
-  font-weight: 700;
-  margin: 0 0 4px;
-  min-height: 20px;
-  padding: 6px 12px;
-  position: relative;
-  transition: padding 85ms, margin 85ms, box-shadow 85ms;
-  background-color: ${props => props.color};
-  color: #fff;
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 31px;
-`;
-
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
-`;
-
-const ActiveIcon = styled(Checkmark)`
-  position: absolute;
-  right: 4px;
-`;
-
-const ItemIcon = styled.div`
-  position: absolute;
-`;
-
-const TaskNameInput = styled(Input)`
-  margin: 0;
-`;
-
-const ActionItemLine = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;
-
-type MyTasksSortProps = {
-  sort: MyTasksSort;
-  onChangeSort: (sort: MyTasksSort) => void;
-};
-
-const MyTasksSortPopup: React.FC<MyTasksSortProps> = ({ sort: initialSort, onChangeSort }) => {
-  const [sort, setSort] = useState(initialSort);
-  const handleChangeSort = (f: MyTasksSort) => {
-    setSort(f);
-    onChangeSort(f);
-  };
-
-  return (
-    <>
-      <Popup tab={0} title={null}>
-        <ActionsList>
-          <ActionItem onClick={() => handleChangeSort(MyTasksSort.None)}>
-            {sort === MyTasksSort.None && <ActiveIcon width={16} height={16} />}
-            <ActionTitle>None</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleChangeSort(MyTasksSort.Project)}>
-            {sort === MyTasksSort.Project && <ActiveIcon width={16} height={16} />}
-            <ActionTitle>Project</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => handleChangeSort(MyTasksSort.DueDate)}>
-            {sort === MyTasksSort.DueDate && <ActiveIcon width={16} height={16} />}
-            <ActionTitle>Due Date</ActionTitle>
-          </ActionItem>
-        </ActionsList>
-      </Popup>
-    </>
-  );
-};
-
-export default MyTasksSortPopup;

frontend/src/MyTasks/MyTasksStatus.tsx

@@ -1,151 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Checkmark } from 'shared/icons';
-import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
-import { MyTasksStatus } from 'shared/generated/graphql';
-import { Popup } from 'shared/components/PopupMenu';
-
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionExtraMenuContainer = styled.div`
-  visibility: hidden;
-  position: absolute;
-  left: 100%;
-  top: -4px;
-  padding-left: 2px;
-  width: 100%;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-  &:hover ${ActionExtraMenuContainer} {
-    visibility: visible;
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-export const ActionExtraMenu = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-
-  padding: 5px;
-  padding-top: 8px;
-  border-radius: 5px;
-  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
-
-  color: #c2c6dc;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-`;
-
-export const ActionExtraMenuItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-const ActionExtraMenuSeparator = styled.li`
-  color: ${props => props.theme.colors.text.primary};
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-`;
-
-const ActiveIcon = styled(Checkmark)`
-  position: absolute;
-`;
-
-type MyTasksStatusProps = {
-  status: MyTasksStatus;
-  onChangeStatus: (status: MyTasksStatus) => void;
-};
-
-const MyTasksStatusPopup: React.FC<MyTasksStatusProps> = ({ status: initialStatus, onChangeStatus }) => {
-  const [status, setStatus] = useState(initialStatus);
-  const handleStatusChange = (f: MyTasksStatus) => {
-    setStatus(f);
-    onChangeStatus(f);
-  };
-  return (
-    <Popup tab={0} title={null}>
-      <ActionsList>
-        <ActionItem onClick={() => handleStatusChange(MyTasksStatus.Incomplete)}>
-          {status === MyTasksStatus.Incomplete && <ActiveIcon width={12} height={12} />}
-          <ActionTitle>Incomplete Tasks</ActionTitle>
-        </ActionItem>
-        <ActionItem>
-          {status !== MyTasksStatus.Incomplete && status !== MyTasksStatus.All && <ActiveIcon width={12} height={12} />}
-          <ActionTitle>Compelete Tasks</ActionTitle>
-          <ActionExtraMenuContainer>
-            <ActionExtraMenu>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteAll)}>
-                {status === MyTasksStatus.CompleteAll && <ActiveIcon width={12} height={12} />}
-                <ActionTitle>All completed tasks</ActionTitle>
-              </ActionExtraMenuItem>
-              <ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteToday)}>
-                {status === MyTasksStatus.CompleteToday && <ActiveIcon width={12} height={12} />}
-                <ActionTitle>Today</ActionTitle>
-              </ActionExtraMenuItem>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteYesterday)}>
-                {status === MyTasksStatus.CompleteYesterday && <ActiveIcon width={12} height={12} />}
-
-                <ActionTitle>Yesterday</ActionTitle>
-              </ActionExtraMenuItem>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteOneWeek)}>
-                {status === MyTasksStatus.CompleteOneWeek && <ActiveIcon width={12} height={12} />}
-                <ActionTitle>1 week</ActionTitle>
-              </ActionExtraMenuItem>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteTwoWeek)}>
-                {status === MyTasksStatus.CompleteTwoWeek && <ActiveIcon width={12} height={12} />}
-                <ActionTitle>2 weeks</ActionTitle>
-              </ActionExtraMenuItem>
-              <ActionExtraMenuItem onClick={() => handleStatusChange(MyTasksStatus.CompleteThreeWeek)}>
-                {status === MyTasksStatus.CompleteThreeWeek && <ActiveIcon width={12} height={12} />}
-                <ActionTitle>3 weeks</ActionTitle>
-              </ActionExtraMenuItem>
-            </ActionExtraMenu>
-          </ActionExtraMenuContainer>
-        </ActionItem>
-        <ActionItem onClick={() => handleStatusChange(MyTasksStatus.All)}>
-          {status === MyTasksStatus.All && <ActiveIcon width={12} height={12} />}
-          <ActionTitle>All Tasks</ActionTitle>
-        </ActionItem>
-      </ActionsList>
-    </Popup>
-  );
-};
-
-export default MyTasksStatusPopup;

frontend/src/MyTasks/TaskEntry.tsx

@@ -1,415 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import styled, { css } from 'styled-components/macro';
-import dayjs from 'dayjs';
-import { CheckCircleOutline, CheckCircle, Cross, Briefcase, ChevronRight } from 'shared/icons';
-import { mixin } from 'shared/utils/styles';
-
-const RIGHT_ROW_WIDTH = 327;
-const TaskName = styled.div<{ focused: boolean }>`
-  flex: 0 1 auto;
-  min-width: 1px;
-  overflow: hidden;
-  margin-right: 4px;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  height: 20px;
-  padding: 0 1px;
-
-  max-height: 100%;
-  position: relative;
-  &:hover {
-    ${props =>
-      !props.focused &&
-      css`
-        border-color: #9ca6af !important;
-        border: 1px solid ${props.theme.colors.primary} !important;
-      `}
-  }
-`;
-
-const DueDateCell = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  flex-grow: 1;
-`;
-
-const CellPlaceholder = styled.div<{ width: number }>`
-  min-width: ${p => p.width}px;
-  width: ${p => p.width}px;
-`;
-const DueDateCellDisplay = styled.div`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex-grow: 1;
-  height: 100%;
-`;
-
-const DueDateCellLabel = styled.div`
-  align-items: center;
-  color: ${props => props.theme.colors.text.primary};
-
-  font-size: 11px;
-  flex: 0 1 auto;
-  min-width: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  flex-flow: row wrap;
-  white-space: pre-wrap;
-`;
-
-const DueDateRemoveButton = styled.div`
-  align-items: center;
-  bottom: 0;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  padding-left: 4px;
-  padding-right: 8px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  visibility: hidden;
-  svg {
-    fill: ${props => props.theme.colors.text.primary};
-  }
-  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
-  }
-`;
-const TaskGroupItemCell = styled.div<{ width: number; focused: boolean }>`
-  width: ${p => p.width}px;
-  background: transparent;
-  position: relative;
-
-  border: 1px solid #414561;
-  justify-content: space-between;
-  margin-right: -1px;
-  z-index: 0;
-  padding: 0 8px;
-  align-items: center;
-  display: flex;
-  height: 37px;
-  overflow: hidden;
-  &:hover ${DueDateRemoveButton} {
-    visibility: visible;
-  }
-  &:hover ${TaskName} {
-    ${props =>
-      !props.focused &&
-      css`
-        background: ${props.theme.colors.bg.secondary};
-        border: 1px solid ${mixin.darken(props.theme.colors.bg.secondary, 0.25)};
-        border-radius: 2px;
-        cursor: text;
-      `}
-  }
-`;
-
-const TaskGroupItem = styled.div`
-  padding-right: 24px;
-  contain: style;
-  display: flex;
-  margin-bottom: -1px;
-  margin-top: -1px;
-  height: 37px;
-  &:hover {
-    background-color: #161d31;
-  }
-  & ${TaskGroupItemCell}:first-child {
-    position: absolute;
-    padding: 0 4px 0 0;
-    margin-left: 24px;
-    left: 0;
-    flex: 1 1 auto;
-    min-width: 1px;
-    border-right: 0;
-    border-left: 0;
-  }
-  & ${TaskGroupItemCell}:last-child {
-    border-right: 0;
-  }
-`;
-
-const TaskItemComplete = styled.div`
-  flex: 0 0 auto;
-  margin: 0 3px 0 0;
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  height: 16px;
-  justify-content: center;
-  overflow: visible;
-  width: 16px;
-  cursor: pointer;
-  svg {
-    transition: all 0.2 ease;
-  }
-  &:hover svg {
-    fill: ${props => props.theme.colors.primary};
-  }
-`;
-
-const TaskDetailsButton = styled.div`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  font-size: 12px;
-  height: 100%;
-  justify-content: flex-end;
-  margin-left: auto;
-  opacity: 0;
-  padding-left: 4px;
-  color: ${props => props.theme.colors.text.primary};
-  svg {
-    fill: ${props => props.theme.colors.text.primary};
-  }
-`;
-
-const TaskDetailsArea = styled.div`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  flex: 1 0 auto;
-  height: 100%;
-  margin-right: 24px;
-  &:hover ${TaskDetailsButton} {
-    opacity: 1;
-  }
-`;
-
-const TaskDetailsWorkpace = styled(Briefcase)`
-  flex: 0 0 auto;
-  margin-right: 8px;
-`;
-const TaskDetailsLabel = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const TaskDetailsChevron = styled(ChevronRight)`
-  margin-left: 4px;
-  flex: 0 0 auto;
-`;
-
-const TaskNameShadow = styled.div`
-  box-sizing: border-box;
-  min-height: 1em;
-  overflow: hidden;
-  visibility: hidden;
-  white-space: pre;
-  border: 0;
-  font-size: 13px;
-  line-height: 20px;
-  margin: 0;
-  min-width: 20px;
-  padding: 0 4px;
-  text-rendering: optimizeSpeed;
-`;
-
-const TaskNameInput = styled.textarea`
-  white-space: pre;
-  background: transparent;
-  border-radius: 0;
-  display: block;
-  color: ${props => props.theme.colors.text.primary};
-  height: 100%;
-  outline: 0;
-  overflow: hidden;
-  position: absolute;
-  resize: none;
-  top: 0;
-  width: 100%;
-  border: 0;
-  font-size: 13px;
-  line-height: 20px;
-  margin: 0;
-  min-width: 20px;
-  padding: 0 4px;
-  text-rendering: optimizeSpeed;
-`;
-
-const ProjectPill = styled.div`
-  background-color: ${props => props.theme.colors.bg.primary};
-  text-overflow: ellipsis;
-  border-radius: 10px;
-  box-sizing: border-box;
-  display: block;
-  font-size: 12px;
-  font-weight: 400;
-  height: 20px;
-  line-height: 20px;
-  overflow: hidden;
-  padding: 0 8px;
-  text-align: left;
-  white-space: nowrap;
-`;
-
-const ProjectPillContents = styled.div`
-  align-items: center;
-  display: flex;
-`;
-
-const ProjectPillName = styled.span`
-  flex: 0 1 auto;
-  min-width: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const ProjectPillColor = styled.svg`
-  overflow: hidden;
-  flex: 0 0 auto;
-  margin-right: 4px;
-  fill: #0064fb;
-  height: 12px;
-  width: 12px;
-`;
-
-type TaskEntryProps = {
-  name: string;
-  dueDate?: string | null;
-  onEditName: (name: string) => void;
-  project: string;
-  hasTime: boolean;
-  autoFocus?: boolean;
-  onEditProject: ($target: React.RefObject<HTMLElement>) => void;
-  onToggleComplete: (complete: boolean) => void;
-  complete: boolean;
-  onEditDueDate: ($target: React.RefObject<HTMLElement>) => void;
-  onTaskDetails: () => void;
-  onRemoveDueDate: () => void;
-};
-
-const TaskEntry: React.FC<TaskEntryProps> = ({
-  autoFocus = false,
-  onToggleComplete,
-  onEditName,
-  onTaskDetails,
-  name: initialName,
-  complete,
-  project,
-  dueDate,
-  hasTime,
-  onEditProject,
-  onEditDueDate,
-  onRemoveDueDate,
-}) => {
-  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
-  const [focused, setFocused] = useState(autoFocus);
-  const [name, setName] = useState(initialName);
-  useEffect(() => {
-    setName(initialName);
-  }, [initialName]);
-  const $projects = useRef<HTMLDivElement>(null);
-  const $dueDate = useRef<HTMLDivElement>(null);
-  const $nameInput = useRef<HTMLTextAreaElement>(null);
-  return (
-    <TaskGroupItem>
-      <TaskGroupItemCell focused={focused} width={leftRow}>
-        <TaskItemComplete onClick={() => onToggleComplete(!complete)}>
-          {complete ? <CheckCircle width={16} height={16} /> : <CheckCircleOutline width={16} height={16} />}
-        </TaskItemComplete>
-        <TaskName focused={focused}>
-          <TaskNameShadow>{name}</TaskNameShadow>
-          <TaskNameInput
-            autoFocus={autoFocus}
-            onFocus={() => setFocused(true)}
-            ref={$nameInput}
-            onBlur={() => {
-              setFocused(false);
-              onEditName(name);
-            }}
-            onKeyDown={e => {
-              if (e.keyCode === 13) {
-                e.preventDefault();
-                if ($nameInput.current) {
-                  $nameInput.current.blur();
-                }
-              }
-            }}
-            onChange={e => setName(e.currentTarget.value)}
-            wrap="off"
-            value={name}
-            rows={1}
-          />
-        </TaskName>
-        <TaskDetailsArea onClick={() => onTaskDetails()}>
-          <TaskDetailsButton>
-            <TaskDetailsWorkpace width={16} height={16} />
-            <TaskDetailsLabel>
-              Details
-              <TaskDetailsChevron width={12} height={12} />
-            </TaskDetailsLabel>
-          </TaskDetailsButton>
-        </TaskDetailsArea>
-      </TaskGroupItemCell>
-      <CellPlaceholder width={leftRow} />
-      <TaskGroupItemCell width={120} focused={false} ref={$dueDate}>
-        <DueDateCell onClick={() => onEditDueDate($dueDate)}>
-          <DueDateCellDisplay>
-            <DueDateCellLabel>
-              {dueDate ? dayjs(dueDate).format(hasTime ? 'MMM D [at] h:mm A' : 'MMM D') : ''}
-            </DueDateCellLabel>
-          </DueDateCellDisplay>
-        </DueDateCell>
-        {dueDate && (
-          <DueDateRemoveButton onClick={() => onRemoveDueDate()}>
-            <Cross width={12} height={12} />
-          </DueDateRemoveButton>
-        )}
-      </TaskGroupItemCell>
-      <TaskGroupItemCell width={120} focused={false} ref={$projects}>
-        <ProjectPill
-          onClick={() => {
-            onEditProject($projects);
-          }}
-        >
-          <ProjectPillContents>
-            <ProjectPillColor viewBox="0 0 24 24" focusable={false}>
-              <path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
-            </ProjectPillColor>
-            <ProjectPillName>{project}</ProjectPillName>
-          </ProjectPillContents>
-        </ProjectPill>
-      </TaskGroupItemCell>
-      <TaskGroupItemCell width={50} focused={false} />
-    </TaskGroupItem>
-  );
-};
-export default TaskEntry;
-type NewTaskEntryProps = {
-  onClick: () => void;
-};
-const AddTaskLabel = styled.span`
-  font-size: 14px;
-  position: relative;
-
-  color: ${props => props.theme.colors.text.primary};
-
-  justify-content: space-between;
-  z-index: 0;
-  padding: 0 8px;
-  align-items: center;
-  display: flex;
-  height: 37px;
-  flex: 1 1;
-  cursor: pointer;
-  margin-left: 24px;
-`;
-
-const NewTaskEntry: React.FC<NewTaskEntryProps> = ({ onClick }) => {
-  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
-  return (
-    <TaskGroupItem>
-      <AddTaskLabel onClick={onClick}>Add task...</AddTaskLabel>
-    </TaskGroupItem>
-  );
-};
-
-export { NewTaskEntry };

frontend/src/MyTasks/index.tsx

@@ -1,913 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import Details from 'Projects/Project/Details';
-import {
-  useMyTasksQuery,
-  MyTasksSort,
-  MyTasksStatus,
-  useCreateTaskMutation,
-  MyTasksQuery,
-  MyTasksDocument,
-  useUpdateTaskNameMutation,
-  useSetTaskCompleteMutation,
-  useUpdateTaskDueDateMutation,
-} from 'shared/generated/graphql';
-
-import { Route, useRouteMatch, useHistory, RouteComponentProps } from 'react-router-dom';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-import NOOP from 'shared/utils/noop';
-import { Sort, Cogs, CaretDown, CheckCircle, CaretRight, CheckCircleOutline } from 'shared/icons';
-import Select from 'react-select';
-import { editorColourStyles } from 'shared/components/Select';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import DueDateManager from 'shared/components/DueDateManager';
-import dayjs from 'dayjs';
-import useStickyState from 'shared/hooks/useStickyState';
-import MyTasksSortPopup from './MyTasksSort';
-import MyTasksStatusPopup from './MyTasksStatus';
-import TaskEntry from './TaskEntry';
-
-type TaskRouteProps = {
-  taskID: string;
-};
-
-function prettyStatus(status: MyTasksStatus) {
-  switch (status) {
-    case MyTasksStatus.All:
-      return 'All tasks';
-    case MyTasksStatus.Incomplete:
-      return 'Incomplete tasks';
-    case MyTasksStatus.CompleteAll:
-      return 'All completed tasks';
-    case MyTasksStatus.CompleteToday:
-      return 'Completed tasks: today';
-    case MyTasksStatus.CompleteYesterday:
-      return 'Completed tasks: yesterday';
-    case MyTasksStatus.CompleteOneWeek:
-      return 'Completed tasks: 1 week';
-    case MyTasksStatus.CompleteTwoWeek:
-      return 'Completed tasks: 2 weeks';
-    case MyTasksStatus.CompleteThreeWeek:
-      return 'Completed tasks: 3 weeks';
-    default:
-      return 'unknown tasks';
-  }
-}
-
-function prettySort(sort: MyTasksSort) {
-  if (sort === MyTasksSort.None) {
-    return 'Sort';
-  }
-  return `Sort: ${sort.charAt(0) +
-    sort
-      .slice(1)
-      .toLowerCase()
-      .replace(/_/gi, ' ')}`;
-}
-
-type Group = {
-  id: string;
-  name: string | null;
-  tasks: Array<Task>;
-};
-const DueDateEditorLabel = styled.div`
-  align-items: center;
-  color: ${props => props.theme.colors.text.primary};
-
-  font-size: 11px;
-  padding: 0 8px;
-  flex: 0 1 auto;
-  min-width: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: flex;
-  flex-flow: row wrap;
-  white-space: pre-wrap;
-  height: 35px;
-`;
-
-const ProjectBar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  padding: 0 12px;
-`;
-
-const ProjectActions = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-  color: ${props => props.theme.colors.text.primary};
-
-  &:not(:last-of-type) {
-    margin-right: 16px;
-  }
-
-  &:hover {
-    color: ${props => props.theme.colors.text.secondary};
-  }
-  ${props =>
-    props.disabled &&
-    css`
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-    `}
-`;
-
-const ProjectActionText = styled.span`
-  padding-left: 4px;
-`;
-
-type ProjectActionProps = {
-  onClick?: (target: React.RefObject<HTMLElement>) => void;
-  disabled?: boolean;
-};
-
-const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
-  const $container = useRef<HTMLDivElement>(null);
-  const handleClick = () => {
-    if (onClick) {
-      onClick($container);
-    }
-  };
-  return (
-    <ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
-      {children}
-    </ProjectActionWrapper>
-  );
-};
-
-const EditorPositioner = styled.div<{ top: number; left: number }>`
-  position: absolute;
-  top: ${p => p.top}px;
-  justify-content: flex-end;
-  margin-left: -100vw;
-  z-index: 10000;
-  align-items: flex-start;
-  display: flex;
-  font-size: 13px;
-  height: 0;
-  position: fixed;
-  width: 100vw;
-  left: ${p => p.left}px;
-`;
-
-const EditorPositionerContents = styled.div`
-  position: relative;
-`;
-
-const EditorContainer = styled.div<{ width: number }>`
-  border: 1px solid ${props => props.theme.colors.primary};
-  background: ${props => props.theme.colors.bg.secondary};
-  position: relative;
-  width: ${p => p.width}px;
-`;
-
-const EditorCell = styled.div<{ width: number }>`
-  display: flex;
-  width: ${p => p.width}px;
-`;
-
-// TABLE
-const VerticalScoller = styled.div`
-  contain: strict;
-  flex: 1 1 auto;
-  overflow-x: hidden;
-  padding-bottom: 1px;
-  position: relative;
-
-  min-height: 1px;
-  overflow-y: auto;
-`;
-
-const VerticalScollerInner = styled.div`
-  min-height: 100%;
-  overflow-y: hidden;
-  min-width: 1px;
-  overflow-x: auto;
-`;
-
-const VerticalScollerInnerBar = styled.div`
-  display: flex;
-  margin: 0 24px;
-  margin-bottom: 1px;
-  border-top: 1px solid #414561;
-`;
-
-const TableContents = styled.div`
-  box-sizing: border-box;
-  display: inline-block;
-  margin-bottom: 32px;
-  min-width: 100%;
-`;
-
-const TaskGroupContainer = styled.div``;
-
-const TaskGroupHeader = styled.div`
-  height: 50px;
-  width: 100%;
-`;
-
-const TaskGroupItems = styled.div`
-  overflow: unset;
-`;
-
-const ProjectPill = styled.div`
-  background-color: ${props => props.theme.colors.bg.primary};
-  text-overflow: ellipsis;
-  border-radius: 10px;
-  box-sizing: border-box;
-  display: block;
-  font-size: 12px;
-  font-weight: 400;
-  height: 20px;
-  line-height: 20px;
-  overflow: hidden;
-  padding: 0 8px;
-  text-align: left;
-  white-space: nowrap;
-`;
-
-const ProjectPillContents = styled.div`
-  align-items: center;
-  display: flex;
-`;
-
-const ProjectPillName = styled.span`
-  flex: 0 1 auto;
-  min-width: 1px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: ${props => props.theme.colors.text.primary};
-`;
-
-const ProjectPillColor = styled.svg`
-  overflow: hidden;
-  flex: 0 0 auto;
-  margin-right: 4px;
-  fill: #0064fb;
-  height: 12px;
-  width: 12px;
-`;
-
-const SingleValue = ({ children, ...props }: any) => {
-  return (
-    <ProjectPill>
-      <ProjectPillContents>
-        <ProjectPillColor viewBox="0 0 24 24" focusable={false}>
-          <path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
-        </ProjectPillColor>
-        <ProjectPillName>{children}</ProjectPillName>
-      </ProjectPillContents>
-    </ProjectPill>
-  );
-};
-
-const OptionWrapper = styled.div`
-  align-items: center;
-  display: flex;
-  height: 40px;
-  padding: 0 16px;
-  cursor: pointer;
-  &:hover {
-    background: #414561;
-  }
-`;
-
-const OptionLabel = styled.div`
-  align-items: baseline;
-  display: flex;
-  min-width: 1px;
-`;
-
-const OptionTitle = styled.div`
-  min-width: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const OptionSubTitle = styled.div`
-  color: ${props => props.theme.colors.text.primary};
-  font-size: 11px;
-  margin-left: 8px;
-  min-width: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const Option = ({ innerProps, data }: any) => {
-  return (
-    <OptionWrapper {...innerProps}>
-      <OptionLabel>
-        <OptionTitle>{data.label}</OptionTitle>
-        <OptionSubTitle>{data.label}</OptionSubTitle>
-      </OptionLabel>
-    </OptionWrapper>
-  );
-};
-
-const TaskGroupHeaderContents = styled.div<{ width: number }>`
-  width: ${p => p.width}px;
-  left: 0;
-  position: absolute;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  margin-left: 24px;
-  line-height: 20px;
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 30px;
-  padding-right: 32px;
-  position: relative;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-`;
-
-const TaskGroupMinify = styled.div`
-  height: 28px;
-  min-height: 28px;
-  min-width: 28px;
-  width: 28px;
-  border-radius: 6px;
-  user-select: none;
-
-  margin-right: 4px;
-
-  align-items: center;
-  box-sizing: border-box;
-  display: inline-flex;
-  justify-content: center;
-  transition-duration: 0.2s;
-  transition-property: background, border, box-shadow, fill;
-  cursor: pointer;
-  svg {
-    fill: ${props => props.theme.colors.text.primary};
-    transition-duration: 0.2s;
-    transition-property: background, border, box-shadow, fill;
-  }
-
-  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
-  }
-`;
-const TaskGroupName = styled.div`
-  flex-grow: 1;
-  align-items: center;
-  display: flex;
-  height: 50px;
-  min-width: 1px;
-  color: ${props => props.theme.colors.text.secondary};
-  font-weight: 400;
-`;
-
-// HEADER
-const ScrollContainer = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  min-height: 1px;
-  position: relative;
-  width: 100%;
-`;
-
-const Row = styled.div`
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  height: 37px;
-  position: relative;
-`;
-
-const RowHeaderLeft = styled.div<{ width: number }>`
-  width: ${p => p.width}px;
-
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
-  height: 37px;
-  left: 0;
-  position: absolute;
-  z-index: 100;
-`;
-const RowHeaderLeftInner = styled.div`
-  align-items: stretch;
-  color: ${props => props.theme.colors.text.primary};
-  display: flex;
-  flex: 1 0 auto;
-  font-size: 12px;
-  margin-right: -1px;
-  padding-left: 24px;
-`;
-const RowHeaderLeftName = styled.div`
-  position: relative;
-  align-items: center;
-  border-right: 1px solid #414561;
-  border-top: 1px solid #414561;
-  border-bottom: 1px solid #414561;
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: space-between;
-`;
-
-const RowHeaderLeftNameText = styled.div`
-  align-items: center;
-  display: flex;
-`;
-
-const RowHeaderRight = styled.div<{ left: number }>`
-  left: ${p => p.left}px;
-  right: 0px;
-  height: 37px;
-  position: absolute;
-`;
-
-const RowScrollable = styled.div`
-  min-width: 1px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  width: 100%;
-`;
-
-const RowScrollContent = styled.div`
-  align-items: center;
-  display: inline-flex;
-  height: 37px;
-  width: 100%;
-`;
-
-const RowHeaderRightContainer = styled.div`
-  padding-right: 24px;
-
-  align-items: stretch;
-  display: flex;
-  flex: 1 0 auto;
-  height: 37px;
-  justify-content: flex-end;
-  margin: -1px 0;
-`;
-
-const ItemWrapper = styled.div<{ width: number }>`
-  width: ${p => p.width}px;
-  align-items: center;
-  border: 1px solid #414561;
-  border-bottom: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 12px;
-  justify-content: space-between;
-  margin-right: -1px;
-  padding: 0 8px;
-  position: relative;
-  color: ${props => props.theme.colors.text.primary};
-  border-bottom: 1px solid #414561;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.text.secondary};
-  }
-`;
-const ItemsContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  & ${ItemWrapper}:last-child {
-    border-right: 0;
-  }
-`;
-
-const ItemName = styled.div`
-  align-items: center;
-  display: flex;
-  overflow: hidden;
-`;
-type DateEditorState = {
-  open: boolean;
-  pos: { top: number; left: number } | null;
-  task: null | Task;
-};
-
-type ProjectEditorState = {
-  open: boolean;
-  pos: { top: number; left: number } | null;
-  task: null | Task;
-};
-const RIGHT_ROW_WIDTH = 327;
-
-const Projects = () => {
-  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [filters, setFilters] = useStickyState<{ sort: MyTasksSort; status: MyTasksStatus }>(
-    { sort: MyTasksSort.None, status: MyTasksStatus.All },
-    'my_tasks_filter',
-  );
-  const { data } = useMyTasksQuery({
-    variables: { sort: filters.sort, status: filters.status },
-    fetchPolicy: 'cache-and-network',
-  });
-  const [dateEditor, setDateEditor] = useState<DateEditorState>({ open: false, pos: null, task: null });
-  const onEditDueDate = (task: Task, $target: React.RefObject<HTMLElement>) => {
-    if ($target && $target.current && data) {
-      const pos = $target.current.getBoundingClientRect();
-      setDateEditor({
-        open: true,
-        pos: {
-          top: pos.top,
-          left: pos.right,
-        },
-        task,
-      });
-    }
-  };
-  const [newTask, setNewTask] = useState<{ open: boolean }>({ open: false });
-  const match = useRouteMatch();
-  const history = useHistory();
-  const [projectEditor, setProjectEditor] = useState<ProjectEditorState>({ open: false, pos: null, task: null });
-  const onEditProject = ($target: React.RefObject<HTMLElement>) => {
-    if ($target && $target.current) {
-      const pos = $target.current.getBoundingClientRect();
-      setProjectEditor({
-        open: true,
-        pos: {
-          top: pos.top,
-          left: pos.right,
-        },
-        task: null,
-      });
-    }
-  };
-  const { showPopup, hidePopup } = usePopup();
-  const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
-  const $editorContents = useRef<HTMLDivElement>(null);
-  const $dateContents = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (dateEditor.open && $dateContents.current && dateEditor.task) {
-      showPopup(
-        $dateContents,
-        <Popup tab={0} title={null}>
-          <DueDateManager
-            task={dateEditor.task}
-            onCancel={() => null}
-            onDueDateChange={(task, dueDate, hasTime) => {
-              if (dateEditor.task) {
-                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate, hasTime } });
-                setDateEditor(prev => ({ ...prev, task: { ...task, dueDate: dueDate.toISOString(), hasTime } }));
-              }
-            }}
-            onRemoveDueDate={task => {
-              if (dateEditor.task) {
-                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate: null, hasTime: false } });
-                setDateEditor(prev => ({ ...prev, task: { ...task, hasTime: false } }));
-              }
-            }}
-          />
-        </Popup>,
-        { onClose: () => setDateEditor({ open: false, task: null, pos: null }) },
-      );
-    }
-  }, [dateEditor]);
-
-  const [createTask] = useCreateTaskMutation({
-    update: (client, newTaskData) => {
-      updateApolloCache<MyTasksQuery>(
-        client,
-        MyTasksDocument,
-        cache =>
-          produce(cache, draftCache => {
-            if (newTaskData.data) {
-              draftCache.myTasks.tasks.unshift(newTaskData.data.createTask);
-            }
-          }),
-        { status: MyTasksStatus.All, sort: MyTasksSort.None },
-      );
-    },
-  });
-
-  const [setTaskComplete] = useSetTaskCompleteMutation();
-  const [updateTaskName] = useUpdateTaskNameMutation();
-  const [minified, setMinified] = useStickyState<Array<string>>([], 'my_tasks_minified');
-  useOnOutsideClick(
-    $editorContents,
-    projectEditor.open,
-    () =>
-      setProjectEditor({
-        open: false,
-        task: null,
-        pos: null,
-      }),
-    null,
-  );
-  if (data) {
-    const groups: Array<Group> = [];
-    if (filters.sort === MyTasksSort.None) {
-      groups.push({
-        id: 'recently-assigned',
-        name: 'Recently Assigned',
-        tasks: data.myTasks.tasks.map(task => ({
-          ...task,
-          labels: [],
-          position: 0,
-        })),
-      });
-    } else {
-      let { tasks } = data.myTasks;
-      if (filters.sort === MyTasksSort.DueDate) {
-        const group: Group = { id: 'due_date', name: null, tasks: [] };
-        data.myTasks.tasks.forEach(task => {
-          if (task.dueDate) {
-            group.tasks.push({ ...task, labels: [], position: 0 });
-          }
-        });
-        groups.push(group);
-        tasks = tasks.filter(t => t.dueDate === null);
-      }
-      const projects = new Map<string, Array<Task>>();
-      data.myTasks.projects.forEach(p => {
-        if (!projects.has(p.projectID)) {
-          projects.set(p.projectID, []);
-        }
-        const prev = projects.get(p.projectID);
-        const task = tasks.find(t => t.id === p.taskID);
-        if (prev && task) {
-          projects.set(p.projectID, [...prev, { ...task, labels: [], position: 0 }]);
-        }
-      });
-      for (const [id, pTasks] of projects) {
-        const project = data.projects.find(c => c.id === id);
-        if (pTasks.length === 0) continue;
-        if (project) {
-          groups.push({
-            id,
-            name: project.name,
-            tasks: pTasks.sort((a, b) => {
-              if (a.dueDate === null && b.dueDate === null) return 0;
-              if (a.dueDate === null && b.dueDate !== null) return 1;
-              if (a.dueDate !== null && b.dueDate === null) return -1;
-              const first = dayjs(a.dueDate);
-              const second = dayjs(b.dueDate);
-              if (first.isSame(second, 'minute')) return 0;
-              if (first.isAfter(second)) return -1;
-              return 1;
-            }),
-          });
-        }
-      }
-      groups.sort((a, b) => {
-        if (a.name === null && b.name === null) return 0;
-        if (a.name === null) return -1;
-        if (b.name === null) return 1;
-        return a.name.localeCompare(b.name);
-      });
-    }
-    return (
-      <>
-        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
-        <ProjectBar>
-          <ProjectActions />
-          <ProjectActions>
-            <ProjectAction
-              onClick={$target => {
-                showPopup(
-                  $target,
-                  <MyTasksStatusPopup
-                    status={filters.status}
-                    onChangeStatus={status => {
-                      setFilters(prev => ({ ...prev, status }));
-                      hidePopup();
-                    }}
-                  />,
-                  { width: 185 },
-                );
-              }}
-            >
-              <CheckCircleOutline width={13} height={13} />
-              <ProjectActionText>{prettyStatus(filters.status)}</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction
-              onClick={$target => {
-                showPopup(
-                  $target,
-                  <MyTasksSortPopup
-                    sort={filters.sort}
-                    onChangeSort={sort => {
-                      setFilters(prev => ({ ...prev, sort }));
-                      hidePopup();
-                    }}
-                  />,
-                  { width: 185 },
-                );
-              }}
-            >
-              <Sort width={13} height={13} />
-              <ProjectActionText>{prettySort(filters.sort)}</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <Cogs width={13} height={13} />
-              <ProjectActionText>Customize</ProjectActionText>
-            </ProjectAction>
-          </ProjectActions>
-        </ProjectBar>
-        <ScrollContainer>
-          <Row>
-            <RowHeaderLeft width={leftRow}>
-              <RowHeaderLeftInner>
-                <RowHeaderLeftName>
-                  <RowHeaderLeftNameText>Task name</RowHeaderLeftNameText>
-                </RowHeaderLeftName>
-              </RowHeaderLeftInner>
-            </RowHeaderLeft>
-            <RowHeaderRight left={leftRow}>
-              <RowScrollable>
-                <RowScrollContent>
-                  <RowHeaderRightContainer>
-                    <ItemsContainer>
-                      <ItemWrapper width={120}>
-                        <ItemName>Due date</ItemName>
-                      </ItemWrapper>
-                      <ItemWrapper width={120}>
-                        <ItemName>Project</ItemName>
-                      </ItemWrapper>
-                      <ItemWrapper width={50} />
-                    </ItemsContainer>
-                  </RowHeaderRightContainer>
-                </RowScrollContent>
-              </RowScrollable>
-            </RowHeaderRight>
-          </Row>
-          <VerticalScoller>
-            <VerticalScollerInner>
-              <TableContents>
-                {groups.map(group => {
-                  const isMinified = minified.find(m => m === group.id) ?? false;
-                  return (
-                    <TaskGroupContainer key={group.id}>
-                      {group.name && (
-                        <TaskGroupHeader>
-                          <TaskGroupHeaderContents width={leftRow}>
-                            <TaskGroupMinify
-                              onClick={() => {
-                                setMinified(prev => {
-                                  if (isMinified) {
-                                    return prev.filter(c => c !== group.id);
-                                  }
-                                  return [...prev, group.id];
-                                });
-                              }}
-                            >
-                              {isMinified ? (
-                                <CaretRight width={16} height={16} />
-                              ) : (
-                                <CaretDown width={16} height={16} />
-                              )}
-                            </TaskGroupMinify>
-                            <TaskGroupName>{group.name}</TaskGroupName>
-                          </TaskGroupHeaderContents>
-                        </TaskGroupHeader>
-                      )}
-                      <TaskGroupItems>
-                        {!isMinified &&
-                          group.tasks.map(task => {
-                            const projectID = data.myTasks.projects.find(t => t.taskID === task.id)?.projectID;
-                            const projectName = data.projects.find(p => p.id === projectID)?.name;
-                            return (
-                              <TaskEntry
-                                key={task.id}
-                                complete={task.complete ?? false}
-                                onToggleComplete={complete => {
-                                  setTaskComplete({ variables: { taskID: task.id, complete } });
-                                }}
-                                onTaskDetails={() => {
-                                  history.push(`${match.url}/c/${task.id}`);
-                                }}
-                                onRemoveDueDate={() => {
-                                  updateTaskDueDate({ variables: { taskID: task.id, dueDate: null, hasTime: false } });
-                                }}
-                                project={projectName ?? 'none'}
-                                dueDate={task.dueDate}
-                                hasTime={task.hasTime ?? false}
-                                name={task.name}
-                                onEditName={name => updateTaskName({ variables: { taskID: task.id, name } })}
-                                onEditProject={onEditProject}
-                                onEditDueDate={$target => onEditDueDate({ ...task, position: 0, labels: [] }, $target)}
-                              />
-                            );
-                          })}
-                      </TaskGroupItems>
-                    </TaskGroupContainer>
-                  );
-                })}
-              </TableContents>
-            </VerticalScollerInner>
-          </VerticalScoller>
-        </ScrollContainer>
-        {dateEditor.open && dateEditor.pos !== null && dateEditor.task && (
-          <EditorPositioner left={dateEditor.pos.left} top={dateEditor.pos.top}>
-            <EditorPositionerContents ref={$dateContents}>
-              <EditorContainer width={120}>
-                <EditorCell width={120}>
-                  <DueDateEditorLabel>
-                    {dateEditor.task.dueDate
-                      ? dayjs(dateEditor.task.dueDate).format(dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D')
-                      : ''}
-                  </DueDateEditorLabel>
-                </EditorCell>
-              </EditorContainer>
-            </EditorPositionerContents>
-          </EditorPositioner>
-        )}
-        {projectEditor.open && projectEditor.pos !== null && (
-          <EditorPositioner left={projectEditor.pos.left} top={projectEditor.pos.top}>
-            <EditorPositionerContents ref={$editorContents}>
-              <EditorContainer width={300}>
-                <EditorCell width={300}>
-                  <Select
-                    components={{ SingleValue, Option }}
-                    autoFocus
-                    styles={editorColourStyles}
-                    options={[{ label: 'hello', value: '1' }]}
-                    onInputChange={(query, { action }) => {
-                      if (action === 'input-change') {
-                        setMenuOpen(true);
-                      }
-                    }}
-                    onChange={() => setMenuOpen(false)}
-                    onBlur={() => setMenuOpen(false)}
-                    menuIsOpen={menuOpen}
-                  />
-                </EditorCell>
-              </EditorContainer>
-            </EditorPositionerContents>
-          </EditorPositioner>
-        )}
-        <Route
-          path={`${match.path}/c/:taskID`}
-          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
-            <Details
-              refreshCache={NOOP}
-              availableMembers={[]}
-              projectURL={`${match.url}`}
-              taskID={routeProps.match.params.taskID}
-              onTaskNameChange={(updatedTask, newName) => {
-                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
-              }}
-              onTaskDescriptionChange={(updatedTask, newDescription) => {
-                /*
-                updateTaskDescription({
-                  variables: { taskID: updatedTask.id, description: newDescription },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    updateTaskDescription: {
-                      __typename: 'Task',
-                      id: updatedTask.id,
-                      description: newDescription,
-                    },
-                  },
-                });
-                */
-              }}
-              onDeleteTask={deletedTask => {
-                // deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}`);
-              }}
-              onOpenAddLabelPopup={(task, $targetRef) => {
-                /*
-                taskLabelsRef.current = task.labels;
-                showPopup(
-                  $targetRef,
-                  <LabelManagerEditor
-                    onLabelToggle={labelID => {
-                      toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
-                    }}
-                    labelColors={data.labelColors}
-                    labels={labelsRef}
-                    taskLabels={taskLabelsRef}
-                    projectID={projectID}
-                  />,
-                );
-                */
-              }}
-            />
-          )}
-        />
-      </>
-    );
-  }
-  return null;
-};
-
-export default Projects;

frontend/src/Profile/index.tsx

@@ -3,20 +3,11 @@ import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import {
+import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
-  useMeQuery,
-  useClearProfileAvatarMutation,
-  useUpdateUserPasswordMutation,
-  useUpdateUserInfoMutation,
-  MeQuery,
-  MeDocument,
-} from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import { toast } from 'react-toastify';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
 
 const MainContent = styled.div`
   padding: 0 0 50px 80px;
@@ -28,7 +19,6 @@ const Projects = () => {
   const $fileUpload = useRef<HTMLInputElement>(null);
   const [clearProfileAvatar] = useClearProfileAvatarMutation();
   const { user } = useCurrentUser();
-  const [updateUserInfo] = useUpdateUserInfoMutation();
   const [updateUserPassword] = useUpdateUserPasswordMutation();
   const { loading, data, refetch } = useMeQuery();
   useEffect(() => {
@@ -79,13 +69,6 @@ const Projects = () => {
             toast('Password was changed!');
             done();
           }}
-          onChangeUserInfo={(d, done) => {
-            updateUserInfo({
-              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
-            });
-            toast('User info was saved!');
-            done();
-          }}
           onProfileAvatarRemove={() => {
             clearProfileAvatar();
           }}

frontend/src/Projects/Project/Board/FilterMeta.tsx

@@ -5,6 +5,7 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
 import Input from 'shared/components/ControlledInput';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import produce from 'immer';
+import moment from 'moment';
 import { mixin } from 'shared/utils/styles';
 import Member from 'shared/components/Member';
 
@@ -12,7 +13,7 @@ const FilterMember = styled(Member)`
   margin: 2px 0;
   &:hover {
     cursor: pointer;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(${props => props.theme.colors.primary});
   }
 `;
 
@@ -71,7 +72,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 
@@ -80,7 +81,7 @@ export const ActionTitle = styled.span`
 `;
 
 const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;
@@ -159,7 +160,6 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
             width="100%"
             onChange={e => handleNameChange(e.currentTarget.value)}
             value={nameFilter}
-            autoFocus
             variant="alternate"
             placeholder="Task name..."
           />

frontend/src/Projects/Project/Board/FilterStatus.tsx

@@ -30,7 +30,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
   &:hover ${ActionExtraMenuContainer} {
     visibility: visible;
@@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;

frontend/src/Projects/Project/Board/SortPopup.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
-import { mixin } from 'shared/utils/styles';
 
 export const ActionsList = styled.ul`
   margin: 0;
@@ -21,7 +20,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 
@@ -30,7 +29,7 @@ export const ActionTitle = styled.span`
 `;
 
 const ActionItemSeparator = styled.li`
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;
@@ -74,11 +73,6 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
       >
         <ActionTitle>Task title</ActionTitle>
       </ActionItem>
-      <ActionItem
-        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
-      >
-        <ActionTitle>Complete</ActionTitle>
-      </ActionItem>
     </ActionsList>
   );
 };

frontend/src/Projects/Project/Board/index.tsx

@@ -136,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   font-size: 15px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 
   &:not(:last-of-type) {
     margin-right: 16px;
   }
 
   &:hover {
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
   }
   ${props =>
     props.disabled &&
@@ -280,7 +280,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
-              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
+              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data.deleteTaskGroup.taskGroup.id,
             );
           }),
         { projectID },
@@ -296,12 +296,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
+            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data.createTask.taskGroup.id);
             if (idx !== -1) {
-              if (newTaskData.data) {
               draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
             }
-            }
           }),
         { projectID },
       );
@@ -315,9 +313,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            if (newTaskGroupData.data) {
             draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
-            }
           }),
         { projectID },
       );
@@ -336,7 +332,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             const idx = cache.findProject.taskGroups.findIndex(
-              t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
+              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
             );
             if (idx !== -1) {
               draftCache.findProject.taskGroups[idx].tasks = [];
@@ -352,9 +348,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            if (resp.data) {
             draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
-            }
           }),
         { projectID },
       );
@@ -370,26 +364,21 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            if (newTask.data) {
             const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
             if (previousTaskGroupID !== task.taskGroup.id) {
               const { taskGroups } = cache.findProject;
               const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
               const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
               if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
-                  const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(t => t.id === task.id);
                 draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
                   (t: Task) => t.id !== task.id,
                 );
-                  if (previousTask) {
                 draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
                   ...taskGroups[newTaskGroupIdx].tasks,
-                      { ...previousTask },
+                  { ...task },
                 ];
               }
             }
-              }
-            }
           }),
         { projectID },
       );
@@ -426,7 +415,6 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               name,
               complete: false,
               completedAt: null,
-              hasTime: false,
               taskGroup: {
                 __typename: 'TaskGroup',
                 id: taskGroup.id,
@@ -460,6 +448,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
   };
 
+  if (loading) {
+    return <BoardLoading />;
+  }
   const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
     if (filter.status === TaskStatus.COMPLETE) {
       return 'Complete';
@@ -794,12 +785,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                   <DueDateManager
                     task={task}
                     onRemoveDueDate={t => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
-                      // hidePopup();
+                      hidePopup();
                     }}
-                    onDueDateChange={(t, newDueDate, hasTime) => {
+                    onDueDateChange={(t, newDueDate) => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
-                      // hidePopup();
+                      hidePopup();
                     }}
                     onCancel={NOOP}
                   />
@@ -816,7 +807,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     );
   }
 
-  return <BoardLoading />;
+  return <span>Error</span>;
 };
 
 export default ProjectBoard;

frontend/src/Projects/Project/Details/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Modal from 'shared/components/Modal';
 import TaskDetails from 'shared/components/TaskDetails';
-import TaskDetailsLoading from 'shared/components/TaskDetails/Loading';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
 import { useRouteMatch, useHistory } from 'react-router';
@@ -22,9 +21,6 @@ import {
   useCreateTaskChecklistItemMutation,
   FindTaskDocument,
   FindTaskQuery,
-  useCreateTaskCommentMutation,
-  useDeleteTaskCommentMutation,
-  useUpdateTaskCommentMutation,
 } from 'shared/generated/graphql';
 import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
@@ -37,73 +33,6 @@ import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
 import NOOP from 'shared/utils/noop';
 
-export const ActionsList = styled.ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-export const ActionItem = styled.li`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${props => props.theme.colors.primary};
-  }
-`;
-
-export const ActionTitle = styled.span`
-  margin-left: 20px;
-`;
-
-const WarningLabel = styled.p`
-  font-size: 14px;
-  margin: 8px 12px;
-`;
-const DeleteConfirm = styled(Button)`
-  width: 100%;
-  padding: 8px 12px;
-  margin-bottom: 6px;
-`;
-
-type TaskCommentActionsProps = {
-  onDeleteComment: () => void;
-  onEditComment: () => void;
-};
-const TaskCommentActions: React.FC<TaskCommentActionsProps> = ({ onDeleteComment, onEditComment }) => {
-  const { setTab } = usePopup();
-  return (
-    <>
-      <Popup tab={0} title={null}>
-        <ActionsList>
-          <ActionItem>
-            <ActionTitle>Pin to top</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => onEditComment()}>
-            <ActionTitle>Edit comment</ActionTitle>
-          </ActionItem>
-          <ActionItem onClick={() => setTab(1)}>
-            <ActionTitle>Delete comment</ActionTitle>
-          </ActionItem>
-        </ActionsList>
-      </Popup>
-      <Popup tab={1} title="Delete comment?">
-        <WarningLabel>Deleting a comment can not be undone.</WarningLabel>
-        <DeleteConfirm onClick={() => onDeleteComment()} color="danger">
-          Delete comment
-        </DeleteConfirm>
-      </Popup>
-    </>
-  );
-};
-
 const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
   const total = checklists.reduce((prev: any, next: any) => {
     return (
@@ -201,40 +130,6 @@ const Details: React.FC<DetailsProps> = ({
   const { user } = useCurrentUser();
   const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
-  const [deleteTaskComment] = useDeleteTaskCommentMutation({
-    update: (client, response) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            if (response.data) {
-              draftCache.findTask.comments = cache.findTask.comments.filter(
-                c => c.id !== response.data?.deleteTaskComment.commentID,
-              );
-            }
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [createTaskComment] = useCreateTaskCommentMutation({
-    update: (client, response) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            if (response.data) {
-              draftCache.findTask.comments.push({
-                ...response.data.createTaskComment.comment,
-              });
-            }
-          }),
-        { taskID },
-      );
-    },
-  });
   const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
   const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
     update: (client, response) => {
@@ -243,11 +138,10 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            if (response.data) {
+            const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
-              const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
+            if (checklistID !== prevChecklistID) {
-              if (taskChecklistID !== prevChecklistID) {
               const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
-                const newIdx = cache.findTask.checklists.findIndex(c => c.id === taskChecklistID);
+              const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
               if (oldIdx > -1 && newIdx > -1) {
                 const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
                 if (item) {
@@ -257,12 +151,11 @@ const Details: React.FC<DetailsProps> = ({
                   draftCache.findTask.checklists[newIdx].items.push({
                     ...item,
                     position: checklistItem.position,
-                      taskChecklistID,
+                    taskChecklistID: checklistID,
                   });
                 }
               }
             }
-            }
           }),
         { taskID },
       );
@@ -295,7 +188,7 @@ const Details: React.FC<DetailsProps> = ({
           produce(cache, draftCache => {
             const { checklists } = cache.findTask;
             draftCache.findTask.checklists = checklists.filter(
-              c => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
+              c => c.id !== deleteData.data.deleteTaskChecklist.taskChecklist.id,
             );
             const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
             draftCache.findTask.badges.checklist = {
@@ -319,10 +212,8 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            if (createData.data) {
             const item = createData.data.createTaskChecklist;
             draftCache.findTask.checklists.push({ ...item });
-            }
           }),
         { taskID },
       );
@@ -336,7 +227,6 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            if (deleteData.data) {
             const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
             const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
             if (targetIdx > -1) {
@@ -350,7 +240,6 @@ const Details: React.FC<DetailsProps> = ({
               complete,
               total,
             };
-            }
           }),
         { taskID },
       );
@@ -363,7 +252,6 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            if (newTaskItem.data) {
             const item = newTaskItem.data.createTaskChecklistItem;
             const { checklists } = cache.findTask;
             const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
@@ -376,17 +264,12 @@ const Details: React.FC<DetailsProps> = ({
                 total,
               };
             }
-            }
           }),
         { taskID },
       );
     },
   });
-  const { loading, data, refetch } = useFindTaskQuery({
+  const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
-    variables: { taskID },
-    pollInterval: 3000,
-    fetchPolicy: 'cache-and-network',
-  });
   const [setTaskComplete] = useSetTaskCompleteMutation();
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
     onCompleted: () => {
@@ -406,9 +289,12 @@ const Details: React.FC<DetailsProps> = ({
       refreshCache();
     },
   });
-  const [updateTaskComment] = useUpdateTaskCommentMutation();
+  if (loading) {
-  const [editableComment, setEditableComment] = useState<null | string>(null);
+    return null;
-  const isLoading = true;
+  }
+  if (!data) {
+    return null;
+  }
   return (
     <>
       <Modal
@@ -417,36 +303,13 @@ const Details: React.FC<DetailsProps> = ({
           history.push(projectURL);
         }}
         renderContent={() => {
-          return data ? (
+          return (
             <TaskDetails
-              onCancelCommentEdit={() => setEditableComment(null)}
-              onUpdateComment={(commentID, message) => {
-                updateTaskComment({ variables: { commentID, message } });
-              }}
-              editableComment={editableComment}
               me={data.me.user}
-              onCommentShowActions={(commentID, $targetRef) => {
-                showPopup(
-                  $targetRef,
-                  <TaskCommentActions
-                    onDeleteComment={() => {
-                      deleteTaskComment({ variables: { commentID } });
-                      hidePopup();
-                    }}
-                    onEditComment={() => {
-                      setEditableComment(commentID);
-                      hidePopup();
-                    }}
-                  />,
-                );
-              }}
               task={data.findTask}
-              onCreateComment={(task, message) => {
-                createTaskComment({ variables: { taskID: task.id, message } });
-              }}
               onChecklistDrop={checklist => {
                 updateTaskChecklistLocation({
-                  variables: { taskChecklistID: checklist.id, position: checklist.position },
+                  variables: { checklistID: checklist.id, position: checklist.position },
 
                   optimisticResponse: {
                     __typename: 'Mutation',
@@ -461,24 +324,20 @@ const Details: React.FC<DetailsProps> = ({
                   },
                 });
               }}
-              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
                 updateTaskChecklistItemLocation({
-                  variables: {
+                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
-                    taskChecklistID,
-                    taskChecklistItemID: checklistItem.id,
-                    position: checklistItem.position,
-                  },
                   optimisticResponse: {
                     __typename: 'Mutation',
                     updateTaskChecklistItemLocation: {
                       __typename: 'UpdateTaskChecklistItemLocationPayload',
                       prevChecklistID,
-                      taskChecklistID,
+                      checklistID,
                       checklistItem: {
                         __typename: 'TaskChecklistItem',
                         position: checklistItem.position,
                         id: checklistItem.id,
-                        taskChecklistID,
+                        taskChecklistID: checklistID,
                       },
                     },
                   },
@@ -632,12 +491,12 @@ const Details: React.FC<DetailsProps> = ({
                     <DueDateManager
                       task={task}
                       onRemoveDueDate={t => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
-                        // hidePopup();
+                        hidePopup();
                       }}
-                      onDueDateChange={(t, newDueDate, hasTime) => {
+                      onDueDateChange={(t, newDueDate) => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
-                        // hidePopup();
+                        hidePopup();
                       }}
                       onCancel={NOOP}
                     />
@@ -646,8 +505,6 @@ const Details: React.FC<DetailsProps> = ({
                 );
               }}
             />
-          ) : (
-            <TaskDetailsLoading />
           );
         }}
       />

frontend/src/Projects/Project/LabelManagerEditor/index.tsx

@@ -3,11 +3,32 @@ import updateApolloCache from 'shared/utils/cache';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import {
+  useUpdateProjectMemberRoleMutation,
+  useCreateProjectMemberMutation,
+  useDeleteProjectMemberMutation,
+  useSetTaskCompleteMutation,
+  useToggleTaskLabelMutation,
+  useUpdateProjectNameMutation,
+  useFindProjectQuery,
+  useUpdateTaskGroupNameMutation,
+  useUpdateTaskNameMutation,
   useUpdateProjectLabelMutation,
+  useCreateTaskMutation,
   useDeleteProjectLabelMutation,
+  useDeleteTaskMutation,
+  useUpdateTaskLocationMutation,
+  useUpdateTaskGroupLocationMutation,
+  useCreateTaskGroupMutation,
+  useDeleteTaskGroupMutation,
+  useUpdateTaskDescriptionMutation,
+  useAssignTaskMutation,
+  DeleteTaskDocument,
   FindProjectDocument,
   useCreateProjectLabelMutation,
+  useUnassignTaskMutation,
+  useUpdateTaskDueDateMutation,
   FindProjectQuery,
+  useUsersQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
@@ -36,9 +57,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            if (newLabelData.data) {
             draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
-            }
           }),
         {
           projectID,
@@ -55,7 +74,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.labels = cache.findProject.labels.filter(
-              label => label.id !== newLabelData.data?.deleteProjectLabel.id,
+              label => label.id !== newLabelData.data.deleteProjectLabel.id,
             );
           }),
         { projectID },

frontend/src/Projects/Project/index.tsx

@@ -3,7 +3,6 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
 import styled from 'styled-components/macro';
-import AsyncSelect from 'react-select/async';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import {
   useParams,
@@ -16,12 +15,11 @@ import {
 } from 'react-router-dom';
 import {
   useUpdateProjectMemberRoleMutation,
-  useInviteProjectMembersMutation,
+  useCreateProjectMemberMutation,
   useDeleteProjectMemberMutation,
   useToggleTaskLabelMutation,
   useUpdateProjectNameMutation,
   useFindProjectQuery,
-  useDeleteInvitedProjectMemberMutation,
   useUpdateTaskNameMutation,
   useCreateTaskMutation,
   useDeleteTaskMutation,
@@ -32,27 +30,19 @@ import {
   FindProjectDocument,
   FindProjectQuery,
 } from 'shared/generated/graphql';
+
 import produce from 'immer';
 import UserContext, { useCurrentUser } from 'App/context';
 import Input from 'shared/components/Input';
 import Member from 'shared/components/Member';
 import EmptyBoard from 'shared/components/EmptyBoard';
 import NOOP from 'shared/utils/noop';
-import { Lock, Cross } from 'shared/icons';
-import Button from 'shared/components/Button';
-import { useApolloClient } from '@apollo/react-hooks';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import gql from 'graphql-tag';
-import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
-import { mixin } from '../../shared/utils/styles';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
-const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
-
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
 
@@ -71,7 +61,7 @@ const UserMember = styled(Member)`
   padding: 4px 0;
   cursor: pointer;
   &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   }
   border-radius: 6px;
 `;
@@ -80,293 +70,29 @@ const MemberList = styled.div`
   margin: 8px 0;
 `;
 
-type InviteUserData = {
-  email?: string;
-  suerID?: string;
-};
 type UserManagementPopupProps = {
-  projectID: string;
   users: Array<User>;
   projectMembers: Array<TaskUser>;
-  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
+  onAddProjectMember: (userID: string) => void;
 };
 
-const VisibiltyPrivateIcon = styled(Lock)`
+const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
-  padding-right: 4px;
-`;
-
-const VisibiltyButtonText = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-`;
-
-const ShareActions = styled.div`
-  border-top: 1px solid #414561;
-  margin-top: 8px;
-  padding-top: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const VisibiltyButton = styled.button`
-  cursor: pointer;
-  margin: 2px 4px;
-  padding: 2px 4px;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 1px solid transparent;
-  &:hover ${VisibiltyButtonText} {
-    color: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover ${VisibiltyPrivateIcon} {
-    fill: rgba(${props => props.theme.colors.text.secondary});
-    stroke: rgba(${props => props.theme.colors.text.secondary});
-  }
-  &:hover {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
-  }
-`;
-
-type MemberFilterOptions = {
-  projectID?: null | string;
-  teamID?: null | string;
-  organization?: boolean;
-};
-
-const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
-  if (input && input.trim().length < 3) {
-    return [];
-  }
-  const res = await client.query({
-    query: gql`
-    query {
-      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
-        id
-        similarity
-        status
-        user {
-          id
-          fullName
-          email
-          profileIcon {
-            url
-            initials
-            bgColor
-          }
-        }
-      }
-    }
-    `,
-  });
-
-  let results: any = [];
-  const emails: Array<string> = [];
-  if (res.data && res.data.searchMembers) {
-    results = [
-      ...res.data.searchMembers.map((m: any) => {
-        if (m.status === 'INVITED') {
-          return {
-            label: m.id,
-            value: {
-              id: m.id,
-              type: 2,
-              profileIcon: {
-                bgColor: '#ccc',
-                initials: m.id.charAt(0),
-              },
-            },
-          };
-        }
-
-        emails.push(m.user.email);
-        return {
-          label: m.user.fullName,
-          value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-        };
-      }),
-    ];
-  }
-
-  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
-    results = [
-      ...results,
-      {
-        label: input,
-        value: {
-          id: input,
-          type: 1,
-          profileIcon: {
-            bgColor: '#ccc',
-            initials: input.charAt(0),
-          },
-        },
-      },
-    ];
-  }
-
-  return results;
-};
-
-type UserOptionProps = {
-  innerProps: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  label: string;
-  data: any;
-  getValue: any;
-};
-
-const OptionWrapper = styled.div<{ isFocused: boolean }>`
-  cursor: pointer;
-  padding: 4px 8px;
-  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
-  display: flex;
-  align-items: center;
-`;
-const OptionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
-`;
-
-const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
-  display: flex;
-  align-items: center;
-  font-size: ${p => p.fontSize}px;
-  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
-`;
-
-const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  return !isDisabled ? (
-    <OptionWrapper {...innerProps} isFocused={isFocused}>
-      <TaskAssignee
-        size={32}
-        member={{
-          id: '',
-          fullName: data.value.label,
-          profileIcon: data.value.profileIcon,
-        }}
-      />
-      <OptionContent>
-        <OptionLabel fontSize={16} quiet={false}>
-          {label}
-        </OptionLabel>
-        {data.value.type === 2 && (
-          <OptionLabel fontSize={14} quiet>
-            Joined
-          </OptionLabel>
-        )}
-      </OptionContent>
-    </OptionWrapper>
-  ) : null;
-};
-
-const OptionValueWrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
-  border-radius: 4px;
-  margin: 2px;
-  padding: 3px 6px 3px 4px;
-  display: flex;
-  align-items: center;
-`;
-
-const OptionValueLabel = styled.span`
-  font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.secondary});
-`;
-
-const OptionValueRemove = styled.button`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-left: 4px;
-`;
-const OptionValue = ({ data, removeProps }: any) => {
-  return (
-    <OptionValueWrapper>
-      <OptionValueLabel>{data.label}</OptionValueLabel>
-      <OptionValueRemove {...removeProps}>
-        <Cross width={14} height={14} />
-      </OptionValueRemove>
-    </OptionValueWrapper>
-  );
-};
-
-const InviteButton = styled(Button)`
-  margin-top: 12px;
-  height: 32px;
-  padding: 4px 12px;
-  width: 100%;
-  justify-content: center;
-`;
-
-const InviteContainer = styled.div`
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
-  projectID,
-  users,
-  projectMembers,
-  onInviteProjectMembers,
-}) => {
-  const client = useApolloClient();
-  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
   return (
     <Popup tab={0} title="Invite a user">
-      <InviteContainer>
+      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
-        <AsyncSelect
+      <MemberList>
-          getOptionValue={option => option.value.id}
+        {users
-          placeholder="Email address or username"
+          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
-          noOptionsMessage={() => null}
+          .map(user => (
-          onChange={(e: any) => {
+            <UserMember
-            setInvitedUsers(e);
+              key={user.id}
-          }}
+              onCardMemberClick={() => onAddProjectMember(user.id)}
-          isMulti
+              showName
-          autoFocus
+              member={user}
-          cacheOptions
+              taskID=""
-          styles={colourStyles}
-          defaultOption
-          components={{
-            MultiValue: OptionValue,
-            Option: UserOption,
-            IndicatorSeparator: null,
-            DropdownIndicator: null,
-          }}
-          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
             />
-      </InviteContainer>
+          ))}
-      <InviteButton
+      </MemberList>
-        onClick={() => {
-          if (invitedUsers) {
-            onInviteProjectMembers(
-              invitedUsers.map(user => {
-                if (user.value.type === 0) {
-                  return {
-                    userID: user.value.id,
-                  };
-                }
-                return {
-                  email: user.value.id,
-                };
-              }),
-            );
-          }
-        }}
-        disabled={invitedUsers === null}
-        hoverVariant="none"
-        fontSize="16px"
-      >
-        Send Invite
-      </InviteButton>
     </Popup>
   );
 };
@@ -409,34 +135,12 @@ const Project = () => {
   const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
   const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
 
-  const [deleteTask] = useDeleteTaskMutation({
+  const [deleteTask] = useDeleteTaskMutation();
-    update: (client, resp) =>
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            if (resp.data) {
-              const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-                tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
-              );
-
-              if (taskGroupIdx !== -1) {
-                draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
-                  taskGroupIdx
-                ].tasks.filter(t => t.id !== resp.data?.deleteTask.taskID);
-              }
-            }
-          }),
-        { projectID },
-      ),
-  });
 
   const [updateTaskName] = useUpdateTaskNameMutation();
 
-  const { loading, data, error } = useFindProjectQuery({
+  const { loading, data } = useFindProjectQuery({
     variables: { projectID },
-    pollInterval: 3000,
   });
 
   const [updateProjectName] = useUpdateProjectNameMutation({
@@ -446,45 +150,21 @@ const Project = () => {
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
+            draftCache.findProject.name = newName.data.updateProjectName.name;
           }),
         { projectID },
       );
     },
   });
 
-  const [inviteProjectMembers] = useInviteProjectMembersMutation({
+  const [createProjectMember] = useCreateProjectMemberMutation({
     update: (client, response) => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            if (response.data) {
+            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
-              draftCache.findProject.members = [
-                ...cache.findProject.members,
-                ...response.data.inviteProjectMembers.members,
-              ];
-              draftCache.findProject.invitedMembers = [
-                ...cache.findProject.invitedMembers,
-                ...response.data.inviteProjectMembers.invitedMembers,
-              ];
-            }
-          }),
-        { projectID },
-      );
-    },
-  });
-  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
-    update: (client, response) => {
-      updateApolloCache<FindProjectQuery>(
-        client,
-        FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
-            );
           }),
         { projectID },
       );
@@ -498,7 +178,7 @@ const Project = () => {
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.members = cache.findProject.members.filter(
-              m => m.id !== response.data?.deleteProjectMember.member.id,
+              m => m.id !== response.data.deleteProjectMember.member.id,
             );
           }),
         { projectID },
@@ -517,8 +197,13 @@ const Project = () => {
       document.title = `${data.findProject.name} | Taskcafé`;
     }
   }, [data]);
-  if (error) {
+  if (loading) {
-    history.push('/projects');
+    return (
+      <>
+        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
+        <BoardLoading />
+      </>
+    );
   }
   if (data) {
     labelsRef.current = data.findProject.labels;
@@ -536,10 +221,6 @@ const Project = () => {
             deleteProjectMember({ variables: { userID, projectID } });
             hidePopup();
           }}
-          onRemoveInvitedFromBoard={email => {
-            deleteInvitedProjectMember({ variables: { projectID, email } });
-            hidePopup();
-          }}
           onSaveProjectName={projectName => {
             updateProjectName({ variables: { projectID, name: projectName } });
           }}
@@ -547,10 +228,8 @@ const Project = () => {
             showPopup(
               $target,
               <UserManagementPopup
-                projectID={projectID}
+                onAddProjectMember={userID => {
-                onInviteProjectMembers={members => {
+                  createProjectMember({ variables: { userID, projectID } });
-                  inviteProjectMembers({ variables: { projectID, members } });
-                  hidePopup();
                 }}
                 users={data.users}
                 projectMembers={data.findProject.members}
@@ -561,9 +240,8 @@ const Project = () => {
           menuType={[{ name: 'Board', link: location.pathname }]}
           currentTab={0}
           projectMembers={data.findProject.members}
-          projectInvitedMembers={data.findProject.invitedMembers}
           projectID={projectID}
-          teamID={data.findProject.team ? data.findProject.team.id : null}
+          teamID={data.findProject.team.id}
           name={data.findProject.name}
         />
         <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@@ -606,7 +284,6 @@ const Project = () => {
               }}
               onDeleteTask={deletedTask => {
                 deleteTask({ variables: { taskID: deletedTask.id } });
-                history.push(`${match.url}/board`);
               }}
               onOpenAddLabelPopup={(task, $targetRef) => {
                 taskLabelsRef.current = task.labels;
@@ -629,12 +306,7 @@ const Project = () => {
       </>
     );
   }
-  return (
+  return <div>Error</div>;
-    <>
-      <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
-      <BoardLoading />
-    </>
-  );
 };
 
 export default Project;

frontend/src/Projects/index.tsx

@@ -20,8 +20,33 @@ import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
-import theme from 'App/ThemeStyles';
+
-import { mixin } from '../shared/utils/styles';
+const EmptyStateContent = styled.div`
+  display: flex;
+  justy-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const EmptyStateTitle = styled.h3`
+  color: #fff;
+  font-size: 18px;
+`;
+
+const EmptyStatePrompt = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 16px;
+  margin-top: 8px;
+`;
+
+const EmptyState = styled(Empty)`
+  display: block;
+  margin: 0 auto;
+`;
+
+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;
 
 type CreateTeamData = { teamName: string };
 
@@ -31,10 +56,6 @@ type CreateTeamFormProps = {
 
 const CreateTeamFormContainer = styled.form``;
 
-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
-
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
   const { register, handleSubmit } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
@@ -56,7 +77,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
 };
 
 const ProjectAddTile = styled.div`
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   background-size: cover;
   background-position: 50%;
   color: #fff;
@@ -150,7 +171,6 @@ const Wrapper = styled.div`
   flex-direction: row;
   align-items: flex-start;
   justify-content: center;
-  overflow-y: auto;
 `;
 
 const ProjectSectionTitleWrapper = styled.div`
@@ -179,7 +199,7 @@ const SectionActionLink = styled(Link)`
 
 const ProjectSectionTitle = styled.h3`
   font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const ProjectsContainer = styled.div`
@@ -189,6 +209,13 @@ const ProjectsContainer = styled.div`
   min-width: 288px;
 `;
 
+const ProjectGrid = styled.div`
+  max-width: 780px;
+  display: grid;
+  grid-template-columns: 240px 240px 240px;
+  gap: 20px 10px;
+`;
+
 const AddTeamButton = styled(Button)`
   padding: 6px 12px;
   position: absolute;
@@ -196,6 +223,10 @@ const AddTeamButton = styled(Button)`
   right: 12px;
 `;
 
+const CreateFirstTeam = styled(Button)`
+  margin-top: 8px;
+`;
+
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
@@ -203,7 +234,7 @@ type ShowNewProject = {
 
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ pollInterval: 3000, fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
   useEffect(() => {
     document.title = 'Taskcafé';
   }, []);
@@ -211,9 +242,7 @@ const Projects = () => {
     update: (client, newProject) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
         produce(cache, draftCache => {
-          if (newProject.data) {
           draftCache.projects.push({ ...newProject.data.createProject });
-          }
         }),
       );
     },
@@ -225,25 +254,23 @@ const Projects = () => {
     update: (client, createData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
         produce(cache, draftCache => {
-          if (createData.data) {
+          draftCache.teams.push({ ...createData.data.createTeam });
-            draftCache.teams.push({ ...createData.data?.createTeam });
-          }
         }),
       );
     },
   });
+  if (loading) {
+    return (
+      <>
+        <span>loading</span>
+      </>
+    );
+  }
 
-  const colors = theme.colors.multiColors;
+  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
   if (data && user) {
     const { projects, teams, organizations } = data;
     const organizationID = organizations[0].id ?? null;
-    const personalProjects = projects
-      .filter(p => p.team === null)
-      .sort((a, b) => {
-        const textA = a.name.toUpperCase();
-        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
-      });
     const projectTeams = teams
       .sort((a, b) => {
         const textA = a.name.toUpperCase();
@@ -255,7 +282,7 @@ const Projects = () => {
           id: team.id,
           name: team.name,
           projects: projects
-            .filter(project => project.team && project.team.id === team.id)
+            .filter(project => project.team.id === team.id)
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
@@ -296,35 +323,39 @@ const Projects = () => {
                 Add Team
               </AddTeamButton>
             )}
-            <div>
+            {projectTeams.length === 0 && (
-              <ProjectSectionTitleWrapper>
+              <EmptyStateContent>
-                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
+                <EmptyState width={425} height={425} />
-              </ProjectSectionTitleWrapper>
+                <EmptyStateTitle>No teams exist</EmptyStateTitle>
-              <ProjectList>
+                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
-                {personalProjects.map((project, idx) => (
+                <CreateFirstTeam
-                  <ProjectListItem key={project.id}>
+                  variant="outline"
-                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
+                  onClick={$target => {
-                      <ProjectTileFade />
+                    showPopup(
-                      <ProjectTileDetails>
+                      $target,
-                        <ProjectTileName>{project.name}</ProjectTileName>
+                      <Popup
-                      </ProjectTileDetails>
+                        title="Create team"
-                    </ProjectTile>
+                        tab={0}
-                  </ProjectListItem>
+                        onClose={() => {
-                ))}
+                          hidePopup();
-                <ProjectListItem>
-                  <ProjectAddTile
-                    onClick={() => {
-                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
                         }}
                       >
-                    <ProjectTileFade />
+                        <CreateTeamForm
-                    <ProjectAddTileDetails>
+                          onCreateTeam={teamName => {
-                      <ProjectTileName centered>Create new project</ProjectTileName>
+                            if (organizationID) {
-                    </ProjectAddTileDetails>
+                              createTeam({ variables: { name: teamName, organizationID } });
-                  </ProjectAddTile>
+                              hidePopup();
-                </ProjectListItem>
+                            }
-              </ProjectList>
+                          }}
-            </div>
+                        />
+                      </Popup>,
+                    );
+                  }}
+                >
+                  Create new team
+                </CreateFirstTeam>
+              </EmptyStateContent>
+            )}
             {projectTeams.map(team => {
               return (
                 <div key={team.id}>
@@ -378,7 +409,7 @@ const Projects = () => {
                 initialTeamID={showNewProject.initialTeamID}
                 onCreateProject={(name, teamID) => {
                   if (user) {
-                    createProject({ variables: { teamID, name } });
+                    createProject({ variables: { teamID, name, userID: user.id } });
                     setShowNewProject({ open: false, initialTeamID: null });
                   }
                 }}
@@ -393,7 +424,7 @@ const Projects = () => {
       </>
     );
   }
-  return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
+  return <div>Error!</div>;
 };
 
 export default Projects;

frontend/src/Register/Styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
-export const LoginWrapper = styled.div`
-  width: 60%;
-`;

frontend/src/Register/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-import Register from 'shared/components/Register';
-import { useHistory, useLocation } from 'react-router';
-import * as QueryString from 'query-string';
-import { toast } from 'react-toastify';
-import { Container, LoginWrapper } from './Styles';
-
-const UsersRegister = () => {
-  const history = useHistory();
-  const location = useLocation();
-  const [registered, setRegistered] = useState(false);
-  const params = QueryString.parse(location.search);
-  return (
-    <Container>
-      <LoginWrapper>
-        <Register
-          registered={registered}
-          onSubmit={(data, setComplete, setError) => {
-            if (data.password !== data.password_confirm) {
-              setError('password', { type: 'error', message: 'Passwords must match' });
-              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
-            } else {
-              // TODO: change to fetch?
-              fetch('/auth/register', {
-                method: 'POST',
-                body: JSON.stringify({
-                  user: {
-                    username: data.username,
-                    roleCode: 'admin',
-                    email: data.email,
-                    password: data.password,
-                    initials: data.initials,
-                    fullname: data.fullname,
-                  },
-                }),
-              })
-                .then(async x => {
-                  const response = await x.json();
-                  const { setup } = response;
-                  console.log(response);
-                  if (setup) {
-                    history.replace(`/confirm?confirmToken=xxxx`);
-                  } else if (params.confirmToken) {
-                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
-                  } else {
-                    setRegistered(true);
-                  }
-                })
-                .catch(() => {
-                  toast('There was an issue trying to register');
-                });
-            }
-            setComplete(true);
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default UsersRegister;

frontend/src/Teams/Members/index.tsx

@@ -21,7 +21,6 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
 import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';
 
 const MemberListWrapper = styled.div`
   flex: 1 1;
@@ -35,7 +34,7 @@ const UserMember = styled(Member)`
   padding: 4px 0;
   cursor: pointer;
   &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   }
   border-radius: 6px;
 `;
@@ -120,12 +119,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
       ? css`
           user-select: none;
           pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
         `
       : css`
           cursor: pointer;
           &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
           }
         `}
 `;
@@ -136,7 +135,7 @@ export const Content = styled.div`
 
 export const CurrentPermission = styled.span`
   margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;
 
 export const Separator = styled.div`
@@ -147,13 +146,13 @@ export const Separator = styled.div`
 
 export const WarningText = styled.span`
   display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 export const RemoveMemberButton = styled(Button)`
@@ -306,14 +305,14 @@ const MemberItemOption = styled(Button)`
 `;
 
 const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
+  border-top: 1px solid rgba(${props => props.theme.colors.border});
 `;
 
 const MemberListItem = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
+  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
   min-height: 40px;
   padding: 12px 0 12px 40px;
   position: relative;
@@ -337,11 +336,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;
 
 const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;
 
 const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const MemberListHeader = styled.div`
@@ -350,12 +349,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
   font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
   margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
   font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -387,11 +386,11 @@ const FilterTabItem = styled.li`
   font-weight: 700;
   text-decoration: none;
   padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
   &:hover {
     border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(${props => props.theme.colors.primary});
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
   }
 `;
 
@@ -419,11 +418,7 @@ type MembersProps = {
 
 const Members: React.FC<MembersProps> = ({ teamID }) => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetTeamQuery({
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-    variables: { teamID },
-    fetchPolicy: 'cache-and-network',
-    pollInterval: 3000,
-  });
   const { user, setUserRoles } = useCurrentUser();
   const warning =
     'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
@@ -434,13 +429,11 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
         GetTeamDocument,
         cache =>
           produce(cache, draftCache => {
-            if (response.data) {
             draftCache.findTeam.members.push({
               ...response.data.createTeamMember.teamMember,
               member: { __typename: 'MemberList', projects: [], teams: [] },
               owned: { __typename: 'OwnedList', projects: [], teams: [] },
             });
-            }
           }),
         { teamID },
       );
@@ -465,13 +458,16 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
         cache =>
           produce(cache, draftCache => {
             draftCache.findTeam.members = cache.findTeam.members.filter(
-              member => member.id !== response.data?.deleteTeamMember.userID,
+              member => member.id !== response.data.deleteTeamMember.userID,
             );
           }),
         { teamID },
       );
     },
   });
+  if (loading) {
+    return <span>loading</span>;
+  }
 
   if (data && user) {
     return (
@@ -559,7 +555,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
     );
   }
 
-  return <div>loading</div>;
+  return <div>error</div>;
 };
 
 export default Members;

frontend/src/Teams/Projects/index.tsx

@@ -8,7 +8,6 @@ import {
 } from 'shared/generated/graphql';
 import { Link } from 'react-router-dom';
 import Input from 'shared/components/Input';
-import theme from 'App/ThemeStyles';
 
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -35,11 +34,11 @@ const FilterTabItem = styled.li`
   font-weight: 700;
   text-decoration: none;
   padding: 6px 8px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
   &:hover {
     border-radius: 6px;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(${props => props.theme.colors.primary});
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
   }
 `;
 
@@ -56,7 +55,7 @@ const FilterTabTitle = styled.h2`
 `;
 
 const ProjectAddTile = styled.div`
-  background-color: ${props => props.theme.colors.bg.primary};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   background-size: cover;
   background-position: 50%;
   color: #fff;
@@ -148,18 +147,17 @@ const ProjectListWrapper = styled.div`
   flex: 1 1;
 `;
 
-const colors = theme.colors.multiColors;
+const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
 
 type TeamProjectsProps = {
   teamID: string;
 };
 
 const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
-  const { loading, data } = useGetTeamQuery({
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-    variables: { teamID },
+  if (loading) {
-    fetchPolicy: 'cache-and-network',
+    return <span>loading</span>;
-    pollInterval: 3000,
+  }
-  });
   if (data) {
     return (
       <ProjectsContainer>
@@ -190,7 +188,7 @@ const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
       </ProjectsContainer>
     );
   }
-  return <span>loading</span>;
+  return <span>error</span>;
 };
 
 export default TeamProjects;

frontend/src/Teams/index.tsx

@@ -33,7 +33,7 @@ const Wrapper = styled.div`
 `;
 
 type TeamPopupProps = {
-  history: History<any>;
+  history: History<History.PoorMansUnknown>;
   name: string;
   teamID: string;
 };
@@ -44,9 +44,9 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
     update: (client, deleteData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
         produce(cache, draftCache => {
-          draftCache.teams = cache.teams.filter((team: any) => team.id !== deleteData.data?.deleteTeam.team.id);
+          draftCache.teams = cache.teams.filter((team: any) => team.id !== deleteData.data.deleteTeam.team.id);
           draftCache.projects = cache.projects.filter(
-            (project: any) => project.team.id !== deleteData.data?.deleteTeam.team.id,
+            (project: any) => project.team.id !== deleteData.data.deleteTeam.team.id,
           );
         }),
       );
@@ -85,15 +85,20 @@ type TeamsRouteProps = {
 const Teams = () => {
   const { teamID } = useParams<TeamsRouteProps>();
   const history = useHistory();
-  const { loading, data } = useGetTeamQuery({
+  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-    variables: { teamID },
-    onCompleted: resp => {
-      document.title = `${resp.findTeam.name} | Taskcafé`;
-    },
-  });
   const { user } = useCurrentUser();
   const [currentTab, setCurrentTab] = useState(0);
   const match = useRouteMatch();
+  useEffect(() => {
+    document.title = 'Teams | Taskcafé';
+  }, []);
+  if (loading) {
+    return (
+      <>
+        <span>loading</span>
+      </>
+    );
+  }
   if (data && user) {
     if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
       return <Redirect to="/" />;
@@ -129,21 +134,7 @@ const Teams = () => {
       </>
     );
   }
-  return (
+  return <div>Error!</div>;
-    <GlobalTopNavbar
-      menuType={[
-        { name: 'Projects', link: `${match.url}` },
-        { name: 'Members', link: `${match.url}/members` },
-      ]}
-      currentTab={currentTab}
-      onSetTab={tab => {
-        setCurrentTab(tab);
-      }}
-      onSaveProjectName={NOOP}
-      projectID={null}
-      name={null}
-    />
-  );
 };
 
 export default Teams;

frontend/src/index.tsx

@@ -8,26 +8,15 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import dayjs from 'dayjs';
+import moment from 'moment';
-import updateLocale from 'dayjs/plugin/updateLocale';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import isBetween from 'dayjs/plugin/isBetween';
-import weekday from 'dayjs/plugin/weekday';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';
 
 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
-
 enableMapSet();
 
-dayjs.extend(isSameOrAfter);
+moment.updateLocale('en', {
-dayjs.extend(weekday);
-dayjs.extend(isBetween);
-dayjs.extend(customParseFormat);
-dayjs.extend(updateLocale);
-dayjs.updateLocale('en', {
   week: {
     dow: 1, // First day of week is Monday
     doy: 7, // First week of year must contain 1 January (7 + 1 - 1)

frontend/src/shared/components/AddList/AddList.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import AddList from '.';
+
+export default {
+  component: AddList,
+  title: 'AddList',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#262c49', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return <AddList onSave={action('on save')} />;
+};

frontend/src/shared/components/AddList/Styles.ts

@@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
   display: flex;
 `;
 export const ListNameEditor = styled(TextareaAutosize)`
-  background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
+  background-color: ${props => mixin.lighten('#262c49', 0.05)};
   border: none;
   box-shadow: inset 0 0 0 2px #0079bf;
   transition: margin 85ms ease-in, background 85ms ease-in;
@@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`
 
   color: #c2c6dc;
   l &:focus {
-    background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
+    background-color: ${props => mixin.lighten('#262c49', 0.05)};
   }
 `;
 

frontend/src/shared/components/Admin/Admin.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import Admin from '.';
+
+export default {
+  component: Admin,
+  title: 'Admin',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <ThemeProvider theme={theme}>
+        <Admin
+          onInviteUser={action('invite user')}
+          canInviteUser
+          initialTab={1}
+          onUpdateUserPassword={action('update user password')}
+          onDeleteUser={action('delete user')}
+          users={[
+            {
+              id: '1',
+              username: 'jordanthedev',
+              email: 'jordan@jordanthedev.com',
+              role: { code: 'admin', name: 'Admin' },
+              fullName: 'Jordan Knott',
+              profileIcon: {
+                bgColor: '#fff',
+                initials: 'JK',
+                url: null,
+              },
+              owned: {
+                teams: [{ id: '1', name: 'Team' }],
+                projects: [{ id: '2', name: 'Project' }],
+              },
+              member: {
+                teams: [],
+                projects: [],
+              },
+            },
+          ]}
+          onAddUser={action('add user')}
+        />
+      </ThemeProvider>
+    </>
+  );
+};

frontend/src/shared/components/Admin/index.tsx

@@ -8,7 +8,6 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
-import { mixin } from 'shared/utils/styles';
 
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
@@ -59,12 +58,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
       ? css`
           user-select: none;
           pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
         `
       : css`
           cursor: pointer;
           &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
           }
         `}
 `;
@@ -75,7 +74,7 @@ export const Content = styled.div`
 
 export const CurrentPermission = styled.span`
   margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;
 
 export const Separator = styled.div`
@@ -86,13 +85,13 @@ export const Separator = styled.div`
 
 export const WarningText = styled.span`
   display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 export const RemoveMemberButton = styled(Button)`
@@ -105,8 +104,8 @@ type TeamRoleManagerPopupProps = {
   user: User;
   users: Array<User>;
   warning?: string | null;
-  canChangeRole?: boolean;
+  canChangeRole: boolean;
-  onChangeRole?: (roleCode: RoleCode) => void;
+  onChangeRole: (roleCode: RoleCode) => void;
   updateUserPassword?: (user: TaskUser, password: string) => void;
   onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
 };
@@ -334,14 +333,14 @@ const MemberItemOption = styled(Button)`
 `;
 
 const MemberList = styled.div`
-  border-top: 1px solid ${props => props.theme.colors.border};
+  border-top: 1px solid rgba(${props => props.theme.colors.border});
 `;
 
 const MemberListItem = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.colors.border};
+  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
   min-height: 40px;
   padding: 12px 0 12px 40px;
   position: relative;
@@ -365,11 +364,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;
 
 const MemberItemName = styled.p`
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;
 
 const MemberItemUsername = styled.p`
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const MemberListHeader = styled.div`
@@ -378,12 +377,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
   font-size: 18px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
   margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
   font-size: 16px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -444,17 +443,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
   width: 100%;
   position: relative;
 
-  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
+  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
   &:hover {
-    color: ${props => `${props.theme.colors.primary}`};
+    color: rgba(115, 103, 240);
   }
   &:hover svg {
-    fill: ${props => props.theme.colors.primary};
+    fill: rgba(115, 103, 240);
   }
 `;
 const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
-stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
 `;
 
 const TabNavItemSpan = styled.span`
@@ -471,8 +470,8 @@ const TabNavLine = styled.span<{ top: number }>`
   transform: scaleX(1);
   top: ${props => props.top}px;
 
-  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
+  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
   display: block;
   position: absolute;
   transition: all 0.2s ease;
@@ -531,10 +530,8 @@ type AdminProps = {
   onDeleteUser: (userID: string, newOwnerID: string | null) => void;
   onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
   users: Array<User>;
-  invitedUsers: Array<InvitedUserAccount>;
   canInviteUser: boolean;
   onUpdateUserPassword: (user: TaskUser, password: string) => void;
-  onDeleteInvitedUser: (invitedUserID: string) => void;
 };
 
 const Admin: React.FC<AdminProps> = ({
@@ -543,9 +540,7 @@ const Admin: React.FC<AdminProps> = ({
   onUpdateUserPassword,
   canInviteUser,
   onDeleteUser,
-  onDeleteInvitedUser,
   onInviteUser,
-  invitedUsers,
   users,
 }) => {
   const warning =
@@ -562,7 +557,6 @@ const Admin: React.FC<AdminProps> = ({
         <TabNavContent>
           {items.map((item, idx) => (
             <NavItem
-              key={item.name}
               onClick={(tab, top) => {
                 if ($tabNav && $tabNav.current) {
                   const pos = $tabNav.current.getBoundingClientRect();
@@ -582,7 +576,7 @@ const Admin: React.FC<AdminProps> = ({
         <TabContent>
           <MemberListWrapper>
             <MemberListHeader>
-              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length})`}</ListTitle>
               <ListDesc>
                 Organization admins can create / manage / delete all projects & teams. Members only have access to teams
                 or projects they have been added to.
@@ -640,65 +634,6 @@ const Admin: React.FC<AdminProps> = ({
                   </MemberListItem>
                 );
               })}
-              {invitedUsers.map(member => {
-                return (
-                  <MemberListItem>
-                    <MemberProfile
-                      showRoleIcons
-                      size={32}
-                      onMemberProfile={NOOP}
-                      member={{
-                        id: member.id,
-                        fullName: member.email,
-                        profileIcon: {
-                          bgColor: '#fff',
-                          url: null,
-                          initials: member.email.charAt(0),
-                        },
-                      }}
-                    />
-                    <MemberListItemDetails>
-                      <MemberItemName>{member.email}</MemberItemName>
-                      <MemberItemUsername>Invited</MemberItemUsername>
-                    </MemberListItemDetails>
-                    <MemberItemOptions>
-                      <MemberItemOption
-                        variant="outline"
-                        onClick={$target => {
-                          showPopup(
-                            $target,
-                            <TeamRoleManagerPopup
-                              user={{
-                                id: member.id,
-                                fullName: member.email,
-                                profileIcon: {
-                                  bgColor: '#fff',
-                                  url: null,
-                                  initials: member.email.charAt(0),
-                                },
-                                member: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                                owned: {
-                                  teams: [],
-                                  projects: [],
-                                },
-                              }}
-                              users={users}
-                              onDeleteUser={() => {
-                                onDeleteInvitedUser(member.id);
-                              }}
-                            />,
-                          );
-                        }}
-                      >
-                        Manage
-                      </MemberItemOption>
-                    </MemberItemOptions>
-                  </MemberListItem>
-                );
-              })}
             </MemberList>
           </MemberListWrapper>
         </TabContent>

frontend/src/shared/components/Button/Button.stories.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import BaseStyles from 'App/BaseStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import theme from 'App/ThemeStyles';
+import styled, { ThemeProvider } from 'styled-components';
+import Button from '.';
+
+export default {
+  component: Button,
+  title: 'Button',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+const ButtonRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin: 25px;
+  width: 100%;
+  & > button {
+    margin-right: 1.5rem;
+  }
+`;
+
+export const Default = () => {
+  return (
+    <>
+      <BaseStyles />
+      <NormalizeStyles />
+      <ThemeProvider theme={theme}>
+        <ButtonRow>
+          <Button>Primary</Button>
+          <Button color="success">Success</Button>
+          <Button color="danger">Danger</Button>
+          <Button color="warning">Warning</Button>
+          <Button color="dark">Dark</Button>
+          <Button disabled>Disabled</Button>
+        </ButtonRow>
+        <ButtonRow>
+          <Button variant="outline">Primary</Button>
+          <Button variant="outline" color="success">
+            Success
+          </Button>
+          <Button variant="outline" color="danger">
+            Danger
+          </Button>
+          <Button variant="outline" color="warning">
+            Warning
+          </Button>
+          <Button variant="outline" color="dark">
+            Dark
+          </Button>
+          <Button variant="outline" disabled>
+            Disabled
+          </Button>
+        </ButtonRow>
+        <ButtonRow>
+          <Button variant="flat">Primary</Button>
+          <Button variant="flat" color="success">
+            Success
+          </Button>
+          <Button variant="flat" color="danger">
+            Danger
+          </Button>
+          <Button variant="flat" color="warning">
+            Warning
+          </Button>
+          <Button variant="flat" color="dark">
+            Dark
+          </Button>
+          <Button variant="flat" disabled>
+            Disabled
+          </Button>
+        </ButtonRow>
+        <ButtonRow>
+          <Button variant="lineDown">Primary</Button>
+          <Button variant="lineDown" color="success">
+            Success
+          </Button>
+          <Button variant="lineDown" color="danger">
+            Danger
+          </Button>
+          <Button variant="lineDown" color="warning">
+            Warning
+          </Button>
+          <Button variant="lineDown" color="dark">
+            Dark
+          </Button>
+          <Button variant="lineDown" disabled>
+            Disabled
+          </Button>
+        </ButtonRow>
+        <ButtonRow>
+          <Button variant="gradient">Primary</Button>
+          <Button variant="gradient" color="success">
+            Success
+          </Button>
+          <Button variant="gradient" color="danger">
+            Danger
+          </Button>
+          <Button variant="gradient" color="warning">
+            Warning
+          </Button>
+          <Button variant="gradient" color="dark">
+            Dark
+          </Button>
+          <Button variant="gradient" disabled>
+            Disabled
+          </Button>
+        </ButtonRow>
+        <ButtonRow>
+          <Button variant="relief">Primary</Button>
+          <Button variant="relief" color="success">
+            Success
+          </Button>
+          <Button variant="relief" color="danger">
+            Danger
+          </Button>
+          <Button variant="relief" color="warning">
+            Warning
+          </Button>
+          <Button variant="relief" color="dark">
+            Dark
+          </Button>
+          <Button variant="relief" disabled>
+            Disabled
+          </Button>
+        </ButtonRow>
+      </ThemeProvider>
+    </>
+  );
+};

frontend/src/shared/components/Button/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import { mixin } from '../../utils/styles';
 
 const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
   position: relative;
@@ -9,7 +8,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
   justify-content: ${props => props.justifyTextContent};
   transition: all 0.2s ease;
   font-size: ${props => props.fontSize};
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
   ${props =>
     props.hasIcon &&
     css`
@@ -36,37 +35,32 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
     `}
 `;
 
-const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
+const Filled = styled(Base)`
-  background: ${props => props.theme.colors[props.color]};
+  background: rgba(${props => props.theme.colors[props.color]});
-  ${props =>
-    props.hoverVariant === 'boxShadow' &&
-    css`
   &:hover {
-        box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
+    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
   }
-    `}
 `;
-
 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid ${props => props.theme.colors[props.color]};
+  border: 1px solid rgba(${props => props.theme.colors[props.color]});
   background: transparent;
   ${props =>
     props.invert
       ? css`
-          background: ${props.theme.colors[props.color]});
+          background: rgba(${props.theme.colors[props.color]});
           & ${Text} {
-            color: ${props.theme.colors.text.secondary});
+            color: rgba(${props.theme.colors.text.secondary});
           }
           &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
+            background: rgba(${props.theme.colors[props.color]}, 0.8);
           }
         `
       : css`
           & ${Text} {
-            color: ${props.theme.colors[props.color]});
+            color: rgba(${props.theme.colors[props.color]});
           }
           &:hover {
-            background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
+            background: rgba(${props.theme.colors[props.color]}, 0.08);
           }
         `}
 `;
@@ -74,7 +68,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
 const Flat = styled(Base)`
   background: transparent;
   &:hover {
-    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
+    background: rgba(${props => props.theme.colors[props.color]}, 0.2);
   }
 `;
 
@@ -87,7 +81,7 @@ const LineX = styled.span<{ color: string }>`
   bottom: -2px;
   left: 50%;
   transform: translate(-50%);
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: rgba(${props => props.theme.colors[props.color]}, 1);
 `;
 
 const LineDown = styled(Base)`
@@ -96,7 +90,7 @@ const LineDown = styled(Base)`
   border-width: 0;
   border-style: solid;
   border-bottom-width: 2px;
-  border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
+  border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);
 
   &:hover ${LineX} {
     width: 100%;
@@ -109,8 +103,8 @@ const LineDown = styled(Base)`
 const Gradient = styled(Base)`
   background: linear-gradient(
     30deg,
-    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
+    rgba(${props => props.theme.colors[props.color]}, 1),
-    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
+    rgba(${props => props.theme.colors[props.color]}, 0.5)
   );
   text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
   &:hover {
@@ -119,7 +113,7 @@ const Gradient = styled(Base)`
 `;
 
 const Relief = styled(Base)`
-  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: rgba(${props => props.theme.colors[props.color]}, 1);
   -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
   box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
 
@@ -129,11 +123,9 @@ const Relief = styled(Base)`
   }
 `;
 
-type HoverVariant = 'boxShadow' | 'none';
 type ButtonProps = {
   fontSize?: string;
   variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
-  hoverVariant?: HoverVariant;
   color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
   disabled?: boolean;
   type?: 'button' | 'submit';
@@ -150,7 +142,6 @@ const Button: React.FC<ButtonProps> = ({
   invert = false,
   color = 'primary',
   variant = 'filled',
-  hoverVariant = 'boxShadow',
   type = 'button',
   justifyTextContent = 'center',
   icon,
@@ -167,15 +158,7 @@ const Button: React.FC<ButtonProps> = ({
   switch (variant) {
     case 'filled':
       return (
-        <Filled
+        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          ref={$button}
-          hoverVariant={hoverVariant}
-          type={type}
-          onClick={handleClick}
-          className={className}
-          disabled={disabled}
-          color={color}
-        >
           {icon && icon}
           <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
             {children}

frontend/src/shared/components/Card/Card.stories.tsx

@@ -0,0 +1,174 @@
+import React, { useRef } from 'react';
+import { action } from '@storybook/addon-actions';
+import LabelColors from 'shared/constants/labelColors';
+import Card from '.';
+
+export default {
+  component: Card,
+  title: 'Card',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+const labelData: Array<ProjectLabel> = [
+  {
+    id: 'development',
+    name: 'Development',
+    createdDate: new Date().toString(),
+    labelColor: {
+      id: '1',
+      colorHex: LabelColors.BLUE,
+      name: 'blue',
+      position: 1,
+    },
+  },
+];
+
+export const Default = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description=""
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+    />
+  );
+};
+
+export const Labels = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description=""
+      ref={$ref}
+      title="Hello, world"
+      labels={labelData}
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+    />
+  );
+};
+
+export const Badges = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description="hello!"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      watched
+      checklists={{ complete: 1, total: 4 }}
+      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+    />
+  );
+};
+
+export const PastDue = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description="hello!"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      watched
+      checklists={{ complete: 1, total: 4 }}
+      dueDate={{ isPastDue: true, formattedDate: 'Oct 26, 2020' }}
+    />
+  );
+};
+
+export const Everything = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description="hello!"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      watched
+      members={[
+        {
+          id: '1',
+          fullName: 'Jordan Knott',
+          profileIcon: {
+            bgColor: '#0079bf',
+            initials: 'JK',
+            url: null,
+          },
+        },
+      ]}
+      labels={labelData}
+      checklists={{ complete: 1, total: 4 }}
+      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+    />
+  );
+};
+
+export const Members = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      description={null}
+      taskID="1"
+      taskGroupID="1"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      members={[
+        {
+          id: '1',
+          fullName: 'Jordan Knott',
+          profileIcon: {
+            bgColor: '#0079bf',
+            initials: 'JK',
+            url: null,
+          },
+        },
+      ]}
+      labels={[]}
+    />
+  );
+};
+
+export const Editable = () => {
+  const $ref = useRef<HTMLDivElement>(null);
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description="hello!"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      watched
+      labels={labelData}
+      checklists={{ complete: 1, total: 4 }}
+      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+      editable
+      onEditCard={action('edit card')}
+    />
+  );
+};

frontend/src/shared/components/Card/Styles.ts

@@ -1,12 +1,14 @@
 import styled, { css, keyframes } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline } from 'shared/icons';
+import { RefObject } from 'react';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
+  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
-    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
+    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
   z-index: ${props => props.zIndex};
   position: relative;
 `;
@@ -14,13 +16,11 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
   ${props =>
     props.color === 'success' &&
     css`
-      fill: ${props.theme.colors.success};
+      fill: rgba(${props.theme.colors.success});
-      stroke: ${props.theme.colors.success};
+      stroke: rgba(${props.theme.colors.success});
     `}
 `;
-export const ClockIcon = styled(Clock)<{ color: string }>`
+export const ClockIcon = styled(FontAwesomeIcon)``;
-  fill: ${props => props.color};
-`;
 
 export const EditorTextarea = styled(TextareaAutosize)`
   overflow: hidden;
@@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
   padding: 0;
   font-size: 14px;
   line-height: 18px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
   &:focus {
     border: none;
     outline: none;
@@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
   padding: 0 4px 0 6px;
   vertical-align: top;
   white-space: nowrap;
-  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
+  ${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
 `;
 
 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@@ -101,9 +101,7 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
   position: relative;
 
   background-color: ${props =>
-    props.isActive && !props.editable
+    props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
-      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
-      : `${props.theme.colors.bg.secondary}`};
 `;
 
 export const ListCardInnerContainer = styled.div`
@@ -149,11 +147,6 @@ export const ListCardLabelText = styled.span`
   line-height: 16px;
 `;
 
-export const ListCardLabelsWrapper = styled.div`
-  overflow: auto;
-  position: relative;
-`;
-
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   ${props =>
     props.variant === 'small'
@@ -185,6 +178,8 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
+  overflow: auto;
+  position: relative;
   &:hover {
     opacity: 0.8;
   }
@@ -223,23 +218,22 @@ export const ListCardOperation = styled.span`
   top: 2px;
   z-index: 100;
   &:hover {
-    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
+    background-color: ${props => mixin.darken('#262c49', 0.25)};
   }
 `;
 
-export const CardTitle = styled.div`
+export const CardTitle = styled.span`
   clear: both;
   margin: 0 0 4px;
   overflow: hidden;
   text-decoration: none;
-  color: ${props => props.theme.colors.text.primary};
-  display: block;
-  align-items: center;
-`;
-export const CardTitleText = styled.span`
   word-wrap: break-word;
   line-height: 18px;
   font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.primary});
+
+  display: flex;
+  align-items: center;
 `;
 
 export const CardMembers = styled.div`
@@ -249,10 +243,9 @@ export const CardMembers = styled.div`
 `;
 
 export const CompleteIcon = styled(CheckCircle)`
-  fill: ${props => props.theme.colors.success};
+  fill: rgba(${props => props.theme.colors.success});
   margin-right: 4px;
   flex-shrink: 0;
-  margin-bottom: -2px;
 `;
 
 export const EditorContent = styled.div`

frontend/src/shared/components/Card/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Pencil, Eye, List } from 'shared/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   CardMember,
@@ -18,11 +20,9 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
-  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
-  CardTitleText,
 } from './Styles';
 
 type DueDate = {
@@ -154,12 +154,10 @@ const Card = React.forwardRef(
                 }
               }}
             >
-              <Pencil width={8} height={8} />
+              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
-            {labels && labels.length !== 0 && (
-              <ListCardLabelsWrapper>
             <ListCardLabels
               toggleLabels={toggleLabels}
               toggleDirection={toggleDirection}
@@ -170,7 +168,8 @@ const Card = React.forwardRef(
                 }
               }}
             >
-                  {labels
+              {labels &&
+                labels
                   .slice()
                   .sort((a, b) => a.labelColor.position - b.labelColor.position)
                   .map(label => (
@@ -188,8 +187,6 @@ const Card = React.forwardRef(
                     </ListCardLabel>
                   ))}
             </ListCardLabels>
-              </ListCardLabelsWrapper>
-            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}
@@ -211,24 +208,24 @@ const Card = React.forwardRef(
             ) : (
               <CardTitle>
                 {complete && <CompleteIcon width={16} height={16} />}
-                <CardTitleText>{`${title}${position ? ` - ${position}` : ''}`}</CardTitleText>
+                {`${title}${position ? ` - ${position}` : ''}`}
               </CardTitle>
             )}
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <Eye width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
                 </ListCardBadge>
               )}
               {dueDate && (
                 <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
                   <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                 </DueDateCardBadge>
               )}
               {description && (
                 <DescriptionBadge>
-                  <List width={8} height={8} />
+                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
                 </DescriptionBadge>
               )}
               {checklists && (

frontend/src/shared/components/CardComposer/CardComposer.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import CardComposer from '.';
+
+export default {
+  component: CardComposer,
+  title: 'CardComposer',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return <CardComposer isOpen onClose={action('on close')} onCreateCard={action('on create card')} />;
+};

frontend/src/shared/components/CardComposer/Styles.ts

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 
-export const CancelIconWrapper = styled.div`
+export const CancelIcon = styled(FontAwesomeIcon)`
   opacity: 0.8;
   cursor: pointer;
   font-size: 1.25em;
   padding-left: 5px;
 `;
-
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
   padding-bottom: 8px;
   display: ${props => (props.isOpen ? 'flex' : 'none')};

frontend/src/shared/components/CardComposer/index.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { Cross } from 'shared/icons';
 
 import {
   CardComposerWrapper,
-  CancelIconWrapper,
+  CancelIcon,
   AddCardButton,
   ComposerControls,
   ComposerControlsSaveSection,
@@ -25,23 +25,17 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
   const $cardRef = useRef<HTMLDivElement>(null);
   useOnOutsideClick($cardRef, true, onClose, null);
   useOnEscapeKeyDown(isOpen, onClose);
-  useEffect(() => {
-    if ($cardRef.current) {
-      $cardRef.current.scrollIntoView();
-    }
-  });
   return (
-    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
+    <CardComposerWrapper isOpen={isOpen}>
       <Card
         title={cardName}
+        ref={$cardRef}
         taskID=""
         taskGroupID=""
         editable
         onEditCard={(_taskGroupID, _taskID, name) => {
-          if (cardName.trim() !== '') {
+          onCreateCard(name);
-            onCreateCard(name.trim());
           setCardName('');
-          }
         }}
         onCardTitleChange={name => {
           setCardName(name);
@@ -52,17 +46,13 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
           <AddCardButton
             variant="relief"
             onClick={() => {
-              if (cardName.trim() !== '') {
+              onCreateCard(cardName);
-                onCreateCard(cardName.trim());
               setCardName('');
-              }
             }}
           >
             Add Card
           </AddCardButton>
-          <CancelIconWrapper onClick={() => onClose()}>
+          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
-            <Cross width={12} height={12} />
-          </CancelIconWrapper>
         </ComposerControlsSaveSection>
         <ComposerControlsActionsSection />
       </ComposerControls>

frontend/src/shared/components/Checklist/Checklist.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import BaseStyles from 'App/BaseStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import theme from 'App/ThemeStyles';
+import produce from 'immer';
+import styled, { ThemeProvider } from 'styled-components';
+import NOOP from 'shared/utils/noop';
+import Checklist, { ChecklistItem } from '.';
+
+export default {
+  component: Checklist,
+  title: 'Checklist',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+const Container = styled.div`
+  width: 552px;
+  margin: 25px;
+  border: 1px solid rgba(${props => props.theme.colors.bg.primary});
+`;
+
+const defaultItems = [
+  {
+    id: '1',
+    position: 1,
+    taskChecklistID: '1',
+    complete: false,
+    name: 'Tasks',
+    assigned: null,
+    dueDate: null,
+  },
+  {
+    id: '2',
+    taskChecklistID: '1',
+    position: 2,
+    complete: false,
+    name: 'Projects',
+    assigned: null,
+    dueDate: null,
+  },
+  {
+    id: '3',
+    position: 3,
+    taskChecklistID: '1',
+    complete: false,
+    name: 'Teams',
+    assigned: null,
+    dueDate: null,
+  },
+  {
+    id: '4',
+    position: 4,
+    complete: false,
+    taskChecklistID: '1',
+    name: 'Organizations',
+    assigned: null,
+    dueDate: null,
+  },
+];
+
+export const Default = () => {
+  const [checklistName, setChecklistName] = useState('Checklist');
+  const [items, setItems] = useState(defaultItems);
+  const onToggleItem = (itemID: string, complete: boolean) => {
+    setItems(
+      produce(items, draftState => {
+        const idx = items.findIndex(item => item.id === itemID);
+        if (idx !== -1) {
+          draftState[idx] = {
+            ...draftState[idx],
+            complete,
+          };
+        }
+      }),
+    );
+  };
+  return (
+    <>
+      <BaseStyles />
+      <NormalizeStyles />
+      <ThemeProvider theme={theme}>
+        <Container>
+          <Checklist
+            wrapperProps={{}}
+            handleProps={{}}
+            name={checklistName}
+            checklistID="checklist-one"
+            items={items}
+            onDeleteChecklist={action('delete checklist')}
+            onChangeName={currentName => {
+              setChecklistName(currentName);
+            }}
+            onAddItem={itemName => {
+              let position = 1;
+              const lastItem = items[-1];
+              if (lastItem) {
+                position = lastItem.position * 2 + 1;
+              }
+              setItems([
+                ...items,
+                {
+                  id: `${Math.random()}`,
+                  name: itemName,
+                  complete: false,
+                  assigned: null,
+                  dueDate: null,
+                  position,
+                  taskChecklistID: '1',
+                },
+              ]);
+            }}
+            onDeleteItem={itemID => {
+              setItems(items.filter(item => item.id !== itemID));
+            }}
+            onChangeItemName={(itemID, currentName) => {
+              setItems(
+                produce(items, draftState => {
+                  const idx = items.findIndex(item => item.id === itemID);
+                  if (idx !== -1) {
+                    draftState[idx] = {
+                      ...draftState[idx],
+                      name: currentName,
+                    };
+                  }
+                }),
+              );
+            }}
+            onToggleItem={onToggleItem}
+          >
+            {items.map(item => (
+              <ChecklistItem
+                key={item.id}
+                wrapperProps={{}}
+                handleProps={{}}
+                checklistID="id"
+                itemID={item.id}
+                name={item.name}
+                complete={item.complete}
+                onDeleteItem={NOOP}
+                onChangeName={NOOP}
+                onToggleItem={NOOP}
+              />
+            ))}
+          </Checklist>
+        </Container>
+      </ThemeProvider>
+    </>
+  );
+};

frontend/src/shared/components/Checklist/index.tsx

@@ -12,7 +12,6 @@ import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
 import Control from 'react-select/src/components/Control';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import { mixin } from 'shared/utils/styles';
 
 const Wrapper = styled.div`
   margin-bottom: 24px;
@@ -39,7 +38,7 @@ const WindowChecklistTitle = styled.div`
 
 const WindowTitleText = styled.h3`
   cursor: pointer;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
   margin: 6px 0;
   display: inline-block;
   width: auto;
@@ -74,7 +73,7 @@ const ChecklistProgressPercent = styled.span`
 `;
 
 const ChecklistProgressBar = styled.div`
-  background: ${props => props.theme.colors.bg.primary};
+  background: rgba(${props => props.theme.colors.bg.primary});
   border-radius: 4px;
   clear: both;
   height: 8px;
@@ -84,7 +83,7 @@ const ChecklistProgressBar = styled.div`
 `;
 const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
   width: ${props => props.width}%;
-  background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
+  background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
   bottom: 0;
   left: 0;
   position: absolute;
@@ -112,7 +111,7 @@ const ChecklistIcon = styled.div`
 `;
 
 const ChecklistItemCheckedIcon = styled(CheckSquare)`
-  fill: ${props => props.theme.colors.primary};
+  fill: rgba(${props => props.theme.colors.primary});
 `;
 
 const ChecklistItemDetails = styled.div`
@@ -134,7 +133,7 @@ const ChecklistItemTextControls = styled.div`
 `;
 
 const ChecklistItemText = styled.span<{ complete: boolean }>`
-  color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
+  color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
   ${props => props.complete && 'text-decoration: line-through;'}
   line-height: 20px;
   font-size: 16px;
@@ -156,14 +155,14 @@ const ControlButton = styled.div`
   margin-left: 4px;
   padding: 4px 6px;
   border-radius: 6px;
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
   display: flex;
   width: 32px;
   height: 32px;
   align-items: center;
   justify-content: center;
   &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
+    background-color: rgba(${props => props.theme.colors.primary}, 1);
   }
 `;
 
@@ -190,27 +189,27 @@ export const ChecklistNameEditor = styled(TextareaAutosize)`
   padding: 8px 12px;
   font-size: 16px;
   line-height: 20px;
-  border: 1px solid ${props => props.theme.colors.primary};
+  border: 1px solid rgba(${props => props.theme.colors.primary});
   border-radius: 3px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 
-  border-color: ${props => props.theme.colors.border};
+  border-color: rgba(${props => props.theme.colors.border});
-  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   &:focus {
-    border-color: ${props => props.theme.colors.primary};
+    border-color: rgba(${props => props.theme.colors.primary});
   }
 `;
 
 const AssignUserButton = styled(AccountPlus)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const ClockButton = styled(Clock)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const TrashButton = styled(Trash)`
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const ChecklistItemWrapper = styled.div<{ ref: any }>`
@@ -225,7 +224,7 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
   }
 
   &:hover {
-    background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
   }
   &:hover ${ControlButton} {
     opacity: 1;
@@ -247,10 +246,10 @@ const CancelButton = styled.div`
   cursor: pointer;
   margin: 5px;
   & svg {
-    fill: ${props => props.theme.colors.text.primary};
+    fill: rgba(${props => props.theme.colors.text.primary});
   }
   &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
+    fill: rgba(${props => props.theme.colors.text.secondary});
   }
 `;
 
@@ -266,7 +265,7 @@ const EditableDeleteButton = styled.button`
   border-radius: 3px;
 
   &:hover {
-    background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
+    background: rgba(${props => props.theme.colors.primary}, 0.8);
   }
 `;
 

frontend/src/shared/components/Chip/index.tsx

@@ -7,7 +7,7 @@ const LabelText = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 const Container = styled.div<{ color?: string }>`
@@ -24,11 +24,11 @@ const Container = styled.div<{ color?: string }>`
       ? css`
           background: ${props.color};
           & ${LabelText} {
-            color: ${props.theme.colors.text.secondary};
+            color: rgba(${props.theme.colors.text.secondary});
           }
         `
       : css`
-          background: ${props.theme.colors.bg.primary};
+          background: rgba(${props.theme.colors.bg.primary});
         `}
 `;
 

frontend/src/shared/components/Confirm/Styles.ts

@@ -1,103 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-
-export const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-export const Column = styled.div`
-  width: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const LoginFormWrapper = styled.div`
-  background: #10163a;
-  width: 100%;
-`;
-
-export const LoginFormContainer = styled.div`
-  min-height: 505px;
-  padding: 2rem;
-`;
-
-export const Title = styled.h1`
-  color: #ebeefd;
-  font-size: 18px;
-  margin-bottom: 14px;
-`;
-
-export const SubTitle = styled.h2`
-  color: #c2c6dc;
-  font-size: 14px;
-  margin-bottom: 14px;
-`;
-export const Form = styled.form`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const FormLabel = styled.label`
-  color: #c2c6dc;
-  font-size: 12px;
-  position: relative;
-  margin-top: 14px;
-`;
-
-export const FormTextInput = styled.input`
-  width: 100%;
-  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  margin-top: 4px;
-  padding: 0.7rem 1rem 0.7rem 3rem;
-  font-size: 1rem;
-  color: #c2c6dc;
-  border-radius: 5px;
-`;
-
-export const FormIcon = styled.div`
-  top: 30px;
-  left: 16px;
-  position: absolute;
-`;
-
-export const FormError = styled.span`
-  font-size: 0.875rem;
-  color: rgb(234, 84, 85);
-`;
-
-export const LoginButton = styled(Button)``;
-
-export const ActionButtons = styled.div`
-  margin-top: 17.5px;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const RegisterButton = styled(Button)``;
-
-export const LogoTitle = styled.div`
-  font-size: 24px;
-  font-weight: 600;
-  margin-left: 12px;
-  transition: visibility, opacity, transform 0.25s ease;
-  color: #7367f0;
-`;
-
-export const LogoWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  position: relative;
-  width: 100%;
-  padding-bottom: 16px;
-  margin-bottom: 24px;
-  color: rgb(222, 235, 255);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
-`;

frontend/src/shared/components/Confirm/index.tsx

@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import AccessAccount from 'shared/undraw/AccessAccount';
-import { User, Lock, Taskcafe } from 'shared/icons';
-import { useForm } from 'react-hook-form';
-import LoadingSpinner from 'shared/components/LoadingSpinner';
-import {
-  Form,
-  LogoWrapper,
-  LogoTitle,
-  ActionButtons,
-  RegisterButton,
-  FormError,
-  FormIcon,
-  FormLabel,
-  FormTextInput,
-  Wrapper,
-  Column,
-  LoginFormWrapper,
-  LoginFormContainer,
-  Title,
-  SubTitle,
-} from './Styles';
-
-const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
-  const [hasFailed, setFailed] = useState(false);
-  const setHasFailed = () => {
-    setFailed(true);
-  };
-  useEffect(() => {
-    onConfirmUser(setHasFailed);
-  });
-  return (
-    <Wrapper>
-      <Column>
-        <AccessAccount width={275} height={250} />
-      </Column>
-      <Column>
-        <LoginFormWrapper>
-          <LoginFormContainer>
-            <LogoWrapper>
-              <Taskcafe width={42} height={42} />
-              <LogoTitle>Taskcafé</LogoTitle>
-            </LogoWrapper>
-            {hasConfirmToken ? (
-              <>
-                <Title>Confirming user...</Title>
-                {hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
-              </>
-            ) : (
-              <>
-                <Title>There is no confirmation token</Title>
-                <SubTitle>There seems to have been an error.</SubTitle>
-              </>
-            )}
-          </LoginFormContainer>
-        </LoginFormWrapper>
-      </Column>
-    </Wrapper>
-  );
-};
-
-export default Confirm;

frontend/src/shared/components/ControlledInput/Input.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import BaseStyles from 'App/BaseStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import theme from 'App/ThemeStyles';
+import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
+
+import Input from '.';
+
+export default {
+  component: Input,
+  title: 'Input',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+const Wrapper = styled.div`
+  background: rgba(${props => props.theme.colors.bg.primary});
+  padding: 45px;
+  margin: 25px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <ThemeProvider theme={theme}>
+        <Wrapper>
+          <Input label="Label placeholder" />
+          <Input width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
+        </Wrapper>
+      </ThemeProvider>
+    </>
+  );
+};

frontend/src/shared/components/ControlledInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';
 
 const InputWrapper = styled.div<{ width: string }>`
   position: relative;
@@ -58,14 +57,14 @@ const InputInput = styled.input<{
     background: ${props => props.focusBg};
   }
   &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
+    color: rgba(115, 103, 240);
     transform: translate(-3px, -90%);
   }
   ${props =>
     props.hasValue &&
     css`
       & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
+        color: rgba(115, 103, 240);
         transform: translate(-3px, -90%);
       }
     `}
@@ -116,8 +115,8 @@ const ControlledInput = ({
 }: ControlledInputProps) => {
   const $input = useRef<HTMLInputElement>(null);
   const [hasValue, setHasValue] = useState(false);
-  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
+  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-  const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
+  const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
   useEffect(() => {
     if (autoFocus && $input && $input.current) {
       $input.current.focus();

frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,64 @@
+import React, { createRef, useState } from 'react';
+import styled from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import DropdownMenu from '.';
+
+export default {
+  component: DropdownMenu,
+  title: 'DropdownMenu',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#f8f8f8' },
+      { name: 'darkBlue', value: '#262c49', default: true },
+    ],
+  },
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Button = styled.div`
+  font-size: 18px;
+  padding: 15px 20px;
+  color: #fff;
+  background: #000;
+`;
+
+export const Default = () => {
+  const [menu, setMenu] = useState({
+    top: 0,
+    left: 0,
+    isOpen: false,
+  });
+  const $buttonRef: any = createRef();
+  const onClick = () => {
+    setMenu({
+      isOpen: !menu.isOpen,
+      left: $buttonRef.current.getBoundingClientRect().right,
+      top: $buttonRef.current.getBoundingClientRect().bottom,
+    });
+  };
+  return (
+    <>
+      <Container>
+        <Button onClick={onClick} ref={$buttonRef}>
+          Click me
+        </Button>
+      </Container>
+      {menu.isOpen && (
+        <DropdownMenu
+          onAdminConsole={action('admin')}
+          onCloseDropdown={() => {
+            setMenu({ top: 0, left: 0, isOpen: false });
+          }}
+          onLogout={action('on logout')}
+          left={menu.left}
+          top={menu.top}
+        />
+      )}
+    </>
+  );
+};

frontend/src/shared/components/DropdownMenu/Styles.ts

@@ -59,7 +59,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import BaseStyles from 'App/BaseStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import theme from 'App/ThemeStyles';
+import styled, { ThemeProvider } from 'styled-components';
+import { Popup } from '../PopupMenu';
+import DueDateManager from '.';
+
+const PopupWrapper = styled.div`
+  width: 310px;
+`;
+
+export default {
+  component: DueDateManager,
+  title: 'DueDateManager',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#f8f8f8', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <ThemeProvider theme={theme}>
+        <PopupWrapper>
+          <Popup title={null} tab={0}>
+            <DueDateManager
+              task={{
+                id: '1',
+                taskGroup: { name: 'General', id: '1', position: 1 },
+                name: 'Hello, world',
+                position: 1,
+                labels: [
+                  {
+                    id: 'soft-skills',
+                    assignedDate: new Date().toString(),
+                    projectLabel: {
+                      createdDate: new Date().toString(),
+                      id: 'label-soft-skills',
+                      name: 'Soft Skills',
+                      labelColor: {
+                        id: '1',
+                        name: 'white',
+                        colorHex: '#fff',
+                        position: 1,
+                      },
+                    },
+                  },
+                ],
+                description: 'hello!',
+                assigned: [
+                  {
+                    id: '1',
+                    profileIcon: { url: null, initials: null, bgColor: null },
+                    fullName: 'Jordan Knott',
+                  },
+                ],
+              }}
+              onCancel={action('cancel')}
+              onDueDateChange={action('due date change')}
+              onRemoveDueDate={action('remove due date')}
+            />
+          </Popup>
+        </PopupWrapper>
+      </ThemeProvider>
+    </>
+  );
+};

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

@@ -2,8 +2,6 @@ import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
 import Input from 'shared/components/Input';
-import ControlledInput from 'shared/components/ControlledInput';
-import { Clock } from 'shared/icons';
 
 export const Wrapper = styled.div`
 display: flex
@@ -19,30 +17,25 @@ display: flex
     z-index: 10000;
     margin-top: 0;
   }
-  & .react-datepicker__close-icon::after {
-    background: none;
-    font-size: 16px;
-    color: ${props => props.theme.colors.text.primary};
-  }
 
   & .react-datepicker-time__header {
-    color: ${props => props.theme.colors.text.primary};
+    color: rgba(${props => props.theme.colors.text.primary});
   }
   & .react-datepicker__time-list-item {
-    color: ${props => props.theme.colors.text.primary};
+    color: rgba(${props => props.theme.colors.text.primary});
   }
   & .react-datepicker__time-container .react-datepicker__time
   .react-datepicker__time-box ul.react-datepicker__time-list
   li.react-datepicker__time-list-item:hover {
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
-    background: ${props => props.theme.colors.bg.secondary};
+    background: rgba(${props => props.theme.colors.bg.secondary});
   }
   & .react-datepicker__time-container .react-datepicker__time {
-    background: ${props => props.theme.colors.bg.primary};
+    background: rgba(${props => props.theme.colors.bg.primary});
   }
   & .react-datepicker--time-only {
-    background: ${props => props.theme.colors.bg.primary};
+    background: rgba(${props => props.theme.colors.bg.primary});
-    border: 1px solid ${props => props.theme.colors.border};
+    border: 1px solid rgba(${props => props.theme.colors.border});
   }
 
   & .react-datepicker * {
@@ -82,12 +75,12 @@ display: flex
   }
   & .react-datepicker__day--selected {
     border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
     color: #fff;
   }
   & .react-datepicker__day--selected:hover {
     border-radius: 50%;
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
     color: #fff;
   }
   & .react-datepicker__header {
@@ -95,27 +88,9 @@ display: flex
     border: none;
   }
   & .react-datepicker__header--time {
-    border-bottom: 1px solid ${props => props.theme.colors.border};
+    border-bottom: 1px solid rgba(${props => props.theme.colors.border});
   }
 
-  & .react-datepicker__input-container input {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.colors.alternate};
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-padding: 0.7rem;
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-      font-size: 13px;
-    line-height: 20px;
-    padding: 0 12px;
-  &:focus {
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(115, 103, 240);
-    background: ${props => props.theme.colors.bg.primary};
-  }
 `;
 
 export const DueDatePickerWrapper = styled.div`
@@ -135,44 +110,6 @@ export const RemoveDueDate = styled(Button)`
   margin: 0 0 0 4px;
 `;
 
-export const AddDateRange = styled.div`
-  opacity: 0.6;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-size: 12px;
-  line-height: 16px;
-  color: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
-  &:hover {
-    color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
-    text-decoration: underline;
-  }
-`;
-
-export const DateRangeInputs = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-left: -4px;
-  & > div:first-child,
-  & > div:last-child {
-    flex: 1 1 92px;
-    margin-bottom: 4px;
-    margin-left: 4px;
-    min-width: 92px;
-    width: initial;
-  }
-  & > ${AddDateRange} {
-    margin-left: 4px;
-    padding-left: 4px;
-  }
-  & > .react-datepicker-wrapper input {
-    padding-bottom: 4px;
-    padding-top: 4px;
-    width: 100%;
-  }
-`;
-
 export const CancelDueDate = styled.div`
   display: flex;
   align-items: center;
@@ -182,86 +119,15 @@ export const CancelDueDate = styled.div`
   cursor: pointer;
 `;
 
-export const DueDateInput = styled(ControlledInput)`
+export const DueDateInput = styled(Input)`
   margin-top: 15px;
   margin-bottom: 5px;
   padding-right: 10px;
 `;
 
-export const ActionsSeparator = styled.div`
+export const ActionWrapper = styled.div`
-  margin-top: 8px;
+  padding-top: 8px;
-  height: 1px;
   width: 100%;
-  background: #414561;
   display: flex;
-`;
+  justify-content: space-between;
-export const ActionsWrapper = styled.div`
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  & .react-datepicker-wrapper {
-    margin-left: auto;
-    width: 82px;
-  }
-  & .react-datepicker__input-container input {
-    padding-bottom: 4px;
-    padding-top: 4px;
-    width: 100%;
-  }
-`;
-
-export const ActionClock = styled(Clock)`
-  align-self: center;
-  fill: ${props => props.theme.colors.primary};
-  margin: 0 8px;
-  flex: 0 0 auto;
-`;
-
-export const ActionLabel = styled.div`
-  font-size: 12px;
-  line-height: 14px;
-`;
-
-export const ActionIcon = styled.div`
-  height: 36px;
-  min-height: 36px;
-  min-width: 36px;
-  width: 36px;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  margin-right: 8px;
-  svg {
-    fill: ${props => props.theme.colors.text.primary};
-    transition-duration: 0.2s;
-    transition-property: background, border, box-shadow, fill;
-  }
-  &:hover svg {
-    fill: ${props => props.theme.colors.text.secondary};
-  }
-
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-`;
-
-export const ClearButton = styled.div`
-  font-weight: 500;
-  font-size: 13px;
-  height: 36px;
-  line-height: 36px;
-  padding: 0 12px;
-  margin-left: auto;
-  cursor: pointer;
-  align-items: center;
-  border-radius: 6px;
-  display: inline-flex;
-  flex-shrink: 0;
-  justify-content: center;
-  transition-duration: 0.2s;
-  transition-property: background, border, box-shadow, color, fill;
-  color: ${props => props.theme.colors.text.primary};
-  &:hover {
-    color: ${props => props.theme.colors.text.secondary};
-  }
 `;

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

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
@@ -8,27 +8,11 @@ import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
 import NOOP from 'shared/utils/noop';
 
-import {
+import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
-  Wrapper,
-  RemoveDueDate,
-  DueDateInput,
-  DueDatePickerWrapper,
-  ConfirmAddDueDate,
-  DateRangeInputs,
-  AddDateRange,
-  ActionIcon,
-  ActionsWrapper,
-  ClearButton,
-  ActionsSeparator,
-  ActionClock,
-  ActionLabel,
-} from './Styles';
-import { Clock, Cross } from 'shared/icons';
-import Select from 'react-select/src/Select';
 
 type DueDateManagerProps = {
   task: Task;
-  onDueDateChange: (task: Task, newDueDate: Date, hasTime: boolean) => void;
+  onDueDateChange: (task: Task, newDueDate: Date) => void;
   onRemoveDueDate: (task: Task) => void;
   onCancel: () => void;
 };
@@ -59,7 +43,7 @@ const HeaderSelectLabel = styled.div`
   color: #c2c6dc;
 
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
     color: #c2c6dc;
   }
 `;
@@ -68,22 +52,16 @@ const HeaderSelect = styled.select`
   text-decoration: underline;
   font-size: 14px;
   text-align: center;
+  padding: 4px 6px;
   background: none;
   outline: none;
   border: none;
   border-radius: 3px;
   appearance: none;
-  width: 100%;
-  display: inline-block;
 
-  & option {
+  &:hover {
-    color: #c2c6dc;
+    background: #262c49;
-    background: ${props => props.theme.colors.bg.primary};
+    border: 1px solid rgba(115, 103, 240);
-  }
-
-  & option:hover {
-    background: ${props => props.theme.colors.bg.secondary};
-    border: 1px solid ${props => props.theme.colors.primary};
     outline: none !important;
     box-shadow: none;
     color: #c2c6dc;
@@ -115,7 +93,7 @@ const HeaderButton = styled.button`
   border: none;
   border-radius: 3px;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgba(115, 103, 240);
     color: #fff;
   }
 `;
@@ -132,34 +110,15 @@ const HeaderActions = styled.div`
 `;
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const currentDueDate = task.dueDate ? dayjs(task.dueDate).toDate() : null;
+  const now = moment();
   const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
-
+  const [startDate, setStartDate] = useState(new Date());
-  const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
-  const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
-  const [hasTime, enableTime] = useState(task.hasTime ?? false);
-  const firstRun = useRef<boolean>(true);
-
-  const debouncedFunctionRef = useRef((newDate: Date | null, nowHasTime: boolean) => {
-    if (!firstRun.current) {
-      if (newDate) {
-        onDueDateChange(task, newDate, nowHasTime);
-      } else {
-        onRemoveDueDate(task);
-        enableTime(false);
-      }
-    } else {
-      firstRun.current = false;
-    }
-  });
-  const debouncedChange = useCallback(
-    _.debounce((newDate, nowHasTime) => debouncedFunctionRef.current(newDate, nowHasTime), 500),
-    [],
-  );
 
   useEffect(() => {
-    debouncedChange(startDate, hasTime);
+    const newDate = moment(startDate).format('YYYY-MM-DD');
-  }, [startDate, hasTime]);
+    setValue('endDate', newDate);
+  }, [startDate]);
+
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
     'January',
@@ -175,21 +134,19 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'November',
     'December',
   ];
-
+  const saveDueDate = (data: any) => {
-  const onChange = (dates: any) => {
+    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
-    const [start, end] = dates;
+    if (newDate.isValid()) {
-    setStartDate(start);
+      onDueDateChange(task, newDate.toDate());
-    setEndDate(end);
+    }
   };
-  const [isRange, setIsRange] = useState(false);
+  const CustomTimeInput = forwardRef(({ value, onClick }: any, $ref: any) => {
-
-  const CustomTimeInput = forwardRef(({ value, onClick, onChange, onBlur, onFocus }: any, $ref: any) => {
     return (
       <DueDateInput
         id="endTime"
         value={value}
         name="endTime"
-        onChange={onChange}
+        ref={$ref}
         width="100%"
         variant="alternate"
         label="Time"
@@ -197,36 +154,44 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
       />
     );
   });
-
   return (
     <Wrapper>
-      <DateRangeInputs>
+      <Form onSubmit={handleSubmit(saveDueDate)}>
-        <DatePicker
+        <FormField>
-          selected={startDate}
+          <DueDateInput
-          onChange={date => setStartDate(date)}
+            id="endDate"
-          popperClassName="picker-hidden"
+            name="endDate"
-          dateFormat="yyyy-MM-dd"
+            width="100%"
-          disabledKeyboardNavigation
+            variant="alternate"
-          isClearable
+            label="Date"
-          placeholderText="Select due date"
+            defaultValue={now.format('YYYY-MM-DD')}
+            ref={register({
+              required: 'End date is required.',
+            })}
           />
-        {isRange ? (
+        </FormField>
+        <FormField>
+          <Controller
+            control={control}
+            defaultValue={now.toDate()}
+            name="endTime"
+            render={({ onChange, onBlur, value }) => (
               <DatePicker
-            selected={startDate}
+                onChange={onChange}
-            isClearable
+                selected={value}
-            onChange={date => setStartDate(date)}
+                onBlur={onBlur}
-            popperClassName="picker-hidden"
+                showTimeSelect
-            dateFormat="yyyy-MM-dd"
+                showTimeSelectOnly
-            placeholderText="Select from date"
+                timeIntervals={15}
+                timeCaption="Time"
+                dateFormat="h:mm aa"
+                customInput={<CustomTimeInput />}
               />
-        ) : (
-          <AddDateRange>Add date range</AddDateRange>
             )}
-      </DateRangeInputs>
+          />
+        </FormField>
+        <DueDatePickerWrapper>
           <DatePicker
-        selected={startDate}
-        onChange={date => setStartDate(date)}
-        startDate={startDate}
             useWeekdaysShort
             renderCustomHeader={({
               date,
@@ -244,10 +209,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 <HeaderSelectLabel>
                   {months[date.getMonth()]}
                   <HeaderSelect
-                value={months[getMonth(date)]}
+                    value={getYear(date)}
-                onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
+                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
                   >
-                {months.map(option => (
+                    {years.map(option => (
                       <option key={option} value={option}>
                         {option}
                       </option>
@@ -256,8 +221,11 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 </HeaderSelectLabel>
                 <HeaderSelectLabel>
                   {date.getFullYear()}
-              <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
+                  <HeaderSelect
-                {years.map(option => (
+                    value={months[getMonth(date)]}
+                    onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
+                  >
+                    {months.map(option => (
                       <option key={option} value={option}>
                         {option}
                       </option>
@@ -270,46 +238,30 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 </HeaderButton>
               </HeaderActions>
             )}
-        inline
-      />
-      <ActionsSeparator />
-      {hasTime && (
-        <ActionsWrapper>
-          <ActionClock width={16} height={16} />
-          <ActionLabel>Due Time</ActionLabel>
-          <DatePicker
             selected={startDate}
+            inline
             onChange={date => {
+              if (date) {
                 setStartDate(date);
-            }}
-            showTimeSelect
-            showTimeSelectOnly
-            timeIntervals={15}
-            timeCaption="Time"
-            dateFormat="h:mm aa"
-          />
-          <ActionIcon onClick={() => enableTime(false)}>
-            <Cross width={16} height={16} />
-          </ActionIcon>
-        </ActionsWrapper>
-      )}
-      <ActionsWrapper>
-        {!hasTime && (
-          <ActionIcon
-            onClick={() => {
-              if (startDate === null) {
-                const today = new Date();
-                today.setHours(12, 30, 0);
-                setStartDate(today);
               }
-              enableTime(true);
+            }}
+          />
+        </DueDatePickerWrapper>
+        <ActionWrapper>
+          <ConfirmAddDueDate type="submit" onClick={NOOP}>
+            Save
+          </ConfirmAddDueDate>
+          <RemoveDueDate
+            variant="outline"
+            color="danger"
+            onClick={() => {
+              onRemoveDueDate(task);
             }}
           >
-            <Clock width={16} height={16} />
+            Remove
-          </ActionIcon>
+          </RemoveDueDate>
-        )}
+        </ActionWrapper>
-        <ClearButton onClick={() => setStartDate(null)}>{hasTime ? 'Clear all' : 'Clear'}</ClearButton>
+      </Form>
-      </ActionsWrapper>
     </Wrapper>
   );
 };

frontend/src/shared/components/EmptyBoard/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components/macro';
 import { mixin } from 'shared/utils/styles';
-import theme from '../../../App/ThemeStyles';
 
 export const BoardContainer = styled.div`
   position: relative;
@@ -35,9 +34,9 @@ export const Container = styled.div`
   white-space: nowrap;
 `;
 
-export const defaultBaseColor = theme.colors.bg.primary;
+export const defaultBaseColor = '#10163a';
 
-export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
+export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
 
 export const skeletonKeyframes = keyframes`
   0% {

frontend/src/shared/components/Input/Input.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import BaseStyles from 'App/BaseStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import theme from 'App/ThemeStyles';
+import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
+
+import Input from '.';
+
+export default {
+  component: Input,
+  title: 'Input',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+const Wrapper = styled.div`
+  background: rgba(${props => props.theme.colors.bg.primary});
+  padding: 45px;
+  margin: 25px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <ThemeProvider theme={theme}>
+        <Wrapper>
+          <Input label="Label placeholder" />
+          <Input width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
+        </Wrapper>
+      </ThemeProvider>
+    </>
+  );
+};

frontend/src/shared/components/Input/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';
 
 const InputWrapper = styled.div<{ width: string }>`
   position: relative;
@@ -54,18 +53,18 @@ const InputInput = styled.input<{
   transition: all 0.3s ease;
   &:focus {
     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid ${props => props.theme.colors.primary};
+    border: 1px solid rgba(115, 103, 240);
     background: ${props => props.focusBg};
   }
   &:focus ~ ${InputLabel} {
-    color: ${props => props.theme.colors.primary};
+    color: rgba(115, 103, 240);
     transform: translate(-3px, -90%);
   }
   ${props =>
     props.hasValue &&
     css`
       & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
+        color: rgba(115, 103, 240);
         transform: translate(-3px, -90%);
       }
     `}
@@ -79,7 +78,6 @@ const Icon = styled.div`
 
 type InputProps = {
   variant?: 'normal' | 'alternate';
-  disabled?: boolean;
   label?: string;
   width?: string;
   floatingLabel?: boolean;
@@ -118,7 +116,6 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
   (
     {
-      disabled = false,
       width = 'auto',
       variant = 'normal',
       type = 'text',
@@ -139,8 +136,8 @@ const Input = React.forwardRef(
     $ref: any,
   ) => {
     const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
+    const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
+    const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
 
     // Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
     // The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
@@ -163,7 +160,6 @@ const Input = React.forwardRef(
           onChange={e => {
             setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
           }}
-          disabled={disabled}
           hasValue={hasValue}
           ref={combinedRef}
           id={id}

frontend/src/shared/components/List/List.stories.tsx

@@ -0,0 +1,146 @@
+import React, { createRef } from 'react';
+import { action } from '@storybook/addon-actions';
+import Card from 'shared/components/Card';
+import CardComposer from 'shared/components/CardComposer';
+import LabelColors from 'shared/constants/labelColors';
+import NOOP from 'shared/utils/noop';
+import List, { ListCards } from '.';
+
+export default {
+  component: List,
+  title: 'List',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+const labelData: Array<ProjectLabel> = [
+  {
+    id: 'development',
+    name: 'Development',
+    createdDate: new Date().toString(),
+    labelColor: {
+      id: '1',
+      colorHex: LabelColors.BLUE,
+      name: 'blue',
+      position: 1,
+    },
+  },
+];
+
+const createCard = () => {
+  const $ref = createRef<HTMLDivElement>();
+  return (
+    <Card
+      taskID="1"
+      taskGroupID="1"
+      description="hello!"
+      ref={$ref}
+      title="Hello, world"
+      onClick={action('on click')}
+      onContextMenu={action('on context click')}
+      watched
+      labels={labelData}
+      checklists={{ complete: 1, total: 4 }}
+      dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+    />
+  );
+};
+
+export const Default = () => {
+  return (
+    <List
+      id=""
+      name="General"
+      isComposerOpen={false}
+      onSaveName={action('on save name')}
+      onOpenComposer={action('on open composer')}
+      onExtraMenuOpen={action('extra menu open')}
+    >
+      <ListCards>
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
+      </ListCards>
+    </List>
+  );
+};
+
+export const WithCardComposer = () => {
+  return (
+    <List
+      id="1"
+      name="General"
+      isComposerOpen
+      onSaveName={action('on save name')}
+      onOpenComposer={action('on open composer')}
+      onExtraMenuOpen={action('extra menu open')}
+    >
+      <ListCards>
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
+      </ListCards>
+    </List>
+  );
+};
+
+export const WithCard = () => {
+  const $cardRef: any = createRef();
+  return (
+    <List
+      id="1"
+      name="General"
+      isComposerOpen={false}
+      onSaveName={action('on save name')}
+      onOpenComposer={action('on open composer')}
+      onExtraMenuOpen={action('extra menu open')}
+    >
+      <ListCards>
+        <Card
+          taskID="1"
+          taskGroupID="1"
+          description="hello!"
+          ref={$cardRef}
+          title="Hello, world"
+          onClick={action('on click')}
+          onContextMenu={action('on context click')}
+          watched
+          labels={labelData}
+          checklists={{ complete: 1, total: 4 }}
+          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+        />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
+      </ListCards>
+    </List>
+  );
+};
+export const WithCardAndComposer = () => {
+  const $cardRef: any = createRef();
+  return (
+    <List
+      id="1"
+      name="General"
+      isComposerOpen
+      onSaveName={action('on save name')}
+      onOpenComposer={action('on open composer')}
+      onExtraMenuOpen={action('extra menu open')}
+    >
+      <ListCards>
+        <Card
+          taskID="1"
+          taskGroupID="1"
+          description="hello!"
+          ref={$cardRef}
+          title="Hello, world"
+          onClick={action('on click')}
+          onContextMenu={action('on context click')}
+          watched
+          labels={labelData}
+          checklists={{ complete: 1, total: 4 }}
+          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
+        />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
+      </ListCards>
+    </List>
+  );
+};

frontend/src/shared/components/List/Styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea';
+import { mixin } from 'shared/utils/styles';
 
 export const Container = styled.div`
   width: 272px;
@@ -33,7 +34,7 @@ export const AddCardButton = styled.a`
   &:hover {
     color: #c2c6dc;
     text-decoration: none;
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 export const Wrapper = styled.div`
@@ -72,6 +73,7 @@ export const HeaderName = styled(TextareaAutosize)`
   box-shadow: none;
   font-weight: 600;
   margin: -4px 0;
+  padding: 4px 8px;
 
   letter-spacing: normal;
   word-spacing: normal;
@@ -95,7 +97,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
     props.isEditing &&
     css`
       & ${HeaderName} {
-        box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
+        box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
       }
     `}
 `;

frontend/src/shared/components/ListActions/Styles.ts

@@ -21,7 +21,7 @@ export const ListActionItem = styled.span`
   margin: 0 -12px;
   text-decoration: none;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 

frontend/src/shared/components/Lists/Lists.stories.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import Lists from '.';
+
+export default {
+  component: Lists,
+  title: 'Lists',
+  parameters: {
+    backgrounds: [
+      { name: 'gray', value: '#262c49', default: true },
+      { name: 'white', value: '#ffffff' },
+    ],
+  },
+};
+
+const initialListsData = {
+  columns: {
+    'column-1': {
+      taskGroupID: 'column-1',
+      name: 'General',
+      taskIds: ['task-3', 'task-4', 'task-1', 'task-2'],
+      position: 1,
+      tasks: [],
+    },
+    'column-2': {
+      taskGroupID: 'column-2',
+      name: 'Development',
+      taskIds: [],
+      position: 2,
+      tasks: [],
+    },
+  },
+  tasks: {
+    'task-1': {
+      taskID: 'task-1',
+      taskGroup: { taskGroupID: 'column-1' },
+      name: 'Create roadmap',
+      position: 2,
+      labels: [],
+    },
+    'task-2': {
+      taskID: 'task-2',
+      taskGroup: { taskGroupID: 'column-1' },
+      position: 1,
+      name: 'Create authentication',
+      labels: [],
+    },
+    'task-3': {
+      taskID: 'task-3',
+      taskGroup: { taskGroupID: 'column-1' },
+      position: 3,
+      name: 'Create login',
+      labels: [],
+    },
+    'task-4': {
+      taskID: 'task-4',
+      taskGroup: { taskGroupID: 'column-1' },
+      position: 4,
+      name: 'Create plugins',
+      labels: [],
+    },
+  },
+};
+
+export const Default = () => {
+  const [listsData, setListsData] = useState(initialListsData);
+  const onCardDrop = (droppedTask: Task) => {
+    const newState = {
+      ...listsData,
+      tasks: {
+        ...listsData.tasks,
+        [droppedTask.id]: droppedTask,
+      },
+    };
+    setListsData(newState);
+  };
+  const onListDrop = (droppedColumn: any) => {
+    const newState = {
+      ...listsData,
+      columns: {
+        ...listsData.columns,
+        [droppedColumn.taskGroupID]: droppedColumn,
+      },
+    };
+    setListsData(newState);
+  };
+  return (
+    <Lists
+      taskGroups={[]}
+      onTaskClick={action('card click')}
+      onQuickEditorOpen={action('card composer open')}
+      onCreateTask={action('card create')}
+      onTaskDrop={onCardDrop}
+      onTaskGroupDrop={onListDrop}
+      onChangeTaskGroupName={action('change group name')}
+      cardLabelVariant="large"
+      onCardLabelClick={action('label click')}
+      onCreateTaskGroup={action('create list')}
+      onExtraMenuOpen={action('extra menu open')}
+      onCardMemberClick={action('card member click')}
+    />
+  );
+};

frontend/src/shared/components/Lists/Styles.ts

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  flex: 1;
   user-select: none;
   white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   ::-webkit-scrollbar {
     height: 10px;

frontend/src/shared/components/Lists/index.tsx

@@ -10,7 +10,7 @@ import {
   getNewDraggablePosition,
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
@@ -51,7 +51,7 @@ export type TaskStatusFilter = {
 
 export interface TaskMetaFilterName {
   meta: TaskMeta;
-  value?: string | dayjs.Dayjs | null;
+  value?: string | moment.Moment | null;
   id?: string | null;
 }
 
@@ -104,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
     return true;
   }
   if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = dayjs(task.completedAt);
+    const completedAt = moment(task.completedAt);
-    const REFERENCE = dayjs();
+    const REFERENCE = moment(); // fixed just for testing, use moment();
     switch (filter.since) {
       case TaskSince.TODAY:
         const TODAY = REFERENCE.clone().startOf('day');
         return completedAt.isSame(TODAY, 'd');
       case TaskSince.YESTERDAY:
         const YESTERDAY = REFERENCE.clone()
-          .subtract(1, 'day')
+          .subtract(1, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(YESTERDAY, 'd');
       case TaskSince.ONE_WEEK:
         const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'day')
+          .subtract(7, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(ONE_WEEK, 'd');
       case TaskSince.TWO_WEEKS:
         const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'day')
+          .subtract(14, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
       case TaskSince.THREE_WEEKS:
         const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'day')
+          .subtract(21, 'days')
           .startOf('day');
         return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
       default:
@@ -353,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                   task.dueDate
                                                     ? {
                                                         isPastDue: false,
-                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
                                                       }
                                                     : undefined
                                                 }
@@ -391,16 +391,16 @@ const SimpleLists: React.FC<SimpleProps> = ({
                       </Draggable>
                     );
                   })}
-                {provided.placeholder}
-              </Container>
-            )}
-          </Droppable>
-        </DragDropContext>
                 <AddList
                   onSave={listName => {
                     onCreateTaskGroup(listName);
                   }}
                 />
+                {provided.placeholder}
+              </Container>
+            )}
+          </Droppable>
+        </DragDropContext>
       </BoardWrapper>
     </BoardContainer>
   );

frontend/src/shared/components/Lists/metaFilter.ts

@@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 enum ShouldFilter {
   NO_FILTER,
@@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
       isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
     }
     if (task.dueDate) {
-      const taskDueDate = dayjs(task.dueDate);
+      const taskDueDate = moment(task.dueDate);
-      const today = dayjs();
+      const today = moment();
       let start;
       let end;
       switch (filters.dueDate.type) {
@@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
             taskDueDate.isBefore(
               today
                 .clone()
-                .add(1, 'day')
+                .add(1, 'days')
                 .endOf('day'),
             ),
           );
@@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today
             .clone()
             .weekday(0)
-            .add(7, 'day')
+            .add(7, 'days')
             .startOf('day');
           end = today
             .clone()
             .weekday(6)
-            .add(7, 'day')
+            .add(7, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(7, 'day')
+            .add(7, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(14, 'day')
+            .add(14, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(21, 'day')
+            .add(21, 'days')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;

frontend/src/shared/components/LoadingSpinner/Styles.ts

@@ -1,42 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const LoadingSpinnerKeyframes = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
-  display: inline-block;
-  position: relative;
-  width: ${props => props.borderSize};
-  height: ${props => props.borderSize};
-
-  & > div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: ${props => props.size};
-    height: ${props => props.size};
-    margin: ${props => props.thickness};
-    border: ${props => props.thickness} solid ${props => props.theme.colors[props.color]};
-    border-radius: 50%;
-    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: ${props => props.theme.colors[props.color]} transparent transparent transparent;
-  }
-
-  & > div:nth-child(1) {
-    animation-delay: -0.45s;
-  }
-  & > div:nth-child(2) {
-    animation-delay: -0.3s;
-  }
-  & > div:nth-child(3) {
-    animation-delay: -0.15s;
-  }
-`;
-
-export default LoadingSpinnerWrapper;

frontend/src/shared/components/LoadingSpinner/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { LoadingSpinnerWrapper } from './Styles';
-
-type LoadingSpinnerProps = {
-  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
-  size?: string;
-  borderSize?: string;
-  thickness?: string;
-};
-
-/**
- * The default parameters may not be applicable to every scenario
- *
- * While borderSize and size should be a single prop,
- * it is currently not as such because it would require math to be done to strings
- * e.g "80px - 16"
- *
- *
- * @param color
- * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
- * @param thickness
- * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
- * @constructor
- */
-const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  color = 'primary',
-  size = '64px',
-  thickness = '8px',
-  borderSize = '80px',
-}) => {
-  return (
-    <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
-      <div />
-      <div />
-      <div />
-    </LoadingSpinnerWrapper>
-  );
-};
-
-export default LoadingSpinner;

frontend/src/shared/components/Login/Login.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import styled from 'styled-components';
+import Login from '.';
+
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+export default {
+  component: Login,
+  title: 'Login',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+`;
+
+const LoginWrapper = styled.div`
+  width: 60%;
+`;
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Container>
+        <LoginWrapper>
+          <Login onSubmit={action('on submit')} />
+        </LoginWrapper>
+      </Container>
+    </>
+  );
+};
+
+export const WithSubmission = () => {
+  const onSubmit = async (data: LoginFormData, setComplete: (val: boolean) => void, setError: any) => {
+    await sleep(2000);
+    if (data.username !== 'test' || data.password !== 'test') {
+      setError('username', 'invalid', 'Invalid username');
+      setError('password', 'invalid', 'Invalid password');
+    }
+    setComplete(true);
+  };
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Container>
+        <LoginWrapper>
+          <Login onSubmit={onSubmit} />
+        </LoginWrapper>
+      </Container>
+    </>
+  );
+};

frontend/src/shared/components/Login/Styles.ts

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { mixin } from 'shared/utils/styles';
 
 export const Wrapper = styled.div`
   background: #eff2f7;
@@ -69,7 +68,7 @@ export const FormIcon = styled.div`
 
 export const FormError = styled.span`
   font-size: 0.875rem;
-  color: ${props => props.theme.colors.danger};
+  color: rgb(234, 84, 85);
 `;
 
 export const LoginButton = styled(Button)``;
@@ -100,5 +99,5 @@ export const LogoWrapper = styled.div`
   padding-bottom: 16px;
   margin-bottom: 24px;
   color: rgb(222, 235, 255);
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;

frontend/src/shared/components/Login/index.tsx

@@ -3,7 +3,6 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
 
-import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
   Form,
   LogoWrapper,
@@ -74,7 +73,6 @@ const Login = ({ onSubmit }: LoginProps) => {
 
               <ActionButtons>
                 <RegisterButton variant="outline">Register</RegisterButton>
-                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                 <LoginButton type="submit" disabled={!isComplete}>
                   Login
                 </LoginButton>

frontend/src/shared/components/MemberManager/MemberManager.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import MemberManager from '.';
+
+export default {
+  component: MemberManager,
+  title: 'MemberManager',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return <MemberManager availableMembers={[]} activeMembers={[]} onMemberChange={action('member change')} />;
+};

frontend/src/shared/components/MemberManager/Styles.ts

@@ -20,14 +20,14 @@ export const MemberManagerSearch = styled(TextareaAutosize)`
   font-size: 14px;
   font-weight: 400;
 
-  background: ${props => props.theme.colors.bg.secondary};
+  background: #262c49;
   outline: none;
-  color: ${props => props.theme.colors.text.primary};
+  color: #c2c6dc;
-  border-color: ${props => props.theme.colors.border};
+  border-color: #414561;
 
   &:focus {
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    background: ${mixin.darken('#262c49', 0.15)};
   }
 `;
 
@@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
   color: #c2c6dc;
 
   &:hover {
-    background-color: ${props => props.theme.colors.primary};
+    background-color: rgba(${props => props.theme.colors.primary});
-    color: ${props => props.theme.colors.text.secondary};
+    color: rgba(${props => props.theme.colors.text.secondary});
   }
 `;
 
@@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
   justify-content: center;
   color: #c2c6dc;
   font-weight: 700;
-  background: ${props => props.theme.colors.primary};
+  background: rgb(115, 103, 240);
   cursor: pointer;
   margin-right: 6px;
 `;

frontend/src/shared/components/MiniProfile/Styles.ts

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import Button from 'shared/components/Button';
 import { Checkmark } from 'shared/icons';
-import { mixin } from 'shared/utils/styles';
 
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
@@ -81,36 +80,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
       ? css`
           user-select: none;
           pointer-events: none;
-          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+          color: rgba(${props.theme.colors.text.primary}, 0.4);
         `
       : css`
           cursor: pointer;
           &:hover {
-            background: ${props.theme.colors.primary};
+            background: rgb(115, 103, 240);
           }
         `}
 `;
 
 export const CurrentPermission = styled.span`
   margin-left: 4px;
-  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
 `;
 
 export const Separator = styled.div`
   height: 1px;
-  border-top: 1px solid ${props => props.theme.colors.alternate};
+  border-top: 1px solid #414561;
   margin: 0.25rem !important;
 `;
 
 export const WarningText = styled.span`
   display: flex;
-  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: rgba(${props => props.theme.colors.text.primary});
 `;
 
 export const RemoveMemberButton = styled(Button)`

frontend/src/shared/components/MiniProfile/index.tsx

@@ -47,7 +47,6 @@ const permissions = [
 type MiniProfileProps = {
   bio: string;
   user: TaskUser;
-  invited?: boolean;
   onRemoveFromTask?: () => void;
   onChangeRole?: (roleCode: RoleCode) => void;
   onRemoveFromBoard?: () => void;
@@ -57,7 +56,6 @@ type MiniProfileProps = {
 const MiniProfile: React.FC<MiniProfileProps> = ({
   user,
   bio,
-  invited,
   canChangeRole,
   onRemoveFromTask,
   onChangeRole,
@@ -76,7 +74,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
           )}
           <ProfileInfo>
             <InfoTitle>{user.fullName}</InfoTitle>
-            {invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
+            <InfoUsername>{`@${user.username}`}</InfoUsername>
             <InfoBio>{bio}</InfoBio>
           </ProfileInfo>
         </Profile>

frontend/src/shared/components/Modal/Modal.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import Modal from '.';
+
+export default {
+  component: Modal,
+  title: 'Modal',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Modal
+        width={1040}
+        onClose={action('on close')}
+        renderContent={() => {
+          return <h1>Hello!</h1>;
+        }}
+      />
+    </>
+  );
+};

frontend/src/shared/components/Modal/index.tsx

@@ -30,9 +30,9 @@ const CloseIcon = styled(Cross)`
   top: 16px;
   right: -32px;
   cursor: pointer;
-  fill: ${props => props.theme.colors.text.primary};
+  fill: rgba(${props => props.theme.colors.text.primary});
   &:hover {
-    fill: ${props => props.theme.colors.text.secondary};
+    fill: rgba(${props => props.theme.colors.text.secondary});
   }
 `;
 

frontend/src/shared/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import { Home } from 'shared/icons';
+import Navbar, { ActionButton, ButtonContainer, PrimaryLogo } from '.';
+
+export default {
+  component: Navbar,
+  title: 'Navbar',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#cdd3e1' },
+    ],
+  },
+};
+const MainContent = styled.div`
+  padding: 0 0 50px 80px;
+`;
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Navbar>
+        <PrimaryLogo />
+        <ButtonContainer>
+          <ActionButton name="Home">
+            <Home width={28} height={28} />
+          </ActionButton>
+          <ActionButton name="Home">
+            <Home width={28} height={28} />
+          </ActionButton>
+        </ButtonContainer>
+      </Navbar>
+    </>
+  );
+};

frontend/src/shared/components/Navbar/Styles.ts

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { mixin } from 'shared/utils/styles';
 
 export const Logo = styled.div``;
 
@@ -10,7 +9,7 @@ export const LogoTitle = styled.div`
   font-size: 24px;
   font-weight: 600;
   transition: visibility, opacity, transform 0.25s ease;
-  color: #22ff00;
+  color: #7367f0;
 `;
 export const ActionContainer = styled.div`
   position: relative;
@@ -47,8 +46,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
   ${props =>
     props.active &&
     css`
-      background: ${props.theme.colors.primary};
+      background: rgb(115, 103, 240);
-      box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
+      box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);
     `}
   border-radius: 6px;
   cursor: pointer;
@@ -74,7 +73,7 @@ export const LogoWrapper = styled.div`
   color: rgb(222, 235, 255);
   cursor: pointer;
   transition: color 0.1s ease 0s, border 0.1s ease 0s;
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
 `;
 
 export const Container = styled.aside`
@@ -88,12 +87,12 @@ export const Container = styled.aside`
   transform: translateZ(0px);
   background: #10163a;
   transition: all 0.1s ease 0s;
-  border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-right: 1px solid rgba(65, 69, 97, 0.65);
 
   &:hover {
     width: 260px;
     box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px;
-    border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
+    border-right: 1px solid rgba(65, 69, 97, 0);
   }
   &:hover ${LogoTitle} {
     bottom: -12px;
@@ -107,6 +106,6 @@ export const Container = styled.aside`
   }
 
   &:hover ${LogoWrapper} {
-    border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
+    border-bottom: 1px solid rgba(65, 69, 97, 0);
   }
 `;

frontend/src/shared/components/NewProject/NewProject.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import NOOP from 'shared/utils/noop';
+import NewProject from '.';
+
+export default {
+  component: NewProject,
+  title: 'NewProject',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <NewProject
+        initialTeamID={null}
+        onCreateProject={action('create project')}
+        teams={[{ name: 'General', id: 'general', createdAt: '' }]}
+        onClose={NOOP}
+      />
+    </>
+  );
+};

frontend/src/shared/components/NewProject/index.tsx

@@ -3,17 +3,16 @@ import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';
-import theme from '../../../App/ThemeStyles';
 
 function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
   if (isDisabled) {
     return null;
   }
   if (isSelected) {
-    return mixin.darken(theme.colors.bg.secondary, 0.25);
+    return mixin.darken('#262c49', 0.25);
   }
   if (isFocused) {
-    return mixin.darken(theme.colors.bg.secondary, 0.15);
+    return mixin.darken('#262c49', 0.15);
   }
   return null;
 }
@@ -98,8 +97,8 @@ const ProjectName = styled.input`
   font-weight: 400;
 
   &:focus {
-    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    background: ${mixin.darken('#262c49', 0.15)};
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
   }
 `;
 const ProjectNameLabel = styled.label`
@@ -127,35 +126,35 @@ const colourStyles = {
   control: (styles: any, data: any) => {
     return {
       ...styles,
-      backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
+      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
-      boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
+      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
       borderRadius: '3px',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderImage: 'initial',
-      borderColor: theme.colors.alternate,
+      borderColor: '#414561',
       ':hover': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderImage: 'initial',
-        borderColor: theme.colors.alternate,
+        borderColor: '#414561',
       },
       ':active': {
-        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
+        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderImage: 'initial',
-        borderColor: `${theme.colors.primary}`,
+        borderColor: 'rgb(115, 103, 240)',
       },
     };
   },
   menu: (styles: any) => {
     return {
       ...styles,
-      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
+      backgroundColor: mixin.darken('#262c49', 0.15),
     };
   },
   dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@@ -168,11 +167,11 @@ const colourStyles = {
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
       },
       ':hover': {
         ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
+        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
       },
     };
   },
@@ -210,21 +209,21 @@ const CreateButton = styled.button`
 
   &:hover {
     color: #fff;
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
-    border-color: ${props => props.theme.colors.primary};
+    border-color: rgb(115, 103, 240);
   }
 `;
 type NewProjectProps = {
   initialTeamID: string | null;
   teams: Array<Team>;
   onClose: () => void;
-  onCreateProject: (projectName: string, teamID: string | null) => void;
+  onCreateProject: (projectName: string, teamID: string) => void;
 };
 
 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
   const [projectName, setProjectName] = useState('');
   const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
+  const options = teams.map(t => ({ label: t.name, value: t.id }));
   return (
     <Overlay>
       <Content>
@@ -263,7 +262,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
                   onChange={(e: any) => {
                     setTeam(e.value);
                   }}
-                  value={options.find(d => d.value === team)}
+                  value={options.filter(d => d.value === team)}
                   styles={colourStyles}
                   classNamePrefix="teamSelect"
                   options={options}
@@ -272,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
             </ProjectInfo>
             <CreateButton
               onClick={() => {
-                if (projectName !== '') {
+                if (team && projectName !== '') {
-                  onCreateProject(projectName, team === 'no-team' ? null : team);
+                  onCreateProject(projectName, team);
                 }
               }}
             >

frontend/src/shared/components/NotifcationPopup/index.tsx

@@ -37,7 +37,7 @@ const ItemTextContainer = styled.div`
 const ItemTextTitle = styled.span`
   font-weight: 500;
   display: block;
-  color: ${props => props.theme.colors.primary};
+  color: rgba(${props => props.theme.colors.primary});
   font-size: 14px;
 `;
 const ItemTextDesc = styled.span`
@@ -76,21 +76,21 @@ const NotificationHeader = styled.div`
   text-align: center;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  background: ${props => props.theme.colors.primary};
+  background: rgba(${props => props.theme.colors.primary});
 `;
 
 const NotificationHeaderTitle = styled.span`
   font-size: 14px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: rgba(${props => props.theme.colors.text.secondary});
 `;
 
 const NotificationFooter = styled.div`
   cursor: pointer;
   padding: 0.5rem;
   text-align: center;
-  color: ${props => props.theme.colors.primary};
+  color: rgba(${props => props.theme.colors.primary});
   &:hover {
-    background: ${props => props.theme.colors.bg.primary};
+    background: #10163a;
   }
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;

frontend/src/shared/components/PopupMenu/LabelEditor.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';
 
 const WhiteCheckmark = styled(Checkmark)`
-  fill: ${props => props.theme.colors.text.secondary};
+  fill: rgba(${props => props.theme.colors.text.secondary});
 `;
 type Props = {
   labelColors: Array<LabelColor>;

frontend/src/shared/components/PopupMenu/Styles.ts

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import ControlledInput from 'shared/components/ControlledInput';
-import theme from 'App/ThemeStyles';
 
 export const Container = styled.div<{
   invertY: boolean;
@@ -87,12 +86,6 @@ export const HeaderTitle = styled.span`
 
 export const Content = styled.div`
   max-height: 632px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  &::-webkit-scrollbar-track-piece {
-    background: ${props => props.theme.colors.bg.primary};
-    border-radius: 20px;
-  }
 `;
 
 export const LabelSearch = styled(ControlledInput)`
@@ -183,7 +176,7 @@ export const LabelIcon = styled.div`
   cursor: pointer;
 
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 
@@ -240,8 +233,8 @@ export const FieldName = styled.input`
   font-weight: 400;
 
   &:focus {
-    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-    background: ${mixin.darken(theme.colors.bg.secondary, 0.15)};
+    background: ${mixin.darken('#262c49', 0.15)};
   }
 `;
 
@@ -265,7 +258,7 @@ export const LabelBox = styled.span<{ color: string }>`
 `;
 
 export const SaveButton = styled.input`
-  background: ${props => props.theme.colors.primary};
+  background: rgb(115, 103, 240);
   box-shadow: none;
   border: none;
   color: #fff;
@@ -303,7 +296,7 @@ export const DeleteButton = styled.input`
 
   &:hover {
     color: #fff;
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
     border-color: transparent;
   }
 `;
@@ -324,7 +317,7 @@ export const CreateLabelButton = styled.button`
   cursor: pointer;
 
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;
 

frontend/src/shared/components/PopupMenu/index.tsx

@@ -4,7 +4,6 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
 import NOOP from 'shared/utils/noop';
 import produce from 'immer';
-import theme from 'App/ThemeStyles';
 import {
   Container,
   ContainerDiamond,
@@ -17,9 +16,9 @@ import {
 } from './Styles';
 
 function getPopupOptions(options?: PopupOptions) {
-  const popupOptions: PopupOptionsInternal = {
+  const popupOptions = {
     borders: true,
-    diamondColor: theme.colors.bg.secondary,
+    diamondColor: '#262c49',
     targetPadding: '10px',
     showDiamond: true,
     width: 316,
@@ -40,9 +39,6 @@ function getPopupOptions(options?: PopupOptions) {
     if (options.diamondColor) {
       popupOptions.diamondColor = options.diamondColor;
     }
-    if (options.onClose) {
-      popupOptions.onClose = options.onClose;
-    }
   }
   return popupOptions;
 }
@@ -139,7 +135,6 @@ type PopupOptionsInternal = {
   targetPadding: string;
   diamondColor: string;
   showDiamond: boolean;
-  onClose?: () => void;
 };
 
 type PopupOptions = {
@@ -148,7 +143,6 @@ type PopupOptions = {
   width?: number | null;
   borders?: boolean | null;
   diamondColor?: string | null;
-  onClose?: () => void;
 };
 const defaultState = {
   isOpen: false,
@@ -244,12 +238,7 @@ export const PopupProvider: React.FC = ({ children }) => {
             top={currentState.top}
             targetPadding={currentState.options.targetPadding}
             left={currentState.left}
-            onClose={() => {
+            onClose={() => setState(defaultState)}
-              if (currentState.options && currentState.options.onClose) {
-                currentState.options.onClose();
-              }
-              setState(defaultState);
-            }}
             width={currentState.options.width}
           >
             {currentState.content}

frontend/src/shared/components/ProjectGridItem/ProjectGridItem.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import ProjectGridItem from '.';
+
+export default {
+  component: ProjectGridItem,
+  title: 'ProjectGridItem',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff', default: true },
+      { name: 'gray', value: '#f8f8f8' },
+    ],
+  },
+};
+
+const projectsData = [
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'aaaa', name: 'Taskcafé', color: '#aa62e3' },
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'bbbb', name: 'Editorial Calender', color: '#aa62e3' },
+  { taskGroups: [], teamTitle: 'Personal', projectID: 'cccc', name: 'New Blog', color: '#aa62e3' },
+];
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+`;
+
+const ProjectsWrapper = styled.div`
+  width: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Default = () => {
+  return (
+    <Container>
+      <ProjectsWrapper>
+        {projectsData.map(project => (
+          <ProjectGridItem project={project} />
+        ))}
+      </ProjectsWrapper>
+    </Container>
+  );
+};

frontend/src/shared/components/ProjectSettings/index.tsx

@@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
   margin: 0 -12px;
   text-decoration: none;
   &:hover {
-    background: ${props => props.theme.colors.primary};
+    background: rgb(115, 103, 240);
   }
 `;