fix: add clarification to arguments for reset-password cmd

Upgrading all libraries fixed the error (ref.current is read-only)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -18,6 +18,8 @@ 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

@@ -0,0 +1,8 @@
+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

@@ -1,30 +0,0 @@
----
-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

@@ -10,6 +10,8 @@ windows:
         - yarn:
           - cd frontend
           - yarn start
+        - worker:
+          - go run cmd/taskcafe/main.go worker
   - web/editor:
       root: ./frontend
       panes:
@@ -21,4 +23,4 @@ windows:
   - database:
       root: ./
       panes:
-        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:8855/taskcafe

CHANGELOG.md

@@ -4,16 +4,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## UNRELEASED
 
 ### Added
-- Task sorting & filtering
-- Redesigned the Task Details UI
+- On login page, redirects to `/register` if no users exist (to help streamline initial setup)
 
 ### Fixed
-- removed CORS middleware to fix security issue
-- Added 3 retries with backoff to initial database connection [(#47)](https://github.com/JordanKnott/taskcafe/issues/47)
-- Can now actually set a due date
+- Fixes new user popup form so that it can now be submitted
+
+## [0.3.5] - 2021-09-04
+
+### Added
+- Project visibility can now be set to public - meaning anyone can view the project board
+- When redirected to login page while trying to view a page that requires login, you'll be redirected back to the correct page after login
+- When creating a new label within the LabelManager on a card, the new label will automatically be applied to the task after creation
+
+### Changed
+- Switch primary font to Open Sans
+
+### Fixed
+- Any open popups are hidden when closing the Task Details window
 
 ## [0.1.1] - 2020-08-21
 

CONTRIBUTING.md

@@ -6,7 +6,9 @@ Thanks for wanting to contribute to Taskcafe!
 
 So you want to contribute to Taskcafe? Great!
 
-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 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 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.
 
@@ -32,6 +34,10 @@ 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.8"
+python_version = "3.9"

Pipfile.lock

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

README.md

@@ -9,31 +9,43 @@
     <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" />
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
   </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>
 
-**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
+![Taskcafe](./.github/taskcafe_preview.png)
 
 ## Features
 
-Currently Taskcafe only offers basic task tracking through a Kanban board.
+The following features have been implemented:
 
-Currently you can do the following to tasks:
+- Manage tasks through a Kanban board interface (set due dates, labels, add checklists)
+- View all your current assigned tasks through the My Tasks view
+- Personal projects
+- Task comments and activity
 
-- Task sorting & filtering
-- Add colors & named labels
-- Add due dates
-- Descriptions written in Markdown
-- Assign members
-- Checklists
-- Mark tasks as complete
+This project is still in active development, so some options may not be fully implemented yet.
+
+**For updates on development, join the [Discord server](https://discord.gg/JkQDruh).**
 
 For a list of planned features, check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
 

conf/air.toml

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

docker-compose.dev.yml

@@ -12,24 +12,18 @@ services:
     volumes:
       - taskcafe-postgres:/var/lib/postgresql/data
     ports:
-      - 5432:5432
+      - 8865:5432
   mailhog:
     image: mailhog/mailhog:latest
     restart: always
     ports:
       - 1025:1025
       - 8025:8025
-  broker:
-    image: rabbitmq:3-management
+  redis:
+    image: redis:6.2
     restart: always
     ports:
-      - 8060:15672
-      - 5672:5672
-  result_store:
-    image: memcached:1.6-alpine
-    restart: always
-    ports:
-      - 11211:11211
+      - 6379:6379
 
 volumes:
   taskcafe-postgres:

docker-compose.yml

@@ -12,6 +12,9 @@ services:
     environment:
       TASKCAFE_DATABASE_HOST: postgres
       TASKCAFE_MIGRATE: "true"
+    volumes:
+      - taskcafe-uploads:/root/uploads
+      
   postgres:
     image: postgres:12.3-alpine
     restart: always
@@ -22,11 +25,13 @@ services:
       POSTGRES_PASSWORD: taskcafe_test
       POSTGRES_DB: taskcafe
     volumes:
-    - taskcafe-postgres:/var/lib/postgresql/data
+      - taskcafe-postgres:/var/lib/postgresql/data
 
 volumes:
   taskcafe-postgres:
     external: false
+  taskcafe-uploads:
+    external: false
 
 networks:
   taskcafe-test:

frontend/.env

@@ -0,0 +1,2 @@
+REACT_APP_ENABLE_POLLING=true
+ESLINT_NO_DEV_ERRORS=true

frontend/.env.development

@@ -0,0 +1 @@
+REACT_APP_ENABLE_POLLING=false

frontend/.eslintrc.json

@@ -24,14 +24,19 @@
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
+    "no-shadow": "off",
     "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/require-default-props": "off",
     "no-case-declarations": "off",
+    "no-plusplus": "off",
     "react/prop-types": 0,
+    "react/no-unused-prop-types": "off",
+    "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",
     "import/extensions": [
@@ -45,6 +50,8 @@
         "tsx": "never"
       }
     ],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
     "import/no-extraneous-dependencies": [
       "error",
       {

frontend/codegen.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema:
-  - '../internal/graph/schema.graphqls'
+  - '../internal/graph/schema/*.gql'
 documents:
   - 'src/shared/graphql/*.graphqls'
   - 'src/shared/graphql/**/*.ts'

frontend/package.json

@@ -3,33 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.0.0-rc.8",
+    "@apollo/client": "^3.3.16",
     "@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",
+    "@apollo/react-hooks": "^4.0.0",
+    "@taskcafe/rich-markdown-editor": "^11.0.10",
     "@types/color": "^3.0.1",
-    "@types/date-fns": "^2.6.0",
-    "@types/jest": "^24.0.0",
-    "@types/jwt-decode": "^2.2.1",
-    "@types/lodash": "^4.14.149",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.21",
-    "@types/react-beautiful-dnd": "^12.1.1",
-    "@types/react-datepicker": "^2.11.0",
-    "@types/react-dom": "^16.9.5",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/react-select": "^3.0.13",
+    "@types/dompurify": "^2.2.2",
+    "@types/emoji-mart": "^3.0.4",
+    "@types/jest": "^26.0.23",
+    "@types/lodash": "^4.14.168",
+    "@types/node": "^15.0.1",
+    "@types/react": "^17.0.20",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-datepicker": "^3.1.8",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router": "^5.1.13",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-select": "^4.0.15",
     "@types/react-timeago": "^4.1.1",
-    "@types/styled-components": "^5.0.0",
+    "@types/styled-components": "^5.1.0",
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.6.8",
     "apollo-link": "^1.2.13",
@@ -37,34 +29,43 @@
     "apollo-link-http": "^1.5.16",
     "apollo-link-state": "^0.4.2",
     "apollo-utilities": "^1.3.3",
-    "axios": "^0.19.2",
-    "axios-auth-refresh": "^2.2.7",
+    "axios": "^0.21.1",
+    "axios-auth-refresh": "^3.1.0",
     "color": "^3.1.2",
-    "date-fns": "^2.14.0",
-    "graphql": "^15.0.0",
-    "graphql-tag": "^2.10.3",
-    "history": "^4.10.1",
-    "immer": "^6.0.3",
-    "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "date-fns": "^2.21.1",
+    "dayjs": "^1.10.4",
+    "dompurify": "^2.2.8",
+    "emoji-mart": "^3.0.1",
+    "emoticon": "^4.0.0",
+    "graphql": "^15.5.0",
+    "graphql-tag": "^2.12.4",
+    "history": "^5.0.0",
+    "immer": "^9.0.2",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.7.1",
+    "loglevel-plugin-remote": "^0.6.8",
+    "node-emoji": "^1.10.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "query-string": "^7.0.0",
+    "react": "^17.0.2",
     "react-autosize-textarea": "^7.0.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^2.14.1",
-    "react-dom": "^16.12.0",
-    "react-hook-form": "^6.0.6",
-    "react-markdown": "^4.3.1",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-datepicker": "^3.8.0",
+    "react-dom": "^17.0.2",
+    "react-emoji-render": "^1.2.4",
+    "react-hook-form": "^7.3.6",
+    "react-markdown": "^6.0.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",
-    "styled-components": "^5.0.1",
-    "typescript": "~3.7.2"
+    "react-scripts": "4.0.3",
+    "react-select": "^4.3.0",
+    "react-timeago": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "rich-markdown-editor": "^11.17.4-0",
+    "styled-components": "^5.2.3",
+    "typescript": "~4.2.4",
+    "unist-util-visit": "^4.0.0"
   },
   "proxy": "http://localhost:3333",
   "scripts": {
@@ -72,8 +73,6 @@
     "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"
@@ -94,30 +93,20 @@
     ]
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.13.2",
-    "@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",
+    "@graphql-codegen/cli": "^1.21.4",
+    "@graphql-codegen/typescript": "^1.22.0",
+    "@graphql-codegen/typescript-operations": "^1.17.16",
+    "@graphql-codegen/typescript-react-apollo": "^2.2.4",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^1.7.0",
-    "prettier": "^1.19.1"
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1"
   }
 }

frontend/src/Admin/index.tsx

@@ -5,20 +5,22 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
   useUsersQuery,
   useDeleteUserAccountMutation,
+  useDeleteInvitedUserAccountMutation,
   useCreateUserAccountMutation,
   UsersDocument,
   UsersQuery,
 } from 'shared/generated/graphql';
-import Input from 'shared/components/Input';
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, UseFormSetError } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
 import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
 import NOOP from 'shared/utils/noop';
+import ControlledInput from 'shared/components/ControlledInput';
+import FormInput from 'shared/components/FormInput';
 
 const DeleteUserWrapper = styled.div`
   display: flex;
@@ -76,55 +78,56 @@ const CreateUserButton = styled(Button)`
   width: 100%;
 `;
 
-const AddUserInput = styled(Input)`
+const AddUserInput = styled(FormInput)`
   margin-bottom: 8px;
 `;
 
 const InputError = styled.span`
-  color: rgba(${props => props.theme.colors.danger});
+  color: ${(props) => props.theme.colors.danger};
   font-size: 12px;
 `;
 
 type AddUserPopupProps = {
-  onAddUser: (user: CreateUserData) => void;
+  onAddUser: (user: CreateUserData, setError: UseFormSetError<CreateUserData>) => void;
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const { register, handleSubmit, errors, control } = useForm<CreateUserData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+    control,
+  } = useForm<CreateUserData>();
 
   const createUser = (data: CreateUserData) => {
-    onAddUser(data);
+    onAddUser(data, setError);
   };
   return (
     <CreateUserForm onSubmit={handleSubmit(createUser)}>
       <AddUserInput
-        floatingLabel
         width="100%"
         label="Full Name"
-        id="fullName"
-        name="fullName"
         variant="alternate"
-        ref={register({ required: 'Full name is required' })}
+        {...register('fullName', { required: 'Full name is required' })}
       />
       {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
       <AddUserInput
         floatingLabel
         width="100%"
         label="Email"
-        id="email"
-        name="email"
         variant="alternate"
-        ref={register({ required: 'Email is required' })}
+        {...register('email', { required: 'Email is required' })}
       />
+      {errors.email && <InputError>{errors.email.message}</InputError>}
       <Controller
         control={control}
         name="roleCode"
         rules={{ required: 'Role is required' }}
-        render={({ onChange, value }) => (
+        render={({ field }) => (
           <Select
+            {...field}
             label="Role"
-            value={value}
-            onChange={onChange}
             options={[
               { label: 'Admin', value: 'admin' },
               { label: 'Member', value: 'member' },
@@ -137,31 +140,25 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
         floatingLabel
         width="100%"
         label="Username"
-        id="username"
-        name="username"
         variant="alternate"
-        ref={register({ required: 'Username is required' })}
+        {...register('username', { required: 'Username is required' })}
       />
       {errors.username && <InputError>{errors.username.message}</InputError>}
       <AddUserInput
         floatingLabel
         width="100%"
         label="Initials"
-        id="initials"
-        name="initials"
         variant="alternate"
-        ref={register({ required: 'Initials is required' })}
+        {...register('initials', { required: 'Initials is required' })}
       />
       {errors.initials && <InputError>{errors.initials.message}</InputError>}
       <AddUserInput
         floatingLabel
         width="100%"
         label="Password"
-        id="password"
-        name="password"
         variant="alternate"
         type="password"
-        ref={register({ required: 'Password is required' })}
+        {...register('password', { required: 'Password is required' })}
       />
       {errors.password && <InputError>{errors.password.message}</InputError>}
       <CreateUserButton type="submit">Create</CreateUserButton>
@@ -171,16 +168,27 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
 
 const AdminRoute = () => {
   useEffect(() => {
-    document.title = 'Taskcafé | Admin';
+    document.title = 'Admin | Taskcafé';
   }, []);
-  const { loading, data } = useUsersQuery();
+  const { loading, data } = useUsersQuery({ fetchPolicy: 'cache-and-network' });
   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);
+      updateApolloCache<UsersQuery>(client, UsersDocument, (cache) =>
+        produce(cache, (draftCache) => {
+          draftCache.users = cache.users.filter((u) => u.id !== response.data?.deleteUserAccount.userAccount.id);
         }),
       );
     },
@@ -191,7 +199,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({
@@ -202,37 +210,48 @@ const AdminRoute = () => {
       });
     },
   });
-  if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
-  }
   if (data && user) {
+    /*
+TODO: add permision check
     if (user.roles.org !== 'admin') {
       return <Redirect to="/" />;
     }
+     */
     return (
       <>
         <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
         <Admin
           initialTab={0}
           users={data.users}
-          canInviteUser={user.roles.org === 'admin'}
+          invitedUsers={data.invitedUsers}
+          // canInviteUser={user.roles.org === 'admin'} TODO: add permision check
+          canInviteUser
           onInviteUser={NOOP}
           onUpdateUserPassword={() => {
             hidePopup();
           }}
+          onDeleteInvitedUser={(invitedUserID) => {
+            deleteInvitedUser({ variables: { invitedUserID } });
+            hidePopup();
+          }}
           onDeleteUser={(userID, newOwnerID) => {
             deleteUser({ variables: { userID, newOwnerID } });
             hidePopup();
           }}
-          onAddUser={$target => {
+          onAddUser={($target) => {
             showPopup(
               $target,
               <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                 <AddUserPopup
-                  onAddUser={u => {
+                  onAddUser={(u, setError) => {
                     const { roleCode, ...userData } = u;
-                    createUser({ variables: { ...userData, roleCode: roleCode.value } });
-                    hidePopup();
+                    createUser({
+                      variables: { ...userData, roleCode: roleCode.value },
+                    })
+                      .then(() => hidePopup())
+                      .catch((e) => {
+                        setError('email', { type: 'validate', message: e.message });
+                      });
                   }}
                 />
               </Popup>,
@@ -242,7 +261,7 @@ const AdminRoute = () => {
       </>
     );
   }
-  return <span>error</span>;
+  return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
 };
 
 export default AdminRoute;

frontend/src/App/BaseStyles.ts

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

frontend/src/App/Routes.tsx

@@ -1,16 +1,19 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Switch, Route, useHistory, useLocation, Redirect } 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 Install from 'Install';
+import Register from 'Register';
 import Profile from 'Profile';
 import styled from 'styled-components';
+import { useCurrentUser } from 'App/context';
 
 const MainContent = styled.div`
   padding: 0 0 0 0;
@@ -21,23 +24,64 @@ const MainContent = styled.div`
   flex-grow: 1;
 `;
 
-type RoutesProps = {
-  history: H.History;
+type ValidateTokenResponse = {
+  valid: boolean;
+  userID: string;
 };
 
-const Routes: React.FC<RoutesProps> = () => (
-  <Switch>
-    <Route exact path="/login" component={Login} />
-    <Route exact path="/install" component={Install} />
-    <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} />
-    </MainContent>
-  </Switch>
-);
+const UserRequiredRoute: React.FC<any> = ({ children }) => {
+  const { user } = useCurrentUser();
+  const location = useLocation();
+  if (user) {
+    return children;
+  }
+  return (
+    <Redirect
+      to={{
+        pathname: '/login',
+        state: { redirect: location.pathname },
+      }}
+    />
+  );
+};
+
+const Routes: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const { setUser } = useCurrentUser();
+  useEffect(() => {
+    fetch('/auth/validate', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async (x) => {
+      const response: ValidateTokenResponse = await x.json();
+      const { valid, userID } = response;
+      if (valid) {
+        setUser(userID);
+      }
+      setLoading(false);
+    });
+  }, []);
+  if (loading) return null;
+  return (
+    <Switch>
+      <Route exact path="/login" component={Login} />
+      <Route exact path="/register" component={Register} />
+      <Route exact path="/confirm" component={Confirm} />
+      <Switch>
+        <MainContent>
+          <Route path="/p/:projectID" component={Project} />
+
+          <UserRequiredRoute>
+            <Route exact path="/" component={Projects} />
+            <Route path="/teams/:teamID" component={Teams} />
+            <Route path="/profile" component={Profile} />
+            <Route path="/admin" component={Admin} />
+            <Route path="/tasks" component={MyTasks} />
+          </UserRequiredRoute>
+        </MainContent>
+      </Switch>
+    </Switch>
+  );
+};
 
 export default Routes;

frontend/src/App/ThemeStyles.ts

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

frontend/src/App/Toast.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+
+const ToastedContainer = styled(ToastContainer).attrs({
+  // custom props
+})`
+  .Toastify__toast-container {
+  }
+  .Toastify__toast {
+    padding: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-radius: 10px;
+    background: #7367f0;
+    color: #fff;
+  }
+  .Toastify__toast--error {
+    background: ${props => props.theme.colors.danger};
+  }
+  .Toastify__toast--warning {
+    background: ${props => props.theme.colors.warning};
+  }
+  .Toastify__toast--success {
+    background: ${props => props.theme.colors.success};
+  }
+  .Toastify__toast-body {
+  }
+  .Toastify__progress-bar {
+  }
+  .Toastify__close-button {
+    display: none;
+  }
+`;
+
+export default ToastedContainer;

frontend/src/App/TopNavbar.tsx

@@ -1,403 +0,0 @@
-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';
-import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
-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';
-
-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: History<History.PoorMansUnknown>;
-  name: string;
-  projectID: string;
-};
-
-export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
-  const { hidePopup, setTab } = usePopup();
-  const [deleteProject] = useDeleteProjectMutation({
-    update: (client, deleteData) => {
-      const cacheData: any = client.readQuery({
-        query: GetProjectsDocument,
-      });
-
-      const newData = produce(cacheData, (draftState: any) => {
-        draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data.deleteProject.project.id,
-        );
-      });
-
-      client.writeQuery({
-        query: GetProjectsDocument,
-        data: {
-          ...newData,
-        },
-      });
-    },
-  });
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <ProjectSettings
-          onDeleteProject={() => {
-            setTab(1, { width: 300 });
-          }}
-        />
-      </Popup>
-      <Popup title={`Delete the "${name}" project?`} tab={1}>
-        <DeleteConfirm
-          description={DELETE_INFO.DELETE_PROJECTS.description}
-          deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
-          onConfirmDelete={() => {
-            if (projectID) {
-              deleteProject({ variables: { projectID } });
-              hidePopup();
-              history.push('/projects');
-            }
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-type GlobalTopNavbarProps = {
-  nameOnly?: boolean;
-  projectID: string | null;
-  teamID?: string | null;
-  onChangeProjectOwner?: (userID: string) => void;
-  name: string | null;
-  currentTab?: number;
-  popupContent?: JSX.Element;
-  menuType?: Array<MenuItem>;
-  onChangeRole?: (userID: string, roleCode: RoleCode) => void;
-  projectMembers?: null | Array<TaskUser>;
-  onSaveProjectName?: (projectName: string) => void;
-  onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
-  onSetTab?: (tab: number) => void;
-  onRemoveFromBoard?: (userID: string) => void;
-};
-
-const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
-  currentTab,
-  onSetTab,
-  menuType,
-  teamID,
-  onChangeProjectOwner,
-  onChangeRole,
-  name,
-  popupContent,
-  projectMembers,
-  onInviteUser,
-  onSaveProjectName,
-  onRemoveFromBoard,
-}) => {
-  const { user, setUserRoles, setUser } = useCurrentUser();
-  const { loading, data } = useTopNavbarQuery({
-    onCompleted: response => {
-      if (user && user.roles) {
-        setUserRoles({
-          org: user.roles.org,
-          teams: response.me.teamRoles.reduce((map, obj) => {
-            map.set(obj.teamID, obj.roleCode);
-            return map;
-          }, new Map<string, string>()),
-          projects: response.me.projectRoles.reduce((map, obj) => {
-            map.set(obj.projectID, obj.roleCode);
-            return map;
-          }, new Map<string, string>()),
-        });
-      }
-    },
-  });
-  const { showPopup, hidePopup } = usePopup();
-  const history = useHistory();
-  const onLogout = () => {
-    fetch('/auth/logout', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 200) {
-        cache.reset();
-        history.replace('/login');
-        setUser(null);
-        hidePopup();
-      }
-    });
-  };
-  const onProfileClick = ($target: React.RefObject<HTMLElement>) => {
-    showPopup(
-      $target,
-      <Popup title={null} tab={0}>
-        <ProfileMenu
-          onLogout={onLogout}
-          showAdminConsole={user ? user.roles.org === 'admin' : false}
-          onAdminConsole={() => {
-            history.push('/admin');
-            hidePopup();
-          }}
-          onProfile={() => {
-            history.push('/profile');
-            hidePopup();
-          }}
-        />
-      </Popup>,
-      { width: 195 },
-    );
-  };
-
-  const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
-    if (popupContent) {
-      showPopup($target, popupContent, { width: 185 });
-    }
-  };
-
-  const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
-    if (data) {
-      showPopup(
-        $target,
-        <NotificationPopup>
-          {data.notifications.map(notification => (
-            <NotificationItem
-              title={notification.entity.name}
-              description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
-              createdAt={notification.createdAt}
-            />
-          ))}
-        </NotificationPopup>,
-        { width: 415, borders: false, diamondColor: '#7367f0' },
-      );
-    }
-  };
-
-  if (!user) {
-    return null;
-  }
-  const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
-    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
-    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”.';
-    if (member) {
-      showPopup(
-        $targetRef,
-        <MiniProfile
-          warning={member.role && member.role.code === 'owner' ? warning : null}
-          canChangeRole={userIsTeamOrProjectAdmin}
-          onChangeRole={roleCode => {
-            if (onChangeRole) {
-              onChangeRole(member.id, roleCode);
-            }
-          }}
-          onRemoveFromBoard={
-            member.role && member.role.code === 'owner'
-              ? undefined
-              : () => {
-                  if (onRemoveFromBoard) {
-                    onRemoveFromBoard(member.id);
-                  }
-                }
-          }
-          user={member}
-          bio=""
-        />,
-      );
-    }
-  };
-
-  return (
-    <>
-      <TopNavbar
-        name={name}
-        menuType={menuType}
-        onOpenProjectFinder={$target => {
-          showPopup(
-            $target,
-            <Popup tab={0} title={null}>
-              <ProjectFinder />
-            </Popup>,
-          );
-        }}
-        currentTab={currentTab}
-        user={data ? data.me.user : null}
-        canEditProjectName={userIsTeamOrProjectAdmin}
-        canInviteUser={userIsTeamOrProjectAdmin}
-        onMemberProfile={onMemberProfile}
-        onInviteUser={onInviteUser}
-        onChangeRole={onChangeRole}
-        onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={onNotificationClick}
-        onSetTab={onSetTab}
-        onRemoveFromBoard={onRemoveFromBoard}
-        onDashboardClick={() => {
-          history.push('/');
-        }}
-        projectMembers={projectMembers}
-        onProfileClick={onProfileClick}
-        onSaveName={onSaveProjectName}
-        onOpenSettings={onOpenSettings}
-      />
-    </>
-  );
-};
-
-export default GlobalTopNavbar;

frontend/src/App/TopNavbar/ProjectFinder.tsx

@@ -0,0 +1,237 @@
+import React, { useState } 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 ControlledInput from 'shared/components/ControlledInput';
+import { CaretDown, CaretRight } from 'shared/icons';
+import useStickyState from 'shared/hooks/useStickyState';
+import { usePopup } from 'shared/components/PopupMenu';
+
+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/TopNavbar/ProjectPopup.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import ProjectSettings, { DeleteConfirm, DELETE_INFO, PublicConfirm } from 'shared/components/ProjectSettings';
+import {
+  useDeleteProjectMutation,
+  GetProjectsDocument,
+  useToggleProjectVisibilityMutation,
+} from 'shared/generated/graphql';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import produce from 'immer';
+
+type ProjectPopupProps = {
+  history: any;
+  name: string;
+  publicOn: string | null;
+  projectID: string;
+};
+
+const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID, publicOn: initialPublicOn }) => {
+  const { hidePopup, setTab } = usePopup();
+  const [publicOn, setPublicOn] = useState(initialPublicOn);
+  const [toggleProjectVisibility] = useToggleProjectVisibilityMutation({
+    onCompleted: data => {
+      setPublicOn(data.toggleProjectVisibility.project.publicOn);
+    },
+  });
+  const [deleteProject] = useDeleteProjectMutation({
+    update: (client, deleteData) => {
+      const cacheData: any = client.readQuery({
+        query: GetProjectsDocument,
+      });
+
+      const newData = produce(cacheData, (draftState: any) => {
+        draftState.projects = draftState.projects.filter(
+          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
+        );
+      });
+
+      client.writeQuery({
+        query: GetProjectsDocument,
+        data: {
+          ...newData,
+        },
+      });
+    },
+  });
+  return (
+    <>
+      <Popup title={null} tab={0}>
+        <ProjectSettings
+          publicOn={publicOn}
+          onToggleProjectVisible={visible => {
+            if (visible) {
+              setTab(2, { width: 300 });
+            } else {
+              toggleProjectVisibility({ variables: { projectID, isPublic: false } });
+            }
+          }}
+          onDeleteProject={() => {
+            setTab(1, { width: 300 });
+          }}
+        />
+      </Popup>
+      <Popup title="Change to public?" tab={1}>
+        <PublicConfirm
+          onConfirm={() => {
+            if (projectID) {
+              toggleProjectVisibility({ variables: { projectID, isPublic: true } });
+            }
+          }}
+        />
+      </Popup>
+      <Popup title={`Delete the "${name}" project?`} tab={1}>
+        <DeleteConfirm
+          description={DELETE_INFO.DELETE_PROJECTS.description}
+          deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
+          onConfirmDelete={() => {
+            if (projectID) {
+              deleteProject({ variables: { projectID } });
+              hidePopup();
+              history.push('/projects');
+            }
+          }}
+        />
+      </Popup>
+    </>
+  );
+};
+
+export default ProjectPopup;

frontend/src/App/TopNavbar/index.tsx

@@ -0,0 +1,278 @@
+import React, { useState } from 'react';
+import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
+import LoggedOutNavbar from 'shared/components/TopNavbar/LoggedOut';
+import { ProfileMenu } from 'shared/components/DropdownMenu';
+import polling from 'shared/utils/polling';
+import { useHistory, useRouteMatch } from 'react-router';
+import { useCurrentUser } from 'App/context';
+import {
+  RoleCode,
+  useTopNavbarQuery,
+  useNotificationAddedSubscription,
+  useHasUnreadNotificationsQuery,
+} from 'shared/generated/graphql';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import MiniProfile from 'shared/components/MiniProfile';
+import cache from 'App/cache';
+import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
+import theme from 'App/ThemeStyles';
+import ProjectFinder from './ProjectFinder';
+
+// TODO: Move to context based navbar?
+
+type GlobalTopNavbarProps = {
+  nameOnly?: boolean;
+  projectID: string | null;
+  teamID?: string | null;
+  onChangeProjectOwner?: (userID: string) => void;
+  name: string | null;
+  currentTab?: number;
+  popupContent?: JSX.Element;
+  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 LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
+  currentTab,
+  onSetTab,
+  menuType,
+  teamID,
+  onChangeProjectOwner,
+  onChangeRole,
+  name,
+  popupContent,
+  projectMembers,
+  projectInvitedMembers,
+  onInviteUser,
+  onSaveProjectName,
+  onRemoveInvitedFromBoard,
+  onRemoveFromBoard,
+}) => {
+  const [notifications, setNotifications] = useState<Array<{ id: string; notification: { actionType: string } }>>([]);
+  const { data } = useTopNavbarQuery({
+    onCompleted: (d) => {
+      setNotifications((n) => [...n, ...d.notifications]);
+    },
+  });
+  const { data: nData, loading } = useNotificationAddedSubscription({
+    onSubscriptionData: (d) => {
+      setNotifications((n) => {
+        if (d.subscriptionData.data) {
+          return [...n, d.subscriptionData.data.notificationAdded];
+        }
+        return n;
+      });
+    },
+  });
+  const { showPopup, hidePopup } = usePopup();
+  const { setUser } = useCurrentUser();
+  const { data: unreadData, refetch: refetchHasUnread } = useHasUnreadNotificationsQuery({
+    pollInterval: polling.UNREAD_NOTIFICATIONS,
+  });
+  const history = useHistory();
+  const onLogout = () => {
+    fetch('/auth/logout', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async (x) => {
+      const { status } = x;
+      if (status === 200) {
+        cache.reset();
+        history.replace('/login');
+        setUser(null);
+        hidePopup();
+      }
+    });
+  };
+  const onProfileClick = ($target: React.RefObject<HTMLElement>) => {
+    showPopup(
+      $target,
+      <Popup title={null} tab={0}>
+        <ProfileMenu
+          onLogout={onLogout}
+          showAdminConsole // TODO: add permision check
+          onAdminConsole={() => {
+            history.push('/admin');
+            hidePopup();
+          }}
+          onProfile={() => {
+            history.push('/profile');
+            hidePopup();
+          }}
+        />
+      </Popup>,
+      { width: 195 },
+    );
+  };
+
+  const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
+    if (popupContent) {
+      showPopup($target, popupContent, { width: 185 });
+    }
+  };
+
+  // TODO: rewrite popup to contain subscription and notification fetch
+  const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
+    showPopup($target, <NotificationPopup onToggleRead={() => refetchHasUnread()} />, {
+      width: 605,
+      borders: false,
+      diamondColor: theme.colors.primary,
+    });
+  };
+
+  // TODO: readd permision check
+  // const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
+  const userIsTeamOrProjectAdmin = true;
+  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 =
+      '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”.';
+    if (member) {
+      showPopup(
+        $targetRef,
+        <MiniProfile
+          warning={member.role && member.role.code === 'owner' ? warning : null}
+          canChangeRole={userIsTeamOrProjectAdmin}
+          onChangeRole={(roleCode) => {
+            if (onChangeRole) {
+              onChangeRole(member.id, roleCode);
+            }
+          }}
+          onRemoveFromBoard={
+            member.role && member.role.code === 'owner'
+              ? undefined
+              : () => {
+                  if (onRemoveFromBoard) {
+                    onRemoveFromBoard(member.id);
+                  }
+                }
+          }
+          user={member}
+          bio=""
+        />,
+      );
+    }
+  };
+
+  const user = data ? data.me?.user : null;
+
+  return (
+    <>
+      <TopNavbar
+        hasUnread={unreadData ? unreadData.hasUnreadNotifications.unread : false}
+        name={name}
+        menuType={menuType}
+        onOpenProjectFinder={($target) => {
+          showPopup(
+            $target,
+            <Popup tab={0} title={null}>
+              <ProjectFinder />
+            </Popup>,
+          );
+        }}
+        currentTab={currentTab}
+        user={user ?? null}
+        canEditProjectName={userIsTeamOrProjectAdmin}
+        canInviteUser={userIsTeamOrProjectAdmin}
+        onMemberProfile={onMemberProfile}
+        onInvitedMemberProfile={onInvitedMemberProfile}
+        onInviteUser={onInviteUser}
+        onChangeRole={onChangeRole}
+        onChangeProjectOwner={onChangeProjectOwner}
+        onNotificationClick={onNotificationClick}
+        onSetTab={onSetTab}
+        onRemoveFromBoard={onRemoveFromBoard}
+        onDashboardClick={() => {
+          history.push('/');
+        }}
+        onMyTasksClick={() => {
+          history.push('/tasks');
+        }}
+        projectMembers={projectMembers}
+        projectInvitedMembers={projectInvitedMembers}
+        onProfileClick={onProfileClick}
+        onSaveName={onSaveProjectName}
+        onOpenSettings={onOpenSettings}
+      />
+    </>
+  );
+};
+
+const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
+  currentTab,
+  onSetTab,
+  menuType,
+  teamID,
+  onChangeProjectOwner,
+  onChangeRole,
+  name,
+  popupContent,
+  projectMembers,
+  projectInvitedMembers,
+  onInviteUser,
+  onSaveProjectName,
+  onRemoveInvitedFromBoard,
+  onRemoveFromBoard,
+}) => {
+  const { user } = useCurrentUser();
+  const match = useRouteMatch();
+  if (user) {
+    return (
+      <LoggedInNavbar
+        currentTab={currentTab}
+        projectID={null}
+        onSetTab={onSetTab}
+        menuType={menuType}
+        teamID={teamID}
+        onChangeRole={onChangeRole}
+        onChangeProjectOwner={onChangeProjectOwner}
+        name={name}
+        popupContent={popupContent}
+        projectMembers={projectMembers}
+        projectInvitedMembers={projectInvitedMembers}
+        onInviteUser={onInviteUser}
+        onSaveProjectName={onSaveProjectName}
+        onRemoveInvitedFromBoard={onRemoveInvitedFromBoard}
+        onRemoveFromBoard={onRemoveFromBoard}
+      />
+    );
+  }
+  return <LoggedOutNavbar match={match.url} name={name} menuType={menuType} />;
+};
+
+export default GlobalTopNavbar;

frontend/src/App/cache.ts

@@ -1,4 +1,4 @@
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { InMemoryCache } from '@apollo/client';
 
 const cache = new InMemoryCache();
 

frontend/src/App/context.ts

@@ -1,79 +1,20 @@
 import React, { useContext } from 'react';
 
-export enum PermissionLevel {
-  ORG,
-  TEAM,
-  PROJECT,
-}
-
-export enum PermissionObjectType {
-  ORG,
-  TEAM,
-  PROJECT,
-  TASK,
-}
-
-export type CurrentUserRoles = {
-  org: string;
-  teams: Map<string, string>;
-  projects: Map<string, string>;
-};
-
-export interface CurrentUserRaw {
-  id: string;
-  roles: CurrentUserRoles;
-}
-
 type UserContextState = {
-  user: CurrentUserRaw | null;
-  setUser: (user: CurrentUserRaw | null) => void;
-  setUserRoles: (roles: CurrentUserRoles) => void;
+  user: string | null;
+  setUser: (user: string | null) => void;
 };
+
 export const UserContext = React.createContext<UserContextState>({
   user: null,
   setUser: _user => null,
-  setUserRoles: roles => null,
 });
 
-export interface CurrentUser extends CurrentUserRaw {
-  isAdmin: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
-  isVisible: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
-}
-
 export const useCurrentUser = () => {
-  const { user, setUser, setUserRoles } = useContext(UserContext);
-  let currentUser: CurrentUser | null = null;
-  if (user) {
-    currentUser = {
-      ...user,
-      isAdmin(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
-        if (user.roles.org === 'admin') {
-          return true;
-        }
-        switch (level) {
-          case PermissionLevel.TEAM:
-            return subjectID ? this.roles.teams.get(subjectID) === 'admin' : false;
-          default:
-            return false;
-        }
-      },
-      isVisible(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
-        if (user.roles.org === 'admin') {
-          return true;
-        }
-        switch (level) {
-          case PermissionLevel.TEAM:
-            return subjectID ? this.roles.teams.get(subjectID) !== null : false;
-          default:
-            return false;
-        }
-      },
-    };
-  }
+  const { user, setUser } = useContext(UserContext);
   return {
-    user: currentUser,
+    user,
     setUser,
-    setUserRoles,
   };
 };
 

frontend/src/App/fonts.css

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url(../shared/fonts/OpenSans-Regular.ttf) format('truetype');
+  /* other formats include: 'woff2', 'truetype, 'opentype',
+                            'embedded-opentype', and 'svg' */
+}

frontend/src/App/index.tsx

@@ -1,112 +1,32 @@
 import React, { useState, useEffect } from 'react';
-import jwtDecode from 'jwt-decode';
-import { createBrowserHistory } from 'history';
-import { Router } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 import { PopupProvider } from 'shared/components/PopupMenu';
-import { ToastContainer } from 'react-toastify';
-import { setAccessToken } from 'shared/utils/accessToken';
 import styled, { ThemeProvider } from 'styled-components';
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
 import theme from './ThemeStyles';
 import Routes from './Routes';
-import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
+import ToastedContainer from './Toast';
+import { UserContext } from './context';
 
 import 'react-toastify/dist/ReactToastify.css';
-
-const StyledContainer = styled(ToastContainer).attrs({
-  // custom props
-})`
-  .Toastify__toast-container {
-  }
-  .Toastify__toast {
-    padding: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 10px;
-    background: #7367f0;
-    color: #fff;
-  }
-  .Toastify__toast--error {
-    background: rgba(${props => props.theme.colors.danger});
-  }
-  .Toastify__toast--warning {
-    background: rgba(${props => props.theme.colors.warning});
-  }
-  .Toastify__toast--success {
-    background: rgba(${props => props.theme.colors.success});
-  }
-  .Toastify__toast-body {
-  }
-  .Toastify__progress-bar {
-  }
-  .Toastify__close-button {
-    display: none;
-  }
-`;
-
-const history = createBrowserHistory();
-type RefreshTokenResponse = {
-  accessToken: string;
-  isInstalled: boolean;
-};
+import './fonts.css';
 
 const App = () => {
-  const [loading, setLoading] = useState(true);
-  const [user, setUser] = useState<CurrentUserRaw | null>(null);
-  const setUserRoles = (roles: CurrentUserRoles) => {
-    if (user) {
-      setUser({
-        ...user,
-        roles,
-      });
-    }
-  };
-
-  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);
-    });
-  }, []);
+  const [user, setUser] = useState<string | null>(null);
 
   return (
     <>
-      <UserContext.Provider value={{ user, setUser, setUserRoles }}>
+      <UserContext.Provider value={{ user, setUser }}>
         <ThemeProvider theme={theme}>
           <NormalizeStyles />
           <BaseStyles />
-          <Router history={history}>
+          <BrowserRouter>
             <PopupProvider>
-              {loading ? (
-                <div>loading</div>
-              ) : (
-                <>
-                  <Routes history={history} />
-                </>
-              )}
+              <Routes />
             </PopupProvider>
-          </Router>
-          <StyledContainer
+          </BrowserRouter>
+          <ToastedContainer
             position="bottom-right"
             autoClose={5000}
             hideProgressBar

frontend/src/Auth/Styles.ts

@@ -4,10 +4,20 @@ export const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100vw;
   height: 100vh;
+
+  @media (max-width: 600px) {
+    position: relative;
+    top: 30%;
+    font-size: 150px;
+  }
 `;
 
 export const LoginWrapper = styled.div`
-  width: 60%;
+  width: 70%;
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-top: 50vh;
+  }
 `;

frontend/src/Auth/index.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useHistory } from 'react-router';
-import JwtDecode from 'jwt-decode';
-import { setAccessToken } from 'shared/utils/accessToken';
+import { useHistory, useLocation } from 'react-router';
 import Login from 'shared/components/Login';
 import UserContext from 'App/context';
 import { Container, LoginWrapper } from './Styles';
@@ -9,6 +7,7 @@ import { Container, LoginWrapper } from './Styles';
 const Auth = () => {
   const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
   const history = useHistory();
+  const location = useLocation<{ redirect: string } | undefined>();
   const { setUser } = useContext(UserContext);
   const login = (
     data: LoginFormData,
@@ -22,7 +21,7 @@ const Auth = () => {
         username: data.username,
         password: data.password,
       }),
-    }).then(async x => {
+    }).then(async (x) => {
       if (x.status === 401) {
         setInvalidLoginAttempt(invalidLoginAttempt + 1);
         setError('username', { type: 'error', message: 'Invalid username' });
@@ -30,28 +29,26 @@ const Auth = () => {
         setComplete(true);
       } else {
         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);
-        setComplete(true);
-        setAccessToken(accessToken);
-
-        history.push('/');
+        const { userID } = response;
+        setUser(userID);
+        if (location.state && location.state.redirect) {
+          history.push(location.state.redirect);
+        } else {
+          history.push('/');
+        }
       }
     });
   };
 
   useEffect(() => {
-    fetch('/auth/refresh_token', {
+    fetch('/auth/validate', {
       method: 'POST',
       credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 200) {
+    }).then(async (x) => {
+      const response = await x.json();
+      const { valid, userID } = response;
+      if (valid) {
+        setUser(userID);
         history.replace('/projects');
       }
     });

frontend/src/Confirm/index.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import Confirm from 'shared/components/Confirm';
+import { useHistory, useLocation } from 'react-router';
+import * as QueryString from 'query-string';
+import { useCurrentUser } from 'App/context';
+import { Container, LoginWrapper } from './Styles';
+
+const UsersConfirm = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const params = QueryString.parse(location.search);
+  const [hasFailed, setFailed] = useState(false);
+  const { setUser } = useCurrentUser();
+  useEffect(() => {
+    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 { userID } = response;
+          setUser(userID);
+          history.push('/');
+        } else {
+          setFailed(true);
+        }
+      })
+      .catch(() => {
+        setFailed(false);
+      });
+  }, []);
+  return (
+    <Container>
+      <LoginWrapper>
+        <Confirm hasConfirmToken={params.confirmToken !== undefined} hasFailed={hasFailed} />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default UsersConfirm;

frontend/src/Install/index.tsx

@@ -1,88 +0,0 @@
-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

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,415 @@
+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

@@ -0,0 +1,947 @@
+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 { StaticContext } from 'react-router';
+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) {
+                hidePopup();
+                updateTaskDueDate({
+                  variables: {
+                    taskID: dateEditor.task.id,
+                    dueDate,
+                    hasTime,
+                    deleteNotifications: [],
+                    updateNotifications: [],
+                    createNotifications: [],
+                  },
+                });
+                setDateEditor((prev) => ({
+                  ...prev,
+                  task: { ...task, dueDate: { at: dueDate.toISOString(), notifications: [] }, hasTime },
+                }));
+              }
+            }}
+            onRemoveDueDate={(task) => {
+              if (dateEditor.task) {
+                hidePopup();
+                updateTaskDueDate({
+                  variables: {
+                    taskID: dateEditor.task.id,
+                    dueDate: null,
+                    hasTime: false,
+                    deleteNotifications: [],
+                    updateNotifications: [],
+                    createNotifications: [],
+                  },
+                });
+                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.at);
+              const second = dayjs(b.dueDate.at);
+              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,
+                                      deleteNotifications: [],
+                                      updateNotifications: [],
+                                      createNotifications: [],
+                                    },
+                                  });
+                                }}
+                                project={projectName ?? 'none'}
+                                dueDate={task.dueDate.at}
+                                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.at).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={() => {
+            return (
+              <Details
+                refreshCache={NOOP}
+                availableMembers={[]}
+                projectURL={`${match.url}`}
+                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

@@ -1,13 +1,21 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
-import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
+import {
+  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;
@@ -19,6 +27,7 @@ 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(() => {
@@ -35,18 +44,15 @@ const Projects = () => {
         name="file"
         style={{ display: 'none' }}
         ref={$fileUpload}
-        onChange={e => {
+        onChange={(e) => {
           if (e.target.files) {
             const fileData = new FormData();
             fileData.append('file', e.target.files[0]);
-            const accessToken = getAccessToken();
             axios
               .post('/users/me/avatar', fileData, {
-                headers: {
-                  Authorization: `Bearer ${accessToken}`,
-                },
+                withCredentials: true,
               })
-              .then(res => {
+              .then((res) => {
                 if ($fileUpload && $fileUpload.current) {
                   $fileUpload.current.value = '';
                   refetch();
@@ -56,7 +62,7 @@ const Projects = () => {
         }}
       />
       <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
-      {!loading && data && (
+      {!loading && data && data.me && (
         <Settings
           profile={data.me.user}
           onProfileAvatarChange={() => {
@@ -65,10 +71,17 @@ const Projects = () => {
             }
           }}
           onResetPassword={(password, done) => {
-            updateUserPassword({ variables: { userID: user.id, password } });
+            updateUserPassword({ variables: { userID: user, password } });
             toast('Password was changed!');
             done();
           }}
+          onChangeUserInfo={(d, done) => {
+            updateUserInfo({
+              variables: { name: d.fullName, bio: d.bio, email: d.email, initials: d.initials },
+            });
+            toast('User info was saved!');
+            done();
+          }}
           onProfileAvatarRemove={() => {
             clearProfileAvatar();
           }}

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

@@ -5,15 +5,15 @@ 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';
+import { useLabelsQuery } from 'shared/generated/graphql';
 
 const FilterMember = styled(Member)`
   margin: 2px 0;
   &:hover {
     cursor: pointer;
-    background: rgba(${props => props.theme.colors.primary});
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 
@@ -29,7 +29,7 @@ export const Label = styled.li`
 `;
 
 export const CardLabel = styled.span<{ active: boolean; color: string }>`
-  ${props =>
+  ${(props) =>
     props.active &&
     css`
       margin-left: 4px;
@@ -44,7 +44,7 @@ export const CardLabel = styled.span<{ active: boolean; color: string }>`
   padding: 6px 12px;
   position: relative;
   transition: padding 85ms, margin 85ms, box-shadow 85ms;
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   color: #fff;
   display: block;
   max-width: 100%;
@@ -72,7 +72,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 
@@ -81,7 +81,7 @@ export const ActionTitle = styled.span`
 `;
 
 const ActionItemSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;
@@ -108,18 +108,25 @@ const ActionItemLine = styled.div`
   margin: 0.25rem !important;
 `;
 
-type FilterMetaProps = {
+type ControlFilterProps = {
   filters: TaskMetaFilters;
   userID: string;
-  labels: React.RefObject<Array<ProjectLabel>>;
+  projectID: string;
   members: React.RefObject<Array<TaskUser>>;
   onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
 };
 
-const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
+const ControlFilter: React.FC<ControlFilterProps> = ({
+  filters,
+  onChangeTaskMetaFilter,
+  userID,
+  projectID,
+  members,
+}) => {
   const [currentFilters, setFilters] = useState(filters);
   const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
   const [currentLabel, setCurrentLabel] = useState('');
+  const { data } = useLabelsQuery({ variables: { projectID } });
 
   const handleSetFilters = (f: TaskMetaFilters) => {
     setFilters(f);
@@ -128,7 +135,7 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
 
   const handleNameChange = (nFilter: string) => {
     handleSetFilters(
-      produce(currentFilters, draftFilters => {
+      produce(currentFilters, (draftFilters) => {
         draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
       }),
     );
@@ -139,7 +146,7 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
 
   const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
     handleSetFilters(
-      produce(currentFilters, draftFilters => {
+      produce(currentFilters, (draftFilters) => {
         if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
           draftFilters.dueDate = null;
         } else {
@@ -158,8 +165,9 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
         <ActionsList>
           <TaskNameInput
             width="100%"
-            onChange={e => handleNameChange(e.currentTarget.value)}
+            onChange={(e) => handleNameChange(e.currentTarget.value)}
             value={nameFilter}
+            autoFocus
             variant="alternate"
             placeholder="Task name..."
           />
@@ -167,14 +175,14 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
           <ActionItem
             onClick={() => {
               handleSetFilters(
-                produce(currentFilters, draftFilters => {
+                produce(currentFilters, (draftFilters) => {
                   if (members.current) {
-                    const member = members.current.find(m => m.id === userID);
-                    const draftMember = draftFilters.members.find(m => m.id === userID);
+                    const member = members.current.find((m) => m.id === userID);
+                    const draftMember = draftFilters.members.find((m) => m.id === userID);
                     if (member && !draftMember) {
                       draftFilters.members.push({ id: userID, username: member.username ? member.username : '' });
                     } else {
-                      draftFilters.members = draftFilters.members.filter(m => m.id !== userID);
+                      draftFilters.members = draftFilters.members.filter((m) => m.id !== userID);
                     }
                   }
                 }),
@@ -185,7 +193,7 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
               <User width={12} height={12} />
             </ItemIcon>
             <ActionTitle>Just my tasks</ActionTitle>
-            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
+            {currentFilters.members.find((m) => m.id === userID) && <ActiveIcon width={12} height={12} />}
           </ActionItem>
           <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
             <ItemIcon>
@@ -228,10 +236,10 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
       </Popup>
       <Popup tab={1} title="By Labels">
         <Labels>
-          {labels.current &&
-            labels.current
+          {data &&
+            data.findProject.labels
               // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
-              .map(label => (
+              .map((label) => (
                 <Label key={label.id}>
                   <CardLabel
                     key={label.id}
@@ -242,9 +250,9 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
                     }}
                     onClick={() => {
                       handleSetFilters(
-                        produce(currentFilters, draftFilters => {
-                          if (draftFilters.labels.find(l => l.id === label.id)) {
-                            draftFilters.labels = draftFilters.labels.filter(l => l.id !== label.id);
+                        produce(currentFilters, (draftFilters) => {
+                          if (draftFilters.labels.find((l) => l.id === label.id)) {
+                            draftFilters.labels = draftFilters.labels.filter((l) => l.id !== label.id);
                           } else {
                             draftFilters.labels.push({
                               id: label.id,
@@ -265,16 +273,16 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
       <Popup tab={2} title="By Member">
         <ActionsList>
           {members.current &&
-            members.current.map(member => (
+            members.current.map((member) => (
               <FilterMember
                 key={member.id}
                 member={member}
                 showName
                 onCardMemberClick={() => {
                   handleSetFilters(
-                    produce(currentFilters, draftFilters => {
-                      if (draftFilters.members.find(m => m.id === member.id)) {
-                        draftFilters.members = draftFilters.members.filter(m => m.id !== member.id);
+                    produce(currentFilters, (draftFilters) => {
+                      if (draftFilters.members.find((m) => m.id === member.id)) {
+                        draftFilters.members = draftFilters.members.filter((m) => m.id !== member.id);
                       } else {
                         draftFilters.members.push({ id: member.id, username: member.username ?? '' });
                       }
@@ -321,4 +329,4 @@ const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter
   );
 };
 
-export default FilterMeta;
+export default ControlFilter;

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

@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
+import { Checkmark } from 'shared/icons';
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+`;
 
 export const ActionsList = styled.ul`
   margin: 0;
@@ -20,7 +25,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 
@@ -28,21 +33,12 @@ export const ActionTitle = styled.span`
   margin-left: 20px;
 `;
 
-const ActionItemSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.75rem;
-  padding-bottom: 0.25rem;
-`;
-
-type SortPopupProps = {
+type ControlSortProps = {
   sorting: TaskSorting;
   onChangeTaskSorting: (taskSorting: TaskSorting) => void;
 };
 
-const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
+const ControlSort: React.FC<ControlSortProps> = ({ sorting, onChangeTaskSorting }) => {
   const [currentSorting, setSorting] = useState(sorting);
   const handleSetSorting = (s: TaskSorting) => {
     setSorting(s);
@@ -51,30 +47,41 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
   return (
     <ActionsList>
       <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
+        {currentSorting.type === TaskSortingType.NONE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>None</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.DUE_DATE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Due date</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.MEMBERS && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Members</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.LABELS && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Labels</ActionTitle>
       </ActionItem>
       <ActionItem
         onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
       >
+        {currentSorting.type === TaskSortingType.TASK_TITLE && <ActiveIcon width={12} height={12} />}
         <ActionTitle>Task title</ActionTitle>
       </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+      >
+        {currentSorting.type === TaskSortingType.COMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Complete</ActionTitle>
+      </ActionItem>
     </ActionsList>
   );
 };
 
-export default SortPopup;
+export default ControlSort;

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

@@ -30,7 +30,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
   }
   &:hover ${ActionExtraMenuContainer} {
     visibility: visible;
@@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
   }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${(props) => props.theme.colors.text.primary};
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;
@@ -85,12 +85,12 @@ const ActiveIcon = styled(Checkmark)`
   position: absolute;
 `;
 
-type FilterStatusProps = {
+type ControlStatusProps = {
   filter: TaskStatusFilter;
   onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
 };
 
-const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+const ControlStatus: React.FC<ControlStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
   const [currentFilter, setFilter] = useState(filter);
   const handleFilterChange = (f: TaskStatusFilter) => {
     setFilter(f);
@@ -146,4 +146,4 @@ const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusF
   );
 };
 
-export default FilterStatus;
+export default ControlStatus;

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

@@ -49,9 +49,9 @@ import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
 import Chip from 'shared/components/Chip';
 import { toast } from 'react-toastify';
 import { useCurrentUser } from 'App/context';
-import FilterStatus from './FilterStatus';
-import FilterMeta from './FilterMeta';
-import SortPopup from './SortPopup';
+import ControlStatus from './ControlStatus';
+import ControlFilter from './ControlFilter';
+import ControlSort from './ControlSort';
 
 const FilterChip = styled(Chip)`
   margin-right: 4px;
@@ -60,19 +60,20 @@ const FilterChip = styled(Chip)`
 type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
 
 const renderTaskSortingLabel = (sorting: TaskSorting) => {
-  if (sorting.type === TaskSortingType.TASK_TITLE) {
-    return 'Sort: Card title';
+  switch (sorting.type) {
+    case TaskSortingType.TASK_TITLE:
+      return 'Sort: Task Title';
+    case TaskSortingType.MEMBERS:
+      return 'Sort: Members';
+    case TaskSortingType.DUE_DATE:
+      return 'Sort: Due Date';
+    case TaskSortingType.LABELS:
+      return 'Sort: Labels';
+    case TaskSortingType.COMPLETE:
+      return 'Sort: Complete';
+    default:
+      return 'Sort';
   }
-  if (sorting.type === TaskSortingType.MEMBERS) {
-    return 'Sort: Members';
-  }
-  if (sorting.type === TaskSortingType.DUE_DATE) {
-    return 'Sort: Due Date';
-  }
-  if (sorting.type === TaskSortingType.LABELS) {
-    return 'Sort: Labels';
-  }
-  return 'Sort';
 };
 
 const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
@@ -136,16 +137,16 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   font-size: 15px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 
   &:not(:last-of-type) {
     margin-right: 16px;
   }
 
   &:hover {
-    color: rgba(${props => props.theme.colors.text.secondary});
+    color: ${(props) => props.theme.colors.text.secondary};
   }
-  ${props =>
+  ${(props) =>
     props.disabled &&
     css`
       opacity: 0.5;
@@ -198,6 +199,7 @@ type ProjectBoardProps = {
 };
 
 export const BoardLoading = () => {
+  const { user } = useCurrentUser();
   return (
     <>
       <ProjectBar>
@@ -215,20 +217,22 @@ export const BoardLoading = () => {
             <ProjectActionText>Filter</ProjectActionText>
           </ProjectAction>
         </ProjectActions>
-        <ProjectActions>
-          <ProjectAction>
-            <Tags width={13} height={13} />
-            <ProjectActionText>Labels</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
-            <ToggleOn width={13} height={13} />
-            <ProjectActionText>Fields</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
-            <Bolt width={13} height={13} />
-            <ProjectActionText>Rules</ProjectActionText>
-          </ProjectAction>
-        </ProjectActions>
+        {user && (
+          <ProjectActions>
+            <ProjectAction>
+              <Tags width={13} height={13} />
+              <ProjectActionText>Labels</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <ToggleOn width={13} height={13} />
+              <ProjectActionText>Fields</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Bolt width={13} height={13} />
+              <ProjectActionText>Rules</ProjectActionText>
+            </ProjectAction>
+          </ProjectActions>
+        )}
       </ProjectBar>
       <EmptyBoard />
     </>
@@ -277,10 +281,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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 },
@@ -293,12 +297,14 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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) {
-              draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
+              if (newTaskData.data) {
+                draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
+              }
             }
           }),
         { projectID },
@@ -311,9 +317,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (newTaskGroupData.data) {
+              draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
+            }
           }),
         { projectID },
       );
@@ -329,10 +337,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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 = [];
@@ -346,9 +354,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (resp.data) {
+              draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+            }
           }),
         { projectID },
       );
@@ -362,21 +372,28 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            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) {
-                draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
-                  (t: Task) => t.id !== task.id,
-                );
-                draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
-                  ...taskGroups[newTaskGroupIdx].tasks,
-                  { ...task },
-                ];
+        (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 },
+                    ];
+                  }
+                }
               }
             }
           }),
@@ -387,14 +404,14 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   const { user } = useCurrentUser();
   const [deleteTask] = useDeleteTaskMutation();
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: newTaskLabel => {
+    onCompleted: (newTaskLabel) => {
       taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
     },
   });
 
   const onCreateTask = (taskGroupID: string, name: string) => {
     if (data) {
-      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
+      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
       if (taskGroup) {
         let position = 65535;
         if (taskGroup.tasks.length !== 0) {
@@ -412,9 +429,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             createTask: {
               __typename: 'Task',
               id: `${Math.round(Math.random() * -1000000)}`,
+              shortId: '',
               name,
+              watched: false,
               complete: false,
               completedAt: null,
+              hasTime: false,
               taskGroup: {
                 __typename: 'TaskGroup',
                 id: taskGroup.id,
@@ -426,7 +446,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 checklist: null,
               },
               position,
-              dueDate: null,
+              dueDate: { at: null },
               description: null,
               labels: [],
               assigned: [],
@@ -448,9 +468,6 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
   };
 
-  if (loading) {
-    return <BoardLoading />;
-  }
   const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
     if (filter.status === TaskStatus.COMPLETE) {
       return 'Complete';
@@ -460,12 +477,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
     return 'All Tasks';
   };
-  if (data && user) {
+
+  if (data) {
     labelsRef.current = data.findProject.labels;
     membersRef.current = data.findProject.members;
     const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
-      const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
+      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
+      const currentTask = taskGroup ? taskGroup.tasks.find((t) => t.id === taskID) : null;
       if (currentTask) {
         setQuickCardEditor({
           target: $target,
@@ -477,9 +495,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     };
     let currentQuickTask = null;
     if (quickCardEditor.taskID && quickCardEditor.taskGroupID) {
-      const targetGroup = data.findProject.taskGroups.find(t => t.id === quickCardEditor.taskGroupID);
+      const targetGroup = data.findProject.taskGroups.find((t) => t.id === quickCardEditor.taskGroupID);
       if (targetGroup) {
-        currentQuickTask = targetGroup.tasks.find(t => t.id === quickCardEditor.taskID);
+        currentQuickTask = targetGroup.tasks.find((t) => t.id === quickCardEditor.taskID);
       }
     }
     return (
@@ -487,13 +505,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         <ProjectBar>
           <ProjectActions>
             <ProjectAction
-              onClick={target => {
+              onClick={(target) => {
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <FilterStatus
+                    <ControlStatus
                       filter={taskStatusFilter}
-                      onChangeTaskStatusFilter={filter => {
+                      onChangeTaskStatusFilter={(filter) => {
                         setTaskStatusFilter(filter);
                         hidePopup();
                       }}
@@ -507,13 +525,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
             </ProjectAction>
             <ProjectAction
-              onClick={target => {
+              onClick={(target) => {
                 showPopup(
                   target,
                   <Popup tab={0} title={null}>
-                    <SortPopup
+                    <ControlSort
                       sorting={taskSorting}
-                      onChangeTaskSorting={sorting => {
+                      onChangeTaskSorting={(sorting) => {
                         setTaskSorting(sorting);
                       }}
                     />
@@ -526,16 +544,16 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
             </ProjectAction>
             <ProjectAction
-              onClick={target => {
+              onClick={(target) => {
                 showPopup(
                   target,
-                  <FilterMeta
+                  <ControlFilter
                     filters={taskMetaFilters}
-                    onChangeTaskMetaFilter={filter => {
+                    onChangeTaskMetaFilter={(filter) => {
                       setTaskMetaFilters(filter);
                     }}
-                    userID={user?.id}
-                    labels={labelsRef}
+                    userID={user ?? ''}
+                    projectID={projectID}
                     members={membersRef}
                   />,
                   { width: 200 },
@@ -547,11 +565,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             </ProjectAction>
             {renderMetaFilters(taskMetaFilters, (meta, id) => {
               setTaskMetaFilters(
-                produce(taskMetaFilters, draftFilters => {
+                produce(taskMetaFilters, (draftFilters) => {
                   if (meta === TaskMeta.MEMBER) {
-                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
+                    draftFilters.members = draftFilters.members.filter((m) => m.id !== id);
                   } else if (meta === TaskMeta.LABEL) {
-                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
+                    draftFilters.labels = draftFilters.labels.filter((m) => m.id !== id);
                   } else if (meta === TaskMeta.TITLE) {
                     draftFilters.taskName = null;
                   } else if (meta === TaskMeta.DUE_DATE) {
@@ -561,36 +579,34 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               );
             })}
           </ProjectActions>
-          <ProjectActions>
-            <ProjectAction
-              onClick={$labelsRef => {
-                showPopup(
-                  $labelsRef,
-                  <LabelManagerEditor
-                    taskLabels={null}
-                    labelColors={data.labelColors}
-                    labels={labelsRef}
-                    projectID={projectID ?? ''}
-                  />,
-                );
-              }}
-            >
-              <Tags width={13} height={13} />
-              <ProjectActionText>Labels</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <ToggleOn width={13} height={13} />
-              <ProjectActionText>Fields</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <Bolt width={13} height={13} />
-              <ProjectActionText>Rules</ProjectActionText>
-            </ProjectAction>
-          </ProjectActions>
+          {user && (
+            <ProjectActions>
+              <ProjectAction
+                onClick={($labelsRef) => {
+                  showPopup(
+                    $labelsRef,
+                    <LabelManagerEditor taskLabels={null} labelColors={data.labelColors} projectID={projectID ?? ''} />,
+                  );
+                }}
+              >
+                <Tags width={13} height={13} />
+                <ProjectActionText>Labels</ProjectActionText>
+              </ProjectAction>
+              <ProjectAction disabled>
+                <ToggleOn width={13} height={13} />
+                <ProjectActionText>Fields</ProjectActionText>
+              </ProjectAction>
+              <ProjectAction disabled>
+                <Bolt width={13} height={13} />
+                <ProjectActionText>Rules</ProjectActionText>
+              </ProjectAction>
+            </ProjectActions>
+          )}
         </ProjectBar>
         <SimpleLists
-          onTaskClick={task => {
-            history.push(`${match.url}/c/${task.id}`);
+          isPublic={user === null}
+          onTaskClick={(task) => {
+            history.push(`${match.url}/c/${task.shortId}`);
           }}
           onCardLabelClick={onCardLabelClick ?? NOOP}
           cardLabelVariant={cardLabelVariant ?? 'large'}
@@ -622,7 +638,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               },
             });
           }}
-          onTaskGroupDrop={droppedTaskGroup => {
+          onTaskGroupDrop={(droppedTaskGroup) => {
             updateTaskGroupLocation({
               variables: { taskGroupID: droppedTaskGroup.id, position: droppedTaskGroup.position },
               optimisticResponse: {
@@ -642,7 +658,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onCreateTask={onCreateTask}
           onCreateTaskGroup={onCreateList}
           onCardMemberClick={($targetRef, _taskID, memberID) => {
-            const member = data.findProject.members.find(m => m.id === memberID);
+            const member = data.findProject.members.find((m) => m.id === memberID);
             if (member) {
               showPopup(
                 $targetRef,
@@ -669,8 +685,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                   deleteTaskGroupTasks({ variables: { taskGroupID } });
                   hidePopup();
                 }}
-                onSortTaskGroup={taskSort => {
-                  const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
+                onSortTaskGroup={(taskSort) => {
+                  const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
                   if (taskGroup) {
                     const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
                       .sort((a, b) => sortTasks(a, b, taskSort))
@@ -682,8 +698,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     hidePopup();
                   }
                 }}
-                onDuplicateTaskGroup={newName => {
-                  const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
+                onDuplicateTaskGroup={(newName) => {
+                  const idx = data.findProject.taskGroups.findIndex((t) => t.id === taskGroupID);
                   if (idx !== -1) {
                     const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
                     const prevPos = taskGroups[idx].position;
@@ -696,7 +712,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     hidePopup();
                   }
                 }}
-                onArchiveTaskGroup={tgID => {
+                onArchiveTaskGroup={(tgID) => {
                   deleteTaskGroup({ variables: { taskGroupID: tgID } });
                   hidePopup();
                 }}
@@ -730,7 +746,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               );
             }}
             onCardMemberClick={($targetRef, _taskID, memberID) => {
-              const member = data.findProject.members.find(m => m.id === memberID);
+              const member = data.findProject.members.find((m) => m.id === memberID);
               if (member) {
                 showPopup(
                   $targetRef,
@@ -749,11 +765,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               showPopup(
                 $targetRef,
                 <LabelManagerEditor
-                  onLabelToggle={labelID => {
+                  onLabelToggle={(labelID) => {
                     toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
                   }}
+                  taskID={task.id}
                   labelColors={data.labelColors}
-                  labels={labelsRef}
                   taskLabels={taskLabelsRef}
                   projectID={projectID ?? ''}
                 />,
@@ -762,15 +778,15 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             onArchiveCard={(_listId: string, cardId: string) => {
               return deleteTask({
                 variables: { taskID: cardId },
-                update: client => {
+                update: (client) => {
                   updateApolloCache<FindProjectQuery>(
                     client,
                     FindProjectDocument,
-                    cache =>
-                      produce(cache, draftCache => {
-                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map(taskGroup => ({
+                    (cache) =>
+                      produce(cache, (draftCache) => {
+                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map((taskGroup) => ({
                           ...taskGroup,
-                          tasks: taskGroup.tasks.filter(t => t.id !== cardId),
+                          tasks: taskGroup.tasks.filter((t) => t.id !== cardId),
                         }));
                       }),
                     { projectID },
@@ -784,20 +800,38 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 <Popup title="Change Due Date" tab={0} onClose={() => hidePopup()}>
                   <DueDateManager
                     task={task}
-                    onRemoveDueDate={t => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
+                    onRemoveDueDate={(t) => {
                       hidePopup();
+                      updateTaskDueDate({
+                        variables: {
+                          taskID: t.id,
+                          dueDate: null,
+                          hasTime: false,
+                          deleteNotifications: [],
+                          updateNotifications: [],
+                          createNotifications: [],
+                        },
+                      });
                     }}
-                    onDueDateChange={(t, newDueDate) => {
-                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
+                    onDueDateChange={(t, newDueDate, hasTime) => {
                       hidePopup();
+                      updateTaskDueDate({
+                        variables: {
+                          taskID: t.id,
+                          dueDate: newDueDate,
+                          hasTime,
+                          deleteNotifications: [],
+                          updateNotifications: [],
+                          createNotifications: [],
+                        },
+                      });
                     }}
                     onCancel={NOOP}
                   />
                 </Popup>,
               );
             }}
-            onToggleComplete={task => {
+            onToggleComplete={(task) => {
               setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
             }}
             target={quickCardEditor.target}
@@ -807,7 +841,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     );
   }
 
-  return <span>Error</span>;
+  return <BoardLoading />;
 };
 
 export default ProjectBoard;

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

@@ -1,15 +1,18 @@
 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';
+import { useRouteMatch, useHistory, useParams } from 'react-router';
 import {
   useDeleteTaskChecklistMutation,
+  useToggleTaskWatchMutation,
   useUpdateTaskChecklistNameMutation,
   useUpdateTaskChecklistItemLocationMutation,
   useCreateTaskChecklistMutation,
   useFindTaskQuery,
+  DueDateNotificationDuration,
   useUpdateTaskDueDateMutation,
   useSetTaskCompleteMutation,
   useAssignTaskMutation,
@@ -21,6 +24,9 @@ import {
   useCreateTaskChecklistItemMutation,
   FindTaskDocument,
   FindTaskQuery,
+  useCreateTaskCommentMutation,
+  useDeleteTaskCommentMutation,
+  useUpdateTaskCommentMutation,
 } from 'shared/generated/graphql';
 import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
@@ -32,6 +38,74 @@ import Input from 'shared/components/Input';
 import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
 import NOOP from 'shared/utils/noop';
+import polling from 'shared/utils/polling';
+
+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) => {
@@ -94,10 +168,8 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
         defaultValue="Checklist"
         width="100%"
         label="Name"
-        id="name"
-        name="name"
         variant="alternate"
-        ref={register({ required: 'Checklist name is required' })}
+        {...register('name', { required: 'Checklist name is required' })}
       />
       <CreateChecklistButton type="submit">Create</CreateChecklistButton>
     </CreateChecklistForm>
@@ -105,7 +177,6 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
 };
 
 type DetailsProps = {
-  taskID: string;
   projectURL: string;
   onTaskNameChange: (task: Task, newName: string) => void;
   onTaskDescriptionChange: (task: Task, newDescription: string) => void;
@@ -119,7 +190,6 @@ const initialMemberPopupState = { taskID: '', isOpen: false, top: 0, left: 0 };
 
 const Details: React.FC<DetailsProps> = ({
   projectURL,
-  taskID,
   onTaskNameChange,
   onTaskDescriptionChange,
   onDeleteTask,
@@ -128,31 +198,69 @@ const Details: React.FC<DetailsProps> = ({
   refreshCache,
 }) => {
   const { user } = useCurrentUser();
+  const { taskID } = useParams<{ taskID: string }>();
   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 [toggleTaskWatch] = useToggleTaskWatchMutation();
+  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) => {
       updateApolloCache<FindTaskQuery>(
         client,
         FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
-            if (checklistID !== prevChecklistID) {
-              const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
-              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) {
-                  draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
-                    i => i.id !== checklistItem.id,
-                  );
-                  draftCache.findTask.checklists[newIdx].items.push({
-                    ...item,
-                    position: checklistItem.position,
-                    taskChecklistID: checklistID,
-                  });
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (response.data) {
+              const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
+              if (taskChecklistID !== prevChecklistID) {
+                const oldIdx = cache.findTask.checklists.findIndex((c) => c.id === prevChecklistID);
+                const newIdx = cache.findTask.checklists.findIndex((c) => c.id === taskChecklistID);
+                if (oldIdx > -1 && newIdx > -1) {
+                  const item = cache.findTask.checklists[oldIdx].items.find((i) => i.id === checklistItem.id);
+                  if (item) {
+                    draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
+                      (i) => i.id !== checklistItem.id,
+                    );
+                    draftCache.findTask.checklists[newIdx].items.push({
+                      ...item,
+                      position: checklistItem.position,
+                      taskChecklistID,
+                    });
+                  }
                 }
               }
             }
@@ -162,12 +270,12 @@ const Details: React.FC<DetailsProps> = ({
     },
   });
   const [setTaskChecklistItemComplete] = useSetTaskChecklistItemCompleteMutation({
-    update: client => {
+    update: (client) => {
       updateApolloCache<FindTaskQuery>(
         client,
         FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          produce(cache, (draftCache) => {
             const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
             draftCache.findTask.badges.checklist = {
               __typename: 'ChecklistBadge',
@@ -184,11 +292,11 @@ const Details: React.FC<DetailsProps> = ({
       updateApolloCache<FindTaskQuery>(
         client,
         FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (cache) =>
+          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 = {
@@ -210,10 +318,12 @@ const Details: React.FC<DetailsProps> = ({
       updateApolloCache<FindTaskQuery>(
         client,
         FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = createData.data.createTaskChecklist;
-            draftCache.findTask.checklists.push({ ...item });
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (createData.data) {
+              const item = createData.data.createTaskChecklist;
+              draftCache.findTask.checklists.push({ ...item });
+            }
           }),
         { taskID },
       );
@@ -225,38 +335,16 @@ const Details: React.FC<DetailsProps> = ({
       updateApolloCache<FindTaskQuery>(
         client,
         FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
-            const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (targetIdx > -1) {
-              draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
-                c => item.id !== c.id,
-              );
-            }
-            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-            draftCache.findTask.badges.checklist = {
-              __typename: 'ChecklistBadge',
-              complete,
-              total,
-            };
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [createTaskChecklistItem] = useCreateTaskChecklistItemMutation({
-    update: (client, newTaskItem) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = newTaskItem.data.createTaskChecklistItem;
-            const { checklists } = cache.findTask;
-            const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (idx !== -1) {
-              draftCache.findTask.checklists[idx].items.push({ ...item });
+        (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) {
+                draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
+                  (c) => item.id !== c.id,
+                );
+              }
               const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
               draftCache.findTask.badges.checklist = {
                 __typename: 'ChecklistBadge',
@@ -269,7 +357,37 @@ const Details: React.FC<DetailsProps> = ({
       );
     },
   });
-  const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
+  const [createTaskChecklistItem] = useCreateTaskChecklistItemMutation({
+    update: (client, newTaskItem) => {
+      updateApolloCache<FindTaskQuery>(
+        client,
+        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);
+              if (idx !== -1) {
+                draftCache.findTask.checklists[idx].items.push({ ...item });
+                const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
+                draftCache.findTask.badges.checklist = {
+                  __typename: 'ChecklistBadge',
+                  complete,
+                  total,
+                };
+              }
+            }
+          }),
+        { taskID },
+      );
+    },
+  });
+  const { loading, data, refetch } = useFindTaskQuery({
+    variables: { taskID },
+    pollInterval: polling.TASK_DETAILS,
+    fetchPolicy: 'cache-and-network',
+  });
   const [setTaskComplete] = useSetTaskCompleteMutation();
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
     onCompleted: () => {
@@ -289,27 +407,61 @@ const Details: React.FC<DetailsProps> = ({
       refreshCache();
     },
   });
-  if (loading) {
-    return null;
-  }
-  if (!data) {
-    return null;
-  }
+  const [updateTaskComment] = useUpdateTaskCommentMutation();
+  const [editableComment, setEditableComment] = useState<null | string>(null);
+  const isLoading = true;
   return (
     <>
       <Modal
         width={1070}
         onClose={() => {
           history.push(projectURL);
+          hidePopup();
         }}
         renderContent={() => {
-          return (
+          return data ? (
             <TaskDetails
-              me={data.me.user}
+              onCancelCommentEdit={() => setEditableComment(null)}
+              onUpdateComment={(commentID, message) => {
+                updateTaskComment({ variables: { commentID, message } });
+              }}
+              editableComment={editableComment}
+              me={data.me ? data.me.user : null}
+              onCommentShowActions={(commentID, $targetRef) => {
+                showPopup(
+                  $targetRef,
+                  <TaskCommentActions
+                    onDeleteComment={() => {
+                      deleteTaskComment({ variables: { commentID } });
+                      hidePopup();
+                    }}
+                    onEditComment={() => {
+                      setEditableComment(commentID);
+                      hidePopup();
+                    }}
+                  />,
+                );
+              }}
               task={data.findTask}
-              onChecklistDrop={checklist => {
+              onToggleTaskWatch={(task, watched) => {
+                toggleTaskWatch({
+                  variables: { taskID: task.id },
+                  optimisticResponse: {
+                    __typename: 'Mutation',
+                    toggleTaskWatch: {
+                      id: task.id,
+                      __typename: 'Task',
+                      watched,
+                    },
+                  },
+                });
+              }}
+              onCreateComment={(task, message) => {
+                createTaskComment({ variables: { taskID: task.id, message } });
+              }}
+              onChecklistDrop={(checklist) => {
                 updateTaskChecklistLocation({
-                  variables: { checklistID: checklist.id, position: checklist.position },
+                  variables: { taskChecklistID: checklist.id, position: checklist.position },
 
                   optimisticResponse: {
                     __typename: 'Mutation',
@@ -324,20 +476,24 @@ const Details: React.FC<DetailsProps> = ({
                   },
                 });
               }}
-              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
                 updateTaskChecklistItemLocation({
-                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
+                  variables: {
+                    taskChecklistID,
+                    taskChecklistItemID: checklistItem.id,
+                    position: checklistItem.position,
+                  },
                   optimisticResponse: {
                     __typename: 'Mutation',
                     updateTaskChecklistItemLocation: {
                       __typename: 'UpdateTaskChecklistItemLocationPayload',
                       prevChecklistID,
-                      checklistID,
+                      taskChecklistID,
                       checklistItem: {
                         __typename: 'TaskChecklistItem',
                         position: checklistItem.position,
                         id: checklistItem.id,
-                        taskChecklistID: checklistID,
+                        taskChecklistID,
                       },
                     },
                   },
@@ -345,7 +501,7 @@ const Details: React.FC<DetailsProps> = ({
               }}
               onTaskNameChange={onTaskNameChange}
               onTaskDescriptionChange={onTaskDescriptionChange}
-              onToggleTaskComplete={task => {
+              onToggleTaskComplete={(task) => {
                 setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
               }}
               onDeleteTask={onDeleteTask}
@@ -390,7 +546,7 @@ const Details: React.FC<DetailsProps> = ({
                 createTaskChecklistItem({ variables: { taskChecklistID, name, position } });
               }}
               onMemberProfile={($targetRef, memberID) => {
-                const member = data.findTask.assigned.find(m => m.id === memberID);
+                const member = data.findTask.assigned.find((m) => m.id === memberID);
                 if (member) {
                   showPopup(
                     $targetRef,
@@ -400,7 +556,8 @@ const Details: React.FC<DetailsProps> = ({
                         bio="None"
                         onRemoveFromTask={() => {
                           if (user) {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id ?? '' } });
+                            hidePopup();
                           }
                         }}
                       />
@@ -440,7 +597,7 @@ const Details: React.FC<DetailsProps> = ({
                     }}
                   >
                     <CreateChecklistPopup
-                      onCreateChecklist={checklistData => {
+                      onCreateChecklist={(checklistData) => {
                         let position = 65535;
                         if (data.findTask.checklists) {
                           const [lastChecklist] = data.findTask.checklists.slice(-1);
@@ -490,12 +647,79 @@ const Details: React.FC<DetailsProps> = ({
                   >
                     <DueDateManager
                       task={task}
-                      onRemoveDueDate={t => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null } });
+                      onRemoveDueDate={(t) => {
+                        updateTaskDueDate({
+                          variables: {
+                            taskID: t.id,
+                            dueDate: null,
+                            hasTime: false,
+                            deleteNotifications: t.dueDate.notifications
+                              ? t.dueDate.notifications.map((n) => ({ id: n.id }))
+                              : [],
+                            updateNotifications: [],
+                            createNotifications: [],
+                          },
+                        });
                         hidePopup();
                       }}
-                      onDueDateChange={(t, newDueDate) => {
-                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
+                      onDueDateChange={(t, newDueDate, hasTime, notifications) => {
+                        const updatedNotifications = notifications.current
+                          .filter((c) => c.externalId !== null)
+                          .map((c) => {
+                            let duration = DueDateNotificationDuration.Minute;
+                            switch (c.duration.value) {
+                              case 'hour':
+                                duration = DueDateNotificationDuration.Hour;
+                                break;
+                              case 'day':
+                                duration = DueDateNotificationDuration.Day;
+                                break;
+                              case 'week':
+                                duration = DueDateNotificationDuration.Week;
+                                break;
+                              default:
+                                break;
+                            }
+                            return {
+                              id: c.externalId ?? '',
+                              period: c.period,
+                              duration,
+                            };
+                          });
+                        const newNotifications = notifications.current
+                          .filter((c) => c.externalId === null)
+                          .map((c) => {
+                            let duration = DueDateNotificationDuration.Minute;
+                            switch (c.duration.value) {
+                              case 'hour':
+                                duration = DueDateNotificationDuration.Hour;
+                                break;
+                              case 'day':
+                                duration = DueDateNotificationDuration.Day;
+                                break;
+                              case 'week':
+                                duration = DueDateNotificationDuration.Week;
+                                break;
+                              default:
+                                break;
+                            }
+                            return {
+                              taskID: task.id,
+                              period: c.period,
+                              duration,
+                            };
+                          });
+                        // const updatedNotifications = notifications.filter(c => c.externalId === null);
+                        updateTaskDueDate({
+                          variables: {
+                            taskID: t.id,
+                            dueDate: newDueDate,
+                            hasTime,
+                            createNotifications: newNotifications,
+                            updateNotifications: updatedNotifications,
+                            deleteNotifications: notifications.removed.map((n) => ({ id: n })),
+                          },
+                        });
                         hidePopup();
                       }}
                       onCancel={NOOP}
@@ -505,6 +729,8 @@ const Details: React.FC<DetailsProps> = ({
                 );
               }}
             />
+          ) : (
+            <TaskDetailsLoading />
           );
         }}
       />

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

@@ -3,38 +3,19 @@ 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,
+  useToggleTaskLabelMutation,
+  useLabelsQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
 
 type LabelManagerEditorProps = {
-  labels: React.RefObject<Array<ProjectLabel>>;
+  taskID?: string;
   taskLabels: null | React.RefObject<Array<TaskLabel>>;
   projectID: string;
   labelColors: Array<LabelColor>;
@@ -42,7 +23,7 @@ type LabelManagerEditorProps = {
 };
 
 const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
-  labels: labelsRef,
+  taskID,
   projectID,
   labelColors,
   onLabelToggle,
@@ -50,14 +31,22 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
 }) => {
   const [currentLabel, setCurrentLabel] = useState('');
   const { setTab, hidePopup } = usePopup();
+  const [toggleTaskLabel] = useToggleTaskLabelMutation();
   const [createProjectLabel] = useCreateProjectLabelMutation({
+    onCompleted: (data) => {
+      if (taskID) {
+        toggleTaskLabel({ variables: { taskID, projectLabelID: data.createProjectLabel.id } });
+      }
+    },
     update: (client, newLabelData) => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (newLabelData.data) {
+              draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
+            }
           }),
         {
           projectID,
@@ -71,38 +60,39 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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 },
       );
     },
   });
-  const labels = labelsRef.current ? labelsRef.current : [];
+  const { data } = useLabelsQuery({ variables: { projectID } });
+  const labels = data ? data.findProject.labels : [];
   const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : [];
   const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels);
   return (
     <>
       <Popup title="Labels" tab={0} onClose={() => hidePopup()}>
         <LabelManager
-          labels={labels}
+          labels={data ? data.findProject.labels : []}
           taskLabels={currentTaskLabels}
           onLabelCreate={() => {
             setTab(2);
           }}
-          onLabelEdit={labelId => {
+          onLabelEdit={(labelId) => {
             setCurrentLabel(labelId);
             setTab(1);
           }}
-          onLabelToggle={labelId => {
+          onLabelToggle={(labelId) => {
             if (onLabelToggle) {
-              if (currentTaskLabels.find(t => t.projectLabel.id === labelId)) {
-                setCurrentTaskLabels(currentTaskLabels.filter(t => t.projectLabel.id !== labelId));
-              } else {
-                const newProjectLabel = labels.find(l => l.id === labelId);
+              if (currentTaskLabels.find((t) => t.projectLabel.id === labelId)) {
+                setCurrentTaskLabels(currentTaskLabels.filter((t) => t.projectLabel.id !== labelId));
+              } else if (data) {
+                const newProjectLabel = data.findProject.labels.find((l) => l.id === labelId);
                 if (newProjectLabel) {
                   setCurrentTaskLabels([
                     ...currentTaskLabels,
@@ -122,14 +112,14 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
       <Popup onClose={() => hidePopup()} title="Edit label" tab={1}>
         <LabelEditor
           labelColors={labelColors}
-          label={labels.find(label => label.id === currentLabel) ?? null}
+          label={labels.find((label) => label.id === currentLabel) ?? null}
           onLabelEdit={(projectLabelID, name, color) => {
             if (projectLabelID) {
               updateProjectLabel({ variables: { projectLabelID, labelColorID: color.id, name: name ?? '' } });
             }
             setTab(0);
           }}
-          onLabelDelete={labelID => {
+          onLabelDelete={(labelID) => {
             deleteProjectLabel({ variables: { projectLabelID: labelID } });
             setTab(0);
           }}

frontend/src/Projects/Project/UserManagementPopup/OptionValue.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Cross } from 'shared/icons';
+import * as S from './Styles';
+
+const OptionValue = ({ data, removeProps }: any) => {
+  return (
+    <S.OptionValueWrapper>
+      <S.OptionValueLabel>{data.label}</S.OptionValueLabel>
+      <S.OptionValueRemove {...removeProps}>
+        <Cross width={14} height={14} />
+      </S.OptionValueRemove>
+    </S.OptionValueWrapper>
+  );
+};
+
+export default OptionValue;

frontend/src/Projects/Project/UserManagementPopup/Styles.ts

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import Button from 'shared/components/Button';
+
+export 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;
+`;
+
+export const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+`;
+
+export 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)});
+`;
+
+export 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;
+`;
+
+export const OptionValueLabel = styled.span`
+  font-size: 12px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+export 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;
+`;
+
+export const InviteButton = styled(Button)`
+  margin-top: 12px;
+  height: 32px;
+  padding: 4px 12px;
+  width: 100%;
+  justify-content: center;
+`;
+
+export const InviteContainer = styled.div`
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+`;

frontend/src/Projects/Project/UserManagementPopup/UserOption.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import TaskAssignee from 'shared/components/TaskAssignee';
+import * as S from './Styles';
+
+type UserOptionProps = {
+  innerProps: any;
+  isDisabled: boolean;
+  isFocused: boolean;
+  label: string;
+  data: any;
+  getValue: any;
+};
+
+const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
+  return !isDisabled ? (
+    <S.OptionWrapper {...innerProps} isFocused={isFocused}>
+      <TaskAssignee
+        size={32}
+        member={{
+          id: '',
+          fullName: data.value.label,
+          profileIcon: data.value.profileIcon,
+        }}
+      />
+      <S.OptionContent>
+        <S.OptionLabel fontSize={16} quiet={false}>
+          {label}
+        </S.OptionLabel>
+        {data.value.type === 2 && (
+          <S.OptionLabel fontSize={14} quiet>
+            Joined
+          </S.OptionLabel>
+        )}
+      </S.OptionContent>
+    </S.OptionWrapper>
+  ) : null;
+};
+
+export default UserOption;

frontend/src/Projects/Project/UserManagementPopup/fetchMembers.ts

@@ -0,0 +1,82 @@
+import gql from 'graphql-tag';
+import isValidEmail from 'shared/utils/email';
+
+type MemberFilterOptions = {
+  projectID?: null | string;
+  teamID?: null | string;
+  organization?: boolean;
+};
+
+export default async function(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 (isValidEmail(input) && !emails.find(e => e === input)) {
+    results = [
+      ...results,
+      {
+        label: input,
+        value: {
+          id: input,
+          type: 1,
+          profileIcon: {
+            bgColor: '#ccc',
+            initials: input.charAt(0),
+          },
+        },
+      },
+    ];
+  }
+
+  return results;
+}

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import AsyncSelect from 'react-select/async';
+import { useApolloClient } from '@apollo/react-hooks';
+import { colourStyles } from 'shared/components/Select';
+import { Popup } from 'shared/components/PopupMenu';
+import OptionValue from './OptionValue';
+import UserOption from './UserOption';
+import fetchMembers from './fetchMembers';
+import * as S from './Styles';
+
+type InviteUserData = {
+  email?: string;
+  userID?: string;
+};
+
+type UserManagementPopupProps = {
+  projectID: string;
+  users: Array<User>;
+  projectMembers: Array<TaskUser>;
+  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
+};
+
+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">
+      <S.InviteContainer>
+        <AsyncSelect
+          getOptionValue={option => option.value.id}
+          placeholder="Email address or username"
+          noOptionsMessage={() => null}
+          onChange={(e: any) => {
+            setInvitedUsers(e);
+          }}
+          isMulti
+          autoFocus
+          cacheOptions
+          styles={colourStyles}
+          defaultOption
+          components={{
+            MultiValue: OptionValue,
+            Option: UserOption,
+            IndicatorSeparator: null,
+            DropdownIndicator: null,
+          }}
+          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
+        />
+      </S.InviteContainer>
+      <S.InviteButton
+        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
+      </S.InviteButton>
+    </Popup>
+  );
+};
+
+export default UserManagementPopup;

frontend/src/Projects/Project/index.tsx

@@ -1,9 +1,9 @@
 // LOC830
-import React, { useState, useRef, useEffect, useContext } from 'react';
+import React, { useRef, useEffect } from 'react';
 import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import styled from 'styled-components/macro';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
+import GlobalTopNavbar from 'App/TopNavbar';
+import ProjectPopup from 'App/TopNavbar/ProjectPopup';
+import { usePopup } from 'shared/components/PopupMenu';
 import {
   useParams,
   Route,
@@ -15,132 +15,80 @@ import {
 } from 'react-router-dom';
 import {
   useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
+  useInviteProjectMembersMutation,
   useDeleteProjectMemberMutation,
   useToggleTaskLabelMutation,
   useUpdateProjectNameMutation,
   useFindProjectQuery,
+  useDeleteInvitedProjectMemberMutation,
   useUpdateTaskNameMutation,
-  useCreateTaskMutation,
   useDeleteTaskMutation,
-  useUpdateTaskLocationMutation,
-  useUpdateTaskGroupLocationMutation,
-  useCreateTaskGroupMutation,
   useUpdateTaskDescriptionMutation,
   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 useStateWithLocalStorage from 'shared/hooks/useStateWithLocalStorage';
+import localStorage from 'shared/utils/localStorage';
+import polling from 'shared/utils/polling';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
-
-const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
-
-const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
-  const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
-
-  React.useEffect(() => {
-    localStorage.setItem(localStorageKey, value);
-  }, [value]);
-
-  return [value, setValue];
-};
-
-const SearchInput = styled(Input)`
-  margin: 0;
-`;
-
-const UserMember = styled(Member)`
-  padding: 4px 0;
-  cursor: pointer;
-  &:hover {
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
-  }
-  border-radius: 6px;
-`;
-
-const MemberList = styled.div`
-  margin: 8px 0;
-`;
-
-type UserManagementPopupProps = {
-  users: Array<User>;
-  projectMembers: Array<TaskUser>;
-  onAddProjectMember: (userID: string) => void;
-};
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
-  return (
-    <Popup tab={0} title="Invite a user">
-      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
-      <MemberList>
-        {users
-          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
-          .map(user => (
-            <UserMember
-              key={user.id}
-              onCardMemberClick={() => onAddProjectMember(user.id)}
-              showName
-              member={user}
-              taskID=""
-            />
-          ))}
-      </MemberList>
-    </Popup>
-  );
-};
+import UserManagementPopup from './UserManagementPopup';
 
 type TaskRouteProps = {
   taskID: string;
 };
 
-interface QuickCardEditorState {
-  isOpen: boolean;
-  target: React.RefObject<HTMLElement> | null;
-  taskID: string | null;
-  taskGroupID: string | null;
-}
-
 interface ProjectParams {
   projectID: string;
 }
 
-const initialQuickCardEditorState: QuickCardEditorState = {
-  taskID: null,
-  taskGroupID: null,
-  isOpen: false,
-  target: null,
-};
-
 const Project = () => {
   const { projectID } = useParams<ProjectParams>();
   const history = useHistory();
   const match = useRouteMatch();
+  const location = useLocation();
+
+  const { showPopup, hidePopup } = usePopup();
+  const labelsRef = useRef<Array<ProjectLabel>>([]);
+  const [value, setValue] = useStateWithLocalStorage(localStorage.CARD_LABEL_VARIANT_STORAGE_KEY);
+  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
 
   const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
+  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
+  const [updateTaskName] = useUpdateTaskNameMutation();
+  const { data, error } = useFindProjectQuery({
+    variables: { projectID },
+    pollInterval: polling.PROJECT,
+  });
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: newTaskLabel => {
+    onCompleted: (newTaskLabel) => {
       taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
     },
   });
+  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,
+              );
 
-  const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
-  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
-
-  const [deleteTask] = useDeleteTaskMutation();
-
-  const [updateTaskName] = useUpdateTaskNameMutation();
-
-  const { loading, data } = useFindProjectQuery({
-    variables: { projectID },
+              if (taskGroupIdx !== -1) {
+                draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
+                  taskGroupIdx
+                ].tasks.filter((t) => t.id !== resp.data?.deleteTask.taskID);
+              }
+            }
+          }),
+        { projectID: data ? data.findProject.id : '' },
+      ),
   });
 
   const [updateProjectName] = useUpdateProjectNameMutation({
@@ -148,25 +96,49 @@ const Project = () => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.name = newName.data.updateProjectName.name;
+        (cache) =>
+          produce(cache, (draftCache) => {
+            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
           }),
-        { projectID },
+        { projectID: data ? data.findProject.id : '' },
       );
     },
   });
 
-  const [createProjectMember] = useCreateProjectMemberMutation({
+  const [inviteProjectMembers] = useInviteProjectMembersMutation({
     update: (client, response) => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
+        (cache) =>
+          produce(cache, (draftCache) => {
+            if (response.data) {
+              draftCache.findProject.members = [
+                ...cache.findProject.members,
+                ...response.data.inviteProjectMembers.members,
+              ];
+              draftCache.findProject.invitedMembers = [
+                ...cache.findProject.invitedMembers,
+                ...response.data.inviteProjectMembers.invitedMembers,
+              ];
+            }
           }),
-        { projectID },
+        { projectID: data ? data.findProject.id : '' },
+      );
+    },
+  });
+  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: data ? data.findProject.id : '' },
       );
     },
   });
@@ -175,36 +147,23 @@ const Project = () => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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 },
+        { projectID: data ? data.findProject.id : '' },
       );
     },
   });
 
-  const { user } = useCurrentUser();
-  const location = useLocation();
-
-  const { showPopup, hidePopup } = usePopup();
-  const $labelsRef = useRef<HTMLDivElement>(null);
-  const labelsRef = useRef<Array<ProjectLabel>>([]);
   useEffect(() => {
     if (data) {
       document.title = `${data.findProject.name} | Taskcafé`;
     }
   }, [data]);
-  if (loading) {
-    return (
-      <>
-        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
-        <BoardLoading />
-      </>
-    );
-  }
+
   if (data) {
     labelsRef.current = data.findProject.labels;
 
@@ -212,36 +171,50 @@ const Project = () => {
       <>
         <GlobalTopNavbar
           onChangeRole={(userID, roleCode) => {
-            updateProjectMemberRole({ variables: { userID, roleCode, projectID } });
+            updateProjectMemberRole({ variables: { userID, roleCode, projectID: data ? data.findProject.id : '' } });
           }}
-          onChangeProjectOwner={uid => {
+          onChangeProjectOwner={() => {
             hidePopup();
           }}
-          onRemoveFromBoard={userID => {
-            deleteProjectMember({ variables: { userID, projectID } });
+          onRemoveFromBoard={(userID) => {
+            deleteProjectMember({ variables: { userID, projectID: data ? data.findProject.id : '' } });
             hidePopup();
           }}
-          onSaveProjectName={projectName => {
-            updateProjectName({ variables: { projectID, name: projectName } });
+          onRemoveInvitedFromBoard={(email) => {
+            deleteInvitedProjectMember({ variables: { projectID: data ? data.findProject.id : '', email } });
+            hidePopup();
           }}
-          onInviteUser={$target => {
+          onSaveProjectName={(projectName) => {
+            updateProjectName({ variables: { projectID: data ? data.findProject.id : '', name: projectName } });
+          }}
+          onInviteUser={($target) => {
             showPopup(
               $target,
               <UserManagementPopup
-                onAddProjectMember={userID => {
-                  createProjectMember({ variables: { userID, projectID } });
+                projectID={data ? data.findProject.id : ''}
+                onInviteProjectMembers={(members) => {
+                  inviteProjectMembers({ variables: { projectID: data ? data.findProject.id : '', members } });
+                  hidePopup();
                 }}
                 users={data.users}
                 projectMembers={data.findProject.members}
               />,
             );
           }}
-          popupContent={<ProjectPopup history={history} name={data.findProject.name} projectID={projectID} />}
+          popupContent={
+            <ProjectPopup // eslint-disable-line
+              history={history}
+              publicOn={data.findProject.publicOn}
+              name={data.findProject.name}
+              projectID={projectID}
+            />
+          }
           menuType={[{ name: 'Board', link: location.pathname }]}
           currentTab={0}
           projectMembers={data.findProject.members}
+          projectInvitedMembers={data.findProject.invitedMembers}
           projectID={projectID}
-          teamID={data.findProject.team.id}
+          teamID={data.findProject.team ? data.findProject.team.id : null}
           name={data.findProject.name}
         />
         <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@@ -260,53 +233,60 @@ const Project = () => {
         />
         <Route
           path={`${match.path}/board/c/:taskID`}
-          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
-            <Details
-              refreshCache={NOOP}
-              availableMembers={data.findProject.members}
-              projectURL={`${match.url}/board`}
-              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,
+          render={() => {
+            return (
+              <Details
+                refreshCache={NOOP}
+                availableMembers={data.findProject.members}
+                projectURL={`${match.url}/board`}
+                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 } });
-              }}
-              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}
-                  />,
-                );
-              }}
-            />
-          )}
+                  });
+                }}
+                onDeleteTask={(deletedTask) => {
+                  deleteTask({ variables: { taskID: deletedTask.id } });
+                  history.push(`${match.url}/board`);
+                }}
+                onOpenAddLabelPopup={(task, $targetRef) => {
+                  taskLabelsRef.current = task.labels;
+                  showPopup(
+                    $targetRef,
+                    <LabelManagerEditor
+                      onLabelToggle={(labelID) => {
+                        toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
+                      }}
+                      taskID={task.id}
+                      labelColors={data.labelColors}
+                      taskLabels={taskLabelsRef}
+                      projectID={projectID}
+                    />,
+                  );
+                }}
+              />
+            );
+          }}
         />
       </>
     );
   }
-  return <div>Error</div>;
+  return (
+    <>
+      <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
+      <BoardLoading />
+    </>
+  );
 };
 
 export default Project;

frontend/src/Projects/index.tsx

@@ -9,46 +9,23 @@ import {
   GetProjectsDocument,
   GetProjectsQuery,
 } from 'shared/generated/graphql';
+import FormInput from 'shared/components/FormInput';
 
 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
-import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import Button from 'shared/components/Button';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useForm } from 'react-hook-form';
-import Input from 'shared/components/Input';
+import ControlledInput from 'shared/components/ControlledInput';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
+import theme from 'App/ThemeStyles';
+import polling from 'shared/utils/polling';
+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 };
+type CreateTeamData = { name: string };
 
 type CreateTeamFormProps = {
   onCreateTeam: (teamName: string) => void;
@@ -56,28 +33,34 @@ type CreateTeamFormProps = {
 
 const CreateTeamFormContainer = styled.form``;
 
+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;
+
+const ErrorText = styled.span`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.danger};
+`;
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit } = useForm<CreateTeamData>();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
-    onCreateTeam(data.teamName);
+    onCreateTeam(data.name);
   };
   return (
     <CreateTeamFormContainer onSubmit={handleSubmit(createTeam)}>
-      <Input
-        width="100%"
-        label="Team name"
-        id="teamName"
-        name="teamName"
-        variant="alternate"
-        ref={register({ required: 'Team name is required' })}
-      />
+      {errors.name && <ErrorText>{errors.name.message}</ErrorText>}
+      <FormInput width="100%" label="Team name" variant="alternate" {...register('name')} />
       <CreateTeamButton type="submit">Create</CreateTeamButton>
     </CreateTeamFormContainer>
   );
 };
 
 const ProjectAddTile = styled.div`
-  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+  background-color: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
   background-size: cover;
   background-position: 50%;
   color: #fff;
@@ -91,7 +74,7 @@ const ProjectAddTile = styled.div`
 `;
 
 const ProjectTile = styled(Link)<{ color: string }>`
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   background-size: cover;
   background-position: 50%;
   color: #fff;
@@ -162,7 +145,7 @@ const ProjectTileName = styled.div<{ centered?: boolean }>`
   max-height: 40px;
   width: 100%;
   word-wrap: break-word;
-  ${props => props.centered && 'text-align: center;'}
+  ${(props) => props.centered && 'text-align: center;'}
 `;
 
 const Wrapper = styled.div`
@@ -171,6 +154,7 @@ const Wrapper = styled.div`
   flex-direction: row;
   align-items: flex-start;
   justify-content: center;
+  overflow-y: auto;
 `;
 
 const ProjectSectionTitleWrapper = styled.div`
@@ -199,7 +183,7 @@ const SectionActionLink = styled(Link)`
 
 const ProjectSectionTitle = styled.h3`
   font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 
 const ProjectsContainer = styled.div`
@@ -209,13 +193,6 @@ 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;
@@ -223,10 +200,6 @@ const AddTeamButton = styled(Button)`
   right: 12px;
 `;
 
-const CreateFirstTeam = styled(Button)`
-  margin-top: 8px;
-`;
-
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
@@ -234,15 +207,17 @@ type ShowNewProject = {
 
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
+  const { loading, data } = useGetProjectsQuery({ pollInterval: polling.PROJECTS, fetchPolicy: 'cache-and-network' });
   useEffect(() => {
     document.title = 'Taskcafé';
   }, []);
   const [createProject] = useCreateProjectMutation({
     update: (client, newProject) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.projects.push({ ...newProject.data.createProject });
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
+        produce(cache, (draftCache) => {
+          if (newProject.data) {
+            draftCache.projects.push({ ...newProject.data.createProject });
+          }
         }),
       );
     },
@@ -252,37 +227,39 @@ const Projects = () => {
   const { user } = useCurrentUser();
   const [createTeam] = useCreateTeamMutation({
     update: (client, createData) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
-        produce(cache, draftCache => {
-          draftCache.teams.push({ ...createData.data.createTeam });
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
+        produce(cache, (draftCache) => {
+          if (createData.data) {
+            draftCache.teams.push({ ...createData.data?.createTeam });
+          }
         }),
       );
     },
   });
-  if (loading) {
-    return (
-      <>
-        <span>loading</span>
-      </>
-    );
-  }
 
-  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+  const colors = theme.colors.multiColors;
   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();
         const textB = b.name.toUpperCase();
         return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
       })
-      .map(team => {
+      .map((team) => {
         return {
           id: team.id,
           name: team.name,
           projects: projects
-            .filter(project => project.team.id === team.id)
+            .filter((project) => project.team && project.team.id === team.id)
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
@@ -295,10 +272,10 @@ const Projects = () => {
         <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
         <Wrapper>
           <ProjectsContainer>
-            {user.roles.org === 'admin' && (
+            {true && ( // TODO: add permision check
               <AddTeamButton
                 variant="outline"
-                onClick={$target => {
+                onClick={($target) => {
                   showPopup(
                     $target,
                     <Popup
@@ -309,7 +286,7 @@ const Projects = () => {
                       }}
                     >
                       <CreateTeamForm
-                        onCreateTeam={teamName => {
+                        onCreateTeam={(teamName) => {
                           if (organizationID) {
                             createTeam({ variables: { name: teamName, organizationID } });
                             hidePopup();
@@ -323,45 +300,41 @@ const Projects = () => {
                 Add Team
               </AddTeamButton>
             )}
-            {projectTeams.length === 0 && (
-              <EmptyStateContent>
-                <EmptyState width={425} height={425} />
-                <EmptyStateTitle>No teams exist</EmptyStateTitle>
-                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
-                <CreateFirstTeam
-                  variant="outline"
-                  onClick={$target => {
-                    showPopup(
-                      $target,
-                      <Popup
-                        title="Create team"
-                        tab={0}
-                        onClose={() => {
-                          hidePopup();
-                        }}
-                      >
-                        <CreateTeamForm
-                          onCreateTeam={teamName => {
-                            if (organizationID) {
-                              createTeam({ variables: { name: teamName, organizationID } });
-                              hidePopup();
-                            }
-                          }}
-                        />
-                      </Popup>,
-                    );
-                  }}
-                >
-                  Create new team
-                </CreateFirstTeam>
-              </EmptyStateContent>
-            )}
-            {projectTeams.map(team => {
+            <div>
+              <ProjectSectionTitleWrapper>
+                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
+              </ProjectSectionTitleWrapper>
+              <ProjectList>
+                {personalProjects.map((project, idx) => (
+                  <ProjectListItem key={project.id}>
+                    <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
+                      <ProjectTileFade />
+                      <ProjectTileDetails>
+                        <ProjectTileName>{project.name}</ProjectTileName>
+                      </ProjectTileDetails>
+                    </ProjectTile>
+                  </ProjectListItem>
+                ))}
+                <ProjectListItem>
+                  <ProjectAddTile
+                    onClick={() => {
+                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
+                    }}
+                  >
+                    <ProjectTileFade />
+                    <ProjectAddTileDetails>
+                      <ProjectTileName centered>Create new project</ProjectTileName>
+                    </ProjectAddTileDetails>
+                  </ProjectAddTile>
+                </ProjectListItem>
+              </ProjectList>
+            </div>
+            {projectTeams.map((team) => {
               return (
                 <div key={team.id}>
                   <ProjectSectionTitleWrapper>
                     <ProjectSectionTitle>{team.name}</ProjectSectionTitle>
-                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
+                    {true && ( // TODO: add permision check
                       <SectionActions>
                         <SectionActionLink to={`/teams/${team.id}`}>
                           <SectionAction variant="outline">Projects</SectionAction>
@@ -378,7 +351,7 @@ const Projects = () => {
                   <ProjectList>
                     {team.projects.map((project, idx) => (
                       <ProjectListItem key={project.id}>
-                        <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
+                        <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
                           <ProjectTileFade />
                           <ProjectTileDetails>
                             <ProjectTileName>{project.name}</ProjectTileName>
@@ -386,7 +359,7 @@ const Projects = () => {
                         </ProjectTile>
                       </ProjectListItem>
                     ))}
-                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
+                    {true && ( // TODO: add permision check
                       <ProjectListItem>
                         <ProjectAddTile
                           onClick={() => {
@@ -409,7 +382,7 @@ const Projects = () => {
                 initialTeamID={showNewProject.initialTeamID}
                 onCreateProject={(name, teamID) => {
                   if (user) {
-                    createProject({ variables: { teamID, name, userID: user.id } });
+                    createProject({ variables: { teamID, name } });
                     setShowNewProject({ open: false, initialTeamID: null });
                   }
                 }}
@@ -424,7 +397,7 @@ const Projects = () => {
       </>
     );
   }
-  return <div>Error!</div>;
+  return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
 };
 
 export default Projects;

frontend/src/Register/Styles.ts

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,66 @@
+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) => {
+            let isRedirected = false;
+            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;
+                  if (setup) {
+                    history.replace(`/confirm?confirmToken=xxxx`);
+                    isRedirected = true;
+                  } else if (params.confirmToken) {
+                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
+                    isRedirected = true;
+                  } else {
+                    setRegistered(true);
+                  }
+                })
+                .catch((e) => {
+                  toast('There was an issue trying to register');
+                });
+            }
+            if (!isRedirected) {
+              setComplete(true);
+            }
+          }}
+        />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default UsersRegister;

frontend/src/Teams/Members/index.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
+import polling from 'shared/utils/polling';
 import Button from 'shared/components/Button';
-import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import Select from 'shared/components/Select';
 import {
   useGetTeamQuery,
@@ -21,6 +22,7 @@ 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;
@@ -34,7 +36,7 @@ const UserMember = styled(Member)`
   padding: 4px 0;
   cursor: pointer;
   &:hover {
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+    background: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
   }
   border-radius: 6px;
 `;
@@ -55,8 +57,8 @@ const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, teamMe
       <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
       <TeamMemberList>
         {users
-          .filter(u => u.id !== teamMembers.find(p => p.id === u.id)?.id)
-          .map(user => (
+          .filter((u) => u.id !== teamMembers.find((p) => p.id === u.id)?.id)
+          .map((user) => (
             <UserMember
               key={user.id}
               onCardMemberClick={() => onAddTeamMember(user.id)}
@@ -114,17 +116,17 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
   position: relative;
   text-decoration: none;
 
-  ${props =>
+  ${(props) =>
     props.disabled
       ? css`
           user-select: none;
           pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
         `
       : css`
           cursor: pointer;
           &:hover {
-            background: rgb(115, 103, 240);
+            background: ${props.theme.colors.primary};
           }
         `}
 `;
@@ -135,7 +137,7 @@ export const Content = styled.div`
 
 export const CurrentPermission = styled.span`
   margin-left: 4px;
-  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
+  color: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
 `;
 
 export const Separator = styled.div`
@@ -146,13 +148,13 @@ export const Separator = styled.div`
 
 export const WarningText = styled.span`
   display: flex;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 
 export const RemoveMemberButton = styled(Button)`
@@ -219,13 +221,13 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
         <MiniProfileActions>
           <MiniProfileActionWrapper>
             {permissions
-              .filter(p => (subject.role && subject.role.code === 'owner') || p.code !== 'owner')
-              .map(perm => (
+              .filter((p) => (subject.role && subject.role.code === 'owner') || p.code !== 'owner')
+              .map((perm) => (
                 <MiniProfileActionItem
                   disabled={subject.role && perm.code !== subject.role.code && !canChangeRole}
                   key={perm.code}
                   onClick={() => {
-                    if (onChangeRole && subject.role && perm.code !== subject.role.code) {
+                    if (subject.role && perm.code !== subject.role.code) {
                       switch (perm.code) {
                         case 'owner':
                           onChangeRole(RoleCode.Owner);
@@ -274,8 +276,8 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
               <Select
                 label="New projects owner"
                 value={orphanedProjectOwner}
-                onChange={value => setOrphanedProjectOwner(value)}
-                options={members.filter(m => m.id !== subject.id).map(m => ({ label: m.fullName, value: m.id }))}
+                onChange={(value) => setOrphanedProjectOwner(value)}
+                options={members.filter((m) => m.id !== subject.id).map((m) => ({ label: m.fullName, value: m.id }))}
               />
             </>
           )}
@@ -305,14 +307,14 @@ const MemberItemOption = styled(Button)`
 `;
 
 const MemberList = styled.div`
-  border-top: 1px solid rgba(${props => props.theme.colors.border});
+  border-top: 1px solid ${(props) => props.theme.colors.border};
 `;
 
 const MemberListItem = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+  border-bottom: 1px solid ${(props) => props.theme.colors.border};
   min-height: 40px;
   padding: 12px 0 12px 40px;
   position: relative;
@@ -336,11 +338,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;
 
 const MemberItemName = styled.p`
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${(props) => props.theme.colors.text.secondary};
 `;
 
 const MemberItemUsername = styled.p`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 
 const MemberListHeader = styled.div`
@@ -349,12 +351,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
   font-size: 18px;
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${(props) => props.theme.colors.text.secondary};
   margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
   font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -386,11 +388,11 @@ const FilterTabItem = styled.li`
   font-weight: 700;
   text-decoration: none;
   padding: 6px 8px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
   &:hover {
     border-radius: 6px;
-    background: rgba(${props => props.theme.colors.primary});
-    color: rgba(${props => props.theme.colors.text.secondary});
+    background: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.text.secondary};
   }
 `;
 
@@ -418,8 +420,12 @@ type MembersProps = {
 
 const Members: React.FC<MembersProps> = ({ teamID }) => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
-  const { user, setUserRoles } = useCurrentUser();
+  const { loading, data } = useGetTeamQuery({
+    variables: { teamID },
+    fetchPolicy: 'cache-and-network',
+    pollInterval: polling.MEMBERS,
+  });
+  const { user } = 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”.';
   const [createTeamMember] = useCreateTeamMemberMutation({
@@ -427,47 +433,36 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
       updateApolloCache<GetTeamQuery>(
         client,
         GetTeamDocument,
-        cache =>
-          produce(cache, draftCache => {
-            draftCache.findTeam.members.push({
-              ...response.data.createTeamMember.teamMember,
-              member: { __typename: 'MemberList', projects: [], teams: [] },
-              owned: { __typename: 'OwnedList', projects: [], teams: [] },
-            });
+        (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 },
       );
     },
   });
-  const [updateTeamMemberRole] = useUpdateTeamMemberRoleMutation({
-    onCompleted: r => {
-      if (user) {
-        setUserRoles(
-          produce(user.roles, draftRoles => {
-            draftRoles.teams.set(r.updateTeamMemberRole.teamID, r.updateTeamMemberRole.member.role.code);
-          }),
-        );
-      }
-    },
-  });
+  const [updateTeamMemberRole] = useUpdateTeamMemberRoleMutation();
   const [deleteTeamMember] = useDeleteTeamMemberMutation({
     update: (client, response) => {
       updateApolloCache<GetTeamQuery>(
         client,
         GetTeamDocument,
-        cache =>
-          produce(cache, draftCache => {
+        (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 (
@@ -487,15 +482,15 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
             </ListDesc>
             <ListActions>
               <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
-              {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, data.findTeam.id) && (
+              {true && ( // TODO: add permission check
                 <InviteMemberButton
-                  onClick={$target => {
+                  onClick={($target) => {
                     showPopup(
                       $target,
                       <UserManagementPopup
                         users={data.users}
                         teamMembers={data.findTeam.members}
-                        onAddTeamMember={userID => {
+                        onAddTeamMember={(userID) => {
                           createTeamMember({ variables: { userID, teamID } });
                         }}
                       />,
@@ -509,7 +504,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
             </ListActions>
           </MemberListHeader>
           <MemberList>
-            {data.findTeam.members.map(member => (
+            {data.findTeam.members.map((member) => (
               <MemberListItem>
                 <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                 <MemberListItemDetails>
@@ -520,22 +515,23 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
                   <MemberItemOption variant="flat">On 2 projects</MemberItemOption>
                   <MemberItemOption
                     variant="outline"
-                    onClick={$target => {
+                    onClick={($target) => {
                       showPopup(
                         $target,
                         <TeamRoleManagerPopup
-                          currentUserID={user.id ?? ''}
+                          currentUserID={user ?? ''}
                           subject={member}
                           members={data.findTeam.members}
                           warning={member.role && member.role.code === 'owner' ? warning : null}
-                          canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)}
-                          onChangeRole={roleCode => {
+                          // canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)} TODO: add permission check
+                          canChangeRole
+                          onChangeRole={(roleCode) => {
                             updateTeamMemberRole({ variables: { userID: member.id, teamID, roleCode } });
                           }}
                           onRemoveFromTeam={
                             member.role && member.role.code === 'owner'
                               ? undefined
-                              : newOwnerID => {
+                              : (newOwnerID) => {
                                   deleteTeamMember({ variables: { teamID, newOwnerID, userID: member.id } });
                                   hidePopup();
                                 }
@@ -555,7 +551,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
     );
   }
 
-  return <div>error</div>;
+  return <div>loading</div>;
 };
 
 export default Members;

frontend/src/Teams/Projects/index.tsx

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

frontend/src/Teams/index.tsx

@@ -13,7 +13,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { History } from 'history';
 import produce from 'immer';
 import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
-import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import Members from './Members';
 import Projects from './Projects';
@@ -33,7 +33,7 @@ const Wrapper = styled.div`
 `;
 
 type TeamPopupProps = {
-  history: History<History.PoorMansUnknown>;
+  history: History<any>;
   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,24 +85,22 @@ type TeamsRouteProps = {
 const Teams = () => {
   const { teamID } = useParams<TeamsRouteProps>();
   const history = useHistory();
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
+  const { loading, data } = useGetTeamQuery({
+    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) {
+    /*
+TODO: re-add permission check
     if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
       return <Redirect to="/" />;
     }
+     */
     return (
       <>
         <GlobalTopNavbar
@@ -134,7 +132,21 @@ const Teams = () => {
       </>
     );
   }
-  return <div>Error!</div>;
+  return (
+    <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

@@ -1,153 +1,53 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import axios from 'axios';
-import createAuthRefreshInterceptor from 'axios-auth-refresh';
-import { ApolloProvider } from '@apollo/react-hooks';
-import { ApolloClient } from 'apollo-client';
-import { HttpLink } from 'apollo-link-http';
-import { onError } from 'apollo-link-error';
+import { ApolloClient } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
+
 import { enableMapSet } from 'immer';
-import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import moment from 'moment';
-import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
+import dayjs from 'dayjs';
+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 duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import log from 'loglevel';
+import remote from 'loglevel-plugin-remote';
 import cache from './App/cache';
 import App from './App';
 
-// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
+if (process.env.REACT_APP_NODE_ENV === 'production') {
+  remote.apply(log, { format: remote.json });
+  switch (process.env.REACT_APP_LOG_LEVEL) {
+    case 'info':
+      log.setLevel(log.levels.INFO);
+      break;
+    case 'debug':
+      log.setLevel(log.levels.DEBUG);
+      break;
+    default:
+      log.setLevel(log.levels.ERROR);
+  }
+}
+
 enableMapSet();
 
-moment.updateLocale('en', {
+dayjs.extend(isSameOrAfter);
+dayjs.extend(weekday);
+dayjs.extend(isBetween);
+dayjs.extend(customParseFormat);
+dayjs.extend(updateLocale);
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+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)
   },
 });
 
-let forward$;
-let isRefreshing = false;
-let pendingRequests: any = [];
-
-const refreshAuthLogic = (failedRequest: any) =>
-  axios.post('/auth/refresh_token', {}, { withCredentials: true }).then(tokenRefreshResponse => {
-    setAccessToken(tokenRefreshResponse.data.accessToken);
-    failedRequest.response.config.headers.Authorization = `Bearer ${tokenRefreshResponse.data.accessToken}`;
-    return Promise.resolve();
-  });
-
-createAuthRefreshInterceptor(axios, refreshAuthLogic);
-
-const resolvePendingRequests = () => {
-  pendingRequests.map((callback: any) => callback());
-  pendingRequests = [];
-};
-
-const resolvePromise = (resolve: () => void) => {
-  pendingRequests.push(() => resolve());
-};
-
-const resetPendingRequests = () => {
-  pendingRequests = [];
-};
-
-const setRefreshing = (newVal: boolean) => {
-  isRefreshing = newVal;
-};
-
-const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
-  if (graphQLErrors) {
-    for (const err of graphQLErrors) {
-      if (err.extensions && err.extensions.code) {
-        switch (err.extensions.code) {
-          case 'UNAUTHENTICATED':
-            if (!isRefreshing) {
-              setRefreshing(true);
-              forward$ = fromPromise(
-                getNewToken()
-                  .then((response: any) => {
-                    setAccessToken(response.accessToken);
-                    resolvePendingRequests();
-                    return response.accessToken;
-                  })
-                  .catch(() => {
-                    resetPendingRequests();
-                    // TODO
-                    // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
-                    return undefined;
-                  })
-                  .finally(() => {
-                    setRefreshing(false);
-                  }),
-              ).filter(value => Boolean(value));
-            } else {
-              forward$ = fromPromise(new Promise(resolvePromise));
-            }
-            return forward$.flatMap(() => forward(operation));
-          default:
-          // pass
-        }
-      }
-    }
-  }
-  if (networkError) {
-    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
-  }
-  return undefined;
-});
-
-const requestLink = new ApolloLink(
-  (operation, forward) =>
-    new Observable((observer: any) => {
-      let handle: any;
-      Promise.resolve(operation)
-        .then((op: any) => {
-          const accessToken = getAccessToken();
-          if (accessToken) {
-            op.setContext({
-              headers: {
-                Authorization: `Bearer ${accessToken}`,
-              },
-            });
-          }
-        })
-        .then(() => {
-          handle = forward(operation).subscribe({
-            next: observer.next.bind(observer),
-            error: observer.error.bind(observer),
-            complete: observer.complete.bind(observer),
-          });
-        })
-        .catch(observer.error.bind(observer));
-
-      return () => {
-        if (handle) {
-          handle.unsubscribe();
-        }
-      };
-    }),
-);
-
-const client = new ApolloClient({
-  link: ApolloLink.from([
-    onError(({ graphQLErrors, networkError }) => {
-      if (graphQLErrors) {
-        graphQLErrors.forEach(
-          ({ message, locations, path }) =>
-            console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`), // eslint-disable-line no-console
-        );
-      }
-      if (networkError) {
-        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
-      }
-    }),
-    errorLink,
-    requestLink,
-    new HttpLink({
-      uri: '/graphql',
-      credentials: 'same-origin',
-    }),
-  ]),
-  cache,
-});
+const client = new ApolloClient({ uri: '/graphql', cache });
 
 ReactDOM.render(
   <ApolloProvider client={client}>

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

@@ -1,18 +0,0 @@
-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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea/lib';
+import TextareaAutosize from 'react-autosize-textarea';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
 
@@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
   display: flex;
 `;
 export const ListNameEditor = styled(TextareaAutosize)`
-  background-color: ${props => mixin.lighten('#262c49', 0.05)};
+  background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 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('#262c49', 0.05)};
+    background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
   }
 `;
 

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

@@ -49,6 +49,7 @@ export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCa
       <ListNameEditorWrapper>
         <ListNameEditor
           ref={$editorRef}
+          height={40}
           onKeyDown={onKeyDown}
           value={listName}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setListName(e.currentTarget.value)}

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

@@ -1,59 +0,0 @@
-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,289 +8,7 @@ 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';
-
-export const RoleCheckmark = styled(Checkmark)`
-  padding-left: 4px;
-`;
-
-const permissions = [
-  {
-    code: 'owner',
-    name: 'Owner',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team. Can delete the team and all team projects.',
-  },
-  {
-    code: 'admin',
-    name: 'Admin',
-    description:
-      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team.',
-  },
-
-  { code: 'member', name: 'Member', description: 'Can view, create, and edit team projects, but not change settings.' },
-];
-
-export const RoleName = styled.div`
-  font-size: 14px;
-  font-weight: 700;
-`;
-export const RoleDescription = styled.div`
-  margin-top: 4px;
-  font-size: 14px;
-`;
-
-export const MiniProfileActions = styled.ul`
-  list-style-type: none;
-`;
-
-export const MiniProfileActionWrapper = styled.li``;
-
-export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
-  color: #c2c6dc;
-  display: block;
-  font-weight: 400;
-  padding: 6px 12px;
-  position: relative;
-  text-decoration: none;
-
-  ${props =>
-    props.disabled
-      ? css`
-          user-select: none;
-          pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
-        `
-      : css`
-          cursor: pointer;
-          &:hover {
-            background: rgb(115, 103, 240);
-          }
-        `}
-`;
-
-export const Content = styled.div`
-  padding: 0 12px 12px;
-`;
-
-export const CurrentPermission = styled.span`
-  margin-left: 4px;
-  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
-`;
-
-export const Separator = styled.div`
-  height: 1px;
-  border-top: 1px solid #414561;
-  margin: 0.25rem !important;
-`;
-
-export const WarningText = styled.span`
-  display: flex;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
-  padding: 6px;
-`;
-
-export const DeleteDescription = styled.div`
-  font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
-`;
-
-export const RemoveMemberButton = styled(Button)`
-  margin-top: 16px;
-  padding: 6px 12px;
-  width: 100%;
-`;
-
-type TeamRoleManagerPopupProps = {
-  user: User;
-  users: Array<User>;
-  warning?: string | null;
-  canChangeRole: boolean;
-  onChangeRole: (roleCode: RoleCode) => void;
-  updateUserPassword?: (user: TaskUser, password: string) => void;
-  onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
-};
-
-const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
-  warning,
-  user,
-  users,
-  canChangeRole,
-  onDeleteUser,
-  updateUserPassword,
-  onChangeRole,
-}) => {
-  const { hidePopup, setTab } = usePopup();
-  const [userPass] = useState({ pass: '', passConfirm: '' });
-  const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
-  const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {user.role && (
-              <MiniProfileActionItem
-                onClick={() => {
-                  setTab(1);
-                }}
-              >
-                Change permissions...
-                <CurrentPermission>{`(${user.role.name})`}</CurrentPermission>
-              </MiniProfileActionItem>
-            )}
-            <MiniProfileActionItem
-              disabled
-              onClick={() => {
-                setTab(3);
-              }}
-            >
-              Reset password...
-            </MiniProfileActionItem>
-            <MiniProfileActionItem onClick={() => setTab(2)}>Remove from organzation...</MiniProfileActionItem>
-          </MiniProfileActionWrapper>
-        </MiniProfileActions>
-        {warning && (
-          <>
-            <Separator />
-            <WarningText>{warning}</WarningText>
-          </>
-        )}
-      </Popup>
-      <Popup title="Change Permissions" onClose={() => hidePopup()} tab={1}>
-        <MiniProfileActions>
-          <MiniProfileActionWrapper>
-            {permissions
-              .filter(p => (user.role && user.role.code === 'owner') || p.code !== 'owner')
-              .map(perm => (
-                <MiniProfileActionItem
-                  disabled={user.role && perm.code !== user.role.code && !canChangeRole}
-                  key={perm.code}
-                  onClick={() => {
-                    if (onChangeRole && user.role && perm.code !== user.role.code) {
-                      switch (perm.code) {
-                        case 'owner':
-                          onChangeRole(RoleCode.Owner);
-                          break;
-                        case 'admin':
-                          onChangeRole(RoleCode.Admin);
-                          break;
-                        case 'member':
-                          onChangeRole(RoleCode.Member);
-                          break;
-                        default:
-                          break;
-                      }
-                      hidePopup();
-                    }
-                  }}
-                >
-                  <RoleName>
-                    {perm.name}
-                    {user.role && perm.code === user.role.code && <RoleCheckmark width={12} height={12} />}
-                  </RoleName>
-                  <RoleDescription>{perm.description}</RoleDescription>
-                </MiniProfileActionItem>
-              ))}
-          </MiniProfileActionWrapper>
-          {user.role && user.role.code === 'owner' && (
-            <>
-              <Separator />
-              <WarningText>You can not change roles because there must be an owner.</WarningText>
-            </>
-          )}
-        </MiniProfileActions>
-      </Popup>
-      <Popup title="Remove from Organization?" onClose={() => hidePopup()} tab={2}>
-        <Content>
-          <DeleteDescription>
-            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
-          </DeleteDescription>
-          {hasOwned && (
-            <>
-              <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-              <DeleteDescription>
-                Choose a new user to take over ownership of the users teams & projects.
-              </DeleteDescription>
-              <UserSelect
-                onChange={v => setDeleteUser(v)}
-                value={deleteUser}
-                options={users.map(u => ({ label: u.fullName, value: u.id }))}
-              />
-            </>
-          )}
-          <UserPassConfirmButton
-            disabled={!(!hasOwned || (hasOwned && deleteUser))}
-            onClick={() => {
-              if (onDeleteUser) {
-                if (!hasOwned || (hasOwned && deleteUser)) {
-                  onDeleteUser(user.id, deleteUser ? deleteUser.value : null);
-                }
-              }
-            }}
-            color="danger"
-          >
-            Delete user
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-      <Popup title="Really remove from Team?" onClose={() => hidePopup()} tab={4}>
-        <Content>
-          <DeleteDescription>
-            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
-          </DeleteDescription>
-          <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
-          <UserPassConfirmButton
-            onClick={() => {
-              // onDeleteUser();
-            }}
-            color="danger"
-          >
-            Delete user
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-      <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
-        <Content>
-          <DeleteDescription>
-            You can either set the users new password directly or send the user an email allowing them to reset their
-            own password.
-          </DeleteDescription>
-          <UserPassBar>
-            <UserPassButton onClick={() => setTab(4)} color="warning">
-              Set password...
-            </UserPassButton>
-            <UserPassButton color="warning" variant="outline">
-              Send reset link
-            </UserPassButton>
-          </UserPassBar>
-        </Content>
-      </Popup>
-      <Popup title="Reset password" onClose={() => hidePopup()} tab={4}>
-        <Content>
-          <NewUserPassInput defaultValue={userPass.pass} width="100%" variant="alternate" placeholder="New password" />
-          <NewUserPassInput
-            defaultValue={userPass.passConfirm}
-            width="100%"
-            variant="alternate"
-            placeholder="New password (confirm)"
-          />
-          <UserPassConfirmButton
-            disabled={userPass.pass === '' || userPass.passConfirm === ''}
-            onClick={() => {
-              if (userPass.pass === userPass.passConfirm && updateUserPassword) {
-                updateUserPassword(user, userPass.pass);
-              }
-            }}
-            color="danger"
-          >
-            Set password
-          </UserPassConfirmButton>
-        </Content>
-      </Popup>
-    </>
-  );
-};
+import { mixin } from 'shared/utils/styles';
 
 const UserSelect = styled(Select)`
   margin: 8px 0;
@@ -333,14 +51,14 @@ const MemberItemOption = styled(Button)`
 `;
 
 const MemberList = styled.div`
-  border-top: 1px solid rgba(${props => props.theme.colors.border});
+  border-top: 1px solid ${(props) => props.theme.colors.border};
 `;
 
 const MemberListItem = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+  border-bottom: 1px solid ${(props) => props.theme.colors.border};
   min-height: 40px;
   padding: 12px 0 12px 40px;
   position: relative;
@@ -364,11 +82,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;
 
 const MemberItemName = styled.p`
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${(props) => props.theme.colors.text.secondary};
 `;
 
 const MemberItemUsername = styled.p`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 
 const MemberListHeader = styled.div`
@@ -377,12 +95,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
   font-size: 18px;
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${(props) => props.theme.colors.text.secondary};
   margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
   font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
 `;
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -443,17 +161,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
   width: 100%;
   position: relative;
 
-  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
+  color: ${(props) => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
   &:hover {
-    color: rgba(115, 103, 240);
+    color: ${(props) => `${props.theme.colors.primary}`};
   }
   &:hover svg {
-    fill: rgba(115, 103, 240);
+    fill: ${(props) => props.theme.colors.primary};
   }
 `;
 const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
-stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+fill: ${(props) => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+stroke: ${(props) => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
 `;
 
 const TabNavItemSpan = styled.span`
@@ -468,10 +186,14 @@ const TabNavLine = styled.span<{ top: number }>`
   width: 2px;
   height: 48px;
   transform: scaleX(1);
-  top: ${props => props.top}px;
+  top: ${(props) => props.top}px;
 
-  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
+  background: linear-gradient(
+    30deg,
+    ${(props) => props.theme.colors.primary},
+    ${(props) => props.theme.colors.primary}
+  );
+  box-shadow: 0 0 8px 0 ${(props) => props.theme.colors.primary};
   display: block;
   position: absolute;
   transition: all 0.2s ease;
@@ -497,6 +219,289 @@ const TabContent = styled.div`
 
 const items = [{ name: 'Members' }];
 
+export const RoleCheckmark = styled(Checkmark)`
+  padding-left: 4px;
+`;
+
+const permissions = [
+  {
+    code: 'owner',
+    name: 'Owner',
+    description:
+      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team. Can delete the team and all team projects.',
+  },
+  {
+    code: 'admin',
+    name: 'Admin',
+    description:
+      'Can view, create and edit team projects, and change settings for the team. Will have admin rights on all projects in this team.',
+  },
+
+  { code: 'member', name: 'Member', description: 'Can view, create, and edit team projects, but not change settings.' },
+];
+
+export const RoleName = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+`;
+export const RoleDescription = styled.div`
+  margin-top: 4px;
+  font-size: 14px;
+`;
+
+export const MiniProfileActions = styled.ul`
+  list-style-type: none;
+`;
+
+export const MiniProfileActionWrapper = styled.li``;
+
+export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
+  color: #c2c6dc;
+  display: block;
+  font-weight: 400;
+  padding: 6px 12px;
+  position: relative;
+  text-decoration: none;
+
+  ${(props) =>
+    props.disabled
+      ? css`
+          user-select: none;
+          pointer-events: none;
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
+        `
+      : css`
+          cursor: pointer;
+          &:hover {
+            background: ${props.theme.colors.primary};
+          }
+        `}
+`;
+
+export const Content = styled.div`
+  padding: 0 12px 12px;
+`;
+
+export const CurrentPermission = styled.span`
+  margin-left: 4px;
+  color: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+`;
+
+export const Separator = styled.div`
+  height: 1px;
+  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)};
+  padding: 6px;
+`;
+
+export const DeleteDescription = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+
+export const RemoveMemberButton = styled(Button)`
+  margin-top: 16px;
+  padding: 6px 12px;
+  width: 100%;
+`;
+
+type TeamRoleManagerPopupProps = {
+  user: User;
+  users: Array<User>;
+  warning?: string | null;
+  canChangeRole?: boolean;
+  onChangeRole?: (roleCode: RoleCode) => void;
+  updateUserPassword?: (user: TaskUser, password: string) => void;
+  onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
+};
+
+const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
+  warning,
+  user,
+  users,
+  canChangeRole,
+  onDeleteUser,
+  updateUserPassword,
+  onChangeRole,
+}) => {
+  const { hidePopup, setTab } = usePopup();
+  const [userPass] = useState({ pass: '', passConfirm: '' });
+  const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
+  const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
+  return (
+    <>
+      <Popup title={null} tab={0}>
+        <MiniProfileActions>
+          <MiniProfileActionWrapper>
+            {user.role && (
+              <MiniProfileActionItem
+                onClick={() => {
+                  setTab(1);
+                }}
+              >
+                Change permissions...
+                <CurrentPermission>{`(${user.role.name})`}</CurrentPermission>
+              </MiniProfileActionItem>
+            )}
+            <MiniProfileActionItem
+              disabled
+              onClick={() => {
+                setTab(3);
+              }}
+            >
+              Reset password...
+            </MiniProfileActionItem>
+            <MiniProfileActionItem onClick={() => setTab(2)}>Remove from organzation...</MiniProfileActionItem>
+          </MiniProfileActionWrapper>
+        </MiniProfileActions>
+        {warning && (
+          <>
+            <Separator />
+            <WarningText>{warning}</WarningText>
+          </>
+        )}
+      </Popup>
+      <Popup title="Change Permissions" onClose={() => hidePopup()} tab={1}>
+        <MiniProfileActions>
+          <MiniProfileActionWrapper>
+            {permissions
+              .filter((p) => (user.role && user.role.code === 'owner') || p.code !== 'owner')
+              .map((perm) => (
+                <MiniProfileActionItem
+                  disabled={user.role && perm.code !== user.role.code && !canChangeRole}
+                  key={perm.code}
+                  onClick={() => {
+                    if (onChangeRole && user.role && perm.code !== user.role.code) {
+                      switch (perm.code) {
+                        case 'owner':
+                          onChangeRole(RoleCode.Owner);
+                          break;
+                        case 'admin':
+                          onChangeRole(RoleCode.Admin);
+                          break;
+                        case 'member':
+                          onChangeRole(RoleCode.Member);
+                          break;
+                        default:
+                          break;
+                      }
+                      hidePopup();
+                    }
+                  }}
+                >
+                  <RoleName>
+                    {perm.name}
+                    {user.role && perm.code === user.role.code && <RoleCheckmark width={12} height={12} />}
+                  </RoleName>
+                  <RoleDescription>{perm.description}</RoleDescription>
+                </MiniProfileActionItem>
+              ))}
+          </MiniProfileActionWrapper>
+          {user.role && user.role.code === 'owner' && (
+            <>
+              <Separator />
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
+            </>
+          )}
+        </MiniProfileActions>
+      </Popup>
+      <Popup title="Remove from Organization?" onClose={() => hidePopup()} tab={2}>
+        <Content>
+          <DeleteDescription>
+            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
+          </DeleteDescription>
+          {hasOwned && (
+            <>
+              <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
+              <DeleteDescription>
+                Choose a new user to take over ownership of the users teams & projects.
+              </DeleteDescription>
+              <UserSelect
+                onChange={(v) => setDeleteUser(v)}
+                value={deleteUser}
+                options={users.map((u) => ({ label: u.fullName, value: u.id }))}
+              />
+            </>
+          )}
+          <UserPassConfirmButton
+            disabled={!(!hasOwned || (hasOwned && deleteUser))}
+            onClick={() => {
+              if (onDeleteUser) {
+                if (!hasOwned || (hasOwned && deleteUser)) {
+                  onDeleteUser(user.id, deleteUser ? deleteUser.value : null);
+                }
+              }
+            }}
+            color="danger"
+          >
+            Delete user
+          </UserPassConfirmButton>
+        </Content>
+      </Popup>
+      <Popup title="Really remove from Team?" onClose={() => hidePopup()} tab={4}>
+        <Content>
+          <DeleteDescription>
+            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
+          </DeleteDescription>
+          <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
+          <UserSelect onChange={NOOP} value={null} options={users.map((u) => ({ label: u.fullName, value: u.id }))} />
+          <UserPassConfirmButton
+            onClick={() => {
+              // onDeleteUser();
+            }}
+            color="danger"
+          >
+            Delete user
+          </UserPassConfirmButton>
+        </Content>
+      </Popup>
+      <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
+        <Content>
+          <DeleteDescription>
+            You can either set the users new password directly or send the user an email allowing them to reset their
+            own password.
+          </DeleteDescription>
+          <UserPassBar>
+            <UserPassButton onClick={() => setTab(4)} color="warning">
+              Set password...
+            </UserPassButton>
+            <UserPassButton color="warning" variant="outline">
+              Send reset link
+            </UserPassButton>
+          </UserPassBar>
+        </Content>
+      </Popup>
+      <Popup title="Reset password" onClose={() => hidePopup()} tab={4}>
+        <Content>
+          <NewUserPassInput defaultValue={userPass.pass} width="100%" variant="alternate" placeholder="New password" />
+          <NewUserPassInput
+            defaultValue={userPass.passConfirm}
+            width="100%"
+            variant="alternate"
+            placeholder="New password (confirm)"
+          />
+          <UserPassConfirmButton
+            disabled={userPass.pass === '' || userPass.passConfirm === ''}
+            onClick={() => {
+              if (userPass.pass === userPass.passConfirm && updateUserPassword) {
+                updateUserPassword(user, userPass.pass);
+              }
+            }}
+            color="danger"
+          >
+            Set password
+          </UserPassConfirmButton>
+        </Content>
+      </Popup>
+    </>
+  );
+};
+
 type NavItemProps = {
   active: boolean;
   name: string;
@@ -530,8 +535,10 @@ 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> = ({
@@ -540,7 +547,9 @@ const Admin: React.FC<AdminProps> = ({
   onUpdateUserPassword,
   canInviteUser,
   onDeleteUser,
+  onDeleteInvitedUser,
   onInviteUser,
+  invitedUsers,
   users,
 }) => {
   const warning =
@@ -557,6 +566,7 @@ 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();
@@ -576,7 +586,7 @@ const Admin: React.FC<AdminProps> = ({
         <TabContent>
           <MemberListWrapper>
             <MemberListHeader>
-              <ListTitle>{`Members (${users.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length + invitedUsers.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.
@@ -585,7 +595,7 @@ const Admin: React.FC<AdminProps> = ({
                 <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
                 {canInviteUser && (
                   <InviteMemberButton
-                    onClick={$target => {
+                    onClick={($target) => {
                       onAddUser($target);
                     }}
                   >
@@ -596,7 +606,7 @@ const Admin: React.FC<AdminProps> = ({
               </ListActions>
             </MemberListHeader>
             <MemberList>
-              {users.map(member => {
+              {users.map((member) => {
                 const projectTotal = member.owned.projects.length + member.member.projects.length;
                 return (
                   <MemberListItem>
@@ -609,7 +619,7 @@ const Admin: React.FC<AdminProps> = ({
                       <MemberItemOption variant="flat">{`On ${projectTotal} projects`}</MemberItemOption>
                       <MemberItemOption
                         variant="outline"
-                        onClick={$target => {
+                        onClick={($target) => {
                           showPopup(
                             $target,
                             <TeamRoleManagerPopup
@@ -620,7 +630,7 @@ const Admin: React.FC<AdminProps> = ({
                                 onUpdateUserPassword(user, password);
                               }}
                               canChangeRole={(member.role && member.role.code !== 'owner') ?? false}
-                              onChangeRole={roleCode => {
+                              onChangeRole={(roleCode) => {
                                 updateUserRole({ variables: { userID: member.id, roleCode } });
                               }}
                               onDeleteUser={onDeleteUser}
@@ -634,6 +644,65 @@ 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

@@ -1,138 +0,0 @@
-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,15 +1,16 @@
 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;
   display: flex;
   align-items: center;
-  justify-content: ${props => props.justifyTextContent};
+  justify-content: ${(props) => props.justifyTextContent};
   transition: all 0.2s ease;
-  font-size: ${props => props.fontSize};
-  color: rgba(${props => props.theme.colors.text.secondary});
-  ${props =>
+  font-size: ${(props) => props.fontSize};
+  color: ${(props) => props.theme.colors.text.secondary};
+  ${(props) =>
     props.hasIcon &&
     css`
       padding-left: 4px;
@@ -22,11 +23,11 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
   border: none;
   cursor: pointer;
   padding: 0.75rem 2rem;
-  border-radius: ${props => props.theme.borderRadius.alternate};
+  border-radius: ${(props) => props.theme.borderRadius.alternate};
   display: flex;
   align-items: center;
 
-  ${props =>
+  ${(props) =>
     props.disabled &&
     css`
       opacity: 0.5;
@@ -35,32 +36,37 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
     `}
 `;
 
-const Filled = styled(Base)`
-  background: rgba(${props => props.theme.colors[props.color]});
-  &:hover {
-    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
-  }
+const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
+  background: ${(props) => props.theme.colors[props.color]};
+  ${(props) =>
+    props.hoverVariant === 'boxShadow' &&
+    css`
+      &:hover {
+        box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
+      }
+    `}
 `;
+
 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid rgba(${props => props.theme.colors[props.color]});
+  border: 1px solid ${(props) => props.theme.colors[props.color]};
   background: transparent;
-  ${props =>
+  ${(props) =>
     props.invert
       ? css`
-          background: rgba(${props.theme.colors[props.color]});
+          background: ${props.theme.colors[props.color]});
           & ${Text} {
-            color: rgba(${props.theme.colors.text.secondary});
+            color: ${props.theme.colors.text.secondary});
           }
           &:hover {
-            background: rgba(${props.theme.colors[props.color]}, 0.8);
+            background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
           }
         `
       : css`
           & ${Text} {
-            color: rgba(${props.theme.colors[props.color]});
+            color: ${props.theme.colors[props.color]});
           }
           &:hover {
-            background: rgba(${props.theme.colors[props.color]}, 0.08);
+            background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
           }
         `}
 `;
@@ -68,7 +74,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
 const Flat = styled(Base)`
   background: transparent;
   &:hover {
-    background: rgba(${props => props.theme.colors[props.color]}, 0.2);
+    background: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
   }
 `;
 
@@ -81,7 +87,7 @@ const LineX = styled.span<{ color: string }>`
   bottom: -2px;
   left: 50%;
   transform: translate(-50%);
-  background: rgba(${props => props.theme.colors[props.color]}, 1);
+  background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
 `;
 
 const LineDown = styled(Base)`
@@ -90,7 +96,7 @@ const LineDown = styled(Base)`
   border-width: 0;
   border-style: solid;
   border-bottom-width: 2px;
-  border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);
+  border-color: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
 
   &:hover ${LineX} {
     width: 100%;
@@ -103,17 +109,14 @@ const LineDown = styled(Base)`
 const Gradient = styled(Base)`
   background: linear-gradient(
     30deg,
-    rgba(${props => props.theme.colors[props.color]}, 1),
-    rgba(${props => props.theme.colors[props.color]}, 0.5)
+    ${(props) => mixin.rgba(props.theme.colors[props.color], 1)},
+    ${(props) => mixin.rgba(props.theme.colors[props.color], 0.5)}
   );
   text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
-  &:hover {
-    transform: translateY(-2px);
-  }
 `;
 
 const Relief = styled(Base)`
-  background: rgba(${props => props.theme.colors[props.color]}, 1);
+  background: ${(props) => mixin.rgba(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);
 
@@ -123,9 +126,11 @@ 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';
@@ -142,6 +147,7 @@ const Button: React.FC<ButtonProps> = ({
   invert = false,
   color = 'primary',
   variant = 'filled',
+  hoverVariant = 'boxShadow',
   type = 'button',
   justifyTextContent = 'center',
   icon,
@@ -158,7 +164,15 @@ const Button: React.FC<ButtonProps> = ({
   switch (variant) {
     case 'filled':
       return (
-        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
+        <Filled
+          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

@@ -1,174 +0,0 @@
-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,32 +1,43 @@
 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 } from 'shared/icons';
-import { RefObject } from 'react';
+import { CheckCircle, CheckSquareOutline, Clock, Bubble } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
-    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
-  z-index: ${props => props.zIndex};
+  box-shadow: 0 0 0 2px ${(props) => props.theme.colors.bg.secondary},
+    inset 0 0 0 1px ${(props) => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
+  z-index: ${(props) => props.zIndex};
   position: relative;
 `;
-export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'normal' }>`
-  ${props =>
+
+export const CommentsIcon = styled(Bubble)<{ color: 'success' | 'normal' }>`
+  ${(props) =>
     props.color === 'success' &&
     css`
-      fill: rgba(${props.theme.colors.success});
-      stroke: rgba(${props.theme.colors.success});
+      fill: ${props.theme.colors.success};
+      stroke: ${props.theme.colors.success};
     `}
 `;
-export const ClockIcon = styled(FontAwesomeIcon)``;
+
+export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'normal' }>`
+  ${(props) =>
+    props.color === 'success' &&
+    css`
+      fill: ${props.theme.colors.success};
+      stroke: ${props.theme.colors.success};
+    `}
+`;
+
+export const ClockIcon = styled(Clock)<{ color: string }>`
+  fill: ${(props) => props.color};
+`;
 
 export const EditorTextarea = styled(TextareaAutosize)`
   overflow: hidden;
   overflow-wrap: break-word;
   resize: none;
-  height: 90px;
+  height: 54px;
   width: 100%;
 
   background: none;
@@ -38,7 +49,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
   padding: 0;
   font-size: 14px;
   line-height: 18px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${(props) => props.theme.colors.text.primary};
   &:focus {
     border: none;
     outline: none;
@@ -52,6 +63,22 @@ export const ListCardBadges = styled.div`
   margin-left: -2px;
 `;
 
+export const CommentsBadge = styled.div`
+  color: #5e6c84;
+  display: flex;
+  align-items: center;
+  margin: 0 6px 4px 0;
+  font-size: 12px;
+  max-width: 100%;
+  min-height: 20px;
+  overflow: hidden;
+  position: relative;
+  padding: 2px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: top;
+`;
+
 export const ListCardBadge = styled.div`
   color: #5e6c84;
   display: flex;
@@ -74,7 +101,7 @@ export const DescriptionBadge = styled(ListCardBadge)`
 
 export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
   font-size: 12px;
-  ${props =>
+  ${(props) =>
     props.isPastDue &&
     css`
       padding-left: 4px;
@@ -89,7 +116,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: rgba(${props.theme.colors.success});`}
+  ${(props) => props.color === 'success' && `color: ${props.theme.colors.success};`}
 `;
 
 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@@ -100,8 +127,10 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
   cursor: pointer !important;
   position: relative;
 
-  background-color: ${props =>
-    props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
+  background-color: ${(props) =>
+    props.isActive && !props.editable
+      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
+      : `${props.theme.colors.bg.secondary}`};
 `;
 
 export const ListCardInnerContainer = styled.div`
@@ -115,7 +144,7 @@ export const ListCardDetails = styled.div<{ complete: boolean }>`
   position: relative;
   z-index: 10;
 
-  ${props => props.complete && 'opacity: 0.6;'}
+  ${(props) => props.complete && 'opacity: 0.6;'}
 `;
 
 const labelVariantExpandAnimation = keyframes`
@@ -147,8 +176,13 @@ 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) =>
     props.variant === 'small'
       ? css`
           height: 8px;
@@ -174,16 +208,14 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   color: #fff;
   display: flex;
   position: relative;
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
-  overflow: auto;
-  position: relative;
   &:hover {
     opacity: 0.8;
   }
-  ${props =>
+  ${(props) =>
     props.toggleLabels &&
     props.toggleDirection === 'expand' &&
     css`
@@ -194,7 +226,7 @@ export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirectio
         animation: ${labelTextVariantExpandAnimation} 0.45s ease-out;
       }
     `}
-  ${props =>
+  ${(props) =>
     props.toggleLabels &&
     props.toggleDirection === 'shrink' &&
     css`
@@ -218,22 +250,23 @@ export const ListCardOperation = styled.span`
   top: 2px;
   z-index: 100;
   &:hover {
-    background-color: ${props => mixin.darken('#262c49', 0.25)};
+    background-color: ${(props) => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
   }
 `;
 
-export const CardTitle = styled.span`
+export const CardTitle = styled.div`
   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`
@@ -243,9 +276,10 @@ export const CardMembers = styled.div`
 `;
 
 export const CompleteIcon = styled(CheckCircle)`
-  fill: rgba(${props => props.theme.colors.success});
+  fill: ${(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,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-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 { Pencil, Eye, List } from 'shared/icons';
 import {
   EditorTextarea,
   CardMember,
@@ -20,9 +18,13 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
+  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
+  CardTitleText,
+  CommentsIcon,
+  CommentsBadge,
 } from './Styles';
 
 type DueDate = {
@@ -47,6 +49,7 @@ type Props = {
   dueDate?: DueDate;
   checklists?: Checklist | null;
   labels?: Array<ProjectLabel>;
+  comments?: { unread: boolean; total: number } | null;
   watched?: boolean;
   wrapperProps?: any;
   members?: Array<TaskUser> | null;
@@ -58,18 +61,21 @@ type Props = {
   onCardTitleChange?: (name: string) => void;
   labelVariant?: CardLabelVariant;
   toggleLabels?: boolean;
+  isPublic?: boolean;
   toggleDirection?: 'shrink' | 'expand';
 };
 
 const Card = React.forwardRef(
   (
     {
+      isPublic = false,
       wrapperProps,
       onContextMenu,
       taskID,
       taskGroupID,
       complete,
       toggleLabels = false,
+      comments,
       toggleDirection = 'shrink',
       setToggleLabels,
       onClick,
@@ -120,9 +126,11 @@ const Card = React.forwardRef(
       }
     };
     const onTaskContext = (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onOpenComposer();
+      if (!isPublic) {
+        e.preventDefault();
+        e.stopPropagation();
+        onOpenComposer();
+      }
     };
     const onOperationClick = (e: React.MouseEvent<HTMLOrSVGElement>) => {
       e.preventDefault();
@@ -134,7 +142,7 @@ const Card = React.forwardRef(
         onMouseEnter={() => setActive(true)}
         onMouseLeave={() => setActive(false)}
         ref={$cardRef}
-        onClick={e => {
+        onClick={(e) => {
           if (onClick) {
             onClick(e);
           }
@@ -145,59 +153,62 @@ const Card = React.forwardRef(
         {...wrapperProps}
       >
         <ListCardInnerContainer ref={$innerCardRef}>
-          {isActive && !editable && (
+          {!isPublic && isActive && !editable && (
             <ListCardOperation
-              onClick={e => {
+              onClick={(e) => {
                 e.stopPropagation();
                 if (onContextMenu) {
                   onContextMenu($innerCardRef, taskID, taskGroupID);
                 }
               }}
             >
-              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
+              <Pencil width={8} height={8} />
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
-            <ListCardLabels
-              toggleLabels={toggleLabels}
-              toggleDirection={toggleDirection}
-              onClick={e => {
-                e.stopPropagation();
-                if (onCardLabelClick) {
-                  onCardLabelClick();
-                }
-              }}
-            >
-              {labels &&
-                labels
-                  .slice()
-                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                  .map(label => (
-                    <ListCardLabel
-                      onAnimationEnd={() => {
-                        if (setToggleLabels) {
-                          setToggleLabels(false);
-                        }
-                      }}
-                      variant={labelVariant ?? 'large'}
-                      color={label.labelColor.colorHex}
-                      key={label.id}
-                    >
-                      <ListCardLabelText>{label.name}</ListCardLabelText>
-                    </ListCardLabel>
-                  ))}
-            </ListCardLabels>
+            {labels && labels.length !== 0 && (
+              <ListCardLabelsWrapper>
+                <ListCardLabels
+                  toggleLabels={toggleLabels}
+                  toggleDirection={toggleDirection}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (onCardLabelClick) {
+                      onCardLabelClick();
+                    }
+                  }}
+                >
+                  {labels
+                    .slice()
+                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                    .map((label) => (
+                      <ListCardLabel
+                        onAnimationEnd={() => {
+                          if (setToggleLabels) {
+                            setToggleLabels(false);
+                          }
+                        }}
+                        variant={labelVariant ?? 'large'}
+                        color={label.labelColor.colorHex}
+                        key={label.id}
+                      >
+                        <ListCardLabelText>{label.name}</ListCardLabelText>
+                      </ListCardLabel>
+                    ))}
+                </ListCardLabels>
+              </ListCardLabelsWrapper>
+            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}
                 <EditorTextarea
-                  onChange={e => {
+                  onChange={(e) => {
                     setCardTitle(e.currentTarget.value);
                     if (onCardTitleChange) {
                       onCardTitleChange(e.currentTarget.value);
                     }
                   }}
-                  onClick={e => {
+                  onClick={(e) => {
                     e.stopPropagation();
                   }}
                   onKeyDown={handleKeyDown}
@@ -208,26 +219,32 @@ const Card = React.forwardRef(
             ) : (
               <CardTitle>
                 {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ` - ${position}` : ''}`}
+                <CardTitleText>{`${title}${position ? ` - ${position}` : ''}`}</CardTitleText>
               </CardTitle>
             )}
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
+                  <Eye width={12} height={12} />
                 </ListCardBadge>
               )}
               {dueDate && (
                 <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
                   <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                 </DueDateCardBadge>
               )}
               {description && (
                 <DescriptionBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
+                  <List width={8} height={8} />
                 </DescriptionBadge>
               )}
+              {comments && (
+                <CommentsBadge>
+                  <CommentsIcon color={comments.unread ? 'success' : 'normal'} width={8} height={8} />
+                  <ListCardBadgeText color={comments.unread ? 'success' : 'normal'}>{comments.total}</ListCardBadgeText>
+                </CommentsBadge>
+              )}
               {checklists && (
                 <ListCardBadge>
                   <ChecklistIcon
@@ -249,7 +266,7 @@ const Card = React.forwardRef(
                     size={28}
                     zIndex={members.length - idx}
                     member={member}
-                    onMemberProfile={$target => {
+                    onMemberProfile={($target) => {
                       if (onCardMemberClick) {
                         onCardMemberClick($target, taskID, member.id);
                       }

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

@@ -1,18 +0,0 @@
-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 CancelIcon = styled(FontAwesomeIcon)`
+export const CancelIconWrapper = styled.div`
   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 } from 'react';
+import React, { useState, useRef, useEffect } 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,
-  CancelIcon,
+  CancelIconWrapper,
   AddCardButton,
   ComposerControls,
   ComposerControlsSaveSection,
@@ -25,17 +25,23 @@ 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}>
+    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
       <Card
         title={cardName}
-        ref={$cardRef}
         taskID=""
         taskGroupID=""
         editable
         onEditCard={(_taskGroupID, _taskID, name) => {
-          onCreateCard(name);
-          setCardName('');
+          if (cardName.trim() !== '') {
+            onCreateCard(name.trim());
+            setCardName('');
+          }
         }}
         onCardTitleChange={name => {
           setCardName(name);
@@ -46,13 +52,17 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
           <AddCardButton
             variant="relief"
             onClick={() => {
-              onCreateCard(cardName);
-              setCardName('');
+              if (cardName.trim() !== '') {
+                onCreateCard(cardName.trim());
+                setCardName('');
+              }
             }}
           >
             Add Card
           </AddCardButton>
-          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
+          <CancelIconWrapper onClick={() => onClose()}>
+            <Cross width={12} height={12} />
+          </CancelIconWrapper>
         </ComposerControlsSaveSection>
         <ComposerControlsActionsSection />
       </ComposerControls>

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

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

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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,55 @@
+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 = ({ hasFailed, hasConfirmToken }: ConfirmProps) => {
+  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

@@ -1,43 +0,0 @@
-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,5 +1,6 @@
 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;
@@ -15,7 +16,7 @@ const InputWrapper = styled.div<{ width: string }>`
 `;
 
 const InputLabel = styled.span<{ width: string }>`
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   padding: 0.7rem !important;
   color: #c2c6dc;
   left: 0;
@@ -39,13 +40,13 @@ const InputInput = styled.input<{
   focusBg: string;
   borderColor: string;
 }>`
-  width: ${props => props.width};
+  width: ${(props) => props.width};
   font-size: 14px;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.borderColor};
+  border-color: ${(props) => props.borderColor};
   background: #262c49;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
+  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
   line-height: 16px;
   color: #c2c6dc;
   position: relative;
@@ -54,17 +55,17 @@ const InputInput = styled.input<{
   &:focus {
     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
     border: 1px solid rgba(115, 103, 240);
-    background: ${props => props.focusBg};
+    background: ${(props) => props.focusBg};
   }
   &:focus ~ ${InputLabel} {
-    color: rgba(115, 103, 240);
+    color: ${(props) => props.theme.colors.primary};
     transform: translate(-3px, -90%);
   }
-  ${props =>
+  ${(props) =>
     props.hasValue &&
     css`
       & ~ ${InputLabel} {
-        color: rgba(115, 103, 240);
+        color: ${props.theme.colors.primary};
         transform: translate(-3px, -90%);
       }
     `}
@@ -93,11 +94,13 @@ type ControlledInputProps = {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   value?: string;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
 };
 
 const ControlledInput = ({
   width = 'auto',
   variant = 'normal',
+  disabled = false,
   type = 'text',
   autocomplete,
   autoFocus = false,
@@ -115,8 +118,8 @@ const ControlledInput = ({
 }: ControlledInputProps) => {
   const $input = useRef<HTMLInputElement>(null);
   const [hasValue, setHasValue] = useState(false);
-  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-  const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
+  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
+  const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
   useEffect(() => {
     if (autoFocus && $input && $input.current) {
       $input.current.focus();
@@ -125,8 +128,9 @@ const ControlledInput = ({
   return (
     <InputWrapper className={className} width={width}>
       <InputInput
+        disabled={disabled}
         hasValue={hasValue}
-        onChange={e => {
+        onChange={(e) => {
           if (onChange) {
             setHasValue(e.currentTarget.value !== '' || floatingLabel);
             onChange(e);

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

@@ -1,64 +0,0 @@
-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: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 

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

@@ -1,74 +0,0 @@
-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

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+import styled, { css } 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 { Bell, Clock } from 'shared/icons';
 
 export const Wrapper = styled.div`
 display: flex
@@ -17,25 +18,30 @@ 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: rgba(${props => props.theme.colors.text.primary});
+    color: ${(props) => props.theme.colors.text.primary};
   }
   & .react-datepicker__time-list-item {
-    color: rgba(${props => props.theme.colors.text.primary});
+    color: ${(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: rgba(${props => props.theme.colors.text.secondary});
-    background: rgba(${props => props.theme.colors.bg.secondary});
+    color: ${(props) => props.theme.colors.text.secondary};
+    background: ${(props) => props.theme.colors.bg.secondary};
   }
   & .react-datepicker__time-container .react-datepicker__time {
-    background: rgba(${props => props.theme.colors.bg.primary});
+    background: ${(props) => props.theme.colors.bg.primary};
   }
   & .react-datepicker--time-only {
-    background: rgba(${props => props.theme.colors.bg.primary});
-    border: 1px solid rgba(${props => props.theme.colors.border});
+    background: ${(props) => props.theme.colors.bg.primary};
+    border: 1px solid ${(props) => props.theme.colors.border};
   }
 
   & .react-datepicker * {
@@ -75,12 +81,12 @@ display: flex
   }
   & .react-datepicker__day--selected {
     border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__day--selected:hover {
     border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__header {
@@ -88,9 +94,27 @@ display: flex
     border: none;
   }
   & .react-datepicker__header--time {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+    border-bottom: 1px solid ${(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`
@@ -110,6 +134,44 @@ 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;
@@ -119,15 +181,168 @@ export const CancelDueDate = styled.div`
   cursor: pointer;
 `;
 
-export const DueDateInput = styled(Input)`
+export const DueDateInput = styled(ControlledInput)`
   margin-top: 15px;
   margin-bottom: 5px;
   padding-right: 10px;
 `;
 
-export const ActionWrapper = styled.div`
-  padding-top: 8px;
+export const ActionsSeparator = styled.div`
+  margin-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: 86px;
+  }
+  & .react-datepicker__input-container input {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    width: 100%;
+  }
+
+  & .react-period-select__indicators {
+    display: none;
+  }
+  & .react-period {
+    width: 100%;
+    max-width: 86px;
+  }
+
+  & .react-period-select__single-value {
+    color: #c2c6dc;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  & .react-period-select__value-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  & .react-period-select__control {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    min-height: 30px;
+    border-color: rgb(65, 69, 97);
+    background: #262c49;
+    box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
+    color: #c2c6dc;
+    padding-right: 12px;
+    padding-left: 12px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    width: 100%;
+    position: relative;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    font-size: 13px;
+    line-height: 20px;
+    padding: 0 12px;
+  }
+`;
+
+export const ActionClock = styled(Clock)`
+  align-self: center;
+  fill: ${(props) => props.theme.colors.primary};
+  margin: 0 8px;
+  flex: 0 0 auto;
+`;
+
+export const ActionBell = styled(Bell)`
+  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<{ disabled?: boolean }>`
+  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};
+  }
+
+  ${(props) =>
+    props.disabled &&
+    css`
+      opacity: 0.8;
+      cursor: not-allowed;
+    `}
+
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+`;
+
+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};
+  }
+`;
+
+export const ControlWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+`;
+
+export const RightWrapper = styled.div`
+  flex: 1 1 50%;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+`;
+
+export const LeftWrapper = styled.div`
+  flex: 1 1 50%;
+  display: flex;
+  align-items: center;
+`;
+
+export const SaveButton = styled(Button)`
+  padding: 6px 12px;
+  justify-content: center;
+  margin-right: 4px;
+`;
+
+export const RemoveButton = styled.div`
+  width: 100%;
+  justify-content: center;
 `;

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

@@ -1,18 +1,47 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import moment from 'moment';
+import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
+import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
+import { colourStyles } from 'shared/components/Select';
+import produce from 'immer';
+import Select from 'react-select';
 import 'react-datepicker/dist/react-datepicker.css';
 import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
 import NOOP from 'shared/utils/noop';
+import { Bell, Clock, Cross, Plus, Trash } from 'shared/icons';
 
-import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
+import {
+  Wrapper,
+  RemoveDueDate,
+  SaveButton,
+  RightWrapper,
+  LeftWrapper,
+  DueDateInput,
+  DueDatePickerWrapper,
+  ConfirmAddDueDate,
+  DateRangeInputs,
+  AddDateRange,
+  ActionIcon,
+  ActionsWrapper,
+  ClearButton,
+  ActionsSeparator,
+  ActionClock,
+  ActionLabel,
+  ControlWrapper,
+  RemoveButton,
+  ActionBell,
+} from './Styles';
 
 type DueDateManagerProps = {
   task: Task;
-  onDueDateChange: (task: Task, newDueDate: Date) => void;
+  onDueDateChange: (
+    task: Task,
+    newDueDate: Date,
+    hasTime: boolean,
+    notifications: { current: Array<NotificationInternal>; removed: Array<string> },
+  ) => void;
   onRemoveDueDate: (task: Task) => void;
   onCancel: () => void;
 };
@@ -25,6 +54,39 @@ const FormField = styled.div`
   width: 50%;
   display: inline-block;
 `;
+
+const NotificationCount = styled.input``;
+
+const ActionPlus = styled(Plus)`
+  position: absolute;
+  fill: ${(props) => props.theme.colors.bg.primary} !important;
+  stroke: ${(props) => props.theme.colors.bg.primary};
+`;
+
+const ActionInput = styled.input`
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  margin-left: auto;
+  margin-right: 4px;
+  border-color: rgb(65, 69, 97);
+  background: #262c49;
+  box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
+  color: #c2c6dc;
+  position: relative;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 0 12px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+  width: 100%;
+  max-width: 48px;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;
 const HeaderSelectLabel = styled.div`
   display: inline-block;
   position: relative;
@@ -43,7 +105,7 @@ const HeaderSelectLabel = styled.div`
   color: #c2c6dc;
 
   &:hover {
-    background: rgba(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
     color: #c2c6dc;
   }
 `;
@@ -52,16 +114,22 @@ 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;
 
-  &:hover {
-    background: #262c49;
-    border: 1px solid rgba(115, 103, 240);
+  & option {
+    color: #c2c6dc;
+    background: ${(props) => props.theme.colors.bg.primary};
+  }
+
+  & 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;
@@ -93,7 +161,7 @@ const HeaderButton = styled.button`
   border: none;
   border-radius: 3px;
   &:hover {
-    background: rgba(115, 103, 240);
+    background: ${(props) => props.theme.colors.primary};
     color: #fff;
   }
 `;
@@ -109,15 +177,81 @@ const HeaderActions = styled.div`
   }
 `;
 
-const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = moment();
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
-  const [startDate, setStartDate] = useState(new Date());
+const notificationPeriodOptions = [
+  { value: 'minute', label: 'Minutes' },
+  { value: 'hour', label: 'Hours' },
+  { value: 'day', label: 'Days' },
+  { value: 'week', label: 'Weeks' },
+];
 
-  useEffect(() => {
-    const newDate = moment(startDate).format('YYYY-MM-DD');
-    setValue('endDate', newDate);
-  }, [startDate]);
+type NotificationInternal = {
+  internalId: string;
+  externalId: string | null;
+  period: number;
+  duration: { value: string; label: string };
+};
+
+type NotificationEntryProps = {
+  notification: NotificationInternal;
+  onChange: (period: number, duration: { value: string; label: string }) => void;
+  onRemove: () => void;
+};
+
+const NotificationEntry: React.FC<NotificationEntryProps> = ({ notification, onChange, onRemove }) => {
+  return (
+    <>
+      <ActionBell width={16} height={16} />
+      <ActionLabel>Notification</ActionLabel>
+      <ActionInput
+        value={notification.period}
+        onChange={(e) => {
+          onChange(parseInt(e.currentTarget.value, 10), notification.duration);
+        }}
+        onKeyPress={(e) => {
+          const isNumber = /^[0-9]$/i.test(e.key);
+          if (!isNumber && e.key !== 'Backspace') {
+            e.preventDefault();
+          }
+        }}
+        dir="ltr"
+        autoComplete="off"
+        min="0"
+        type="number"
+      />
+      <Select
+        menuPlacement="top"
+        className="react-period"
+        classNamePrefix="react-period-select"
+        styles={colourStyles}
+        isSearchable={false}
+        defaultValue={notification.duration}
+        options={notificationPeriodOptions}
+        onChange={(e) => {
+          if (e !== null) {
+            onChange(notification.period, e);
+          }
+        }}
+      />
+      <ActionIcon onClick={() => onRemove()}>
+        <Cross width={16} height={16} />
+      </ActionIcon>
+    </>
+  );
+};
+const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
+  const currentDueDate = task.dueDate.at ? dayjs(task.dueDate.at).toDate() : null;
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    setError,
+    formState: { errors },
+    control,
+  } = useForm<DueDateFormData>();
+
+  const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
+  const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
+  const [hasTime, enableTime] = useState(task.hasTime ?? false);
 
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
@@ -134,134 +268,216 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'November',
     'December',
   ];
-  const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
-    if (newDate.isValid()) {
-      onDueDateChange(task, newDate.toDate());
-    }
-  };
-  const CustomTimeInput = forwardRef(({ value, onClick }: any, $ref: any) => {
-    return (
-      <DueDateInput
-        id="endTime"
-        value={value}
-        name="endTime"
-        ref={$ref}
-        width="100%"
-        variant="alternate"
-        label="Time"
-        onClick={onClick}
-      />
-    );
-  });
+
+  const [isRange, setIsRange] = useState(false);
+  const [notDuration, setNotDuration] = useState(10);
+  const [removedNotifications, setRemovedNotifications] = useState<Array<string>>([]);
+  const [notifications, setNotifications] = useState<Array<NotificationInternal>>(
+    task.dueDate.notifications
+      ? task.dueDate.notifications.map((c, idx) => {
+          const duration =
+            notificationPeriodOptions.find((o) => o.value === c.duration.toLowerCase()) ?? notificationPeriodOptions[0];
+          return {
+            internalId: `n${idx}`,
+            externalId: c.id,
+            period: c.period,
+            duration,
+          };
+        })
+      : [],
+  );
   return (
     <Wrapper>
-      <Form onSubmit={handleSubmit(saveDueDate)}>
-        <FormField>
-          <DueDateInput
-            id="endDate"
-            name="endDate"
-            width="100%"
-            variant="alternate"
-            label="Date"
-            defaultValue={now.format('YYYY-MM-DD')}
-            ref={register({
-              required: 'End date is required.',
-            })}
-          />
-        </FormField>
-        <FormField>
-          <Controller
-            control={control}
-            defaultValue={now.toDate()}
-            name="endTime"
-            render={({ onChange, onBlur, value }) => (
-              <DatePicker
-                onChange={onChange}
-                selected={value}
-                onBlur={onBlur}
-                showTimeSelect
-                showTimeSelectOnly
-                timeIntervals={15}
-                timeCaption="Time"
-                dateFormat="h:mm aa"
-                customInput={<CustomTimeInput />}
-              />
-            )}
-          />
-        </FormField>
-        <DueDatePickerWrapper>
+      <DateRangeInputs>
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            if (!Array.isArray(date) && date !== null) {
+              setStartDate(date);
+            }
+          }}
+          popperClassName="picker-hidden"
+          dateFormat="yyyy-MM-dd"
+          disabledKeyboardNavigation
+          placeholderText="Select due date"
+        />
+        {isRange ? (
           <DatePicker
-            useWeekdaysShort
-            renderCustomHeader={({
-              date,
-              changeYear,
-              changeMonth,
-              decreaseMonth,
-              increaseMonth,
-              prevMonthButtonDisabled,
-              nextMonthButtonDisabled,
-            }) => (
-              <HeaderActions>
-                <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
-                  Prev
-                </HeaderButton>
-                <HeaderSelectLabel>
-                  {months[date.getMonth()]}
-                  <HeaderSelect
-                    value={getYear(date)}
-                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
-                  >
-                    {years.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-                <HeaderSelectLabel>
-                  {date.getFullYear()}
-                  <HeaderSelect
-                    value={months[getMonth(date)]}
-                    onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
-                  >
-                    {months.map(option => (
-                      <option key={option} value={option}>
-                        {option}
-                      </option>
-                    ))}
-                  </HeaderSelect>
-                </HeaderSelectLabel>
-
-                <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
-                  Next
-                </HeaderButton>
-              </HeaderActions>
-            )}
             selected={startDate}
-            inline
-            onChange={date => {
-              if (date) {
+            onChange={(date) => {
+              if (!Array.isArray(date)) {
                 setStartDate(date);
               }
             }}
+            popperClassName="picker-hidden"
+            dateFormat="yyyy-MM-dd"
+            placeholderText="Select from date"
           />
-        </DueDatePickerWrapper>
-        <ActionWrapper>
-          <ConfirmAddDueDate type="submit" onClick={NOOP}>
-            Save
-          </ConfirmAddDueDate>
-          <RemoveDueDate
-            variant="outline"
-            color="danger"
+        ) : (
+          <AddDateRange>Add date range</AddDateRange>
+        )}
+      </DateRangeInputs>
+      <DatePicker
+        selected={startDate}
+        onChange={(date) => {
+          if (!Array.isArray(date)) {
+            setStartDate(date);
+          }
+        }}
+        startDate={startDate}
+        useWeekdaysShort
+        renderCustomHeader={({
+          date,
+          changeYear,
+          changeMonth,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled,
+        }) => (
+          <HeaderActions>
+            <HeaderButton onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+              Prev
+            </HeaderButton>
+            <HeaderSelectLabel>
+              {months[date.getMonth()]}
+              <HeaderSelect
+                value={months[getMonth(date)]}
+                onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
+              >
+                {months.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </HeaderSelect>
+            </HeaderSelectLabel>
+            <HeaderSelectLabel>
+              {date.getFullYear()}
+              <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
+                {years.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </HeaderSelect>
+            </HeaderSelectLabel>
+
+            <HeaderButton onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+              Next
+            </HeaderButton>
+          </HeaderActions>
+        )}
+        inline
+      />
+      <ActionsSeparator />
+      {hasTime && (
+        <ActionsWrapper>
+          <ActionClock width={16} height={16} />
+          <ActionLabel>Due Time</ActionLabel>
+          <DatePicker
+            selected={startDate}
+            onChange={(date) => {
+              if (!Array.isArray(date)) {
+                setStartDate(date);
+              }
+            }}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeCaption="Time"
+            dateFormat="h:mm aa"
+          />
+          <ActionIcon onClick={() => enableTime(false)}>
+            <Cross width={16} height={16} />
+          </ActionIcon>
+        </ActionsWrapper>
+      )}
+      {notifications.map((n, idx) => (
+        <ActionsWrapper key={n.internalId}>
+          <NotificationEntry
+            notification={n}
+            onChange={(period, duration) => {
+              setNotifications((prev) =>
+                produce(prev, (draft) => {
+                  draft[idx].duration = duration;
+                  draft[idx].period = period;
+                }),
+              );
+            }}
+            onRemove={() => {
+              setNotifications((prev) =>
+                produce(prev, (draft) => {
+                  draft.splice(idx, 1);
+                  if (n.externalId !== null) {
+                    setRemovedNotifications((prev) => {
+                      if (n.externalId !== null) {
+                        return [...prev, n.externalId];
+                      }
+                      return prev;
+                    });
+                  }
+                }),
+              );
+            }}
+          />
+        </ActionsWrapper>
+      ))}
+      <ControlWrapper>
+        <LeftWrapper>
+          <SaveButton
             onClick={() => {
-              onRemoveDueDate(task);
+              if (startDate && notifications.findIndex((n) => Number.isNaN(n.period)) === -1) {
+                onDueDateChange(task, startDate, hasTime, { current: notifications, removed: removedNotifications });
+              }
             }}
           >
-            Remove
-          </RemoveDueDate>
-        </ActionWrapper>
-      </Form>
+            Save
+          </SaveButton>
+          {currentDueDate !== null && (
+            <ActionIcon
+              onClick={() => {
+                onRemoveDueDate(task);
+              }}
+            >
+              <Trash width={16} height={16} />
+            </ActionIcon>
+          )}
+        </LeftWrapper>
+        <RightWrapper>
+          <ActionIcon
+            disabled={notifications.length === 3}
+            onClick={() => {
+              setNotifications((prev) => [
+                ...prev,
+                {
+                  externalId: null,
+                  internalId: `n${prev.length + 1}`,
+                  duration: notificationPeriodOptions[0],
+                  period: 10,
+                },
+              ]);
+            }}
+          >
+            <Bell width={16} height={16} />
+            <ActionPlus width={8} height={8} />
+          </ActionIcon>
+          {!hasTime && (
+            <ActionIcon
+              onClick={() => {
+                if (startDate === null) {
+                  const today = new Date();
+                  today.setHours(12, 30, 0);
+                  setStartDate(today);
+                }
+                enableTime(true);
+              }}
+            >
+              <Clock width={16} height={16} />
+            </ActionIcon>
+          )}
+        </RightWrapper>
+      </ControlWrapper>
     </Wrapper>
   );
 };

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

@@ -1,6 +1,7 @@
 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;
@@ -34,9 +35,9 @@ export const Container = styled.div`
   white-space: nowrap;
 `;
 
-export const defaultBaseColor = '#10163a';
+export const defaultBaseColor = theme.colors.bg.primary;
 
-export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
+export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
 
 export const skeletonKeyframes = keyframes`
   0% {

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

@@ -0,0 +1,202 @@
+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;
+  width: ${(props) => props.width};
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  position: relative;
+  justify-content: center;
+
+  margin-bottom: 2.2rem;
+  margin-top: 24px;
+`;
+
+const InputLabel = styled.span<{ width: string }>`
+  width: ${(props) => props.width};
+  padding: 0.7rem !important;
+  color: #c2c6dc;
+  left: 0;
+  top: 0;
+  transition: all 0.2s ease;
+  position: absolute;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size: 0.85rem;
+  cursor: text;
+  font-size: 12px;
+      user-select: none;
+    pointer-events: none;
+}
+`;
+
+const InputInput = styled.input<{
+  hasValue: boolean;
+  hasIcon: boolean;
+  width: string;
+  focusBg: string;
+  borderColor: string;
+}>`
+  width: ${(props) => props.width};
+  font-size: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-color: ${(props) => props.borderColor};
+  background: #262c49;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
+  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
+
+  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px #262c49 inset !important;
+  }
+  &:-webkit-autofill {
+    -webkit-text-fill-color: #c2c6dc !important;
+  }
+  line-height: 16px;
+  color: #c2c6dc;
+  position: relative;
+  border-radius: 5px;
+  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};
+    background: ${(props) => props.focusBg};
+  }
+  &:focus ~ ${InputLabel} {
+    color: ${(props) => props.theme.colors.primary};
+    transform: translate(-3px, -90%);
+  }
+  ${(props) =>
+    props.hasValue &&
+    css`
+      & ~ ${InputLabel} {
+        color: ${props.theme.colors.primary};
+        transform: translate(-3px, -90%);
+      }
+    `}
+`;
+
+const Icon = styled.div`
+  display: flex;
+  left: 16px;
+  position: absolute;
+`;
+
+type FormInputProps = {
+  variant?: 'normal' | 'alternate';
+  disabled?: boolean;
+  label?: string;
+  width?: string;
+  floatingLabel?: boolean;
+  placeholder?: string;
+  icon?: JSX.Element;
+  type?: string;
+  autocomplete?: boolean;
+  autoFocus?: boolean;
+  autoSelect?: boolean;
+  id?: string;
+  name?: string;
+  onChange: any;
+  onBlur: any;
+  className?: string;
+  defaultValue?: string;
+  value?: string;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+};
+
+function useCombinedRefs(...refs: any) {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach((ref: any) => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+}
+
+const FormInput = React.forwardRef(
+  (
+    {
+      disabled = false,
+      width = 'auto',
+      variant = 'normal',
+      type = 'text',
+      autoFocus = false,
+      autoSelect = false,
+      autocomplete,
+      label,
+      placeholder,
+      onBlur,
+      onChange,
+      icon,
+      name,
+      className,
+      onClick,
+      floatingLabel,
+      defaultValue,
+      value,
+      id,
+    }: FormInputProps,
+    $ref: any,
+  ) => {
+    const [hasValue, setHasValue] = useState(defaultValue !== '');
+    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
+    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
+
+    // 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
+    // TODO(jordanknott): This is super ugly, find a better approach?
+    const $innerRef = React.useRef<HTMLInputElement>(null);
+    const combinedRef: any = useCombinedRefs($ref, $innerRef);
+    useEffect(() => {
+      if (combinedRef && combinedRef.current) {
+        if (autoFocus) {
+          combinedRef.current.focus();
+        }
+        if (autoSelect) {
+          combinedRef.current.select();
+        }
+      }
+    }, []);
+    return (
+      <InputWrapper className={className} width={width}>
+        <InputInput
+          onChange={(e) => {
+            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
+            onChange(e);
+          }}
+          disabled={disabled}
+          hasValue={hasValue}
+          ref={combinedRef}
+          id={id}
+          type={type}
+          name={name}
+          onClick={onClick}
+          autoComplete={autocomplete ? 'on' : 'off'}
+          defaultValue={defaultValue}
+          onBlur={onBlur}
+          value={value}
+          hasIcon={typeof icon !== 'undefined'}
+          width={width}
+          placeholder={placeholder}
+          focusBg={focusBg}
+          borderColor={borderColor}
+        />
+        {label && <InputLabel width={width}>{label}</InputLabel>}
+        <Icon>{icon && icon}</Icon>
+      </InputWrapper>
+    );
+  },
+);
+
+export default FormInput;

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

@@ -1,43 +0,0 @@
-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,5 +1,6 @@
 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;
@@ -53,18 +54,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 rgba(115, 103, 240);
+    border: 1px solid ${props => props.theme.colors.primary};
     background: ${props => props.focusBg};
   }
   &:focus ~ ${InputLabel} {
-    color: rgba(115, 103, 240);
+    color: ${props => props.theme.colors.primary};
     transform: translate(-3px, -90%);
   }
   ${props =>
     props.hasValue &&
     css`
       & ~ ${InputLabel} {
-        color: rgba(115, 103, 240);
+        color: ${props.theme.colors.primary};
         transform: translate(-3px, -90%);
       }
     `}
@@ -78,6 +79,7 @@ const Icon = styled.div`
 
 type InputProps = {
   variant?: 'normal' | 'alternate';
+  disabled?: boolean;
   label?: string;
   width?: string;
   floatingLabel?: boolean;
@@ -116,6 +118,7 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
   (
     {
+      disabled = false,
       width = 'auto',
       variant = 'normal',
       type = 'text',
@@ -136,8 +139,8 @@ const Input = React.forwardRef(
     $ref: any,
   ) => {
     const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-    const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
+    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
+    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
 
     // 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
@@ -160,6 +163,7 @@ 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

@@ -1,146 +0,0 @@
-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,6 +1,5 @@
 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;
@@ -34,7 +33,7 @@ export const AddCardButton = styled.a`
   &:hover {
     color: #c2c6dc;
     text-decoration: none;
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 export const Wrapper = styled.div`
@@ -73,7 +72,9 @@ export const HeaderName = styled(TextareaAutosize)`
   box-shadow: none;
   font-weight: 600;
   margin: -4px 0;
-  padding: 4px 8px;
+  &:disabled {
+    opacity: 1;
+  }
 
   letter-spacing: normal;
   word-spacing: normal;
@@ -97,7 +98,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
     props.isEditing &&
     css`
       & ${HeaderName} {
-        box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+        box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
       }
     `}
 `;

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

@@ -24,6 +24,7 @@ type Props = {
   onOpenComposer: (id: string) => void;
   wrapperProps?: any;
   headerProps?: any;
+  isPublic: boolean;
   index?: number;
   onExtraMenuOpen: (taskGroupID: string, $targetRef: React.RefObject<HTMLElement>) => void;
 };
@@ -37,6 +38,7 @@ const List = React.forwardRef(
       isComposerOpen,
       onOpenComposer,
       children,
+      isPublic,
       wrapperProps,
       headerProps,
       onExtraMenuOpen,
@@ -86,39 +88,37 @@ const List = React.forwardRef(
       <Container ref={$wrapperRef} {...wrapperProps}>
         <Wrapper>
           <Header {...headerProps} isEditing={isEditingTitle}>
-            <HeaderEditTarget onClick={onClick} isHidden={isEditingTitle} />
+            {!isPublic && <HeaderEditTarget onClick={onClick} isHidden={isEditingTitle} />}
             <HeaderName
               ref={$listNameRef}
+              disabled={isPublic}
               onBlur={onBlur}
               onChange={onChange}
               onKeyDown={onKeyDown}
               spellCheck={false}
               value={listName}
             />
-            <ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
-              <Ellipsis size={16} color="#c2c6dc" />
-            </ListExtraMenuButtonWrapper>
+            {!isPublic && (
+              <ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
+                <Ellipsis vertical={false} size={16} color="#c2c6dc" />
+              </ListExtraMenuButtonWrapper>
+            )}
           </Header>
           {children && children}
-          <AddCardContainer hidden={isComposerOpen}>
-            <AddCardButton onClick={() => onOpenComposer(id)}>
-              <Plus width={12} height={12} />
-              <AddCardButtonText>Add another card</AddCardButtonText>
-            </AddCardButton>
-          </AddCardContainer>
+          {!isPublic && (
+            <AddCardContainer hidden={isComposerOpen}>
+              <AddCardButton onClick={() => onOpenComposer(id)}>
+                <Plus width={12} height={12} />
+                <AddCardButtonText>Add another card</AddCardButtonText>
+              </AddCardButton>
+            </AddCardContainer>
+          )}
         </Wrapper>
       </Container>
     );
   },
 );
 
-List.defaultProps = {
-  children: null,
-  isComposerOpen: false,
-  wrapperProps: {},
-  headerProps: {},
-};
-
 List.displayName = 'List';
 export default List;
 

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

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

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

@@ -1,103 +0,0 @@
-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,11 +1,8 @@
 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

@@ -4,13 +4,14 @@ import List, { ListCards } from 'shared/components/List';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import AddList from 'shared/components/AddList';
+import log from 'loglevel';
 import {
   isPositionChanged,
   getSortedDraggables,
   getNewDraggablePosition,
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
@@ -51,7 +52,7 @@ export type TaskStatusFilter = {
 
 export interface TaskMetaFilterName {
   meta: TaskMeta;
-  value?: string | moment.Moment | null;
+  value?: string | dayjs.Dayjs | null;
   id?: string | null;
 }
 
@@ -104,31 +105,23 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
     return true;
   }
   if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = moment(task.completedAt);
-    const REFERENCE = moment(); // fixed just for testing, use moment();
+    const completedAt = dayjs(task.completedAt);
+    const REFERENCE = dayjs();
     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, 'days')
-          .startOf('day');
+        const YESTERDAY = REFERENCE.clone().subtract(1, 'day').startOf('day');
         return completedAt.isSameOrAfter(YESTERDAY, 'd');
       case TaskSince.ONE_WEEK:
-        const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'days')
-          .startOf('day');
+        const ONE_WEEK = REFERENCE.clone().subtract(7, 'day').startOf('day');
         return completedAt.isSameOrAfter(ONE_WEEK, 'd');
       case TaskSince.TWO_WEEKS:
-        const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'days')
-          .startOf('day');
+        const TWO_WEEKS = REFERENCE.clone().subtract(14, 'day').startOf('day');
         return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
       case TaskSince.THREE_WEEKS:
-        const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'days')
-          .startOf('day');
+        const THREE_WEEKS = REFERENCE.clone().subtract(21, 'day').startOf('day');
         return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
       default:
         return true;
@@ -151,6 +144,7 @@ interface SimpleProps {
   onCardMemberClick: OnCardMemberClick;
   onCardLabelClick: () => void;
   cardLabelVariant: CardLabelVariant;
+  isPublic?: boolean;
   taskStatusFilter?: TaskStatusFilter;
   taskMetaFilters?: TaskMetaFilters;
   taskSorting?: TaskSorting;
@@ -188,6 +182,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
   onExtraMenuOpen,
   onCardMemberClick,
   taskStatusFilter = initTaskStatusFilter,
+  isPublic = false,
   taskMetaFilters = initTaskMetaFilters,
   taskSorting = initTaskSorting,
 }) => {
@@ -201,14 +196,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
     let beforeDropDraggables: Array<DraggableElement> | null = null;
 
     if (isList) {
-      const droppedGroup = taskGroups.find(taskGroup => taskGroup.id === draggableId);
+      const droppedGroup = taskGroups.find((taskGroup) => taskGroup.id === draggableId);
       if (droppedGroup) {
         droppedDraggable = {
           id: draggableId,
           position: droppedGroup.position,
         };
         beforeDropDraggables = getSortedDraggables(
-          taskGroups.map(taskGroup => {
+          taskGroups.map((taskGroup) => {
             return { id: taskGroup.id, position: taskGroup.position };
           }),
         );
@@ -232,13 +227,13 @@ const SimpleLists: React.FC<SimpleProps> = ({
       }
     } else {
       const curTaskGroup = taskGroups.findIndex(
-        taskGroup => taskGroup.tasks.findIndex(task => task.id === draggableId) !== -1,
+        (taskGroup) => taskGroup.tasks.findIndex((task) => task.id === draggableId) !== -1,
       );
       let targetTaskGroup = curTaskGroup;
       if (!isSameList) {
-        targetTaskGroup = taskGroups.findIndex(taskGroup => taskGroup.id === destination.droppableId);
+        targetTaskGroup = taskGroups.findIndex((taskGroup) => taskGroup.id === destination.droppableId);
       }
-      const droppedTask = taskGroups[curTaskGroup].tasks.find(task => task.id === draggableId);
+      const droppedTask = taskGroups[curTaskGroup].tasks.find((task) => task.id === draggableId);
 
       if (droppedTask) {
         droppedDraggable = {
@@ -246,7 +241,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
           position: droppedTask.position,
         };
         beforeDropDraggables = getSortedDraggables(
-          taskGroups[targetTaskGroup].tasks.map(task => {
+          taskGroups[targetTaskGroup].tasks.map((task) => {
             return { id: task.id, position: task.position };
           }),
         );
@@ -268,6 +263,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
             id: destination.droppableId,
           },
         };
+        log.debug(
+          `action=move taskId=${droppedTask.id} source=${source.droppableId} dest=${destination.droppableId} oldPos=${droppedTask.position} newPos=${newPosition}`,
+        );
         onTaskDrop(newTask, droppedTask.taskGroup.id);
       }
     }
@@ -284,7 +282,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
       <BoardWrapper>
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable direction="horizontal" type="column" droppableId="root">
-            {provided => (
+            {(provided) => (
               <Container {...provided.droppableProps} ref={provided.innerRef}>
                 {taskGroups
                   .slice()
@@ -292,14 +290,15 @@ const SimpleLists: React.FC<SimpleProps> = ({
                   .map((taskGroup: TaskGroup, index: number) => {
                     return (
                       <Draggable draggableId={taskGroup.id} key={taskGroup.id} index={index}>
-                        {columnDragProvided => (
+                        {(columnDragProvided) => (
                           <Droppable type="tasks" droppableId={taskGroup.id}>
                             {(columnDropProvided, snapshot) => (
                               <List
                                 name={taskGroup.name}
-                                onOpenComposer={id => setCurrentComposer(id)}
+                                onOpenComposer={(id) => setCurrentComposer(id)}
                                 isComposerOpen={currentComposer === taskGroup.id}
-                                onSaveName={name => onChangeTaskGroupName(taskGroup.id, name)}
+                                onSaveName={(name) => onChangeTaskGroupName(taskGroup.id, name)}
+                                isPublic={isPublic}
                                 ref={columnDragProvided.innerRef}
                                 wrapperProps={columnDragProvided.draggableProps}
                                 headerProps={columnDragProvided.dragHandleProps}
@@ -311,8 +310,8 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                 <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                   {taskGroup.tasks
                                     .slice()
-                                    .filter(t => shouldStatusFilter(t, taskStatusFilter))
-                                    .filter(t => shouldMetaFilter(t, taskMetaFilters))
+                                    .filter((t) => shouldStatusFilter(t, taskStatusFilter))
+                                    .filter((t) => shouldMetaFilter(t, taskMetaFilters))
                                     .sort((a: any, b: any) => a.position - b.position)
                                     .sort((a: any, b: any) => sortTasks(a, b, taskSorting))
                                     .map((task: Task, taskIndex: any) => {
@@ -323,12 +322,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                           index={taskIndex}
                                           isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
                                         >
-                                          {taskProvided => {
+                                          {(taskProvided) => {
                                             return (
                                               <Card
                                                 toggleDirection={toggleDirection}
                                                 toggleLabels={toggleLabels}
+                                                isPublic={isPublic}
                                                 labelVariant={cardLabelVariant}
+                                                watched={task.watched}
                                                 wrapperProps={{
                                                   ...taskProvided.draggableProps,
                                                   ...taskProvided.dragHandleProps,
@@ -348,12 +349,12 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                 complete={task.complete ?? false}
                                                 taskGroupID={taskGroup.id}
                                                 description=""
-                                                labels={task.labels.map(label => label.projectLabel)}
+                                                labels={task.labels.map((label) => label.projectLabel)}
                                                 dueDate={
-                                                  task.dueDate
+                                                  task.dueDate.at
                                                     ? {
                                                         isPastDue: false,
-                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: dayjs(task.dueDate.at).format('MMM D, YYYY'),
                                                       }
                                                     : undefined
                                                 }
@@ -363,6 +364,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                   onTaskClick(task);
                                                 }}
                                                 checklists={task.badges && task.badges.checklist}
+                                                comments={task.badges && task.badges.comments}
                                                 onCardMemberClick={onCardMemberClick}
                                                 onContextMenu={onQuickEditorOpen}
                                               />
@@ -377,7 +379,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                       onClose={() => {
                                         setCurrentComposer('');
                                       }}
-                                      onCreateCard={name => {
+                                      onCreateCard={(name) => {
                                         onCreateTask(taskGroup.id, name);
                                       }}
                                       isOpen
@@ -391,16 +393,18 @@ const SimpleLists: React.FC<SimpleProps> = ({
                       </Draggable>
                     );
                   })}
-                <AddList
-                  onSave={listName => {
-                    onCreateTaskGroup(listName);
-                  }}
-                />
                 {provided.placeholder}
               </Container>
             )}
           </Droppable>
         </DragDropContext>
+        {!isPublic && (
+          <AddList
+            onSave={(listName) => {
+              onCreateTaskGroup(listName);
+            }}
+          />
+        )}
       </BoardWrapper>
     </BoardContainer>
   );

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

@@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 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 = moment(task.dueDate);
-      const today = moment();
+      const taskDueDate = dayjs(task.dueDate.at);
+      const today = dayjs();
       let start;
       let end;
       switch (filters.dueDate.type) {
@@ -36,61 +36,31 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
           break;
         case DueDateFilterType.TOMORROW:
-          isFiltered = shouldFilter(
-            taskDueDate.isBefore(
-              today
-                .clone()
-                .add(1, 'days')
-                .endOf('day'),
-            ),
-          );
+          isFiltered = shouldFilter(taskDueDate.isBefore(today.clone().add(1, 'day').endOf('day')));
           break;
         case DueDateFilterType.THIS_WEEK:
-          start = today
-            .clone()
-            .weekday(0)
-            .startOf('day');
-          end = today
-            .clone()
-            .weekday(6)
-            .endOf('day');
+          start = today.clone().weekday(0).startOf('day');
+          end = today.clone().weekday(6).endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
         case DueDateFilterType.NEXT_WEEK:
-          start = today
-            .clone()
-            .weekday(0)
-            .add(7, 'days')
-            .startOf('day');
-          end = today
-            .clone()
-            .weekday(6)
-            .add(7, 'days')
-            .endOf('day');
+          start = today.clone().weekday(0).add(7, 'day').startOf('day');
+          end = today.clone().weekday(6).add(7, 'day').endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
         case DueDateFilterType.ONE_WEEK:
           start = today.clone().startOf('day');
-          end = today
-            .clone()
-            .add(7, 'days')
-            .endOf('day');
+          end = today.clone().add(7, 'day').endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
         case DueDateFilterType.TWO_WEEKS:
           start = today.clone().startOf('day');
-          end = today
-            .clone()
-            .add(14, 'days')
-            .endOf('day');
+          end = today.clone().add(14, 'day').endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
         case DueDateFilterType.THREE_WEEKS:
           start = today.clone().startOf('day');
-          end = today
-            .clone()
-            .add(21, 'days')
-            .endOf('day');
+          end = today.clone().add(21, 'day').endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
         default:
@@ -104,7 +74,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
     }
     for (const member of filters.members) {
       if (task.assigned) {
-        if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
+        if (task.assigned.findIndex((m) => m.id === member.id) !== -1) {
           isFiltered = ShouldFilter.VALID;
         }
       }
@@ -116,7 +86,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
     }
     for (const label of filters.labels) {
       if (task.labels) {
-        if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
+        if (task.labels.findIndex((m) => m.projectLabel.id === label.id) !== -1) {
           isFiltered = ShouldFilter.VALID;
         }
       }

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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,41 @@
+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;