feat: implement task group actions

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

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+custom: ['https://paypal.me/jordanthedev', 'https://www.buymeacoffee.com/jordanknott']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,28 @@
+---
+name: Bug report
+about: Create a report to help improve Taskcafe
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is with steps to reproduce the issue.
+
+**Expected behavior**
+What did you expect to happen?
+
+**Screenshots / Live demo link**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
+
+<!--
+
+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
+
+-->

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+* **Please check if the PR fulfills these requirements**
+- [ ] You have read the contribution guidelines [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md)
+- [ ] The commit message follows our [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md#git-commit-message-style)
+- [ ] Docs have been added / updated (for bug fixes / features)
+
+
+* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+
+
+* **What is the current behavior?** (You can also link to an open issue here)
+
+
+* **What is the new behavior (if this is a feature change)?**
+
+
+* **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
+
+
+* **Other information**:

.github/taskcafe-full.svg

@@ -7,16 +7,16 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:export-ydpi="96"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   inkscape:export-xdpi="96"
-   inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
-   viewBox="0 0 1100 350"
-   version="1.1"
-   id="svg951"
-   sodipodi:docname="taskcafe-full.svg"
-   width="1100"
    height="350"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+   width="1100"
+   sodipodi:docname="taskcafe-full.svg"
+   id="svg951"
+   version="1.1"
+   viewBox="0 0 1100 350"
+   inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
   <metadata
      id="metadata957">
     <rdf:RDF>
@@ -25,81 +25,70 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
   <defs
      id="defs955">
     <inkscape:path-effect
-       effect="bspline"
+       only_selected="false"
+       apply_with_weight="true"
+       apply_no_weight="true"
+       helper_size="0"
+       steps="2"
+       weight="33.333333"
+       lpeversion="1"
+       is_visible="true"
        id="path-effect2633"
-       is_visible="true"
+       effect="bspline" />
-       lpeversion="1"
-       weight="33.333333"
-       steps="2"
-       helper_size="0"
-       apply_no_weight="true"
-       apply_with_weight="true"
-       only_selected="false" />
     <inkscape:path-effect
-       only_selected="false"
+       effect="bspline"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
-       is_visible="true"
        id="path-effect2614"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
        is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
        id="path-effect2500"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
        is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
        id="path-effect2491"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
        is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
        id="path-effect1706"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
        is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
        id="path-effect1697"
-       effect="bspline" />
-    <inkscape:path-effect
-       effect="bspline"
-       id="path-effect917"
        is_visible="true"
        lpeversion="1"
        weight="33.333333"
@@ -117,11 +106,11 @@
        weight="33.333333"
        lpeversion="1"
        is_visible="true"
-       id="path-effect950"
+       id="path-effect917"
        effect="bspline" />
     <inkscape:path-effect
        effect="bspline"
-       id="path-effect969"
+       id="path-effect950"
        is_visible="true"
        lpeversion="1"
        weight="33.333333"
@@ -130,131 +119,150 @@
        apply_no_weight="true"
        apply_with_weight="true"
        only_selected="false" />
+    <inkscape:path-effect
+       only_selected="false"
+       apply_with_weight="true"
+       apply_no_weight="true"
+       helper_size="0"
+       steps="2"
+       weight="33.333333"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect969"
+       effect="bspline" />
   </defs>
   <sodipodi:namedview
-     inkscape:document-rotation="0"
+     inkscape:current-layer="g2585"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1032"
-     id="namedview953"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="1.2109091"
-     inkscape:cx="550"
-     inkscape:cy="241.06607"
-     inkscape:window-x="0"
-     inkscape:window-y="-18"
      inkscape:window-maximized="1"
-     inkscape:current-layer="g2585" />
+     inkscape:window-y="-18"
+     inkscape:window-x="0"
+     inkscape:cy="250.95495"
+     inkscape:cx="534.60693"
+     inkscape:zoom="0.85624204"
+     units="px"
+     showgrid="false"
+     id="namedview953"
+     inkscape:window-height="1032"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
   <g
-     id="g974"
+     transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)"
-     transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)">
+     id="g974">
     <g
-       id="g1721"
+       transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)"
-       transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)">
+       id="g1721">
       <g
-         transform="translate(0,-133.87521)"
+         id="g2454"
-         id="g2454">
+         transform="translate(0,-133.87521)">
         <g
-           transform="translate(-35.365658,-44.89936)"
+           id="g2554"
-           id="g2554">
+           transform="translate(-35.365658,-44.89936)">
           <g
-             transform="translate(0,107.63572)"
+             id="g2433"
-             id="g2433">
+             transform="translate(0,107.63572)">
             <g
-               transform="translate(0.82337254,1.4684449)"
+               id="g2439"
-               id="g2439">
+               transform="translate(0.82337254,1.4684449)">
               <g
                  id="g2472">
                 <g
-                   transform="translate(0,-15.084391)"
+                   id="g2585"
-                   id="g2585">
+                   transform="translate(0,-15.084391)">
                   <g
-                     id="g2427"
+                     transform="translate(1.0665725)"
-                     transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)">
+                     id="g4610">
-                    <path
-                       transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
-                       style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
-                       d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
-                       id="path1636" />
                     <g
-                       transform="translate(-0.16733365,0.61658838)"
+                       id="g2560"
-                       id="g2513">
+                       transform="translate(-28.409706,-8.3958791)">
-                      <path
+                      <text
-                         d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z"
+                         xml:space="preserve"
-                         id="path949"
+                         style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
-                         style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
+                         x="196.89775"
-                         transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
+                         y="235.17853"
+                         id="text852"><tspan
+                           sodipodi:role="line"
+                           id="tspan850"
+                           x="196.89775"
+                           y="235.17853"
+                           style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
+                      <text
+                         xml:space="preserve"
+                         style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
+                         x="223.15549"
+                         y="261.83273"
+                         id="text856"><tspan
+                           sodipodi:role="line"
+                           id="tspan854"
+                           x="223.15549"
+                           y="261.83273"
+                           style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
+                    </g>
+                    <g
+                       id="g4591"
+                       transform="matrix(0.63214637,0,0,0.63214637,34.070751,71.061726)">
                       <g
-                         style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                         transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)"
-                         id="g1711"
+                         id="g2427">
-                         transform="translate(-0.91048867,42.172992)">
+                        <path
+                           id="path1636"
+                           d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
+                           style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
+                           transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
                         <g
-                           id="g2505"
+                           id="g2513"
-                           transform="translate(0.09191978,50.168306)">
+                           transform="translate(-0.16733365,0.61658838)">
+                          <path
+                             transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
+                             style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
+                             id="path949"
+                             d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z" />
                           <g
-                             transform="translate(-0.68526563,40.225035)"
+                             transform="translate(-0.91048867,42.172992)"
-                             id="g2638">
+                             id="g1711"
-                            <path
+                             style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                            <g
-                               d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
+                               transform="translate(0.09191978,50.168306)"
-                               id="path915"
+                               id="g2505">
-                               inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
+                              <g
-                               inkscape:path-effect="#path-effect917" />
+                                 id="g2638"
-                            <path
+                                 transform="translate(-0.68526563,40.225035)">
-                               inkscape:path-effect="#path-effect2614"
+                                <path
-                               inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
+                                   inkscape:path-effect="#path-effect917"
-                               id="path915-9"
+                                   inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
-                               d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
+                                   id="path915"
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                                   d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
-                            <path
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                                <path
-                               d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                               id="path915-9-0"
+                                   d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
-                               inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
+                                   id="path915-9"
-                               inkscape:path-effect="#path-effect2633" />
+                                   inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
+                                   inkscape:path-effect="#path-effect2614" />
+                                <path
+                                   inkscape:path-effect="#path-effect2633"
+                                   inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
+                                   id="path915-9-0"
+                                   d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                              </g>
+                            </g>
                           </g>
                         </g>
                       </g>
+                      <path
+                         id="path2782"
+                         d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
+                         style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039" />
                     </g>
                   </g>
-                  <g
-                     id="g2560"
-                     transform="translate(0,15.33842)">
-                    <text
-                       xml:space="preserve"
-                       style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
-                       x="196.89775"
-                       y="235.17853"
-                       id="text852"><tspan
-                         sodipodi:role="line"
-                         id="tspan850"
-                         x="196.89775"
-                         y="235.17853"
-                         style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
-                    <text
-                       xml:space="preserve"
-                       style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
-                       x="223.15549"
-                       y="261.83273"
-                       id="text856"><tspan
-                         sodipodi:role="line"
-                         id="tspan854"
-                         x="223.15549"
-                         y="261.83273"
-                         style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
-                  </g>
-                  <path
-                     style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039"
-                     d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
-                     id="path2782" />
                 </g>
               </g>
             </g>

.pre-commit-config.yaml

@@ -1,4 +1,12 @@
 repos:
+- repo: local
+  hooks:
+    - id: eslint
+      name: eslint
+      entry: scripts/lint.sh
+      language: system
+      files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
+      types: [file]
 - hooks:
   - id: check-yaml
   - id: end-of-file-fixer

.tmuxinator.yml

@@ -1,14 +1,12 @@
-name: citadel
+name: taskcafe
 root: .
 
-on_project_start: docker start test-db
-
 windows:
   - services:
       root: ./
       panes:
         - api:
-          - go run cmd/citadel/main.go web
+          - go run cmd/taskcafe/main.go web
         - yarn:
           - cd frontend
           - yarn start
@@ -19,8 +17,8 @@ windows:
   - api/editor:
       root: ./
       panes:
-        - vim cmd/citadel/main.go
+        - vim cmd/taskcafe/main.go
   - database:
       root: ./
       panes:
-        - pgcli postgres://postgres:test@localhost:5432/citadel
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe

CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+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]
+
+### Added
+- Task sorting & filtering
+- Redesigned the Task Details UI
+
+### 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
+
+## [0.1.1] - 2020-08-21
+
+### Fixed
+- fix panic(nil) when loading config if config file actually exists
+
+## [0.1.0] - 2020-08-21
+
+### Added
+- first "stable" alpha release

CONTRIBUTING.md

@@ -4,8 +4,13 @@ Thanks for wanting to contribute to Taskcafe!
 
 ### Where do I go from here?
 
-If you have noticed a bug or have a feature request, make one! If best to get confirmation
+So you want to contribute to Taskcafe? Great!
-of your bug or feature before starting work on a pull request.
+
+If you have noticed a bug or want to add a new feature, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
+
+Alternatively you can join the [Taskcafe discord](https://discord.gg/JkQDruh) and ask in the #questions channel.
+
+After the bug is validated or the feature is accepted by a project maintainer, the next step is to fork the repository!
 
 ### Fork & create a branch
 

README.md

@@ -1,24 +1,33 @@
-![Taskcafe](./.github/taskcafe-full.png)
+<p align="center">
+ <img width="450px" src="./.github/taskcafe-full.png" align="center" alt="Taskcafe logo" />
+</p>
+<p align="center">
+  <a href="https://discord.gg/JkQDruh">
+    <img alt="Discord" src="https://img.shields.io/discord/745396499613220955" />
+  </a>
+  <a href="https://github.com/JordanKnott/taskcafe/releases">
+    <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" />
+  </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>
+</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>
 
-[![Discord](https://img.shields.io/discord/745396499613220955)](https://discord.gg/JkQDruh)
+**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
-[![Releases](https://img.shields.io/github/v/release/JordanKnott/taskcafe)](https://github.com/JordanKnott/taskcafe/releases)
-[![Dockerhub](https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker)](https://hub.docker.com/repository/docker/taskcafe/taskcafe)
-[![Go Report Card](https://goreportcard.com/badge/github.com/JordanKnott/taskcafe)](https://goreportcard.com/report/github.com/JordanKnott/taskcafe)
 
-
-## Overview
-
-![Taskcafe](./.github/taskcafe_preview.png)
-
-A free & open source alternative project management tool.
-
-**Please note that this project is still in active development. Some options may not work yet!**
 ## Features
 
 Currently Taskcafe only offers basic task tracking through a Kanban board.
 
 Currently you can do the following to tasks:
 
+- Task sorting & filtering
 - Add colors & named labels
 - Add due dates
 - Descriptions written in Markdown
@@ -81,6 +90,7 @@ The newly created `taskcafe` binary can be found in the __dist__ folder.
 
 It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`.
 
+For more information on configuration, please read the [wiki](https://github.com/JordanKnott/taskcafe/wiki/Configuration).
 The config will need to be copied to a `conf/app.toml` in the same place the binary is.
 
 Make sure to fill out the database section of the config in order to connect it to your database.
@@ -89,6 +99,8 @@ Then run the database migrations with `taskcafe migrate`.
 
 Now you can run the web interface by running `taskcafe web`.
 
+[A more detailed guide for installing on Ubuntu/Debian](https://github.com/JordanKnott/taskcafe/wiki/Installation-(ubuntu-debian))
+
 ## How is this different from X (Trello, NextCloud, etc)?
 
 One of the primary goals of Taskcafe is to provide a project management tool that I personally enjoy using for my

frontend/.eslintrc.json

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

frontend/package.json

@@ -28,6 +28,7 @@
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-select": "^3.0.13",
+    "@types/react-timeago": "^4.1.1",
     "@types/styled-components": "^5.0.0",
     "apollo-cache-inmemory": "^1.6.5",
     "apollo-client": "^2.6.8",
@@ -59,6 +60,9 @@
     "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"
   },
@@ -71,7 +75,8 @@
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
     "generate": "graphql-codegen",
-    "lint": "eslint --ext js,ts,tsx src"
+    "lint": "eslint --ext js,ts,tsx src",
+    "tsc": "tsc"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -94,10 +99,10 @@
     "@graphql-codegen/typescript-operations": "^1.13.2",
     "@graphql-codegen/typescript-react-apollo": "^1.13.2",
     "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-links": "^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",

frontend/src/Admin/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect } from 'react';
 import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
@@ -16,8 +16,9 @@ import { useForm, Controller } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
-import UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
+import NOOP from 'shared/utils/noop';
 
 const DeleteUserWrapper = styled.div`
   display: flex;
@@ -37,6 +38,7 @@ const DeleteUserButton = styled(Button)`
 type DeleteUserPopupProps = {
   onDeleteUser: () => void;
 };
+
 const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
   return (
     <DeleteUserWrapper>
@@ -47,10 +49,12 @@ const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
     </DeleteUserWrapper>
   );
 };
+
 type RoleCodeOption = {
   label: string;
   value: string;
 };
+
 type CreateUserData = {
   email: string;
   username: string;
@@ -65,6 +69,7 @@ const CreateUserForm = styled.form`
   flex-direction: column;
   margin: 0 12px;
 `;
+
 const CreateUserButton = styled(Button)`
   margin-top: 8px;
   padding: 6px 12px;
@@ -85,7 +90,7 @@ type AddUserPopupProps = {
 };
 
 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const { register, handleSubmit, errors, setValue, control } = useForm<CreateUserData>();
+  const { register, handleSubmit, errors, control } = useForm<CreateUserData>();
 
   const createUser = (data: CreateUserData) => {
     onAddUser(data);
@@ -115,7 +120,7 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
         control={control}
         name="roleCode"
         rules={{ required: 'Role is required' }}
-        render={({ onChange, onBlur, value }) => (
+        render={({ onChange, value }) => (
           <Select
             label="Role"
             value={value}
@@ -198,21 +203,21 @@ const AdminRoute = () => {
     },
   });
   if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
   }
   if (data && user) {
-    if (user.roles.org != 'admin') {
+    if (user.roles.org !== 'admin') {
       return <Redirect to="/" />;
     }
     return (
       <>
-        <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+        <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
         <Admin
           initialTab={0}
           users={data.users}
-          canInviteUser={user.roles.org == 'admin'}
+          canInviteUser={user.roles.org === 'admin'}
-          onInviteUser={() => {}}
+          onInviteUser={NOOP}
-          onUpdateUserPassword={(user, password) => {
+          onUpdateUserPassword={() => {
             hidePopup();
           }}
           onDeleteUser={(userID, newOwnerID) => {
@@ -224,8 +229,8 @@ const AdminRoute = () => {
               $target,
               <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                 <AddUserPopup
-                  onAddUser={user => {
+                  onAddUser={u => {
-                    const { roleCode, ...userData } = user;
+                    const { roleCode, ...userData } = u;
                     createUser({ variables: { ...userData, roleCode: roleCode.value } });
                     hidePopup();
                   }}

frontend/src/App/Routes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Router, Switch, Route} from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 import * as H from 'history';
 
 import Dashboard from 'Dashboard';
@@ -20,11 +20,12 @@ const MainContent = styled.div`
   flex-direction: column;
   flex-grow: 1;
 `;
+
 type RoutesProps = {
   history: H.History;
 };
 
-const Routes = ({history}: RoutesProps) => (
+const Routes: React.FC<RoutesProps> = () => (
   <Switch>
     <Route exact path="/login" component={Login} />
     <Route exact path="/install" component={Install} />

frontend/src/App/ThemeStyles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle, DefaultTheme } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
 
 const theme: DefaultTheme = {
   borderRadius: {
@@ -25,4 +25,4 @@ const theme: DefaultTheme = {
   },
 };
 
-export { theme };
+export default theme;

frontend/src/App/TopNavbar.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
 import styled from 'styled-components/macro';
-import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
+import { ProfileMenu } from 'shared/components/DropdownMenu';
 import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
 import { useHistory } from 'react-router';
-import { UserContext, PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import {
   RoleCode,
-  useMeQuery,
+  useTopNavbarQuery,
   useDeleteProjectMutation,
   useGetProjectsQuery,
   GetProjectsDocument,
@@ -18,6 +18,8 @@ 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;
@@ -130,7 +132,7 @@ const ProjectFinder = () => {
     return <span>loading</span>;
   }
   if (data) {
-    const { projects, teams, organizations } = data;
+    const { projects, teams } = data;
     const projectTeams = teams.map(team => {
       return {
         id: team.id,
@@ -196,7 +198,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
       <Popup title={null} tab={0}>
         <ProjectSettings
           onDeleteProject={() => {
-            setTab(1, 300);
+            setTab(1, { width: 300 });
           }}
         />
       </Popup>
@@ -238,7 +240,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   currentTab,
   onSetTab,
   menuType,
-  projectID,
   teamID,
   onChangeProjectOwner,
   onChangeRole,
@@ -248,19 +249,18 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   onInviteUser,
   onSaveProjectName,
   onRemoveFromBoard,
-  nameOnly,
 }) => {
   const { user, setUserRoles, setUser } = useCurrentUser();
-  const { loading, data } = useMeQuery({
+  const { loading, data } = useTopNavbarQuery({
-    onCompleted: data => {
+    onCompleted: response => {
       if (user && user.roles) {
         setUserRoles({
           org: user.roles.org,
-          teams: data.me.teamRoles.reduce((map, obj) => {
+          teams: response.me.teamRoles.reduce((map, obj) => {
             map.set(obj.teamID, obj.roleCode);
             return map;
           }, new Map<string, string>()),
-          projects: data.me.projectRoles.reduce((map, obj) => {
+          projects: response.me.projectRoles.reduce((map, obj) => {
             map.set(obj.projectID, obj.roleCode);
             return map;
           }, new Map<string, string>()),
@@ -268,7 +268,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
       }
     },
   });
-  const { showPopup, hidePopup, setTab } = usePopup();
+  const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
   const onLogout = () => {
     fetch('/auth/logout', {
@@ -301,13 +301,31 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
           }}
         />
       </Popup>,
-      195,
+      { width: 195 },
     );
   };
 
   const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
     if (popupContent) {
-      showPopup($target, popupContent, 185);
+      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' },
+      );
     }
   };
 
@@ -367,7 +385,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         onInviteUser={onInviteUser}
         onChangeRole={onChangeRole}
         onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={() => {}}
+        onNotificationClick={onNotificationClick}
         onSetTab={onSetTab}
         onRemoveFromBoard={onRemoveFromBoard}
         onDashboardClick={() => {

frontend/src/App/index.tsx

@@ -3,14 +3,48 @@ import jwtDecode from 'jwt-decode';
 import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 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 theme from './ThemeStyles';
 import Routes from './Routes';
 import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } 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;
@@ -72,6 +106,18 @@ const App = () => {
               )}
             </PopupProvider>
           </Router>
+          <StyledContainer
+            position="bottom-right"
+            autoClose={5000}
+            hideProgressBar
+            newestOnTop
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            limit={5}
+          />
         </ThemeProvider>
       </UserContext.Provider>
     </>

frontend/src/Auth/index.tsx

@@ -1,13 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useForm } from 'react-hook-form';
 import { useHistory } from 'react-router';
-
-import { setAccessToken } from 'shared/utils/accessToken';
-
-import Login from 'shared/components/Login';
-import { Container, LoginWrapper } from './Styles';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
 import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
+import Login from 'shared/components/Login';
+import UserContext from 'App/context';
+import { Container, LoginWrapper } from './Styles';
 
 const Auth = () => {
   const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);

frontend/src/Install/index.tsx

@@ -1,18 +1,13 @@
 import React, { useEffect, useContext } from 'react';
 import axios from 'axios';
 import Register from 'shared/components/Register';
-import { Container, LoginWrapper } from './Styles';
-import { useCreateUserAccountMutation, useMeQuery, MeDocument, MeQuery } from 'shared/generated/graphql';
 import { useHistory } from 'react-router';
 import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
-import updateApolloCache from 'shared/utils/cache';
+import UserContext from 'App/context';
-import produce from 'immer';
-import { useApolloClient } from '@apollo/react-hooks';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
 import jwtDecode from 'jwt-decode';
+import { Container, LoginWrapper } from './Styles';
 
 const Install = () => {
-  const client = useApolloClient();
   const history = useHistory();
   const { setUser } = useContext(UserContext);
   useEffect(() => {
@@ -63,7 +58,7 @@ const Install = () => {
                     history.replace('/login');
                   } else {
                     const response: RefreshTokenResponse = await x.data;
-                    const { accessToken, isInstalled } = response;
+                    const { accessToken: newToken, isInstalled } = response;
                     const claims: JWTToken = jwtDecode(accessToken);
                     const currentUser = {
                       id: claims.userId,

frontend/src/Profile/index.tsx

@@ -1,12 +1,13 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
-import { Link } from 'react-router-dom';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
 import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
+import NOOP from 'shared/utils/noop';
+import { toast } from 'react-toastify';
 
 const MainContent = styled.div`
   padding: 0 0 50px 80px;
@@ -54,7 +55,7 @@ const Projects = () => {
           }
         }}
       />
-      <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+      <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
       {!loading && data && (
         <Settings
           profile={data.me.user}
@@ -65,6 +66,7 @@ const Projects = () => {
           }}
           onResetPassword={(password, done) => {
             updateUserPassword({ variables: { userID: user.id, password } });
+            toast('Password was changed!');
             done();
           }}
           onProfileAvatarRemove={() => {

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

@@ -0,0 +1,324 @@
+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 moment from 'moment';
+import { mixin } from 'shared/utils/styles';
+import Member from 'shared/components/Member';
+
+const FilterMember = styled(Member)`
+  margin: 2px 0;
+  &:hover {
+    cursor: pointer;
+    background: rgba(${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: rgb(115, 103, 240);
+  }
+`;
+
+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;
+`;
+
+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 FilterMetaProps = {
+  filters: TaskMetaFilters;
+  userID: string;
+  labels: React.RefObject<Array<ProjectLabel>>;
+  members: React.RefObject<Array<TaskUser>>;
+  onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
+};
+
+const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
+  const [currentFilters, setFilters] = useState(filters);
+  const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
+  const [currentLabel, setCurrentLabel] = useState('');
+
+  const handleSetFilters = (f: TaskMetaFilters) => {
+    setFilters(f);
+    onChangeTaskMetaFilter(f);
+  };
+
+  const handleNameChange = (nFilter: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
+      }),
+    );
+    setNameFilter(nFilter);
+  };
+
+  const { setTab } = usePopup();
+
+  const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
+          draftFilters.dueDate = null;
+        } else {
+          draftFilters.dueDate = {
+            label,
+            type: filterType,
+          };
+        }
+      }),
+    );
+  };
+
+  return (
+    <>
+      <Popup tab={0} title={null}>
+        <ActionsList>
+          <TaskNameInput
+            width="100%"
+            onChange={e => handleNameChange(e.currentTarget.value)}
+            value={nameFilter}
+            variant="alternate"
+            placeholder="Task name..."
+          />
+          <ActionItemSeparator>QUICK ADD</ActionItemSeparator>
+          <ActionItem
+            onClick={() => {
+              handleSetFilters(
+                produce(currentFilters, draftFilters => {
+                  if (members.current) {
+                    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);
+                    }
+                  }
+                }),
+              );
+            }}
+          >
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Just my tasks</ActionTitle>
+            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due this week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.THIS_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due next week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.NEXT_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => setTab(1)}>
+            <ItemIcon>
+              <Tags width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Label</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(2)}>
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Member</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(3)}>
+            <ItemIcon>
+              <Clock width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Due Date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+      <Popup tab={1} title="By Labels">
+        <Labels>
+          {labels.current &&
+            labels.current
+              // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
+              .map(label => (
+                <Label key={label.id}>
+                  <CardLabel
+                    key={label.id}
+                    color={label.labelColor.colorHex}
+                    active={currentLabel === label.id}
+                    onMouseEnter={() => {
+                      setCurrentLabel(label.id);
+                    }}
+                    onClick={() => {
+                      handleSetFilters(
+                        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,
+                              name: label.name ?? '',
+                              color: label.labelColor.colorHex,
+                            });
+                          }
+                        }),
+                      );
+                    }}
+                  >
+                    {label.name}
+                  </CardLabel>
+                </Label>
+              ))}
+        </Labels>
+      </Popup>
+      <Popup tab={2} title="By Member">
+        <ActionsList>
+          {members.current &&
+            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);
+                      } else {
+                        draftFilters.members.push({ id: member.id, username: member.username ?? '' });
+                      }
+                    }),
+                  );
+                }}
+              />
+            ))}
+        </ActionsList>
+      </Popup>
+      <Popup tab={3} title="By Due Date">
+        <ActionsList>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TODAY, 'Today')}>
+            <ActionTitle>Today</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ActionTitle>This week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ActionTitle>Next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.OVERDUE, 'Overdue')}>
+            <ActionTitle>Overdue</ActionTitle>
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TOMORROW, 'In the next day')}>
+            <ActionTitle>In the next day</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.ONE_WEEK, 'In the next week')}>
+            <ActionTitle>In the next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TWO_WEEKS, 'In the next two weeks')}>
+            <ActionTitle>In the next two weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THREE_WEEKS, 'In the next three weeks')}>
+            <ActionTitle>In the next three weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NO_DUE_DATE, 'Has no due date')}>
+            <ActionTitle>Has no due date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+    </>
+  );
+};
+
+export default FilterMeta;

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

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Checkmark } from 'shared/icons';
+import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
+
+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: rgb(115, 103, 240);
+  }
+  &: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: rgb(115, 103, 240);
+  }
+`;
+const ActionExtraMenuSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+`;
+
+type FilterStatusProps = {
+  filter: TaskStatusFilter;
+  onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
+};
+
+const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+  const [currentFilter, setFilter] = useState(filter);
+  const handleFilterChange = (f: TaskStatusFilter) => {
+    setFilter(f);
+    onChangeTaskStatusFilter(f);
+  };
+  const handleCompleteClick = (s: TaskSince) => {
+    handleFilterChange({ status: TaskStatus.COMPLETE, since: s });
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.INCOMPLETE, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.INCOMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Incomplete Tasks</ActionTitle>
+      </ActionItem>
+      <ActionItem>
+        {currentFilter.status === TaskStatus.COMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Compelete Tasks</ActionTitle>
+        <ActionExtraMenuContainer>
+          <ActionExtraMenu>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ALL)}>
+              {currentFilter.since === TaskSince.ALL && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>All completed tasks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TODAY)}>
+              {currentFilter.since === TaskSince.TODAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Today</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.YESTERDAY)}>
+              {currentFilter.since === TaskSince.YESTERDAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Yesterday</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ONE_WEEK)}>
+              {currentFilter.since === TaskSince.ONE_WEEK && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>1 week</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TWO_WEEKS)}>
+              {currentFilter.since === TaskSince.TWO_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>2 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.THREE_WEEKS)}>
+              {currentFilter.since === TaskSince.THREE_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>3 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+          </ActionExtraMenu>
+        </ActionExtraMenuContainer>
+      </ActionItem>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.ALL, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.ALL && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>All Tasks</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default FilterStatus;

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
+
+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: rgb(115, 103, 240);
+  }
+`;
+
+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 = {
+  sorting: TaskSorting;
+  onChangeTaskSorting: (taskSorting: TaskSorting) => void;
+};
+
+const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
+  const [currentSorting, setSorting] = useState(sorting);
+  const handleSetSorting = (s: TaskSorting) => {
+    setSorting(s);
+    onChangeTaskSorting(s);
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
+        <ActionTitle>None</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Due date</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Members</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Labels</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Task title</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default SortPopup;

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

@@ -1,52 +1,122 @@
-import React, { useState, useRef, useContext, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import LabelManagerEditor from '../LabelManagerEditor';
 import styled, { css } from 'styled-components/macro';
 import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
+import { useRouteMatch, useHistory } from 'react-router-dom';
 import {
-  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
-  useDeleteProjectMemberMutation,
   useSetTaskCompleteMutation,
   useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
   useFindProjectQuery,
+  useSortTaskGroupMutation,
   useUpdateTaskGroupNameMutation,
   useUpdateTaskNameMutation,
-  useUpdateProjectLabelMutation,
   useCreateTaskMutation,
-  useDeleteProjectLabelMutation,
   useDeleteTaskMutation,
   useUpdateTaskLocationMutation,
   useUpdateTaskGroupLocationMutation,
   useCreateTaskGroupMutation,
   useDeleteTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
   useAssignTaskMutation,
-  DeleteTaskDocument,
   FindProjectDocument,
-  useCreateProjectLabelMutation,
   useUnassignTaskMutation,
   useUpdateTaskDueDateMutation,
   FindProjectQuery,
-  useUsersQuery,
+  useDuplicateTaskGroupMutation,
+  DuplicateTaskGroupMutation,
+  DuplicateTaskGroupDocument,
+  useDeleteTaskGroupTasksMutation,
 } from 'shared/generated/graphql';
 
 import QuickCardEditor from 'shared/components/QuickCardEditor';
 import ListActions from 'shared/components/ListActions';
 import MemberManager from 'shared/components/MemberManager';
-import SimpleLists from 'shared/components/Lists';
+import SimpleLists, {
+  TaskStatus,
+  TaskSince,
+  TaskStatusFilter,
+  TaskMeta,
+  TaskMetaMatch,
+  TaskMetaFilters,
+} from 'shared/components/Lists';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 import produce from 'immer';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
-import UserContext, { useCurrentUser } from 'App/context';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
 import EmptyBoard from 'shared/components/EmptyBoard';
+import NOOP from 'shared/utils/noop';
+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';
+
+const FilterChip = styled(Chip)`
+  margin-right: 4px;
+`;
+
+type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
+
+const renderTaskSortingLabel = (sorting: TaskSorting) => {
+  if (sorting.type === TaskSortingType.TASK_TITLE) {
+    return 'Sort: Card title';
+  }
+  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) => {
+  const filterChips = [];
+  if (filters.taskName) {
+    filterChips.push(
+      <FilterChip
+        key="task-name"
+        label={`Title: ${filters.taskName.name}`}
+        onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
+      />,
+    );
+  }
+
+  if (filters.dueDate) {
+    filterChips.push(
+      <FilterChip
+        key="due-date"
+        label={filters.dueDate.label}
+        onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
+      />,
+    );
+  }
+  for (const memberFilter of filters.members) {
+    filterChips.push(
+      <FilterChip
+        key={`member-${memberFilter.id}`}
+        label={`Member: ${memberFilter.username}`}
+        onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
+      />,
+    );
+  }
+  for (const labelFilter of filters.labels) {
+    filterChips.push(
+      <FilterChip
+        key={`label-${labelFilter.id}`}
+        label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
+        color={labelFilter.color}
+        onClose={() => onClose(TaskMeta.LABEL, labelFilter.id)}
+      />,
+    );
+  }
+  return filterChips;
+};
 
 const ProjectBar = styled.div`
   display: flex;
@@ -61,14 +131,14 @@ const ProjectActions = styled.div`
   align-items: center;
 `;
 
-const ProjectAction = styled.div<{ disabled?: boolean }>`
+const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 15px;
   color: rgba(${props => props.theme.colors.text.primary});
 
-  &:not(:last-child) {
+  &:not(:last-of-type) {
     margin-right: 16px;
   }
 
@@ -88,6 +158,25 @@ 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>
+  );
+};
+
 interface QuickCardEditorState {
   isOpen: boolean;
   target: React.RefObject<HTMLElement> | null;
@@ -113,18 +202,18 @@ export const BoardLoading = () => {
     <>
       <ProjectBar>
         <ProjectActions>
-          <ProjectAction disabled>
+          <ProjectAction>
             <CheckCircle width={13} height={13} />
             <ProjectActionText>All Tasks</ProjectActionText>
           </ProjectAction>
-          <ProjectAction disabled>
+          <ProjectAction>
-            <Filter width={13} height={13} />
-            <ProjectActionText>Filter</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
             <Sort width={13} height={13} />
             <ProjectActionText>Sort</ProjectActionText>
           </ProjectAction>
+          <ProjectAction>
+            <Filter width={13} height={13} />
+            <ProjectActionText>Filter</ProjectActionText>
+          </ProjectAction>
         </ProjectActions>
         <ProjectActions>
           <ProjectAction>
@@ -146,18 +235,43 @@ export const BoardLoading = () => {
   );
 };
 
+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
   const [assignTask] = useAssignTaskMutation();
   const [unassignTask] = useUnassignTaskMutation();
-  const $labelsRef = useRef<HTMLDivElement>(null);
   const match = useRouteMatch();
   const labelsRef = useRef<Array<ProjectLabel>>([]);
+  const membersRef = useRef<Array<TaskUser>>([]);
   const { showPopup, hidePopup } = usePopup();
   const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
-  const { user } = useCurrentUser();
   const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
+  const [taskStatusFilter, setTaskStatusFilter] = useState(initTaskStatusFilter);
+  const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
+  const [taskSorting, setTaskSorting] = useState(initTaskSorting);
   const history = useHistory();
+  const [sortTaskGroup] = useSortTaskGroupMutation({
+    onCompleted: () => {
+      toast('List was sorted');
+    },
+  });
   const [deleteTaskGroup] = useDeleteTaskGroupMutation({
     update: (client, deletedTaskGroupData) => {
       updateApolloCache<FindProjectQuery>(
@@ -210,6 +324,36 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   const { loading, data } = useFindProjectQuery({
     variables: { projectID },
   });
+  const [deleteTaskGroupTasks] = useDeleteTaskGroupTasksMutation({
+    update: (client, resp) =>
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            const idx = cache.findProject.taskGroups.findIndex(
+              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
+            );
+            if (idx !== -1) {
+              draftCache.findProject.taskGroups[idx].tasks = [];
+            }
+          }),
+        { projectID },
+      ),
+  });
+  const [duplicateTaskGroup] = useDuplicateTaskGroupMutation({
+    update: (client, resp) => {
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+          }),
+        { projectID },
+      );
+    },
+  });
 
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
   const [setTaskComplete] = useSetTaskCompleteMutation();
@@ -240,6 +384,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       );
     },
   });
+  const { user } = useCurrentUser();
   const [deleteTask] = useDeleteTaskMutation();
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
     onCompleted: newTaskLabel => {
@@ -269,6 +414,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
               id: `${Math.round(Math.random() * -1000000)}`,
               name,
               complete: false,
+              completedAt: null,
               taskGroup: {
                 __typename: 'TaskGroup',
                 id: taskGroup.id,
@@ -305,15 +451,19 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   if (loading) {
     return <BoardLoading />;
   }
-  if (data) {
+  const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
+    if (filter.status === TaskStatus.COMPLETE) {
+      return 'Complete';
+    }
+    if (filter.status === TaskStatus.INCOMPLETE) {
+      return 'Incomplete';
+    }
+    return 'All Tasks';
+  };
+  if (data && user) {
     labelsRef.current = data.findProject.labels;
+    membersRef.current = data.findProject.members;
     const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      if ($target && $target.current) {
-        const pos = $target.current.getBoundingClientRect();
-        const height = 120;
-        if (window.innerHeight - pos.bottom < height) {
-        }
-      }
       const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
       const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
       if (currentTask) {
@@ -336,23 +486,84 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
       <>
         <ProjectBar>
           <ProjectActions>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <FilterStatus
+                      filter={taskStatusFilter}
+                      onChangeTaskStatusFilter={filter => {
+                        setTaskStatusFilter(filter);
+                        hidePopup();
+                      }}
+                    />
+                  </Popup>,
+                  { width: 185 },
+                );
+              }}
+            >
               <CheckCircle width={13} height={13} />
-              <ProjectActionText>All Tasks</ProjectActionText>
+              <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
             </ProjectAction>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <SortPopup
+                      sorting={taskSorting}
+                      onChangeTaskSorting={sorting => {
+                        setTaskSorting(sorting);
+                      }}
+                    />
+                  </Popup>,
+                  { width: 185 },
+                );
+              }}
+            >
+              <Sort width={13} height={13} />
+              <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <FilterMeta
+                    filters={taskMetaFilters}
+                    onChangeTaskMetaFilter={filter => {
+                      setTaskMetaFilters(filter);
+                    }}
+                    userID={user?.id}
+                    labels={labelsRef}
+                    members={membersRef}
+                  />,
+                  { width: 200 },
+                );
+              }}
+            >
               <Filter width={13} height={13} />
               <ProjectActionText>Filter</ProjectActionText>
             </ProjectAction>
-            <ProjectAction disabled>
+            {renderMetaFilters(taskMetaFilters, (meta, id) => {
-              <Sort width={13} height={13} />
+              setTaskMetaFilters(
-              <ProjectActionText>Sort</ProjectActionText>
+                produce(taskMetaFilters, draftFilters => {
-            </ProjectAction>
+                  if (meta === TaskMeta.MEMBER) {
+                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.LABEL) {
+                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.TITLE) {
+                    draftFilters.taskName = null;
+                  } else if (meta === TaskMeta.DUE_DATE) {
+                    draftFilters.dueDate = null;
+                  }
+                }),
+              );
+            })}
           </ProjectActions>
           <ProjectActions>
             <ProjectAction
-              ref={$labelsRef}
+              onClick={$labelsRef => {
-              onClick={() => {
                 showPopup(
                   $labelsRef,
                   <LabelManagerEditor
@@ -381,7 +592,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onTaskClick={task => {
             history.push(`${match.url}/c/${task.id}`);
           }}
-          onCardLabelClick={onCardLabelClick ?? (() => {})}
+          onCardLabelClick={onCardLabelClick ?? NOOP}
           cardLabelVariant={cardLabelVariant ?? 'large'}
           onTaskDrop={(droppedTask, previousTaskGroupID) => {
             updateTaskLocation({
@@ -425,9 +636,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
             });
           }}
           taskGroups={data.findProject.taskGroups}
+          taskStatusFilter={taskStatusFilter}
+          taskMetaFilters={taskMetaFilters}
+          taskSorting={taskSorting}
           onCreateTask={onCreateTask}
           onCreateTaskGroup={onCreateList}
-          onCardMemberClick={($targetRef, taskID, memberID) => {
+          onCardMemberClick={($targetRef, _taskID, memberID) => {
             const member = data.findProject.members.find(m => m.id === memberID);
             if (member) {
               showPopup(
@@ -449,15 +663,44 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
             showPopup(
               $targetRef,
-              <Popup title="List actions" tab={0} onClose={() => hidePopup()}>
+              <ListActions
-                <ListActions
+                taskGroupID={taskGroupID}
-                  taskGroupID={taskGroupID}
+                onDeleteTaskGroupTasks={() => {
-                  onArchiveTaskGroup={tgID => {
+                  deleteTaskGroupTasks({ variables: { taskGroupID } });
-                    deleteTaskGroup({ variables: { taskGroupID: tgID } });
+                  hidePopup();
+                }}
+                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))
+                      .reduce((prevTasks: Array<{ taskID: string; position: number }>, t, idx) => {
+                        prevTasks.push({ taskID: t.id, position: (idx + 1) * 2048 });
+                        return tasks;
+                      }, []);
+                    sortTaskGroup({ variables: { taskGroupID, tasks } });
                     hidePopup();
-                  }}
+                  }
-                />
+                }}
-              </Popup>,
+                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;
+                    const next = taskGroups[idx + 1];
+                    let newPos = prevPos * 2;
+                    if (next) {
+                      newPos = (prevPos + next.position) / 2.0;
+                    }
+                    duplicateTaskGroup({ variables: { projectID, taskGroupID, name: newName, position: newPos } });
+                    hidePopup();
+                  }
+                }}
+                onArchiveTaskGroup={tgID => {
+                  deleteTaskGroup({ variables: { taskGroupID: tgID } });
+                  hidePopup();
+                }}
+              />,
             );
           }}
         />
@@ -486,7 +729,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 </Popup>,
               );
             }}
-            onCardMemberClick={($targetRef, taskID, memberID) => {
+            onCardMemberClick={($targetRef, _taskID, memberID) => {
               const member = data.findProject.members.find(m => m.id === memberID);
               if (member) {
                 showPopup(
@@ -516,8 +759,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                 />,
               );
             }}
-            onArchiveCard={(_listId: string, cardId: string) =>
+            onArchiveCard={(_listId: string, cardId: string) => {
-              deleteTask({
+              return deleteTask({
                 variables: { taskID: cardId },
                 update: client => {
                   updateApolloCache<FindProjectQuery>(
@@ -533,8 +776,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                     { projectID },
                   );
                 },
-              })
+              });
-            }
+            }}
             onOpenDueDatePopup={($targetRef, task) => {
               showPopup(
                 $targetRef,
@@ -549,7 +792,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                       updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                       hidePopup();
                     }}
-                    onCancel={() => {}}
+                    onCancel={NOOP}
                   />
                 </Popup>,
               );

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

@@ -1,7 +1,7 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState } from 'react';
 import Modal from 'shared/components/Modal';
 import TaskDetails from 'shared/components/TaskDetails';
-import PopupMenu, { Popup, usePopup } from 'shared/components/PopupMenu';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
 import { useRouteMatch, useHistory } from 'react-router';
 import {
@@ -22,7 +22,7 @@ import {
   FindTaskDocument,
   FindTaskQuery,
 } from 'shared/generated/graphql';
-import UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
 import produce from 'immer';
@@ -31,6 +31,7 @@ import Button from 'shared/components/Button';
 import Input from 'shared/components/Input';
 import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
+import NOOP from 'shared/utils/noop';
 
 const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
   const total = checklists.reduce((prev: any, next: any) => {
@@ -75,15 +76,12 @@ const CreateChecklistInput = styled(Input)`
   margin-bottom: 8px;
 `;
 
-const InputError = styled.span`
-  color: rgba(${props => props.theme.colors.danger});
-  font-size: 12px;
-`;
 type CreateChecklistPopupProps = {
   onCreateChecklist: (data: CreateChecklistData) => void;
 };
+
 const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
-  const { register, handleSubmit, errors } = useForm<CreateChecklistData>();
+  const { register, handleSubmit } = useForm<CreateChecklistData>();
   const createUser = (data: CreateChecklistData) => {
     onCreateChecklist(data);
   };
@@ -132,9 +130,6 @@ const Details: React.FC<DetailsProps> = ({
   const { user } = useCurrentUser();
   const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
-  const match = useRouteMatch();
-  const [currentMemberTask, setCurrentMemberTask] = useState('');
-  const [memberPopupData, setMemberPopupData] = useState(initialMemberPopupState);
   const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
   const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
     update: (client, response) => {
@@ -148,7 +143,7 @@ const Details: React.FC<DetailsProps> = ({
               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(item => item.id === checklistItem.id);
+                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,
@@ -295,21 +290,22 @@ const Details: React.FC<DetailsProps> = ({
     },
   });
   if (loading) {
-    return <div>loading</div>;
+    return null;
   }
   if (!data) {
-    return <div>loading</div>;
+    return null;
   }
   return (
     <>
       <Modal
-        width={768}
+        width={1070}
         onClose={() => {
           history.push(projectURL);
         }}
         renderContent={() => {
           return (
             <TaskDetails
+              me={data.me.user}
               task={data.findTask}
               onChecklistDrop={checklist => {
                 updateTaskChecklistLocation({
@@ -398,7 +394,7 @@ const Details: React.FC<DetailsProps> = ({
                 if (member) {
                   showPopup(
                     $targetRef,
-                    <Popup title={null} onClose={() => {}} tab={0}>
+                    <Popup title={null} onClose={NOOP} tab={0}>
                       <MiniProfile
                         user={member}
                         bio="None"
@@ -412,19 +408,19 @@ const Details: React.FC<DetailsProps> = ({
                   );
                 }
               }}
-              onOpenAddMemberPopup={(task, $targetRef) => {
+              onOpenAddMemberPopup={(_task, $targetRef) => {
                 showPopup(
                   $targetRef,
-                  <Popup title="Members" tab={0} onClose={() => {}}>
+                  <Popup title="Members" tab={0} onClose={NOOP}>
                     <MemberManager
                       availableMembers={availableMembers}
                       activeMembers={data.findTask.assigned}
                       onMemberChange={(member, isActive) => {
                         if (user) {
                           if (isActive) {
-                            assignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            assignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                           } else {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                           }
                         }
                       }}
@@ -486,7 +482,7 @@ const Details: React.FC<DetailsProps> = ({
                 showPopup(
                   $targetRef,
                   <Popup
-                    title={'Change Due Date'}
+                    title="Change Due Date"
                     tab={0}
                     onClose={() => {
                       hidePopup();
@@ -502,9 +498,10 @@ const Details: React.FC<DetailsProps> = ({
                         updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                         hidePopup();
                       }}
-                      onCancel={() => {}}
+                      onCancel={NOOP}
                     />
                   </Popup>,
+                  { showDiamond: false, targetPadding: '0' },
                 );
               }}
             />

frontend/src/Projects/Project/index.tsx

@@ -4,7 +4,6 @@ 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 LabelManagerEditor from './LabelManagerEditor';
 import {
   useParams,
   Route,
@@ -36,9 +35,11 @@ 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 Board, { BoardLoading } from './Board';
 import Details from './Details';
-import EmptyBoard from 'shared/components/EmptyBoard';
+import LabelManagerEditor from './LabelManagerEditor';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
@@ -124,6 +125,7 @@ const Project = () => {
   const match = useRouteMatch();
 
   const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
+  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   const [toggleTaskLabel] = useToggleTaskLabelMutation({
     onCompleted: newTaskLabel => {
       taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
@@ -190,7 +192,6 @@ const Project = () => {
   const { showPopup, hidePopup } = usePopup();
   const $labelsRef = useRef<HTMLDivElement>(null);
   const labelsRef = useRef<Array<ProjectLabel>>([]);
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
   useEffect(() => {
     if (data) {
       document.title = `${data.findProject.name} | Taskcafé`;
@@ -199,7 +200,7 @@ const Project = () => {
   if (loading) {
     return (
       <>
-        <GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
         <BoardLoading />
       </>
     );
@@ -261,7 +262,7 @@ const Project = () => {
           path={`${match.path}/board/c/:taskID`}
           render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
             <Details
-              refreshCache={() => {}}
+              refreshCache={NOOP}
               availableMembers={data.findProject.members}
               projectURL={`${match.url}/board`}
               taskID={routeProps.match.params.taskID}
@@ -269,7 +270,17 @@ const Project = () => {
                 updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
               }}
               onTaskDescriptionChange={(updatedTask, newDescription) => {
-                updateTaskDescription({ variables: { taskID: updatedTask.id, description: 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 } });

frontend/src/Projects/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import Empty from 'shared/undraw/Empty';
@@ -10,16 +10,17 @@ import {
   GetProjectsQuery,
 } from 'shared/generated/graphql';
 
-import ProjectGridItem, { AddProjectItem } from 'shared/components/ProjectGridItem';
 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
-import UserContext, { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, 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 updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
+import NOOP from 'shared/utils/noop';
+
 const EmptyStateContent = styled.div`
   display: flex;
   justy-content: center;
@@ -37,21 +38,26 @@ const EmptyStatePrompt = styled.span`
   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 CreateTeamFormProps = {
   onCreateTeam: (teamName: string) => void;
 };
+
 const CreateTeamFormContainer = styled.form``;
 
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit, errors } = useForm<CreateTeamData>();
+  const { register, handleSubmit } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
     onCreateTeam(data.teamName);
   };
@@ -186,6 +192,7 @@ const SectionActions = styled.div`
 const SectionAction = styled(Button)`
   padding: 6px 12px;
 `;
+
 const SectionActionLink = styled(Link)`
   margin-right: 8px;
 `;
@@ -201,12 +208,14 @@ const ProjectsContainer = styled.div`
   max-width: 825px;
   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;
@@ -217,13 +226,12 @@ const AddTeamButton = styled(Button)`
 const CreateFirstTeam = styled(Button)`
   margin-top: 8px;
 `;
+
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
 };
 
-const ProjectLink = styled(Link)``;
-
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
   const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
@@ -241,7 +249,7 @@ const Projects = () => {
   });
 
   const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
-  const { user, setUser } = useCurrentUser();
+  const { user } = useCurrentUser();
   const [createTeam] = useCreateTeamMutation({
     update: (client, createData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
@@ -267,7 +275,7 @@ const Projects = () => {
       .sort((a, b) => {
         const textA = a.name.toUpperCase();
         const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0;
+        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
       })
       .map(team => {
         return {
@@ -278,13 +286,13 @@ const Projects = () => {
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
-              return textA < textB ? -1 : textA > textB ? 1 : 0;
+              return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
             }),
         };
       });
     return (
       <>
-        <GlobalTopNavbar onSaveProjectName={() => {}} projectID={null} name={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
         <Wrapper>
           <ProjectsContainer>
             {user.roles.org === 'admin' && (

frontend/src/Teams/Members/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import Button from 'shared/components/Button';
-import UserContext, { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
+import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
 import Select from 'shared/components/Select';
 import {
   useGetTeamQuery,
@@ -13,8 +13,6 @@ import {
   useUpdateTeamMemberRoleMutation,
   GetTeamQuery,
   GetTeamDocument,
-  MeDocument,
-  MeQuery,
 } from 'shared/generated/graphql';
 import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components/macro';
@@ -22,6 +20,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
+import NOOP from 'shared/utils/noop';
 
 const MemberListWrapper = styled.div`
   flex: 1 1;
@@ -129,6 +128,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
           }
         `}
 `;
+
 export const Content = styled.div`
   padding: 0 12px 12px;
 `;
@@ -160,6 +160,7 @@ export const RemoveMemberButton = styled(Button)`
   padding: 6px 12px;
   width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
   currentUserID: string;
   subject: User;
@@ -253,7 +254,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
           {subject.role && subject.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>
@@ -510,7 +511,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
           <MemberList>
             {data.findTeam.members.map(member => (
               <MemberListItem>
-                <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                 <MemberListItemDetails>
                   <MemberItemName>{member.fullName}</MemberItemName>
                   <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>

frontend/src/Teams/index.tsx

@@ -1,24 +1,22 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components/macro';
+import styled from 'styled-components/macro';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
 import GlobalTopNavbar from 'App/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
-import { Route, Switch, useRouteMatch, Redirect } from 'react-router';
+import { Route, Switch, useRouteMatch, Redirect, useParams, useHistory } from 'react-router';
-import Members from './Members';
-import Projects from './Projects';
-
 import {
   useGetTeamQuery,
   useDeleteTeamMutation,
   GetProjectsDocument,
   GetProjectsQuery,
 } from 'shared/generated/graphql';
-import { useParams, useHistory, useLocation } from 'react-router';
 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 UserContext, { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
+import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
+import NOOP from 'shared/utils/noop';
+import Members from './Members';
+import Projects from './Projects';
 
 const OuterWrapper = styled.div`
   display: flex;
@@ -59,7 +57,7 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
       <Popup title={null} tab={0}>
         <TeamSettings
           onDeleteTeam={() => {
-            setTab(1, 340);
+            setTab(1, { width: 340 });
           }}
         />
       </Popup>
@@ -117,7 +115,7 @@ const Teams = () => {
             setCurrentTab(tab);
           }}
           popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
-          onSaveProjectName={() => {}}
+          onSaveProjectName={NOOP}
           projectID={null}
           name={data.findTeam.name}
         />

frontend/src/index.tsx

@@ -8,6 +8,7 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
+import moment from 'moment';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';
@@ -15,6 +16,13 @@ import App from './App';
 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
 enableMapSet();
 
+moment.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 = [];
@@ -81,7 +89,7 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
     }
   }
   if (networkError) {
-    console.log(`[Network error]: ${networkError}`);
+    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
   }
   return undefined;
 });
@@ -122,12 +130,13 @@ const client = new ApolloClient({
   link: ApolloLink.from([
     onError(({ graphQLErrors, networkError }) => {
       if (graphQLErrors) {
-        graphQLErrors.forEach(({ message, locations, path }) =>
+        graphQLErrors.forEach(
-          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
+          ({ 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}`);
+        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
       }
     }),
     errorLink,

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

@@ -16,11 +16,12 @@ import {
 } from './Styles';
 
 type NameEditorProps = {
+  buttonLabel?: string;
   onSave: (listName: string) => void;
   onCancel: () => void;
 };
 
-const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
+export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCancel, buttonLabel = 'Save' }) => {
   const $editorRef = useRef<HTMLTextAreaElement>(null);
   const [listName, setListName] = useState('');
   useEffect(() => {
@@ -28,6 +29,11 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
       $editorRef.current.focus();
     }
   });
+  const onSave = (newName: string) => {
+    if (newName.replace(/\s+/g, '') !== '') {
+      handleSave(newName);
+    }
+  };
   const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -60,7 +66,7 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
             }
           }}
         >
-          Save
+          {buttonLabel}
         </AddListButton>
         <CancelAdd onClick={() => onCancel()}>
           <Cross width={16} height={16} />
@@ -98,7 +104,7 @@ const AddList: React.FC<AddListProps> = ({ onSave }) => {
         ) : (
           <Placeholder>
             <AddIconWrapper>
-              <Plus size={12} color="#c2c6dc" />
+              <Plus width={12} height={12} />
             </AddIconWrapper>
             Add another list
           </Placeholder>

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

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
+import React from 'react';
-import Admin from '.';
-import { theme } from 'App/ThemeStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
 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,

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

@@ -1,15 +1,13 @@
 import React, { useState, useRef } from 'react';
-import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Select from 'shared/components/Select';
-import { User, Plus, Lock, Pencil, Trash } from 'shared/icons';
+import { User, UserPlus, Checkmark } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
-import Member from 'shared/components/Member';
-
 import Button from 'shared/components/Button';
+import NOOP from 'shared/utils/noop';
 
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
@@ -69,6 +67,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
           }
         `}
 `;
+
 export const Content = styled.div`
   padding: 0 12px 12px;
 `;
@@ -100,6 +99,7 @@ export const RemoveMemberButton = styled(Button)`
   padding: 6px 12px;
   width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
   user: User;
   users: Array<User>;
@@ -120,7 +120,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
   onChangeRole,
 }) => {
   const { hidePopup, setTab } = usePopup();
-  const [userPass, setUserPass] = useState({ pass: '', passConfirm: '' });
+  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 (
@@ -195,7 +195,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
           {user.role && user.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>
@@ -209,7 +209,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
             <>
               <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 this user's teams & projects.
+                Choose a new user to take over ownership of the users teams & projects.
               </DeleteDescription>
               <UserSelect
                 onChange={v => setDeleteUser(v)}
@@ -239,7 +239,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
             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={() => {}} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
+          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
           <UserPassConfirmButton
             onClick={() => {
               // onDeleteUser();
@@ -253,7 +253,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
       <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
         <Content>
           <DeleteDescription>
-            You can either set the user's new password directly or send the user an email allowing them to reset their
+            You can either set the users new password directly or send the user an email allowing them to reset their
             own password.
           </DeleteDescription>
           <UserPassBar>
@@ -291,6 +291,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
     </>
   );
 };
+
 const UserSelect = styled(Select)`
   margin: 8px 0;
   padding: 8px 0;
@@ -299,6 +300,7 @@ const UserSelect = styled(Select)`
 const NewUserPassInput = styled(Input)`
   margin: 8px 0;
 `;
+
 const InviteMemberButton = styled(Button)`
   padding: 7px 12px;
 `;
@@ -307,6 +309,7 @@ const UserPassBar = styled.div`
   display: flex;
   padding-top: 8px;
 `;
+
 const UserPassConfirmButton = styled(Button)`
   width: 100%;
   padding: 7px 12px;
@@ -397,104 +400,6 @@ const MemberListWrapper = styled.div`
   flex: 1 1;
 `;
 
-const Root = styled.div`
-  .ag-theme-material {
-    --ag-foreground-color: #c2c6dc;
-    --ag-secondary-foreground-color: #c2c6dc;
-    --ag-background-color: transparent;
-    --ag-header-background-color: transparent;
-    --ag-header-foreground-color: #c2c6dc;
-    --ag-border-color: #414561;
-
-    --ag-row-hover-color: #262c49;
-    --ag-header-cell-hover-background-color: #262c49;
-    --ag-checkbox-unchecked-color: #c2c6dc;
-    --ag-checkbox-indeterminate-color: rgba(115, 103, 240);
-    --ag-selected-row-background-color: #262c49;
-    --ag-material-primary-color: rgba(115, 103, 240);
-    --ag-material-accent-color: rgba(115, 103, 240);
-  }
-  .ag-theme-material ::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-track {
-    background: #262c49;
-    border-radius: 20px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-thumb {
-    background: #7367f0;
-    border-radius: 20px;
-  }
-  .ag-header-cell-text {
-    color: #fff;
-    font-weight: 700;
-  }
-`;
-
-const Header = styled.div`
-  border-bottom: 1px solid #e2e2e2;
-  flex-direction: row;
-  box-sizing: border-box;
-  display: flex;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-  background: transparent;
-  border-bottom-color: #414561;
-  color: #fff;
-
-  height: 112px;
-  min-height: 112px;
-`;
-
-const EditUserIcon = styled(Pencil)``;
-
-const LockUserIcon = styled(Lock)``;
-
-const DeleteUserIcon = styled(Trash)``;
-
-type ActionButtonProps = {
-  onClick: ($target: React.RefObject<HTMLElement>) => void;
-};
-
-const ActionButtonWrapper = styled.div`
-  margin-right: 8px;
-  cursor: pointer;
-  display: inline-flex;
-`;
-
-const ActionButton: React.FC<ActionButtonProps> = ({ onClick, children }) => {
-  const $wrapper = useRef<HTMLDivElement>(null);
-  return (
-    <ActionButtonWrapper onClick={() => onClick($wrapper)} ref={$wrapper}>
-      {children}
-    </ActionButtonWrapper>
-  );
-};
-
-const ActionButtons = (params: any) => {
-  return (
-    <>
-      <ActionButton onClick={() => {}}>
-        <EditUserIcon width={16} height={16} />
-      </ActionButton>
-      <ActionButton onClick={$target => params.onDeleteUser($target, params.value)}>
-        <DeleteUserIcon width={16} height={16} />
-      </ActionButton>
-    </>
-  );
-};
-
-const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
 const Container = styled.div`
   padding: 2.2rem;
   display: flex;
@@ -525,6 +430,7 @@ const TabNavItem = styled.li`
   display: block;
   position: relative;
 `;
+
 const TabNavItemButton = styled.button<{ active: boolean }>`
   cursor: pointer;
   display: flex;
@@ -545,6 +451,10 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
     fill: rgba(115, 103, 240);
   }
 `;
+const TabItemUser = styled(User)<{ active: boolean }>`
+fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+`;
 
 const TabNavItemSpan = styled.span`
   text-align: left;
@@ -607,7 +517,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
       }}
     >
       <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <TabItemUser width={14} height={14} active={active} />
         <TabNavItemSpan>{name}</TabNavItemSpan>
       </TabNavItemButton>
     </TabNavItem>
@@ -637,7 +547,7 @@ const Admin: React.FC<AdminProps> = ({
     '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 [currentTop, setTop] = useState(initialTab * 48);
   const [currentTab, setTab] = useState(initialTab);
-  const { showPopup, hidePopup } = usePopup();
+  const { showPopup } = usePopup();
   const $tabNav = useRef<HTMLDivElement>(null);
 
   const [updateUserRole] = useUpdateUserRoleMutation();
@@ -690,7 +600,7 @@ const Admin: React.FC<AdminProps> = ({
                 const projectTotal = member.owned.projects.length + member.member.projects.length;
                 return (
                   <MemberListItem>
-                    <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                    <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                     <MemberListItemDetails>
                       <MemberItemName>{member.fullName}</MemberItemName>
                       <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>

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

@@ -2,7 +2,7 @@ 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 theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import Button from '.';
 

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

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
 
-const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
+const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
   position: relative;
   display: flex;
   align-items: center;
@@ -9,6 +9,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
   transition: all 0.2s ease;
   font-size: ${props => props.fontSize};
   color: rgba(${props => props.theme.colors.text.secondary});
+  ${props =>
+    props.hasIcon &&
+    css`
+      padding-left: 4px;
+    `}
 `;
 
 const Base = styled.button<{ color: string; disabled: boolean }>`
@@ -18,6 +23,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
   cursor: pointer;
   padding: 0.75rem 2rem;
   border-radius: ${props => props.theme.borderRadius.alternate};
+  display: flex;
+  align-items: center;
 
   ${props =>
     props.disabled &&
@@ -34,16 +41,28 @@ const Filled = styled(Base)`
     box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
   }
 `;
-const Outline = styled(Base)`
+const Outline = styled(Base)<{ invert: boolean }>`
   border: 1px solid rgba(${props => props.theme.colors[props.color]});
   background: transparent;
-  & ${Text} {
+  ${props =>
-    color: rgba(${props => props.theme.colors[props.color]});
+    props.invert
-  }
+      ? css`
-
+          background: rgba(${props.theme.colors[props.color]});
-  &:hover {
+          & ${Text} {
-    background: rgba(${props => props.theme.colors[props.color]}, 0.08);
+            color: rgba(${props.theme.colors.text.secondary});
-  }
+          }
+          &:hover {
+            background: rgba(${props.theme.colors[props.color]}, 0.8);
+          }
+        `
+      : css`
+          & ${Text} {
+            color: rgba(${props.theme.colors[props.color]});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors[props.color]}, 0.08);
+          }
+        `}
 `;
 
 const Flat = styled(Base)`
@@ -110,6 +129,8 @@ type ButtonProps = {
   color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
   disabled?: boolean;
   type?: 'button' | 'submit';
+  icon?: JSX.Element;
+  invert?: boolean;
   className?: string;
   onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
   justifyTextContent?: string;
@@ -118,10 +139,12 @@ type ButtonProps = {
 const Button: React.FC<ButtonProps> = ({
   disabled = false,
   fontSize = '14px',
+  invert = false,
   color = 'primary',
   variant = 'filled',
   type = 'button',
   justifyTextContent = 'center',
+  icon,
   onClick,
   className,
   children,
@@ -136,7 +159,8 @@ const Button: React.FC<ButtonProps> = ({
     case 'filled':
       return (
         <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+          {icon && icon}
+          <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
             {children}
           </Text>
         </Filled>
@@ -145,6 +169,7 @@ const Button: React.FC<ButtonProps> = ({
       return (
         <Outline
           ref={$button}
+          invert={invert}
           type={type}
           onClick={handleClick}
           className={className}

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

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
+import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   CardMember,
@@ -24,7 +24,6 @@ import {
   CardTitle,
   CardMembers,
 } from './Styles';
-import { CheckSquare } from 'shared/icons';
 
 type DueDate = {
   isPastDue: boolean;
@@ -209,7 +208,7 @@ const Card = React.forwardRef(
             ) : (
               <CardTitle>
                 {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ' - ' + position : ''}`}
+                {`${title}${position ? ` - ${position}` : ''}`}
               </CardTitle>
             )}
             <ListCardBadges>
@@ -236,9 +235,9 @@ const Card = React.forwardRef(
                     width={8}
                     height={8}
                   />
-                  <ListCardBadgeText
+                  <ListCardBadgeText color={checklists.complete === checklists.total ? 'success' : 'normal'}>
-                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
+                    {`${checklists.complete}/${checklists.total}`}
-                  >{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
+                  </ListCardBadgeText>
                 </ListCardBadge>
               )}
             </ListCardBadges>

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

@@ -2,9 +2,10 @@ 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 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 {
@@ -132,7 +133,7 @@ export const Default = () => {
             }}
             onToggleItem={onToggleItem}
           >
-            {items.map((item, idx) => (
+            {items.map(item => (
               <ChecklistItem
                 key={item.id}
                 wrapperProps={{}}
@@ -141,9 +142,9 @@ export const Default = () => {
                 itemID={item.id}
                 name={item.name}
                 complete={item.complete}
-                onDeleteItem={() => {}}
+                onDeleteItem={NOOP}
-                onChangeName={() => {}}
+                onChangeName={NOOP}
-                onToggleItem={() => {}}
+                onToggleItem={NOOP}
               />
             ))}
           </Checklist>

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

@@ -25,7 +25,7 @@ const WindowTitle = styled.div`
 
 const WindowTitleIcon = styled(CheckSquareOutline)`
   top: 10px;
-  left: -40px;
+  left: -32px;
   position: absolute;
 `;
 

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Cross } from 'shared/icons';
+
+const LabelText = styled.span`
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+const Container = styled.div<{ color?: string }>`
+  min-height: 26px;
+  min-width: 26px;
+  font-size: 0.8rem;
+  border-radius: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${props =>
+    props.color
+      ? css`
+          background: ${props.color};
+          & ${LabelText} {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+        `
+      : css`
+          background: rgba(${props.theme.colors.bg.primary});
+        `}
+`;
+
+const CloseButton = styled.button`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0 4px;
+  background: rgba(0, 0, 0, 0.15);
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+`;
+
+type ChipProps = {
+  label: string;
+  onClose?: () => void;
+  color?: string;
+  className?: string;
+};
+
+const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
+  return (
+    <Container className={className} color={color}>
+      <LabelText>{label}</LabelText>
+      {onClose && (
+        <CloseButton onClick={() => onClose()}>
+          <Cross width={12} height={12} />
+        </CloseButton>
+      )}
+    </Container>
+  );
+};
+
+export default Chip;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
 
 import Input from '.';
-import { User } from 'shared/icons';
 
 export default {
   component: Input,
@@ -35,7 +35,7 @@ export const Default = () => {
         <Wrapper>
           <Input label="Label placeholder" />
           <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
         </Wrapper>
       </ThemeProvider>
     </>

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

@@ -18,7 +18,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout, onClos
     <Container ref={$containerRef} left={left} top={top}>
       <Wrapper>
         <ActionItem onClick={onAdminConsole}>
-          <User size={16} color="#c2c6dc" />
+          <User width={16} height={16} />
           <ActionTitle>Profile</ActionTitle>
         </ActionItem>
         <Separator />
@@ -54,7 +54,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ showAdminConsole, onAdminCons
         </>
       )}
       <ActionItem onClick={onProfile}>
-        <User size={16} color="#c2c6dc" />
+        <User width={16} height={16} />
         <ActionTitle>Profile</ActionTitle>
       </ActionItem>
       <ActionsList>

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

@@ -1,8 +1,8 @@
-import React, { useRef } from 'react';
+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 theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import { Popup } from '../PopupMenu';
 import DueDateManager from '.';

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

@@ -2,22 +2,13 @@ import React, { useState, useEffect, forwardRef } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
-import { Cross } from 'shared/icons';
 import _ from 'lodash';
-
-import {
-  Wrapper,
-  ActionWrapper,
-  RemoveDueDate,
-  DueDateInput,
-  DueDatePickerWrapper,
-  ConfirmAddDueDate,
-  CancelDueDate,
-} from './Styles';
-
 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 { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
 
 type DueDateManagerProps = {
   task: Task;
@@ -120,17 +111,13 @@ const HeaderActions = styled.div`
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
   const now = moment();
-  const [textStartDate, setTextStartDate] = useState(now.format('YYYY-MM-DD'));
+  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const [startDate, setStartDate] = useState(new Date());
-  useEffect(() => {
-    setTextStartDate(moment(startDate).format('YYYY-MM-DD'));
-  }, [startDate]);
 
-  const [textEndTime, setTextEndTime] = useState(now.format('h:mm A'));
-  const [endTime, setEndTime] = useState(now.toDate());
   useEffect(() => {
-    setTextEndTime(moment(endTime).format('h:mm A'));
+    const newDate = moment(startDate).format('YYYY-MM-DD');
-  }, [endTime]);
+    setValue('endDate', newDate);
+  }, [startDate]);
 
   const years = _.range(2010, getYear(new Date()) + 10, 1);
   const months = [
@@ -147,9 +134,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'November',
     'December',
   ];
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${data.endTime}`, 'YYYY-MM-DD h:mm A');
+    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());
     }
@@ -158,11 +144,12 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     return (
       <DueDateInput
         id="endTime"
+        value={value}
         name="endTime"
         ref={$ref}
         width="100%"
         variant="alternate"
-        label="Date"
+        label="Time"
         onClick={onClick}
       />
     );
@@ -177,7 +164,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             width="100%"
             variant="alternate"
             label="Date"
-            defaultValue={textStartDate}
+            defaultValue={now.format('YYYY-MM-DD')}
             ref={register({
               required: 'End date is required.',
             })}
@@ -186,6 +173,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
         <FormField>
           <Controller
             control={control}
+            defaultValue={now.toDate()}
             name="endTime"
             render={({ onChange, onBlur, value }) => (
               <DatePicker
@@ -220,7 +208,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                 </HeaderButton>
                 <HeaderSelectLabel>
                   {months[date.getMonth()]}
-                  <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value))}>
+                  <HeaderSelect
+                    value={getYear(date)}
+                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
+                  >
                     {years.map(option => (
                       <option key={option} value={option}>
                         {option}
@@ -250,12 +241,14 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
             selected={startDate}
             inline
             onChange={date => {
-              setStartDate(date ?? new Date());
+              if (date) {
+                setStartDate(date);
+              }
             }}
           />
         </DueDatePickerWrapper>
         <ActionWrapper>
-          <ConfirmAddDueDate type="submit" onClick={() => {}}>
+          <ConfirmAddDueDate type="submit" onClick={NOOP}>
             Save
           </ConfirmAddDueDate>
           <RemoveDueDate

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';
 
 import Input from '.';
-import { User } from 'shared/icons';
 
 export default {
   component: Input,
@@ -35,7 +35,7 @@ export const Default = () => {
         <Wrapper>
           <Input label="Label placeholder" />
           <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
         </Wrapper>
       </ThemeProvider>
     </>

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

@@ -91,6 +91,7 @@ type InputProps = {
   name?: string;
   className?: string;
   defaultValue?: string;
+  value?: string;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
 };
 
@@ -129,6 +130,7 @@ const Input = React.forwardRef(
       onClick,
       floatingLabel,
       defaultValue,
+      value,
       id,
     }: InputProps,
     $ref: any,
@@ -166,6 +168,7 @@ const Input = React.forwardRef(
           onClick={onClick}
           autoComplete={autocomplete ? 'on' : 'off'}
           defaultValue={defaultValue}
+          value={value}
           hasIcon={typeof icon !== 'undefined'}
           width={width}
           placeholder={placeholder}

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

@@ -3,6 +3,7 @@ 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 {
@@ -60,7 +61,7 @@ export const Default = () => {
       onExtraMenuOpen={action('extra menu open')}
     >
       <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
       </ListCards>
     </List>
   );
@@ -77,7 +78,7 @@ export const WithCardComposer = () => {
       onExtraMenuOpen={action('extra menu open')}
     >
       <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
       </ListCards>
     </List>
   );
@@ -108,7 +109,7 @@ export const WithCard = () => {
           checklists={{ complete: 1, total: 4 }}
           dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
         />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
       </ListCards>
     </List>
   );
@@ -138,7 +139,7 @@ export const WithCardAndComposer = () => {
           checklists={{ complete: 1, total: 4 }}
           dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
         />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
       </ListCards>
     </List>
   );

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

@@ -102,7 +102,7 @@ const List = React.forwardRef(
           {children && children}
           <AddCardContainer hidden={isComposerOpen}>
             <AddCardButton onClick={() => onOpenComposer(id)}>
-              <Plus size={12} color="#c2c6dc" />
+              <Plus width={12} height={12} />
               <AddCardButtonText>Add another card</AddCardButtonText>
             </AddCardButton>
           </AddCardContainer>

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import ListActions from '.';
-
-export default {
-  component: ListActions,
-  title: 'ListActions',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return <ListActions taskGroupID="1" onArchiveTaskGroup={action('on archive task group')} />;
-};

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

@@ -1,50 +1,100 @@
 import React from 'react';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { NameEditor } from 'shared/components/AddList';
+import NOOP from 'shared/utils/noop';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingDirection, TaskSortingType } from 'shared/utils/sorting';
 import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
 
+const CopyWrapper = styled.div`
+  margin: 0 12px;
+`;
+
 type Props = {
   taskGroupID: string;
-
+  onDuplicateTaskGroup: (newTaskGroupName: string) => void;
+  onDeleteTaskGroupTasks: () => void;
   onArchiveTaskGroup: (taskGroupID: string) => void;
+  onSortTaskGroup: (taskSorting: TaskSorting) => void;
 };
-const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
+
+const LabelManager: React.FC<Props> = ({
+  taskGroupID,
+  onDeleteTaskGroupTasks,
+  onDuplicateTaskGroup,
+  onArchiveTaskGroup,
+  onSortTaskGroup,
+}) => {
+  const { setTab } = usePopup();
   return (
-    <InnerContent>
+    <>
-      <ListActionsWrapper>
+      <Popup tab={0} title={null}>
-        <ListActionItemWrapper>
+        <InnerContent>
-          <ListActionItem>Add card...</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => setTab(1)}>
-        <ListActionItemWrapper>
+              <ListActionItem>Duplicate</ListActionItem>
-          <ListActionItem>Copy List...</ListActionItem>
+            </ListActionItemWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => setTab(2)}>
-        <ListActionItemWrapper>
+              <ListActionItem>Sort</ListActionItem>
-          <ListActionItem>Move card...</ListActionItem>
+            </ListActionItemWrapper>
-        </ListActionItemWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+          <ListSeparator />
-          <ListActionItem>Watch</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => onDeleteTaskGroupTasks()}>
-      </ListActionsWrapper>
+              <ListActionItem>Delete All Tasks</ListActionItem>
-      <ListSeparator />
+            </ListActionItemWrapper>
-      <ListActionsWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+          <ListSeparator />
-          <ListActionItem>Sort By...</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
-      </ListActionsWrapper>
+              <ListActionItem>Delete</ListActionItem>
-      <ListSeparator />
+            </ListActionItemWrapper>
-      <ListActionsWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+        </InnerContent>
-          <ListActionItem>Move All Cards in This List...</ListActionItem>
+      </Popup>
-        </ListActionItemWrapper>
+      <Popup tab={1} title="Copy list" onClose={NOOP}>
-        <ListActionItemWrapper>
+        <CopyWrapper>
-          <ListActionItem>Archive All Cards in This List...</ListActionItem>
+          <NameEditor
-        </ListActionItemWrapper>
+            onCancel={NOOP}
-      </ListActionsWrapper>
+            onSave={listName => {
-      <ListSeparator />
+              onDuplicateTaskGroup(listName);
-      <ListActionsWrapper>
+            }}
-        <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
+            buttonLabel="Duplicate"
-          <ListActionItem>Archive This List</ListActionItem>
+          />
-        </ListActionItemWrapper>
+        </CopyWrapper>
-      </ListActionsWrapper>
+      </Popup>
-    </InnerContent>
+      <Popup tab={2} title="Sort list" onClose={NOOP}>
+        <InnerContent>
+          <ListActionsWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Task title</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Due date</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Complete</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Labels</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Members</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+        </InnerContent>
+      </Popup>
+    </>
   );
 };
 export default LabelManager;

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

@@ -4,10 +4,8 @@ export const Container = styled.div`
   flex: 1;
   user-select: none;
   white-space: nowrap;
-  margin-bottom: 8px;
   overflow-x: auto;
   overflow-y: hidden;
-  padding-bottom: 8px;
 
   ::-webkit-scrollbar {
     height: 10px;
@@ -35,10 +33,9 @@ export const BoardWrapper = styled.div`
 
   user-select: none;
   white-space: nowrap;
-  margin-bottom: 8px;
   overflow-x: auto;
   overflow-y: hidden;
-  padding-bottom: 8px;
+  padding-bottom: 4px;
   position: absolute;
   top: 0;
   right: 0;

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

@@ -11,8 +11,131 @@ import {
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
 import moment from 'moment';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
+import shouldMetaFilter from './metaFilter';
+
+export enum TaskMeta {
+  NONE,
+  TITLE,
+  MEMBER,
+  LABEL,
+  DUE_DATE,
+}
+
+export enum TaskMetaMatch {
+  MATCH_ANY,
+  MATCH_ALL,
+}
+
+export enum TaskStatus {
+  ALL,
+  COMPLETE,
+  INCOMPLETE,
+}
+
+export enum TaskSince {
+  ALL,
+  TODAY,
+  YESTERDAY,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+}
+
+export type TaskStatusFilter = {
+  status: TaskStatus;
+  since: TaskSince;
+};
+
+export interface TaskMetaFilterName {
+  meta: TaskMeta;
+  value?: string | moment.Moment | null;
+  id?: string | null;
+}
+
+export type TaskNameMetaFilter = {
+  name: string;
+};
+
+export enum DueDateFilterType {
+  TODAY,
+  TOMORROW,
+  THIS_WEEK,
+  NEXT_WEEK,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+  OVERDUE,
+  NO_DUE_DATE,
+}
+
+export type DueDateMetaFilter = {
+  type: DueDateFilterType;
+  label: string;
+};
+
+export type MemberMetaFilter = {
+  id: string;
+  username: string;
+};
+
+export type LabelMetaFilter = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+export type TaskMetaFilters = {
+  match: TaskMetaMatch;
+  dueDate: DueDateMetaFilter | null;
+  taskName: TaskNameMetaFilter | null;
+  members: Array<MemberMetaFilter>;
+  labels: Array<LabelMetaFilter>;
+};
+
+function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
+  if (filter.status === TaskStatus.ALL) {
+    return true;
+  }
+
+  if (filter.status === TaskStatus.INCOMPLETE && task.complete === false) {
+    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();
+    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');
+        return completedAt.isSameOrAfter(YESTERDAY, 'd');
+      case TaskSince.ONE_WEEK:
+        const ONE_WEEK = REFERENCE.clone()
+          .subtract(7, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
+      case TaskSince.TWO_WEEKS:
+        const TWO_WEEKS = REFERENCE.clone()
+          .subtract(14, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
+      case TaskSince.THREE_WEEKS:
+        const THREE_WEEKS = REFERENCE.clone()
+          .subtract(21, 'days')
+          .startOf('day');
+        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
+      default:
+        return true;
+    }
+  }
+  return false;
+}
 
 interface SimpleProps {
   taskGroups: Array<TaskGroup>;
@@ -28,8 +151,29 @@ interface SimpleProps {
   onCardMemberClick: OnCardMemberClick;
   onCardLabelClick: () => void;
   cardLabelVariant: CardLabelVariant;
+  taskStatusFilter?: TaskStatusFilter;
+  taskMetaFilters?: TaskMetaFilters;
+  taskSorting?: TaskSorting;
 }
 
+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const SimpleLists: React.FC<SimpleProps> = ({
   taskGroups,
   onTaskDrop,
@@ -43,6 +187,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
   cardLabelVariant,
   onExtraMenuOpen,
   onCardMemberClick,
+  taskStatusFilter = initTaskStatusFilter,
+  taskMetaFilters = initTaskMetaFilters,
+  taskSorting = initTaskSorting,
 }) => {
   const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
     if (typeof destination === 'undefined') return;
@@ -81,7 +228,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
           position: newPosition,
         });
       } else {
-        throw { error: 'task group can not be found' };
+        throw new Error('task group can not be found');
       }
     } else {
       const curTaskGroup = taskGroups.findIndex(
@@ -164,10 +311,18 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                 <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                   {taskGroup.tasks
                                     .slice()
+                                    .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) => {
                                       return (
-                                        <Draggable key={task.id} draggableId={task.id} index={taskIndex}>
+                                        <Draggable
+                                          key={task.id}
+                                          draggableId={task.id}
+                                          index={taskIndex}
+                                          isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
+                                        >
                                           {taskProvided => {
                                             return (
                                               <Card

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

@@ -0,0 +1,132 @@
+import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
+import moment from 'moment';
+
+enum ShouldFilter {
+  NO_FILTER,
+  VALID,
+  NOT_VALID,
+}
+
+function shouldFilter(cond: boolean) {
+  return cond ? ShouldFilter.VALID : ShouldFilter.NOT_VALID;
+}
+
+export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
+  let isFiltered = ShouldFilter.NO_FILTER;
+  if (filters.taskName) {
+    isFiltered = shouldFilter(task.name.toLowerCase().startsWith(filters.taskName.name.toLowerCase()));
+  }
+  if (filters.dueDate) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    if (filters.dueDate.type === DueDateFilterType.NO_DUE_DATE) {
+      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
+    }
+    if (task.dueDate) {
+      const taskDueDate = moment(task.dueDate);
+      const today = moment();
+      let start;
+      let end;
+      switch (filters.dueDate.type) {
+        case DueDateFilterType.OVERDUE:
+          isFiltered = shouldFilter(taskDueDate.isBefore(today));
+          break;
+        case DueDateFilterType.TODAY:
+          isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
+          break;
+        case DueDateFilterType.TOMORROW:
+          isFiltered = shouldFilter(
+            taskDueDate.isBefore(
+              today
+                .clone()
+                .add(1, 'days')
+                .endOf('day'),
+            ),
+          );
+          break;
+        case DueDateFilterType.THIS_WEEK:
+          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');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.ONE_WEEK:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(7, 'days')
+            .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');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.THREE_WEEKS:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(21, 'days')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        default:
+          isFiltered = ShouldFilter.NOT_VALID;
+      }
+    }
+  }
+  if (filters.members.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const member of filters.members) {
+      if (task.assigned) {
+        if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (filters.labels.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const label of filters.labels) {
+      if (task.labels) {
+        if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (isFiltered === ShouldFilter.NO_FILTER) {
+    return true;
+  }
+  if (isFiltered === ShouldFilter.VALID) {
+    return true;
+  }
+  return false;
+}

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

@@ -53,7 +53,7 @@ const Login = ({ onSubmit }: LoginProps) => {
                   ref={register({ required: 'Username is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}

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

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import { Checkmark } from 'shared/icons';
+import NOOP from 'shared/utils/noop';
 
 const CardCheckmark = styled(Checkmark)`
   position: absolute;
@@ -43,6 +44,7 @@ type MemberProps = {
   showName?: boolean;
   className?: string;
   showCheckmark?: boolean;
+  size?: number;
 };
 
 const CardMemberWrapper = styled.div<{ ref: any }>`
@@ -62,6 +64,7 @@ const Member: React.FC<MemberProps> = ({
   showName,
   showCheckmark = false,
   className,
+  size = 28,
 }) => {
   const $targetRef = useRef<HTMLDivElement>();
   return (
@@ -76,7 +79,7 @@ const Member: React.FC<MemberProps> = ({
         }
       }}
     >
-      <TaskAssignee onMemberProfile={() => {}} size={28} member={member} />
+      <TaskAssignee onMemberProfile={NOOP} size={32} member={member} />
       {showName && <CardMemberName>{member.fullName}</CardMemberName>}
       {showCheckmark && <CardCheckmark width={12} height={12} />}
     </CardMemberWrapper>

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-
+import { Checkmark } from 'shared/icons';
+import Member from 'shared/components/Member';
 import {
   MemberName,
   ProfileIcon,
@@ -12,8 +13,6 @@ import {
   BoardMemberListItemContent,
   ActiveIconWrapper,
 } from './Styles';
-import { Checkmark } from 'shared/icons';
-import Member from 'shared/components/Member';
 
 type MemberManagerProps = {
   availableMembers: Array<TaskUser>;

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

@@ -160,7 +160,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
           {user.role && user.role.code === 'owner' && (
             <>
               <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
             </>
           )}
         </MiniProfileActions>

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

@@ -15,18 +15,20 @@ export const ScrollOverlay = styled.div`
 export const ClickableOverlay = styled.div`
   min-height: 100%;
   background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
 `;
 
-export const StyledModal = styled.div<{ width: number }>`
+export const StyledModal = styled.div<{ width: number; height: number }>`
-  display: inline-block;
   position: relative;
-  margin: 48px 0 80px;
+  width: ${props => props.width}px;
-  width: 100%;
+  height: ${props => props.height}px;
+  left: 0;
+  right: 0;
+  top: 48px;
+  bottom: 16px;
+  margin: auto;
+
   background: #262c49;
-  max-width: ${props => props.width}px;
   vertical-align: middle;
-  border-radius: 3px;
+  border-radius: 6px;
   ${mixin.boxShadowMedium}
 `;

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

@@ -1,9 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-
+import useWindowSize from 'shared/hooks/useWindowSize';
+import styled from 'styled-components';
+import { Cross } from 'shared/icons';
 import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';
 
 const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
@@ -14,21 +15,50 @@ type ModalProps = {
   renderContent: () => JSX.Element;
 };
 
-const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+function getAdjustedHeight(height: number) {
+  if (height >= 900) {
+    return height - 150;
+  }
+  if (height >= 800) {
+    return height - 125;
+  }
+  return height - 70;
+}
+
+const CloseIcon = styled(Cross)`
+  position: absolute;
+  top: 16px;
+  right: -32px;
+  cursor: pointer;
+  fill: rgba(${props => props.theme.colors.text.primary});
+  &:hover {
+    fill: rgba(${props => props.theme.colors.text.secondary});
+  }
+`;
+
+const InnerModal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
   const $modalRef = useRef<HTMLDivElement>(null);
   const $clickableOverlayRef = useRef<HTMLDivElement>(null);
+  const [_width, height] = useWindowSize();
 
   useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
   useOnEscapeKeyDown(true, tellParentToClose);
 
-  return ReactDOM.createPortal(
+  return (
     <ScrollOverlay>
       <ClickableOverlay ref={$clickableOverlayRef}>
-        <StyledModal width={width} ref={$modalRef}>
+        <StyledModal width={width} height={getAdjustedHeight(height)} ref={$modalRef}>
           {renderContent()}
+          <CloseIcon onClick={() => tellParentToClose()} width={20} height={20} />
         </StyledModal>
       </ClickableOverlay>
-    </ScrollOverlay>,
+    </ScrollOverlay>
+  );
+};
+
+const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+  return ReactDOM.createPortal(
+    <InnerModal width={width} onClose={tellParentToClose} renderContent={renderContent} />,
     $root,
   );
 };

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

@@ -1,9 +1,8 @@
-import React, { useState, useRef, createRef } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
 import NormalizeStyles from 'App/NormalizeStyles';
 import BaseStyles from 'App/BaseStyles';
-
+import NOOP from 'shared/utils/noop';
 import NewProject from '.';
 
 export default {
@@ -26,7 +25,7 @@ export const Default = () => {
         initialTeamID={null}
         onCreateProject={action('create project')}
         teams={[{ name: 'General', id: 'general', createdAt: '' }]}
-        onClose={() => {}}
+        onClose={NOOP}
       />
     </>
   );

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

@@ -4,6 +4,19 @@ import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';
 
+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
 const Overlay = styled.div`
   z-index: 10000;
   background: #262c49;
@@ -149,14 +162,8 @@ const colourStyles = {
   option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
     return {
       ...styles,
-      backgroundColor: isDisabled
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
-        ? null
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+import TimeAgo from 'react-timeago';
+
+import { Popup } from 'shared/components/PopupMenu';
+
+const ItemWrapper = styled.div`
+  cursor: pointer;
+  border-bottom: 1px solid #414561;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  justify-content: space-between;
+  display: flex;
+
+  &:hover {
+    background: #10163a;
+  }
+`;
+const ItemWrapperContent = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const ItemIconContainer = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const ItemTextContainer = styled.div`
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+`;
+
+const ItemTextTitle = styled.span`
+  font-weight: 500;
+  display: block;
+  color: rgba(${props => props.theme.colors.primary});
+  font-size: 14px;
+`;
+const ItemTextDesc = styled.span`
+  font-size: 12px;
+`;
+
+const ItemTimeAgo = styled.span`
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  font-size: 11px;
+`;
+
+type NotificationItemProps = {
+  title: string;
+  description: string;
+  createdAt: string;
+};
+
+export const NotificationItem: React.FC<NotificationItemProps> = ({ title, description, createdAt }) => {
+  return (
+    <ItemWrapper>
+      <ItemWrapperContent>
+        <ItemIconContainer />
+        <ItemTextContainer>
+          <ItemTextTitle>{title}</ItemTextTitle>
+          <ItemTextDesc>{description}</ItemTextDesc>
+        </ItemTextContainer>
+      </ItemWrapperContent>
+      <TimeAgo date={createdAt} component={ItemTimeAgo} />
+    </ItemWrapper>
+  );
+};
+
+const NotificationHeader = styled.div`
+  padding: 0.75rem;
+  text-align: center;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: rgba(${props => props.theme.colors.primary});
+`;
+
+const NotificationHeaderTitle = styled.span`
+  font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+const NotificationFooter = styled.div`
+  cursor: pointer;
+  padding: 0.5rem;
+  text-align: center;
+  color: rgba(${props => props.theme.colors.primary});
+  &:hover {
+    background: #10163a;
+  }
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+`;
+
+const NotificationPopup: React.FC = ({ children }) => {
+  return (
+    <Popup title={null} tab={0} borders={false} padding={false}>
+      <NotificationHeader>
+        <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
+      </NotificationHeader>
+      <ul>{children}</ul>
+      <NotificationFooter>View All</NotificationFooter>
+    </Popup>
+  );
+};
+
+export default NotificationPopup;

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

@@ -1,381 +0,0 @@
-import React, { useState, useRef, createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import LabelColors from 'shared/constants/labelColors';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
-import ListActions from 'shared/components/ListActions';
-import MemberManager from 'shared/components/MemberManager';
-import DueDateManager from 'shared/components/DueDateManager';
-import MiniProfile from 'shared/components/MiniProfile';
-
-import styled from 'styled-components';
-import produce from 'immer';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-
-import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
-
-export default {
-  component: PopupMenu,
-  title: 'PopupMenu',
-  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 OpenLabelBtn = styled.span``;
-
-type TabProps = {
-  tab: number;
-};
-
-const LabelManagerEditor = () => {
-  const [labels, setLabels] = useState(labelData);
-  const [currentLabel, setCurrentLabel] = useState('');
-  const { setTab } = usePopup();
-  return (
-    <>
-      <Popup title="Labels" tab={0} onClose={action('on close')}>
-        <LabelManager
-          labels={labels}
-          onLabelCreate={() => {
-            setTab(2);
-          }}
-          onLabelEdit={labelId => {
-            setCurrentLabel(labelId);
-            setTab(1);
-          }}
-          onLabelToggle={labelId => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === labelId);
-                if (idx !== -1) {
-                  draftState[idx] = { ...draftState[idx] };
-                }
-              }),
-            );
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Edit label" tab={1}>
-        <LabelEditor
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          label={labels.find(label => label.id === currentLabel) ?? null}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === currentLabel);
-                if (idx !== -1) {
-                  draftState[idx] = {
-                    ...draftState[idx],
-                    name,
-                    labelColor: {
-                      ...draftState[idx].labelColor,
-                      name: color.name ?? '',
-                      colorHex: color.colorHex,
-                    },
-                  };
-                }
-              }),
-            );
-            setTab(0);
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Create new label" tab={2}>
-        <LabelEditor
-          label={null}
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels([
-              ...labels,
-              {
-                id: name,
-                name,
-                createdDate: new Date().toString(),
-                labelColor: {
-                  id: color.id,
-                  colorHex: color.colorHex,
-                  name: color.name ?? '',
-                  position: 1,
-                },
-              },
-            ]);
-            setTab(0);
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-const OpenLabelsButton = () => {
-  const $buttonRef = createRef<HTMLButtonElement>();
-  const [currentLabel, setCurrentLabel] = useState('');
-  const [labels, setLabels] = useState(labelData);
-  const { showPopup, setTab } = usePopup();
-  return (
-    <OpenLabelBtn
-      ref={$buttonRef}
-      onClick={() => {
-        showPopup($buttonRef, <LabelManagerEditor />);
-      }}
-    >
-      Open
-    </OpenLabelBtn>
-  );
-};
-
-export const LabelsPopup = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <PopupProvider>
-      <OpenLabelsButton />
-    </PopupProvider>
-  );
-};
-
-export const LabelsLabelEditor = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <>
-      {isPopupOpen && (
-        <PopupMenu
-          onPrevious={action('on previous')}
-          title="Change Label"
-          top={10}
-          onClose={() => setPopupOpen(false)}
-          left={10}
-        >
-          <LabelEditor
-            label={labelData[0]}
-            onLabelEdit={action('label edit')}
-            labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          />
-        </PopupMenu>
-      )}
-      <button type="submit" onClick={() => setPopupOpen(true)}>
-        Open
-      </button>
-    </>
-  );
-};
-const initalState = { left: 0, top: 0, isOpen: false };
-
-export const ListActionsPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      {popupData.isOpen && (
-        <PopupMenu
-          title="List Actions"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <ListActions taskGroupID="1" onArchiveTaskGroup={action('archive task group')} />
-        </PopupMenu>
-      )}
-      <button
-        ref={$buttonRef}
-        type="submit"
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </button>
-    </>
-  );
-};
-
-export const MemberManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <MemberManager
-            availableMembers={[
-              {
-                id: '1',
-                fullName: 'Jordan Knott',
-                profileIcon: { bgColor: null, url: null, initials: null },
-              },
-            ]}
-            activeMembers={[]}
-            onMemberChange={action('member change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const DueDateManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <DueDateManager
-            onRemoveDueDate={action('remove due date')}
-            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: { bgColor: null, url: null, initials: null },
-                  fullName: 'Jordan Knott',
-                },
-              ],
-            }}
-            onCancel={action('cancel')}
-            onDueDateChange={action('due date change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const MiniProfilePopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu
-          noHeader
-          title="Due Date"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <MiniProfile
-            user={{
-              id: '1',
-              fullName: 'Jordan Knott',
-              username: 'jordanthedev',
-              profileIcon: { url: null, bgColor: '#000', initials: 'JK' },
-            }}
-            bio="Stuff and things"
-            onRemoveFromTask={action('mini profile')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-          color: '#fff',
-          background: '#f00',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};

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

@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
-import Input from '../Input';
 import ControlledInput from 'shared/components/ControlledInput';
 
 export const Container = styled.div<{
   invertY: boolean;
   invert: boolean;
+  targetPadding: string;
   top: number;
   left: number;
   ref: any;
@@ -16,7 +16,7 @@ export const Container = styled.div<{
   display: block;
   position: absolute;
   width: ${props => props.width}px;
-  padding-top: 10px;
+  padding-top: ${props => props.targetPadding};
   height: auto;
   z-index: 40000;
   ${props =>
@@ -29,14 +29,18 @@ export const Container = styled.div<{
     css`
       top: auto;
       padding-top: 0;
-      padding-bottom: 10px;
+      padding-bottom: ${props.targetPadding};
       bottom: ${props.top}px;
     `}
 `;
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ padding: boolean; borders: boolean }>`
-  padding: 5px;
+  ${props =>
-  padding-top: 8px;
+    props.padding &&
+    css`
+      padding: 5px;
+      padding-top: 8px;
+    `}
   border-radius: 5px;
   box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
   position: relative;
@@ -44,8 +48,12 @@ export const Wrapper = styled.div`
 
   color: #c2c6dc;
   background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  ${props =>
-  border-color: #414561;
+    props.borders &&
+    css`
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-color: #414561;
+    `}
 `;
 
 export const Header = styled.div`
@@ -327,7 +335,7 @@ export const PreviousButton = styled.div`
   cursor: pointer;
 `;
 
-export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }>`
+export const ContainerDiamond = styled.div<{ borders: boolean; color: string; invert: boolean; invertY: boolean }>`
   ${props => (props.invert ? 'right: 10px; ' : 'left: 15px;')}
   position: absolute;
   width: 10px;
@@ -348,6 +356,10 @@ export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }
   transform: rotate(45deg) translate(-7px);
   z-index: 10;
 
-  background: #262c49;
+  background: ${props => props.color};
-  border-color: #414561;
+  ${props =>
+    props.borders &&
+    css`
+      border-color: #414561;
+    `}
 `;

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

@@ -2,6 +2,7 @@ import React, { useRef, createContext, RefObject, useState, useContext, useEffec
 import { Cross, AngleLeft } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
+import NOOP from 'shared/utils/noop';
 import produce from 'immer';
 import {
   Container,
@@ -14,9 +15,37 @@ import {
   Wrapper,
 } from './Styles';
 
+function getPopupOptions(options?: PopupOptions) {
+  const popupOptions = {
+    borders: true,
+    diamondColor: '#262c49',
+    targetPadding: '10px',
+    showDiamond: true,
+    width: 316,
+  };
+  if (options) {
+    if (options.borders) {
+      popupOptions.borders = options.borders;
+    }
+    if (options.width) {
+      popupOptions.width = options.width;
+    }
+    if (options.targetPadding) {
+      popupOptions.targetPadding = options.targetPadding;
+    }
+    if (typeof options.showDiamond !== 'undefined' && options.showDiamond !== null) {
+      popupOptions.showDiamond = options.showDiamond;
+    }
+    if (options.diamondColor) {
+      popupOptions.diamondColor = options.diamondColor;
+    }
+  }
+  return popupOptions;
+}
+
 type PopupContextState = {
-  show: (target: RefObject<HTMLElement>, content: JSX.Element, width?: string | number) => void;
+  show: (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => void;
-  setTab: (newTab: number, width?: number | string) => void;
+  setTab: (newTab: number, options?: PopupOptions) => void;
   getCurrentTab: () => number;
   hide: () => void;
 };
@@ -25,23 +54,44 @@ type PopupProps = {
   title: string | null;
   onClose?: () => void;
   tab: number;
+  padding?: boolean;
+  borders?: boolean;
+  diamondColor?: string;
 };
 
 type PopupContainerProps = {
   top: number;
   left: number;
   invert: boolean;
+  targetPadding: string;
   invertY: boolean;
   onClose: () => void;
   width?: string | number;
 };
 
-const PopupContainer: React.FC<PopupContainerProps> = ({ width, top, left, onClose, children, invert, invertY }) => {
+const PopupContainer: React.FC<PopupContainerProps> = ({
+  width,
+  top,
+  left,
+  onClose,
+  children,
+  invert,
+  invertY,
+  targetPadding,
+}) => {
   const $containerRef = useRef<HTMLDivElement>(null);
   const [currentTop, setCurrentTop] = useState(top);
   useOnOutsideClick($containerRef, true, onClose, null);
   return (
-    <Container width={width ?? 316} left={left} top={currentTop} ref={$containerRef} invert={invert} invertY={invertY}>
+    <Container
+      targetPadding={targetPadding}
+      width={width ?? 316}
+      left={left}
+      top={currentTop}
+      ref={$containerRef}
+      invert={invert}
+      invertY={invertY}
+    >
       {children}
     </Container>
   );
@@ -52,10 +102,10 @@ PopupContainer.defaultProps = {
 };
 
 const PopupContext = createContext<PopupContextState>({
-  show: () => {},
+  show: NOOP,
-  setTab: () => {},
+  setTab: NOOP,
   getCurrentTab: () => 0,
-  hide: () => {},
+  hide: NOOP,
 });
 
 export const usePopup = () => {
@@ -72,13 +122,28 @@ type PopupState = {
   currentTab: number;
   previousTab: number;
   content: JSX.Element | null;
-  width?: string | number;
+  options: PopupOptionsInternal | null;
 };
 
 const { Provider, Consumer } = PopupContext;
 
 const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
+type PopupOptionsInternal = {
+  width: number;
+  borders: boolean;
+  targetPadding: string;
+  diamondColor: string;
+  showDiamond: boolean;
+};
+
+type PopupOptions = {
+  targetPadding?: string | null;
+  showDiamond?: boolean | null;
+  width?: number | null;
+  borders?: boolean | null;
+  diamondColor?: string | null;
+};
 const defaultState = {
   isOpen: false,
   left: 0,
@@ -88,11 +153,12 @@ const defaultState = {
   currentTab: 0,
   previousTab: 0,
   content: null,
+  options: null,
 };
 
 export const PopupProvider: React.FC = ({ children }) => {
   const [currentState, setState] = useState<PopupState>(defaultState);
-  const show = (target: RefObject<HTMLElement>, content: JSX.Element, width?: number | string) => {
+  const show = (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => {
     if (target && target.current) {
       const bounds = target.current.getBoundingClientRect();
       let top = bounds.top + bounds.height;
@@ -101,6 +167,7 @@ export const PopupProvider: React.FC = ({ children }) => {
         top = window.innerHeight - bounds.top;
         invertY = true;
       }
+      const popupOptions = getPopupOptions(options);
       if (bounds.left + 304 + 30 > window.innerWidth) {
         setState({
           isOpen: true,
@@ -111,7 +178,7 @@ export const PopupProvider: React.FC = ({ children }) => {
           currentTab: 0,
           previousTab: 0,
           content,
-          width: width ?? 316,
+          options: popupOptions,
         });
       } else {
         setState({
@@ -123,7 +190,7 @@ export const PopupProvider: React.FC = ({ children }) => {
           currentTab: 0,
           previousTab: 0,
           content,
-          width: width ?? 316,
+          options: popupOptions,
         });
       }
     }
@@ -138,20 +205,21 @@ export const PopupProvider: React.FC = ({ children }) => {
       currentTab: 0,
       previousTab: 0,
       content: null,
+      options: null,
     });
   };
   const portalTarget = canUseDOM ? document.body : null; // appease flow
 
-  const setTab = (newTab: number, width?: number | string) => {
+  const setTab = (newTab: number, options?: PopupOptions) => {
-    const newWidth = width ?? currentState.width;
+    setState((prevState: PopupState) =>
-    setState((prevState: PopupState) => {
+      produce(prevState, draftState => {
-      return {
+        draftState.previousTab = currentState.currentTab;
-        ...prevState,
+        draftState.currentTab = newTab;
-        previousTab: currentState.currentTab,
+        if (options) {
-        currentTab: newTab,
+          draftState.options = getPopupOptions(options);
-        width: newWidth,
+        }
-      };
+      }),
-    });
+    );
   };
 
   const getCurrentTab = () => {
@@ -162,17 +230,26 @@ export const PopupProvider: React.FC = ({ children }) => {
     <Provider value={{ hide, show, setTab, getCurrentTab }}>
       {portalTarget &&
         currentState.isOpen &&
+        currentState.options &&
         createPortal(
           <PopupContainer
             invertY={currentState.invertY}
             invert={currentState.invert}
             top={currentState.top}
+            targetPadding={currentState.options.targetPadding}
             left={currentState.left}
             onClose={() => setState(defaultState)}
-            width={currentState.width ?? 316}
+            width={currentState.options.width}
           >
             {currentState.content}
-            <ContainerDiamond invertY={currentState.invertY} invert={currentState.invert} />
+            {currentState.options.showDiamond && (
+              <ContainerDiamond
+                color={currentState.options.diamondColor}
+                borders={currentState.options.borders}
+                invertY={currentState.invertY}
+                invert={currentState.invert}
+              />
+            )}
           </PopupContainer>,
           portalTarget,
         )}
@@ -196,8 +273,16 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
   useOnOutsideClick($containerRef, true, onClose, null);
 
   return (
-    <Container invertY={false} width={width ?? 316} invert={false} left={left} top={top} ref={$containerRef}>
+    <Container
-      <Wrapper>
+      targetPadding="10px"
+      invertY={false}
+      width={width ?? 316}
+      invert={false}
+      left={left}
+      top={top}
+      ref={$containerRef}
+    >
+      <Wrapper padding borders>
         {onPrevious && (
           <PreviousButton onClick={onPrevious}>
             <AngleLeft color="#c2c6dc" />
@@ -221,7 +306,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
   );
 };
 
-export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) => {
+export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, title, onClose, tab, children }) => {
   const { getCurrentTab, setTab } = usePopup();
   if (getCurrentTab() !== tab) {
     return null;
@@ -229,7 +314,7 @@ export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) =
 
   return (
     <>
-      <Wrapper>
+      <Wrapper borders={borders} padding={padding}>
         {tab > 0 && (
           <PreviousButton
             onClick={() => {

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

@@ -13,7 +13,7 @@ export const AddProjectItem: React.FC<AddProjectItemProps> = ({ onAddProject })
         onAddProject();
       }}
     >
-      <Plus size={20} color="#c2c6dc" />
+      <Plus width={12} height={12} />
       <AddProjectLabel>New Project</AddProjectLabel>
     </AddProjectWrapper>
   );

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

@@ -5,6 +5,7 @@ import CardComposer from 'shared/components/CardComposer';
 import LabelColors from 'shared/constants/labelColors';
 import List, { ListCards } from 'shared/components/List';
 import QuickCardEditor from 'shared/components/QuickCardEditor';
+import NOOP from 'shared/utils/noop';
 
 export default {
   component: QuickCardEditor,
@@ -71,7 +72,7 @@ export const Default = () => {
         isComposerOpen={false}
         onSaveName={action('on save name')}
         onOpenComposer={action('on open composer')}
-        onExtraMenuOpen={(taskGroupID, $targetRef) => {}}
+        onExtraMenuOpen={NOOP}
       >
         <ListCards>
           <Card
@@ -81,7 +82,7 @@ export const Default = () => {
             ref={$cardRef}
             title={task.name}
             onClick={action('on click')}
-            onContextMenu={e => {
+            onContextMenu={() => {
               setTarget($cardRef);
               setEditorOpen(true);
             }}
@@ -90,7 +91,7 @@ export const Default = () => {
             checklists={{ complete: 1, total: 4 }}
             dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
           />
-          <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+          <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
         </ListCards>
       </List>
     </>

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

@@ -55,7 +55,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   ref={register({ required: 'Full name is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}
@@ -68,7 +68,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   ref={register({ required: 'Username is required' })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.username && <FormError>{errors.username.message}</FormError>}
@@ -84,7 +84,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.email && <FormError>{errors.email.message}</FormError>}
@@ -103,7 +103,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                   })}
                 />
                 <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                 </FormIcon>
               </FormLabel>
               {errors.initials && <FormError>{errors.initials.message}</FormError>}

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

@@ -3,6 +3,19 @@ import Select from 'react-select';
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 
+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
 const colourStyles = {
   control: (styles: any, data: any) => {
     return {
@@ -43,14 +56,8 @@ const colourStyles = {
   option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
     return {
       ...styles,
-      backgroundColor: isDisabled
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
-        ? null
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],

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

@@ -218,7 +218,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
       }}
     >
       <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <User width={20} height={20} />
         <TabNavItemSpan>{name}</TabNavItemSpan>
       </TabNavItemButton>
     </TabNavItem>

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

@@ -1,288 +1,365 @@
-import styled from 'styled-components';
+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';
 import TaskAssignee from 'shared/components/TaskAssignee';
+import { User, Trash, Paperclip } from 'shared/icons';
+import Member from 'shared/components/Member';
 
-export const TaskHeader = styled.div`
+export const Container = styled.div`
-  padding: 21px 30px 0px;
+  display: flex;
-  margin-right: 70px;
+  height: 100%;
+`;
+
+export const LeftSidebar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  background: #222740;
+`;
+
+export const MarkCompleteButton = styled.button<{ invert: boolean }>`
+  padding: 4px 8px;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  border-radius: ${props => props.theme.borderRadius.alternate};
+  display: flex;
+  align-items: center;
+  background: transparent;
+  & span {
+    margin-left: 4px;
+  }
+  ${props =>
+    props.invert
+      ? css`
+          background: rgba(${props.theme.colors.success});
+          & svg {
+            fill: rgba(${props.theme.colors.text.secondary});
+          }
+          & span {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors.success}, 0.8);
+          }
+        `
+      : css`
+          background: none;
+          border: 1px solid rgba(${props.theme.colors.text.secondary});
+          & svg {
+            fill: rgba(${props.theme.colors.text.secondary});
+          }
+          & span {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors.success}, 0.08);
+            border: 1px solid rgba(${props.theme.colors.success});
+          }
+          &:hover svg {
+            fill: rgba(${props.theme.colors.success});
+          }
+          &:hover span {
+            color: rgba(${props.theme.colors.success});
+          }
+        `}
+`;
+
+export const LeftSidebarContent = styled.div`
+  padding-top: 32px;
   display: flex;
   flex-direction: column;
 `;
 
-export const TaskMeta = styled.div`
+export const LeftSidebarSection = styled.div`
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #414561;
+`;
+
+export const SidebarTitle = styled.div`
+  font-size: 12px;
+  min-height: 24px;
+  margin-left: 8px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  padding-top: 4px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+`;
+
+export const SidebarButton = styled.div`
+  font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.primary});
+  min-height: 32px;
+  width: 100%;
+
+  padding: 9px 8px 7px 8px;
+  border-color: transparent;
+  border-radius: 6px;
+  border-width: 1px;
+  border-style: solid;
+
+  display: inline-block;
+  outline: 0;
   cursor: pointer;
-  font-size: 14px;
+  &:hover {
+    border-color: #414561;
+  }
+`;
+
+export const SidebarButtonText = styled.span`
+  min-height: 16px;
+  flex: 1 1 auto;
   display: flex;
-  align-items: center;
+  justify-content: flex-start;
-  border-radius: 4px;
 `;
 
-export const TaskGroupLabel = styled.span`
+export const ContentContainer = styled.div`
-  color: #c2c6dc;
-  font-size: 14px;
-`;
-export const TaskGroupLabelName = styled.span`
-  color: #c2c6dc;
-  text-decoration: underline;
-  font-size: 14px;
-`;
-
-export const TaskActions = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 21px 18px 0px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-`;
-
-export const TaskAction = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  cursor: pointer;
-  padding: 0px 9px;
-`;
-
-export const TaskDetailsWrapper = styled.div`
-  display: flex;
-  padding: 0px 16px 60px;
-`;
-
-export const TaskDetailsContent = styled.div`
   flex: 1;
-  padding-right: 8px;
+  padding-top: 32px;
+  overflow: auto;
 `;
 
-export const TaskDetailsSidebar = styled.div`
+export const HeaderContainer = styled.div`
-  width: 168px;
+  flex: 0 0 auto;
-  padding-left: 8px;
+  padding: 0px 32px 0px 24px;
+`;
+
+export const HeaderInnerContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 0 0;
+  padding: 0 0 0 4px;
+`;
+
+export const HeaderLeft = styled.div`
+  display: flex;
+  justify-content: flex-start;
 `;
 
 export const TaskDetailsTitleWrapper = styled.div`
   width: 100%;
-  margin: 0 0 0 -8px;
+  margin: 8px 0 4px 0;
   display: inline-block;
 `;
 
 export const TaskDetailsTitle = styled(TextareaAutosize)`
-  line-height: 1.28;
+  padding: 9px 8px 7px 8px;
-  resize: none;
+  border-color: transparent;
-  box-shadow: transparent 0px 0px 0px 1px;
+  border-radius: 6px;
-  font-size: 24px;
-  font-weight: 700;
-  padding: 4px;
-  background: #262c49;
   border-width: 1px;
   border-style: solid;
-  border-color: transparent;
-  border-image: initial;
-  transition: background 0.1s ease 0s;
-  overflow-y: hidden;
   width: 100%;
   color: #c2c6dc;
-  &:focus {
+  display: inline-block;
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+  outline: 0;
-    background: ${mixin.darken('#262c49', 0.15)};
+  font-size: 24px;
-  }
+  font-weight: 700;
-`;
+  background: none;
 
-export const TaskDetailsLabel = styled.div`
-  padding: 24px 0px 12px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #c2c6dc;
-`;
-
-export const TaskDetailsAddDetailsButton = styled.div`
-  background: ${mixin.darken('#262c49', 0.15)};
-  box-shadow: none;
-  border: none;
-  border-radius: 3px;
-  display: block;
-  min-height: 56px;
-  padding: 8px 12px;
-  text-decoration: none;
-  font-size: 14px;
-  cursor: pointer;
-  color: #c2c6dc;
   &:hover {
-    background: ${mixin.darken('#262c49', 0.25)};
+    border-color: #414561;
-    box-shadow: none;
-    border: none;
   }
-`;
-
-export const TaskDetailsEditorWrapper = styled.div`
-  display: block;
-  padding-bottom: 9px;
-  z-index: 50;
-  width: 100%;
-`;
-
-export const TaskDetailsEditor = styled(TextareaAutosize)`
-  width: 100%;
-  min-height: 108px;
-  color: #c2c6dc;
-  background: #262c49;
-  box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-  border-radius: 3px;
-  line-height: 20px;
-  padding: 8px 12px;
-  outline: none;
-  border: none;
 
   &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    border-color: rgba(${props => props.theme.colors.primary});
-    background: ${mixin.darken('#262c49', 0.05)};
   }
 `;
 
-export const TaskDetailsMarkdown = styled.div`
+export const DueDateTitle = styled.div`
-  width: 100%;
+  font-size: 12px;
+  min-height: 24px;
+  margin-left: 8px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  padding-top: 8px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+`;
+
+export const AssignedUsersSection = styled.div`
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #414561;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const AssignUserIcon = styled.div`
   cursor: pointer;
-  color: #c2c6dc;
+  height: 32px;
-
+  width: 32px;
-  h1 {
+  position: relative;
-    font-size: 24px;
+  border-radius: 50%;
-    font-weight: 600;
+  border: 1px dashed #414561;
-    line-height: 28px;
+  margin-right: 8px;
-    margin: 0 0 12px;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
   }
-
+  &:hover svg {
-  h2 {
+    fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    margin: 16px 0 8px;
   }
+`;
 
-  p {
+export const AssignUsersButton = styled.div`
-    margin: 0 0 8px;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1 1 auto;
+  height: 40px;
+  padding: 4px 16px 4px 8px;
+  margin-left: -1px;
+  border-radius: 6px;
+  align-items: center;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid ${mixin.darken('#414561', 0.15)};
   }
+  &:hover ${AssignUserIcon} {
+    border: 1px solid #414561;
+  }
+`;
 
-  strong {
+export const AssignUserLabel = styled.span`
-    font-weight: 700;
+  flex: 1 1 auto;
+  line-height: 15px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+`;
+
+export const ExtraActionsSection = styled.div`
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionButtonsTitle = styled.h3`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+`;
+
+export const ActionButton = styled(Button)`
+  margin-top: 8px;
+  margin-left: -10px;
+  padding: 8px 16px;
+  background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
+  text-align: left;
+  transition: transform 0.2s ease;
+  & span {
+    justify-content: flex-start;
   }
+  &:hover {
+    box-shadow: none;
+    transform: translateX(4px);
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
+  }
+`;
+
+export const HeaderRight = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const HeaderActionIcon = styled.div`
+  padding: 4px 4px 4px 4px;
+  margin: 0 4px 0 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  svg {
+    fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  }
+  &:hover svg {
+    fill: rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+export const EditorContainer = styled.div`
+  margin-left: 32px;
+  margin-right: 32px;
+
+  padding: 9px 8px 7px 8px;
+  border-color: transparent;
+  border-radius: 6px;
+  border-width: 1px;
+  border-style: solid;
+  outline: 0;
+  background: none;
 
   ul {
-    margin: 8px 0;
+    list-style-type: disc;
   }
 
-  ul > li {
+  ul.checkbox_list input[type='checkbox'] {
-    margin: 8px 8px 8px 24px;
+    border-radius: 6px;
-    list-style: disc;
+    border-width: 1px;
-  }
+    border-style: solid;
-
+    border-color: #414561;
-  p a {
-    color: rgba(${props => props.theme.colors.primary});
   }
 `;
 
-export const TaskDetailsControls = styled.div`
+export const InnerContentContainer = styled.div`
-  clear: both;
+  overflow: auto;
-  margin-top: 8px;
+  position: relative;
+`;
+
+export const DescriptionContainer = styled.div`
+  position: relative;
   display: flex;
+  flex-direction: column;
 `;
 
-export const ConfirmSave = styled(Button)`
+export const DescriptionActionButton = styled(Button)`
-  padding: 6px 12px;
+  padding: 8px 16px;
-  border-radius: 3px;
-  margin-right: 6px;
 `;
 
-export const CancelEdit = styled.div`
+export const Labels = styled.div`
   display: flex;
-  align-items: center;
+  padding-left: 9px;
-  justify-content: center;
+  margin: 0 0 8px 0;
-  height: 32px;
-  width: 32px;
-  cursor: pointer;
 `;
 
-export const TaskDetailSectionTitle = styled.div`
+export const MetaDetail = styled.div`
-  text-transform: uppercase;
-  color: #c2c6dc;
-  font-size: 12.5px;
-  font-weight: 600;
-  margin: 24px 0px 5px;
-`;
-
-export const TaskDetailAssignees = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
-export const TaskDetailAssignee = styled.div`
-  &:hover {
-    opacity: 0.8;
-  }
-  margin-right: 4px;
-`;
-
-export const ProfileIcon = styled.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 700;
-  background: rgb(115, 103, 240);
-  cursor: pointer;
-`;
-
-export const TaskDetailsAddMemberIcon = styled.div`
-  float: left;
-  height: 32px;
-  width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background: ${mixin.darken('#262c49', 0.15)};
-  cursor: pointer;
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-export const TaskDetailLabels = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-export const TaskDetailLabel = styled.div<{ color: string }>`
-  &:hover {
-    opacity: 0.8;
-  }
-  background-color: ${props => props.color};
-  color: #fff;
-
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  border-radius: 3px;
-  box-sizing: border-box;
   display: block;
   float: left;
-  font-weight: 600;
+  margin: 0 16px 8px 0;
-  height: 32px;
+  max-width: 100%;
-  line-height: 32px;
-  margin: 0 4px 4px 0;
-  min-width: 40px;
-  padding: 0 12px;
-  width: auto;
 `;
 
+export const MetaDetailTitle = styled.h3`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin-top: 16px;
+  text-transform: uppercase;
+  display: block;
+  line-height: 20px;
+  margin: 0 8px 4px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const MetaDetailContent = styled.div`
+  display: flex;
+`;
 export const TaskDetailsAddLabel = styled.div`
   border-radius: 3px;
   background: ${mixin.darken('#262c49', 0.15)};
@@ -307,90 +384,204 @@ export const TaskDetailsAddLabelIcon = styled.div`
   }
 `;
 
-export const NoDueDateLabel = styled.span`
+export const ChecklistSection = styled.div`
-  color: rgb(137, 147, 164);
+  margin-top: 8px;
-  font-size: 14px;
+  padding: 0 24px;
-  cursor: pointer;
 `;
 
-export const UnassignedLabel = styled.div`
+export const TaskDetailLabel = styled.div<{ color: string }>`
-  color: rgb(137, 147, 164);
+  &:hover {
-  font-size: 14px;
+    opacity: 0.8;
+  }
+  background-color: ${props => props.color};
+  color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  font-weight: 600;
   height: 32px;
+  line-height: 32px;
+  margin: 0 4px 0 0;
+  min-width: 40px;
+  padding: 0 12px;
+  width: auto;
 `;
 
-export const ActionButtons = styled.div`
+export const MemberList = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 16px 4px 8px;
+  margin-left: -1px;
+`;
+
+export const TaskMember = styled(TaskAssignee)`
+  margin-right: 4px;
+`;
+
+export const ActionButtonIcon = styled.div``;
+
+export const EditorActions = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin-left: 32px;
+  margin-right: 32px;
+  padding: 9px 8px 7px 8px;
+`;
+
+export const CancelIcon = styled.div`
+  width: 32px;
+  height: 32p;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+`;
+
+export const TabBarSection = styled.div`
+  margin-top: 2px;
+  padding-left: 23px;
+  display: flex;
+  text-transform: uppercase;
+  min-height: 35px;
+  border-bottom: 1px solid #414561;
+`;
+
+export const TabBarItem = styled.div`
+  box-shadow: inset 0 -2px rgba(216, 93, 216);
+  padding: 12px 7px 14px 7px;
+  margin-bottom: -1px;
+  margin-right: 36px;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+export const CommentContainer = styled.div`
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding: 15px 26px;
+  background: #1f243e;
+`;
+
+export const CommentInnerWrapper = styled.div`
+  display: flex;
+  position: relative;
+`;
+
+export const CommentEditorContainer = styled.div`
+  flex: 1;
+  border-radius: 6px;
+  border: 1px solid #414561;
   display: flex;
   flex-direction: column;
 `;
-
+export const CommentProfile = styled(TaskAssignee)`
-export const ActionButtonsTitle = styled.h3`
+  margin-right: 8px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  position: relative;
-  font-size: 12px;
+  top: 0;
-  font-weight: 500;
+  padding-top: 3px;
-  letter-spacing: 0.04em;
+  align-items: normal;
 `;
 
-export const ActionButton = styled(Button)`
+export const CommentTextArea = styled(TextareaAutosize)`
-  margin-top: 8px;
+  width: 100%;
-  padding: 6px 12px;
+  line-height: 28px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+  padding: 4px 6px;
-  text-align: left;
+  border-radius: 6px;
-  &:hover {
+  color: rgba(${props => props.theme.colors.text.primary});
-    box-shadow: none;
+  background: #1f243e;
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
+  border: none;
+  transition: max-height 200ms, height 200ms, min-height 200ms;
+  min-height: 36px;
+  max-height: 36px;
+  &:not(:focus) {
+    height: 36px;
+  }
+  &:focus {
+    min-height: 80px;
+    max-height: none;
+    line-height: 20px;
   }
 `;
 
-export const MetaDetails = styled.div`
+export const CommentEditorActions = styled.div<{ visible: boolean }>`
-  margin-top: 8px;
+  display: ${props => (props.visible ? 'flex' : 'none')};
-  display: flex;
+  align-items: center;
+  padding: 5px 5px 5px 9px;
+  border-top: 1px solid #414561;
 `;
 
-export const TaskDueDateButton = styled(Button)`
+export const CommentEditorActionIcon = styled.div`
+  width: 32px;
   height: 32px;
-  padding: 6px 12px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
-  &:hover {
-    box-shadow: none;
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
-  }
-`;
-
-export const MetaDetail = styled.div`
-  display: block;
-  float: left;
-  margin: 0 16px 8px 0;
-  max-width: 100%;
-`;
-
-export const TaskDetailsSection = styled.div`
-  display: block;
-`;
-
-export const MetaDetailTitle = styled.h3`
-  color: rgba(${props => props.theme.colors.text.primary});
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  margin-top: 16px;
-  text-transform: uppercase;
-  display: block;
-  line-height: 20px;
-  margin: 0 8px 4px 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-export const TaskMember = styled(TaskAssignee)``;
-
-export const MetaDetailContent = styled.div`
   display: flex;
-  & ${TaskMember} {
+  align-items: center;
-    margin-right: 4px;
+  justify-content: center;
-  }
+`;
+
+export const CommentEditorSaveButton = styled(Button)`
+  margin-left: auto;
+  padding: 8px 16px;
+`;
+
+export const ActivitySection = styled.div`
+  overflow-x: hidden;
+
+  padding: 8px 26px;
+`;
+
+export const ActivityItem = styled.div`
+  padding: 8px 0;
+  position: relative;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+`;
+
+export const ActivityItemHeader = styled.div`
+  display: flex;
+`;
+export const ActivityItemHeaderUser = styled(TaskAssignee)`
+  margin-right: 4px;
+`;
+
+export const ActivityItemHeaderTitle = styled.div`
+  margin-left: 4px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+`;
+
+export const ActivityItemHeaderTitleName = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-weight: 500;
+`;
+
+export const ActivityItemTimestamp = styled.span<{ margin: number }>`
+  font-size: 12px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.65);
+  margin-left: ${props => props.margin}px;
+`;
+
+export const ActivityItemDetails = styled.div`
+  margin-left: 32px;
+`;
+
+export const ActivityItemComment = styled.div`
+  display: inline-flex;
+  border-radius: 3px;
+  ${mixin.boxShadowCard}
+  position: relative;
+  color: rgba(${props => props.theme.colors.text.primary});
+  padding: 8px 12px;
+  margin: 4px 0;
+  background-color: ${mixin.darken('#262c49', 0.1)};
+`;
+
+export const ActivityItemLog = styled.span`
+  margin-left: 2px;
+  color: rgba(${props => props.theme.colors.text.primary});
 `;

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

@@ -1,69 +1,75 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
-import { Bin, Cross, Plus } from 'shared/icons';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import ReactMarkdown from 'react-markdown';
-
 import {
-  isPositionChanged,
+  Plus,
-  getSortedDraggables,
+  User,
-  getNewDraggablePosition,
+  Trash,
-  getAfterDropDraggableList,
+  Paperclip,
-} from 'shared/utils/draggables';
+  Clone,
-import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+  Share,
-import TaskAssignee from 'shared/components/TaskAssignee';
+  Tags,
-import moment from 'moment';
+  Checkmark,
-
+  CheckSquareOutline,
-import {
+  At,
-  TaskMember,
+  Smile,
-  NoDueDateLabel,
+} from 'shared/icons';
-  TaskDueDateButton,
+import Editor from 'rich-markdown-editor';
-  UnassignedLabel,
+import dark from 'shared/utils/editorTheme';
-  TaskGroupLabel,
-  TaskGroupLabelName,
-  TaskDetailsSection,
-  TaskActions,
-  TaskDetailsAddLabel,
-  TaskDetailsAddLabelIcon,
-  TaskAction,
-  TaskMeta,
-  ActionButtons,
-  ActionButton,
-  ActionButtonsTitle,
-  TaskHeader,
-  ProfileIcon,
-  TaskDetailsContent,
-  TaskDetailsWrapper,
-  TaskDetailsSidebar,
-  TaskDetailsTitleWrapper,
-  TaskDetailsTitle,
-  TaskDetailsLabel,
-  TaskDetailsAddDetailsButton,
-  TaskDetailsEditor,
-  TaskDetailsEditorWrapper,
-  TaskDetailsMarkdown,
-  TaskDetailsControls,
-  ConfirmSave,
-  CancelEdit,
-  TaskDetailSectionTitle,
-  TaskDetailLabel,
-  TaskDetailLabels,
-  TaskDetailAssignee,
-  TaskDetailAssignees,
-  TaskDetailsAddMemberIcon,
-  MetaDetails,
-  MetaDetail,
-  MetaDetailTitle,
-  MetaDetailContent,
-} from './Styles';
-import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import styled from 'styled-components';
 
-const ChecklistContainer = styled.div``;
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import moment from 'moment';
 
-type TaskContentProps = {
+import Task from 'shared/icons/Task';
-  onEditContent: () => void;
+import {
-  description: string;
+  TaskDetailLabel,
-};
+  CommentContainer,
+  MetaDetailContent,
+  TaskDetailsAddLabelIcon,
+  ActionButton,
+  AssignUserIcon,
+  AssignUserLabel,
+  AssignUsersButton,
+  AssignedUsersSection,
+  DueDateTitle,
+  Container,
+  LeftSidebar,
+  ContentContainer,
+  LeftSidebarContent,
+  LeftSidebarSection,
+  SidebarTitle,
+  SidebarButton,
+  SidebarButtonText,
+  MarkCompleteButton,
+  HeaderContainer,
+  HeaderLeft,
+  HeaderInnerContainer,
+  TaskDetailsTitleWrapper,
+  TaskDetailsTitle,
+  ExtraActionsSection,
+  HeaderRight,
+  HeaderActionIcon,
+  EditorContainer,
+  InnerContentContainer,
+  DescriptionContainer,
+  Labels,
+  ChecklistSection,
+  MemberList,
+  TaskMember,
+  TabBarSection,
+  TabBarItem,
+  CommentTextArea,
+  CommentEditorContainer,
+  CommentEditorActions,
+  CommentEditorActionIcon,
+  CommentEditorSaveButton,
+  CommentProfile,
+  CommentInnerWrapper,
+  ActivitySection,
+} from './Styles';
+import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
+import onDragEnd from './onDragEnd';
+
+const ChecklistContainer = styled.div``;
 
 type TaskLabelProps = {
   label: TaskLabel;
@@ -85,62 +91,15 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
   );
 };
 
-const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
-  return description === '' ? (
-    <TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
-  ) : (
-    <TaskDetailsMarkdown onClick={onEditContent}>
-      <ReactMarkdown source={description} />
-    </TaskDetailsMarkdown>
-  );
-};
-
 type DetailsEditorProps = {
   description: string;
   onTaskDescriptionChange: (newDescription: string) => void;
   onCancel: () => void;
 };
 
-const DetailsEditor: React.FC<DetailsEditorProps> = ({
-  description: initialDescription,
-  onTaskDescriptionChange,
-  onCancel,
-}) => {
-  const [description, setDescription] = useState(initialDescription);
-  const $editorWrapperRef = useRef<HTMLDivElement>(null);
-  const $editorRef = useRef<HTMLTextAreaElement>(null);
-  const handleOutsideClick = () => {
-    onTaskDescriptionChange(description);
-  };
-  useEffect(() => {
-    if ($editorRef && $editorRef.current) {
-      $editorRef.current.focus();
-      $editorRef.current.select();
-    }
-  }, []);
-
-  useOnOutsideClick($editorWrapperRef, true, handleOutsideClick, null);
-  return (
-    <TaskDetailsEditorWrapper ref={$editorWrapperRef}>
-      <TaskDetailsEditor
-        ref={$editorRef}
-        value={description}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.currentTarget.value)}
-      />
-      <TaskDetailsControls>
-        <ConfirmSave variant="relief" onClick={handleOutsideClick}>
-          Save
-        </ConfirmSave>
-        <CancelEdit onClick={onCancel}>
-          <Plus size={16} color="#c2c6dc" />
-        </CancelEdit>
-      </TaskDetailsControls>
-    </TaskDetailsEditorWrapper>
-  );
-};
-
 type TaskDetailsProps = {
   task: Task;
+  me?: TaskUser | null;
   onTaskNameChange: (task: Task, newName: string) => void;
   onTaskDescriptionChange: (task: Task, newDescription: string) => void;
   onDeleteTask: (task: Task) => void;
@@ -162,6 +121,7 @@ type TaskDetailsProps = {
 };
 
 const TaskDetails: React.FC<TaskDetailsProps> = ({
+  me,
   task,
   onDeleteChecklist,
   onTaskNameChange,
@@ -182,209 +142,198 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   onToggleChecklistItem,
   onMemberProfile,
 }) => {
-  const [editorOpen, setEditorOpen] = useState(false);
-  const [description, setDescription] = useState(task.description ?? '');
   const [taskName, setTaskName] = useState(task.name);
-  const handleClick = () => {
+  const [editTaskDescription, setEditTaskDescription] = useState(() => {
-    setEditorOpen(!editorOpen);
+    if (task.description) {
-  };
+      if (task.description.trim() === '' || task.description.trim() === '\\') {
-  const handleDeleteTask = () => {
+        return true;
-    onDeleteTask(task);
-  };
-  const $title = useRef<HTMLTextAreaElement>(null);
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onTaskNameChange(task, taskName);
-      if ($title && $title.current) {
-        $title.current.blur();
       }
+      return false;
     }
-  };
+    return true;
-  const $unassignedRef = useRef<HTMLDivElement>(null);
+  });
-  const $addMemberRef = useRef<HTMLDivElement>(null);
+  const [saveTimeout, setSaveTimeout] = useState<any>(null);
-  const onUnassignedClick = () => {
+  const [showCommentActions, setShowCommentActions] = useState(false);
-    onOpenAddMemberPopup(task, $unassignedRef);
+  const taskDescriptionRef = useRef(task.description ?? '');
-  };
+  const $noMemberBtn = useRef<HTMLDivElement>(null);
-  const onAddMember = ($target: React.RefObject<HTMLElement>) => {
+  const $addMemberBtn = useRef<HTMLDivElement>(null);
-    onOpenAddMemberPopup(task, $target);
+  const $dueDateBtn = useRef<HTMLDivElement>(null);
-  };
-  const onAddChecklist = ($target: React.RefObject<HTMLElement>) => {
-    onOpenAddChecklistPopup(task, $target);
-  };
-  const $dueDateLabel = useRef<HTMLDivElement>(null);
-  const $addLabelRef = useRef<HTMLDivElement>(null);
 
-  const onAddLabel = ($target: React.RefObject<HTMLElement>) => {
+  const saveDescription = () => {
-    onOpenAddLabelPopup(task, $target);
+    onTaskDescriptionChange(task, taskDescriptionRef.current);
   };
-
-  const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
-    if (typeof destination === 'undefined') return;
-    if (!isPositionChanged(source, destination)) return;
-
-    const isChecklist = type === 'checklist';
-    const isSameChecklist = destination.droppableId === source.droppableId;
-    let droppedDraggable: DraggableElement | null = null;
-    let beforeDropDraggables: Array<DraggableElement> | null = null;
-
-    if (!task.checklists) return;
-    if (isChecklist) {
-      const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
-      if (droppedGroup) {
-        droppedDraggable = {
-          id: draggableId,
-          position: droppedGroup.position,
-        };
-        beforeDropDraggables = getSortedDraggables(
-          task.checklists.map(checklist => {
-            return { id: checklist.id, position: checklist.position };
-          }),
-        );
-        if (droppedDraggable === null || beforeDropDraggables === null) {
-          throw new Error('before drop draggables is null');
-        }
-        const afterDropDraggables = getAfterDropDraggableList(
-          beforeDropDraggables,
-          droppedDraggable,
-          isChecklist,
-          isSameChecklist,
-          destination,
-        );
-        const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
-        onChecklistDrop({ ...droppedGroup, position: newPosition });
-      } else {
-        throw { error: 'task group can not be found' };
-      }
-    } else {
-      const targetChecklist = task.checklists.findIndex(
-        checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
-      );
-      const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
-
-      if (droppedChecklistItem) {
-        droppedDraggable = {
-          id: draggableId,
-          position: droppedChecklistItem.position,
-        };
-        beforeDropDraggables = getSortedDraggables(
-          task.checklists[targetChecklist].items.map(item => {
-            return { id: item.id, position: item.position };
-          }),
-        );
-        if (droppedDraggable === null || beforeDropDraggables === null) {
-          throw new Error('before drop draggables is null');
-        }
-        const afterDropDraggables = getAfterDropDraggableList(
-          beforeDropDraggables,
-          droppedDraggable,
-          isChecklist,
-          isSameChecklist,
-          destination,
-        );
-        const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
-        const newItem = {
-          ...droppedChecklistItem,
-          position: newPosition,
-        };
-        onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
-      }
-    }
-  };
-
   return (
-    <>
+    <Container>
-      <TaskActions>
+      <LeftSidebar>
-        <TaskAction onClick={handleDeleteTask}>
+        <LeftSidebarContent>
-          <Bin size={20} color="#c2c6dc" />
+          <LeftSidebarSection>
-        </TaskAction>
+            <SidebarTitle>TASK GROUP</SidebarTitle>
-        <TaskAction onClick={onCloseModal}>
+            <SidebarButton>
-          <Cross width={16} height={16} />
+              <SidebarButtonText>Release 0.1.0</SidebarButtonText>
-        </TaskAction>
+            </SidebarButton>
-      </TaskActions>
+            <DueDateTitle>DUE DATE</DueDateTitle>
-      <TaskHeader>
+            <SidebarButton
-        <TaskDetailsTitleWrapper>
+              ref={$dueDateBtn}
-          <TaskDetailsTitle
+              onClick={() => {
-            ref={$title}
+                onOpenDueDatePopop(task, $dueDateBtn);
-            value={taskName}
+              }}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setTaskName(e.currentTarget.value)}
+            >
-            onKeyDown={onKeyDown}
+              {task.dueDate ? (
-          />
+                <SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
-        </TaskDetailsTitleWrapper>
+              ) : (
-        <TaskMeta>
+                <SidebarButtonText>No due date</SidebarButtonText>
-          {task.taskGroup.name && (
+              )}
-            <TaskGroupLabel>
+            </SidebarButton>
-              in list <TaskGroupLabelName>{task.taskGroup.name}</TaskGroupLabelName>
+          </LeftSidebarSection>
-            </TaskGroupLabel>
+          <AssignedUsersSection>
-          )}
+            <DueDateTitle>MEMBERS</DueDateTitle>
-        </TaskMeta>
+            {task.assigned && task.assigned.length !== 0 ? (
-      </TaskHeader>
+              <MemberList>
-      <TaskDetailsWrapper>
+                {task.assigned.map(m => (
-        <TaskDetailsContent>
+                  <TaskMember
-          <MetaDetails>
+                    key={m.id}
-            {task.assigned && task.assigned.length !== 0 && (
+                    member={m}
-              <MetaDetail>
+                    size={32}
-                <MetaDetailTitle>MEMBERS</MetaDetailTitle>
+                    onMemberProfile={$target => {
-                <MetaDetailContent>
+                      onMemberProfile($target, m.id);
-                  {task.assigned &&
+                    }}
-                    task.assigned.map(member => (
+                  />
-                      <TaskMember key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
+                ))}
-                    ))}
+                <AssignUserIcon
-                  <TaskDetailsAddMemberIcon ref={$addMemberRef} onClick={() => onAddMember($addMemberRef)}>
+                  ref={$addMemberBtn}
-                    <Plus size={16} color="#c2c6dc" />
+                  onClick={() => {
-                  </TaskDetailsAddMemberIcon>
+                    onOpenAddMemberPopup(task, $addMemberBtn);
-                </MetaDetailContent>
+                  }}
-              </MetaDetail>
+                >
-            )}
+                  <Plus width={16} height={16} />
-            {task.labels.length !== 0 && (
+                </AssignUserIcon>
-              <MetaDetail>
+              </MemberList>
-                <MetaDetailTitle>LABELS</MetaDetailTitle>
+            ) : (
-                <MetaDetailContent>
+              <AssignUsersButton
-                  {task.labels.map(label => {
+                ref={$noMemberBtn}
-                    return (
+                onClick={() => {
-                      <TaskLabelItem
+                  onOpenAddMemberPopup(task, $noMemberBtn);
-                        key={label.projectLabel.id}
-                        label={label}
-                        onClick={$target => {
-                          onOpenAddLabelPopup(task, $target);
-                        }}
-                      />
-                    );
-                  })}
-                  <TaskDetailsAddLabelIcon ref={$addLabelRef} onClick={() => onAddLabel($addLabelRef)}>
-                    <Plus size={16} color="#c2c6dc" />
-                  </TaskDetailsAddLabelIcon>
-                </MetaDetailContent>
-              </MetaDetail>
-            )}
-            {task.dueDate && (
-              <MetaDetail>
-                <MetaDetailTitle>DUE DATE</MetaDetailTitle>
-                <MetaDetailContent>
-                  <TaskDueDateButton>{moment(task.dueDate).format('MMM D [at] h:mm A')}</TaskDueDateButton>
-                </MetaDetailContent>
-              </MetaDetail>
-            )}
-          </MetaDetails>
-
-          <TaskDetailsSection>
-            <TaskDetailsLabel>Description</TaskDetailsLabel>
-            {editorOpen ? (
-              <DetailsEditor
-                description={description}
-                onTaskDescriptionChange={newDescription => {
-                  setEditorOpen(false);
-                  setDescription(newDescription);
-                  onTaskDescriptionChange(task, newDescription);
                 }}
-                onCancel={() => {
+              >
-                  setEditorOpen(false);
+                <AssignUserIcon>
+                  <User width={16} height={16} />
+                </AssignUserIcon>
+                <AssignUserLabel>No members</AssignUserLabel>
+              </AssignUsersButton>
+            )}
+          </AssignedUsersSection>
+          <ExtraActionsSection>
+            <DueDateTitle>ACTIONS</DueDateTitle>
+            <ActionButton
+              onClick={$target => {
+                onOpenAddLabelPopup(task, $target);
+              }}
+              icon={<Tags width={12} height={12} />}
+            >
+              Labels
+            </ActionButton>
+            <ActionButton
+              onClick={$target => {
+                onOpenAddChecklistPopup(task, $target);
+              }}
+              icon={<CheckSquareOutline width={12} height={12} />}
+            >
+              Checklist
+            </ActionButton>
+            <ActionButton>Cover</ActionButton>
+          </ExtraActionsSection>
+        </LeftSidebarContent>
+      </LeftSidebar>
+      <ContentContainer>
+        <HeaderContainer>
+          <HeaderInnerContainer>
+            <HeaderLeft>
+              <MarkCompleteButton
+                invert={task.complete ?? false}
+                onClick={() => {
+                  onToggleTaskComplete(task);
+                }}
+              >
+                <Checkmark width={8} height={8} />
+                <span>{task.complete ? 'Completed' : 'Mark complete'}</span>
+              </MarkCompleteButton>
+            </HeaderLeft>
+            <HeaderRight>
+              <HeaderActionIcon>
+                <Paperclip width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Clone width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Share width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon onClick={() => onDeleteTask(task)}>
+                <Trash width={16} height={16} />
+              </HeaderActionIcon>
+            </HeaderRight>
+          </HeaderInnerContainer>
+          <TaskDetailsTitleWrapper>
+            <TaskDetailsTitle
+              value={taskName}
+              onChange={e => {
+                setTaskName(e.currentTarget.value);
+              }}
+              onBlur={() => {
+                if (taskName !== task.name) {
+                  onTaskNameChange(task, taskName);
+                }
+              }}
+            />
+          </TaskDetailsTitleWrapper>
+          <Labels>
+            {task.labels.length !== 0 && (
+              <MetaDetailContent>
+                {task.labels.map(label => {
+                  return (
+                    <TaskLabelItem
+                      key={label.projectLabel.id}
+                      label={label}
+                      onClick={$target => {
+                        onOpenAddLabelPopup(task, $target);
+                      }}
+                    />
+                  );
+                })}
+                <TaskDetailsAddLabelIcon>
+                  <Plus width={12} height={12} />
+                </TaskDetailsAddLabelIcon>
+              </MetaDetailContent>
+            )}
+          </Labels>
+        </HeaderContainer>
+        <InnerContentContainer>
+          <DescriptionContainer>
+            <EditorContainer
+              onClick={e => {
+                if (!editTaskDescription) {
+                  setEditTaskDescription(true);
+                }
+              }}
+            >
+              <Editor
+                defaultValue={task.description ?? ''}
+                theme={dark}
+                readOnly={!editTaskDescription}
+                autoFocus
+                onChange={value => {
+                  setSaveTimeout(() => {
+                    clearTimeout(saveTimeout);
+                    return setTimeout(saveDescription, 2000);
+                  });
+                  const text = value();
+                  taskDescriptionRef.current = text;
                 }}
               />
-            ) : (
+            </EditorContainer>
-              <TaskContent description={description} onEditContent={handleClick} />
+          </DescriptionContainer>
-            )}
+          <ChecklistSection>
-            <DragDropContext onDragEnd={onDragEnd}>
+            <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
               <Droppable direction="vertical" type="checklist" droppableId="root">
                 {dropProvided => (
                   <ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
@@ -442,9 +391,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                                   complete={item.complete}
                                                   onDeleteItem={onDeleteItem}
                                                   onChangeName={onChangeItemName}
-                                                  onToggleItem={(itemID, complete) =>
+                                                  onToggleItem={(itemID, complete) => {
-                                                    onToggleChecklistItem(item.id, complete)
+                                                    onToggleChecklistItem(item.id, complete);
-                                                  }
+                                                  }}
                                                 />
                                               )}
                                             </Draggable>
@@ -463,32 +412,54 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                 )}
               </Droppable>
             </DragDropContext>
-          </TaskDetailsSection>
+          </ChecklistSection>
-        </TaskDetailsContent>
+          <TabBarSection>
-        <TaskDetailsSidebar>
+            <TabBarItem>Activity</TabBarItem>
-          <ActionButtons>
+          </TabBarSection>
-            <ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
+          <ActivitySection />
-            <ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
+        </InnerContentContainer>
-              {task.complete ? 'Mark Incomplete' : 'Mark Complete'}
+        <CommentContainer>
-            </ActionButton>
+          {me && (
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
+            <CommentInnerWrapper>
-              Members
+              <CommentProfile
-            </ActionButton>
+                member={me}
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
+                size={32}
-              Labels
+                onMemberProfile={$target => {
-            </ActionButton>
+                  onMemberProfile($target, me.id);
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
+                }}
-              Checklist
+              />
-            </ActionButton>
+              <CommentEditorContainer>
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
+                <CommentTextArea
-              Due Date
+                  disabled
-            </ActionButton>
+                  placeholder="Write a comment..."
-            <ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
+                  onFocus={() => {
-            <ActionButton justifyTextContent="flex-start">Cover</ActionButton>
+                    setShowCommentActions(true);
-          </ActionButtons>
+                  }}
-        </TaskDetailsSidebar>
+                  onBlur={() => {
-      </TaskDetailsWrapper>
+                    setShowCommentActions(false);
-    </>
+                  }}
+                />
+                <CommentEditorActions visible={showCommentActions}>
+                  <CommentEditorActionIcon>
+                    <Paperclip width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <At width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <Smile width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <Task width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorSaveButton>Save</CommentEditorSaveButton>
+                </CommentEditorActions>
+              </CommentEditorContainer>
+            </CommentInnerWrapper>
+          )}
+        </CommentContainer>
+      </ContentContainer>
+    </Container>
   );
 };
 

frontend/src/shared/components/TaskDetails/onDragEnd.ts

@@ -0,0 +1,90 @@
+import {
+  getSortedDraggables,
+  isPositionChanged,
+  getNewDraggablePosition,
+  getAfterDropDraggableList,
+} from 'shared/utils/draggables';
+import { DropResult } from 'react-beautiful-dnd';
+
+type OnChecklistDropFn = (checklist: TaskChecklist) => void;
+type OnChecklistItemDropFn = (prevChecklistID: string, checklistID: string, checklistItem: TaskChecklistItem) => void;
+
+const onDragEnd = (
+  { draggableId, source, destination, type }: DropResult,
+  task: Task,
+  onChecklistDrop: OnChecklistDropFn,
+  onChecklistItemDrop: OnChecklistItemDropFn,
+) => {
+  if (typeof destination === 'undefined') return;
+  if (!isPositionChanged(source, destination)) return;
+
+  const isChecklist = type === 'checklist';
+  const isSameChecklist = destination.droppableId === source.droppableId;
+  let droppedDraggable: DraggableElement | null = null;
+  let beforeDropDraggables: Array<DraggableElement> | null = null;
+
+  if (!task.checklists) return;
+  if (isChecklist) {
+    const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
+    if (droppedGroup) {
+      droppedDraggable = {
+        id: draggableId,
+        position: droppedGroup.position,
+      };
+      beforeDropDraggables = getSortedDraggables(
+        task.checklists.map(checklist => {
+          return { id: checklist.id, position: checklist.position };
+        }),
+      );
+      if (droppedDraggable === null || beforeDropDraggables === null) {
+        throw new Error('before drop draggables is null');
+      }
+      const afterDropDraggables = getAfterDropDraggableList(
+        beforeDropDraggables,
+        droppedDraggable,
+        isChecklist,
+        isSameChecklist,
+        destination,
+      );
+      const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
+      onChecklistDrop({ ...droppedGroup, position: newPosition });
+    } else {
+      throw new Error('task group can not be found');
+    }
+  } else {
+    const targetChecklist = task.checklists.findIndex(
+      checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
+    );
+    const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
+
+    if (droppedChecklistItem) {
+      droppedDraggable = {
+        id: draggableId,
+        position: droppedChecklistItem.position,
+      };
+      beforeDropDraggables = getSortedDraggables(
+        task.checklists[targetChecklist].items.map(item => {
+          return { id: item.id, position: item.position };
+        }),
+      );
+      if (droppedDraggable === null || beforeDropDraggables === null) {
+        throw new Error('before drop draggables is null');
+      }
+      const afterDropDraggables = getAfterDropDraggableList(
+        beforeDropDraggables,
+        droppedDraggable,
+        isChecklist,
+        isSameChecklist,
+        destination,
+      );
+      const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
+      const newItem = {
+        ...droppedChecklistItem,
+        position: newPosition,
+      };
+      onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
+    }
+  }
+};
+
+export default onDragEnd;

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

@@ -5,6 +5,8 @@ import Button from 'shared/components/Button';
 import { Taskcafe } from 'shared/icons';
 import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';
+import { useRef } from 'react';
+
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
   z-index: ${props => props.zIndex};
   position: relative;
@@ -64,7 +66,7 @@ export const ProfileNameWrapper = styled.div`
   line-height: 1.25;
 `;
 
-export const IconContainer = styled.div<{ disabled?: boolean }>`
+export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
   margin-right: 20px;
   cursor: pointer;
   ${props =>
@@ -85,7 +87,10 @@ export const ProfileNameSecondary = styled.small`
   color: #c2c6dc;
 `;
 
-export const ProfileIcon = styled.div<{ bgColor: string | null; backgroundURL: string | null }>`
+export const ProfileIcon = styled.div<{
+  bgColor: string | null;
+  backgroundURL: string | null;
+}>`
   width: 40px;
   height: 40px;
   border-radius: 9999px;

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

@@ -2,17 +2,16 @@ import React, { useRef, useState, useEffect } from 'react';
 import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
 import styled from 'styled-components';
 import ProfileIcon from 'shared/components/ProfileIcon';
-import TaskAssignee from 'shared/components/TaskAssignee';
+import { usePopup } from 'shared/components/PopupMenu';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { RoleCode } from 'shared/generated/graphql';
-import MiniProfile from 'shared/components/MiniProfile';
+import NOOP from 'shared/utils/noop';
 import {
   TaskcafeLogo,
   TaskcafeTitle,
   ProjectFinder,
   LogoContainer,
   NavSeparator,
-  IconContainer,
+  IconContainerWrapper,
   ProjectNameTextarea,
   InviteButton,
   GlobalActions,
@@ -31,7 +30,28 @@ import {
   ProjectMember,
   ProjectMembers,
 } from './Styles';
-import { Link } from 'react-router-dom';
+
+type IconContainerProps = {
+  disabled?: boolean;
+  onClick?: ($target: React.RefObject<HTMLElement>) => void;
+};
+
+const IconContainer: React.FC<IconContainerProps> = ({ onClick, disabled = false, children }) => {
+  const $container = useRef<HTMLDivElement>(null);
+  return (
+    <IconContainerWrapper
+      ref={$container}
+      disabled={disabled}
+      onClick={() => {
+        if (onClick) {
+          onClick($container);
+        }
+      }}
+    >
+      {children}
+    </IconContainerWrapper>
+  );
+};
 
 const HomeDashboard = styled(Home)``;
 
@@ -145,7 +165,7 @@ type NavBarProps = {
   onFavorite?: () => void;
   onProfileClick: ($target: React.RefObject<HTMLElement>) => void;
   onSaveName?: (name: string) => void;
-  onNotificationClick: () => void;
+  onNotificationClick: ($target: React.RefObject<HTMLElement>) => void;
   canEditProjectName?: boolean;
   canInviteUser?: boolean;
   onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
@@ -257,16 +277,16 @@ const NavBar: React.FC<NavBarProps> = ({
           <ProjectFinder onClick={onOpenProjectFinder} variant="gradient">
             Projects
           </ProjectFinder>
-          <IconContainer onClick={onDashboardClick}>
+          <IconContainer onClick={() => onDashboardClick()}>
             <HomeDashboard width={20} height={20} />
           </IconContainer>
-          <IconContainer disabled>
+          <IconContainer disabled onClick={NOOP}>
             <CheckCircle width={20} height={20} />
           </IconContainer>
-          <IconContainer onClick={onNotificationClick}>
+          <IconContainer disabled onClick={onNotificationClick}>
             <Bell color="#c2c6dc" size={20} />
           </IconContainer>
-          <IconContainer disabled>
+          <IconContainer disabled onClick={NOOP}>
             <BarChart width={20} height={20} />
           </IconContainer>
 

frontend/src/shared/generated/graphql.tsx

@@ -162,6 +162,7 @@ export type Task = {
   description?: Maybe<Scalars['String']>;
   dueDate?: Maybe<Scalars['Time']>;
   complete: Scalars['Boolean'];
+  completedAt?: Maybe<Scalars['Time']>;
   assigned: Array<Member>;
   labels: Array<TaskLabel>;
   checklists: Array<TaskChecklist>;
@@ -212,22 +213,18 @@ export enum ObjectType {
 
 export type Query = {
    __typename?: 'Query';
-  organizations: Array<Organization>;
-  users: Array<UserAccount>;
-  findUser: UserAccount;
   findProject: Project;
   findTask: Task;
-  projects: Array<Project>;
   findTeam: Team;
-  teams: Array<Team>;
+  findUser: UserAccount;
   labelColors: Array<LabelColor>;
-  taskGroups: Array<TaskGroup>;
   me: MePayload;
-};
+  notifications: Array<Notification>;
-
+  organizations: Array<Organization>;
-
+  projects: Array<Project>;
-export type QueryFindUserArgs = {
+  taskGroups: Array<TaskGroup>;
-  input: FindUser;
+  teams: Array<Team>;
+  users: Array<UserAccount>;
 };
 
 
@@ -241,13 +238,18 @@ export type QueryFindTaskArgs = {
 };
 
 
-export type QueryProjectsArgs = {
+export type QueryFindTeamArgs = {
-  input?: Maybe<ProjectsFilter>;
+  input: FindTeam;
 };
 
 
-export type QueryFindTeamArgs = {
+export type QueryFindUserArgs = {
-  input: FindTeam;
+  input: FindUser;
+};
+
+
+export type QueryProjectsArgs = {
+  input?: Maybe<ProjectsFilter>;
 };
 
 export type Mutation = {
@@ -273,13 +275,16 @@ export type Mutation = {
   deleteTaskChecklist: DeleteTaskChecklistPayload;
   deleteTaskChecklistItem: DeleteTaskChecklistItemPayload;
   deleteTaskGroup: DeleteTaskGroupPayload;
+  deleteTaskGroupTasks: DeleteTaskGroupTasksPayload;
   deleteTeam: DeleteTeamPayload;
   deleteTeamMember: DeleteTeamMemberPayload;
   deleteUserAccount: DeleteUserAccountPayload;
+  duplicateTaskGroup: DuplicateTaskGroupPayload;
   logoutUser: Scalars['Boolean'];
   removeTaskLabel: Task;
   setTaskChecklistItemComplete: TaskChecklistItem;
   setTaskComplete: Task;
+  sortTaskGroup: SortTaskGroupPayload;
   toggleTaskLabel: ToggleTaskLabelPayload;
   unassignTask: Task;
   updateProjectLabel: ProjectLabel;
@@ -403,6 +408,11 @@ export type MutationDeleteTaskGroupArgs = {
 };
 
 
+export type MutationDeleteTaskGroupTasksArgs = {
+  input: DeleteTaskGroupTasks;
+};
+
+
 export type MutationDeleteTeamArgs = {
   input: DeleteTeam;
 };
@@ -418,6 +428,11 @@ export type MutationDeleteUserAccountArgs = {
 };
 
 
+export type MutationDuplicateTaskGroupArgs = {
+  input: DuplicateTaskGroup;
+};
+
+
 export type MutationLogoutUserArgs = {
   input: LogoutUser;
 };
@@ -438,6 +453,11 @@ export type MutationSetTaskCompleteArgs = {
 };
 
 
+export type MutationSortTaskGroupArgs = {
+  input: SortTaskGroup;
+};
+
+
 export type MutationToggleTaskLabelArgs = {
   input: ToggleTaskLabelInput;
 };
@@ -576,6 +596,42 @@ export type FindTeam = {
   teamID: Scalars['UUID'];
 };
 
+export enum EntityType {
+  Task = 'TASK'
+}
+
+export enum ActorType {
+  User = 'USER'
+}
+
+export enum ActionType {
+  TaskMemberAdded = 'TASK_MEMBER_ADDED'
+}
+
+export type NotificationActor = {
+   __typename?: 'NotificationActor';
+  id: Scalars['UUID'];
+  type: ActorType;
+  name: Scalars['String'];
+};
+
+export type NotificationEntity = {
+   __typename?: 'NotificationEntity';
+  id: Scalars['UUID'];
+  type: EntityType;
+  name: Scalars['String'];
+};
+
+export type Notification = {
+   __typename?: 'Notification';
+  id: Scalars['ID'];
+  entity: NotificationEntity;
+  actionType: ActionType;
+  actor: NotificationActor;
+  read: Scalars['Boolean'];
+  createdAt: Scalars['Time'];
+};
+
 export type NewProject = {
   userID: Scalars['UUID'];
   teamID: Scalars['UUID'];
@@ -785,6 +841,44 @@ export type DeleteTaskChecklistPayload = {
   taskChecklist: TaskChecklist;
 };
 
+export type DeleteTaskGroupTasks = {
+  taskGroupID: Scalars['UUID'];
+};
+
+export type DeleteTaskGroupTasksPayload = {
+   __typename?: 'DeleteTaskGroupTasksPayload';
+  taskGroupID: Scalars['UUID'];
+  tasks: Array<Scalars['UUID']>;
+};
+
+export type TaskPositionUpdate = {
+  taskID: Scalars['UUID'];
+  position: Scalars['Float'];
+};
+
+export type SortTaskGroupPayload = {
+   __typename?: 'SortTaskGroupPayload';
+  taskGroupID: Scalars['UUID'];
+  tasks: Array<Task>;
+};
+
+export type SortTaskGroup = {
+  taskGroupID: Scalars['UUID'];
+  tasks: Array<TaskPositionUpdate>;
+};
+
+export type DuplicateTaskGroup = {
+  projectID: Scalars['UUID'];
+  taskGroupID: Scalars['UUID'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+};
+
+export type DuplicateTaskGroupPayload = {
+   __typename?: 'DuplicateTaskGroupPayload';
+  taskGroup: TaskGroup;
+};
+
 export type NewTaskGroupLocation = {
   taskGroupID: Scalars['UUID'];
   position: Scalars['Float'];
@@ -1184,12 +1278,22 @@ export type FindTaskQuery = (
         & Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
       ) }
     )> }
+  ), me: (
+    { __typename?: 'MePayload' }
+    & { user: (
+      { __typename?: 'UserAccount' }
+      & Pick<UserAccount, 'id' | 'fullName'>
+      & { profileIcon: (
+        { __typename?: 'ProfileIcon' }
+        & Pick<ProfileIcon, 'initials' | 'bgColor' | 'url'>
+      ) }
+    ) }
   ) }
 );
 
 export type TaskFieldsFragment = (
   { __typename?: 'Task' }
-  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'position'>
+  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'completedAt' | 'position'>
   & { badges: (
     { __typename?: 'TaskBadges' }
     & { checklist?: Maybe<(
@@ -1527,6 +1631,60 @@ export type UpdateTaskChecklistNameMutation = (
   ) }
 );
 
+export type DeleteTaskGroupTasksMutationVariables = {
+  taskGroupID: Scalars['UUID'];
+};
+
+
+export type DeleteTaskGroupTasksMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteTaskGroupTasks: (
+    { __typename?: 'DeleteTaskGroupTasksPayload' }
+    & Pick<DeleteTaskGroupTasksPayload, 'tasks' | 'taskGroupID'>
+  ) }
+);
+
+export type DuplicateTaskGroupMutationVariables = {
+  taskGroupID: Scalars['UUID'];
+  name: Scalars['String'];
+  position: Scalars['Float'];
+  projectID: Scalars['UUID'];
+};
+
+
+export type DuplicateTaskGroupMutation = (
+  { __typename?: 'Mutation' }
+  & { duplicateTaskGroup: (
+    { __typename?: 'DuplicateTaskGroupPayload' }
+    & { taskGroup: (
+      { __typename?: 'TaskGroup' }
+      & Pick<TaskGroup, 'id' | 'name' | 'position'>
+      & { tasks: Array<(
+        { __typename?: 'Task' }
+        & TaskFieldsFragment
+      )> }
+    ) }
+  ) }
+);
+
+export type SortTaskGroupMutationVariables = {
+  tasks: Array<TaskPositionUpdate>;
+  taskGroupID: Scalars['UUID'];
+};
+
+
+export type SortTaskGroupMutation = (
+  { __typename?: 'Mutation' }
+  & { sortTaskGroup: (
+    { __typename?: 'SortTaskGroupPayload' }
+    & Pick<SortTaskGroupPayload, 'taskGroupID'>
+    & { tasks: Array<(
+      { __typename?: 'Task' }
+      & Pick<Task, 'id' | 'position'>
+    )> }
+  ) }
+);
+
 export type UpdateTaskGroupNameMutationVariables = {
   taskGroupID: Scalars['UUID'];
   name: Scalars['String'];
@@ -1744,6 +1902,40 @@ export type ToggleTaskLabelMutation = (
   ) }
 );
 
+export type TopNavbarQueryVariables = {};
+
+
+export type TopNavbarQuery = (
+  { __typename?: 'Query' }
+  & { notifications: Array<(
+    { __typename?: 'Notification' }
+    & Pick<Notification, 'createdAt' | 'read' | 'id' | 'actionType'>
+    & { entity: (
+      { __typename?: 'NotificationEntity' }
+      & Pick<NotificationEntity, 'id' | 'type' | 'name'>
+    ), actor: (
+      { __typename?: 'NotificationActor' }
+      & Pick<NotificationActor, 'id' | 'type' | 'name'>
+    ) }
+  )>, me: (
+    { __typename?: 'MePayload' }
+    & { user: (
+      { __typename?: 'UserAccount' }
+      & Pick<UserAccount, 'id' | 'fullName'>
+      & { profileIcon: (
+        { __typename?: 'ProfileIcon' }
+        & Pick<ProfileIcon, 'initials' | 'bgColor' | 'url'>
+      ) }
+    ), teamRoles: Array<(
+      { __typename?: 'TeamRole' }
+      & Pick<TeamRole, 'teamID' | 'roleCode'>
+    )>, projectRoles: Array<(
+      { __typename?: 'ProjectRole' }
+      & Pick<ProjectRole, 'projectID' | 'roleCode'>
+    )> }
+  ) }
+);
+
 export type UnassignTaskMutationVariables = {
   taskID: Scalars['UUID'];
   userID: Scalars['UUID'];
@@ -2013,6 +2205,7 @@ export const TaskFieldsFragmentDoc = gql`
   description
   dueDate
   complete
+  completedAt
   position
   badges {
     checklist {
@@ -2511,6 +2704,17 @@ export const FindTaskDocument = gql`
       }
     }
   }
+  me {
+    user {
+      id
+      fullName
+      profileIcon {
+        initials
+        bgColor
+        url
+      }
+    }
+  }
 }
     `;
 
@@ -3198,6 +3402,118 @@ export function useUpdateTaskChecklistNameMutation(baseOptions?: ApolloReactHook
 export type UpdateTaskChecklistNameMutationHookResult = ReturnType<typeof useUpdateTaskChecklistNameMutation>;
 export type UpdateTaskChecklistNameMutationResult = ApolloReactCommon.MutationResult<UpdateTaskChecklistNameMutation>;
 export type UpdateTaskChecklistNameMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskChecklistNameMutation, UpdateTaskChecklistNameMutationVariables>;
+export const DeleteTaskGroupTasksDocument = gql`
+    mutation deleteTaskGroupTasks($taskGroupID: UUID!) {
+  deleteTaskGroupTasks(input: {taskGroupID: $taskGroupID}) {
+    tasks
+    taskGroupID
+  }
+}
+    `;
+export type DeleteTaskGroupTasksMutationFn = ApolloReactCommon.MutationFunction<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>;
+
+/**
+ * __useDeleteTaskGroupTasksMutation__
+ *
+ * To run a mutation, you first call `useDeleteTaskGroupTasksMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteTaskGroupTasksMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteTaskGroupTasksMutation, { data, loading, error }] = useDeleteTaskGroupTasksMutation({
+ *   variables: {
+ *      taskGroupID: // value for 'taskGroupID'
+ *   },
+ * });
+ */
+export function useDeleteTaskGroupTasksMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>) {
+        return ApolloReactHooks.useMutation<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>(DeleteTaskGroupTasksDocument, baseOptions);
+      }
+export type DeleteTaskGroupTasksMutationHookResult = ReturnType<typeof useDeleteTaskGroupTasksMutation>;
+export type DeleteTaskGroupTasksMutationResult = ApolloReactCommon.MutationResult<DeleteTaskGroupTasksMutation>;
+export type DeleteTaskGroupTasksMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>;
+export const DuplicateTaskGroupDocument = gql`
+    mutation duplicateTaskGroup($taskGroupID: UUID!, $name: String!, $position: Float!, $projectID: UUID!) {
+  duplicateTaskGroup(input: {projectID: $projectID, taskGroupID: $taskGroupID, name: $name, position: $position}) {
+    taskGroup {
+      id
+      name
+      position
+      tasks {
+        ...TaskFields
+      }
+    }
+  }
+}
+    ${TaskFieldsFragmentDoc}`;
+export type DuplicateTaskGroupMutationFn = ApolloReactCommon.MutationFunction<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>;
+
+/**
+ * __useDuplicateTaskGroupMutation__
+ *
+ * To run a mutation, you first call `useDuplicateTaskGroupMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDuplicateTaskGroupMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [duplicateTaskGroupMutation, { data, loading, error }] = useDuplicateTaskGroupMutation({
+ *   variables: {
+ *      taskGroupID: // value for 'taskGroupID'
+ *      name: // value for 'name'
+ *      position: // value for 'position'
+ *      projectID: // value for 'projectID'
+ *   },
+ * });
+ */
+export function useDuplicateTaskGroupMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>) {
+        return ApolloReactHooks.useMutation<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>(DuplicateTaskGroupDocument, baseOptions);
+      }
+export type DuplicateTaskGroupMutationHookResult = ReturnType<typeof useDuplicateTaskGroupMutation>;
+export type DuplicateTaskGroupMutationResult = ApolloReactCommon.MutationResult<DuplicateTaskGroupMutation>;
+export type DuplicateTaskGroupMutationOptions = ApolloReactCommon.BaseMutationOptions<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>;
+export const SortTaskGroupDocument = gql`
+    mutation sortTaskGroup($tasks: [TaskPositionUpdate!]!, $taskGroupID: UUID!) {
+  sortTaskGroup(input: {taskGroupID: $taskGroupID, tasks: $tasks}) {
+    taskGroupID
+    tasks {
+      id
+      position
+    }
+  }
+}
+    `;
+export type SortTaskGroupMutationFn = ApolloReactCommon.MutationFunction<SortTaskGroupMutation, SortTaskGroupMutationVariables>;
+
+/**
+ * __useSortTaskGroupMutation__
+ *
+ * To run a mutation, you first call `useSortTaskGroupMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSortTaskGroupMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [sortTaskGroupMutation, { data, loading, error }] = useSortTaskGroupMutation({
+ *   variables: {
+ *      tasks: // value for 'tasks'
+ *      taskGroupID: // value for 'taskGroupID'
+ *   },
+ * });
+ */
+export function useSortTaskGroupMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<SortTaskGroupMutation, SortTaskGroupMutationVariables>) {
+        return ApolloReactHooks.useMutation<SortTaskGroupMutation, SortTaskGroupMutationVariables>(SortTaskGroupDocument, baseOptions);
+      }
+export type SortTaskGroupMutationHookResult = ReturnType<typeof useSortTaskGroupMutation>;
+export type SortTaskGroupMutationResult = ApolloReactCommon.MutationResult<SortTaskGroupMutation>;
+export type SortTaskGroupMutationOptions = ApolloReactCommon.BaseMutationOptions<SortTaskGroupMutation, SortTaskGroupMutationVariables>;
 export const UpdateTaskGroupNameDocument = gql`
     mutation updateTaskGroupName($taskGroupID: UUID!, $name: String!) {
   updateTaskGroupName(input: {taskGroupID: $taskGroupID, name: $name}) {
@@ -3590,6 +3906,70 @@ export function useToggleTaskLabelMutation(baseOptions?: ApolloReactHooks.Mutati
 export type ToggleTaskLabelMutationHookResult = ReturnType<typeof useToggleTaskLabelMutation>;
 export type ToggleTaskLabelMutationResult = ApolloReactCommon.MutationResult<ToggleTaskLabelMutation>;
 export type ToggleTaskLabelMutationOptions = ApolloReactCommon.BaseMutationOptions<ToggleTaskLabelMutation, ToggleTaskLabelMutationVariables>;
+export const TopNavbarDocument = gql`
+    query topNavbar {
+  notifications {
+    createdAt
+    read
+    id
+    entity {
+      id
+      type
+      name
+    }
+    actor {
+      id
+      type
+      name
+    }
+    actionType
+  }
+  me {
+    user {
+      id
+      fullName
+      profileIcon {
+        initials
+        bgColor
+        url
+      }
+    }
+    teamRoles {
+      teamID
+      roleCode
+    }
+    projectRoles {
+      projectID
+      roleCode
+    }
+  }
+}
+    `;
+
+/**
+ * __useTopNavbarQuery__
+ *
+ * To run a query within a React component, call `useTopNavbarQuery` and pass it any options that fit your needs.
+ * When your component renders, `useTopNavbarQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useTopNavbarQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useTopNavbarQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
+        return ApolloReactHooks.useQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
+      }
+export function useTopNavbarLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
+        }
+export type TopNavbarQueryHookResult = ReturnType<typeof useTopNavbarQuery>;
+export type TopNavbarLazyQueryHookResult = ReturnType<typeof useTopNavbarLazyQuery>;
+export type TopNavbarQueryResult = ApolloReactCommon.QueryResult<TopNavbarQuery, TopNavbarQueryVariables>;
 export const UnassignTaskDocument = gql`
     mutation unassignTask($taskID: UUID!, $userID: UUID!) {
   unassignTask(input: {taskID: $taskID, userID: $userID}) {

frontend/src/shared/graphql/findTask.graphqls

@@ -52,4 +52,15 @@ query findTask($taskID: UUID!) {
       }
     }
   }
+  me {
+    user {
+      id
+      fullName
+      profileIcon {
+        initials
+        bgColor
+        url
+      }
+    }
+  }
 }

frontend/src/shared/graphql/fragments/task.ts

@@ -7,6 +7,7 @@ const TASK_FRAGMENT = gql`
     description
     dueDate
     complete
+    completedAt
     position
     badges {
       checklist {

frontend/src/shared/graphql/taskGroup/deleteTaskGroupTasks.ts

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag';
+
+const DELETE_TASK_GROUP_TASKS_MUTATION = gql`
+  mutation deleteTaskGroupTasks($taskGroupID: UUID!) {
+    deleteTaskGroupTasks(input: { taskGroupID: $taskGroupID }) {
+      tasks
+      taskGroupID
+    }
+  }
+`;

frontend/src/shared/graphql/taskGroup/duplicateTaskGroup.ts

@@ -0,0 +1,26 @@
+import gql from 'graphql-tag';
+import TASK_FRAGMENT from '../fragments/task';
+
+const DUPLICATE_TASK_GROUP_MUTATION = gql`
+mutation duplicateTaskGroup($taskGroupID: UUID!, $name: String!, $position: Float!, $projectID: UUID!) {
+  duplicateTaskGroup(
+  input: {
+    projectID: $projectID
+    taskGroupID: $taskGroupID
+    name: $name
+    position: $position
+  }
+  ) {
+    taskGroup {
+      id
+      name
+      position
+      tasks {
+        ...TaskFields
+      }
+    }
+  }
+
+  ${TASK_FRAGMENT}
+}
+`;

frontend/src/shared/graphql/taskGroup/sortTaskGroup.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+const SORT_TASK_GROUP_MUTATION = gql`
+  mutation sortTaskGroup($tasks: [TaskPositionUpdate!]!, $taskGroupID: UUID!) {
+    sortTaskGroup(input: { taskGroupID: $taskGroupID, tasks: $tasks }) {
+      taskGroupID
+      tasks {
+        id
+        position
+      }
+    }
+  }
+`;

frontend/src/shared/graphql/topNavbar.ts

@@ -0,0 +1,43 @@
+import gql from 'graphql-tag';
+
+export const TOP_NAVBAR_QUERY = gql`
+  query topNavbar {
+    notifications {
+      createdAt
+      read
+      id
+      entity {
+        id
+        type
+        name
+      }
+      actor {
+        id
+        type
+        name
+      }
+      actionType
+    }
+    me {
+      user {
+        id
+        fullName
+        profileIcon {
+          initials
+          bgColor
+          url
+        }
+      }
+      teamRoles {
+        teamID
+        roleCode
+      }
+      projectRoles {
+        projectID
+        roleCode
+      }
+    }
+  }
+`;
+
+export default TOP_NAVBAR_QUERY;

frontend/src/shared/graphql/user/updateUserRole.ts

@@ -1,17 +1,17 @@
 import gql from 'graphql-tag';
 
 export const UPDATE_USER_ROLE_MUTATION = gql`
-mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
+  mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
-  updateUserRole(input:{userID: $userID, roleCode:$roleCode}) {
+    updateUserRole(input: { userID: $userID, roleCode: $roleCode }) {
-    user {
+      user {
-      id
+        id
-      role {
+        role {
-        code
+          code
-        name
+          name
+        }
       }
     }
   }
-}
 `;
 
 export default UPDATE_USER_ROLE_MUTATION;

frontend/src/shared/hooks/useWindowSize.ts

@@ -0,0 +1,14 @@
+import { useLayoutEffect, useState } from 'react';
+
+export default function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener('resize', updateSize);
+    updateSize();
+    return () => window.removeEventListener('resize', updateSize);
+  }, []);
+  return size;
+}

frontend/src/shared/icons/At.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const At: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z" />
+    </Icon>
+  );
+};
+
+export default At;

frontend/src/shared/icons/Calendar.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Calender: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
+      <path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z" />
+    </Icon>
+  );
+};
+
+export default Calender;

frontend/src/shared/icons/Clone.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Clone: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" />
+    </Icon>
+  );
+};
+
+export default Clone;

frontend/src/shared/icons/Paperclip.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Paperclip: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
+      <path d="M43.246 466.142c-58.43-60.289-57.341-157.511 1.386-217.581L254.392 34c44.316-45.332 116.351-45.336 160.671 0 43.89 44.894 43.943 117.329 0 162.276L232.214 383.128c-29.855 30.537-78.633 30.111-107.982-.998-28.275-29.97-27.368-77.473 1.452-106.953l143.743-146.835c6.182-6.314 16.312-6.422 22.626-.241l22.861 22.379c6.315 6.182 6.422 16.312.241 22.626L171.427 319.927c-4.932 5.045-5.236 13.428-.648 18.292 4.372 4.634 11.245 4.711 15.688.165l182.849-186.851c19.613-20.062 19.613-52.725-.011-72.798-19.189-19.627-49.957-19.637-69.154 0L90.39 293.295c-34.763 35.56-35.299 93.12-1.191 128.313 34.01 35.093 88.985 35.137 123.058.286l172.06-175.999c6.177-6.319 16.307-6.433 22.626-.256l22.877 22.364c6.319 6.177 6.434 16.307.256 22.626l-172.06 175.998c-59.576 60.938-155.943 60.216-214.77-.485z" />
+    </Icon>
+  );
+};
+
+export default Paperclip;

frontend/src/shared/icons/Plus.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
+import Icon, { IconProps } from './Icon';
 
-type Props = {
+const Plus: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
-  size: number | string;
-  color: string;
-};
-
-const Plus = ({ size, color }: Props) => {
   return (
-    <svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16">
+    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
-      <path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z" />
+      <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
-    </svg>
+    </Icon>
   );
 };
 
-Plus.defaultProps = {
-  size: 16,
-  color: '#000',
-};
-
 export default Plus;

frontend/src/shared/icons/Share.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Share: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
+    </Icon>
+  );
+};
+
+export default Share;

frontend/src/shared/icons/Smile.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Smile: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 496 512">
+      <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z" />
+    </Icon>
+  );
+};
+
+export default Smile;

frontend/src/shared/icons/Task.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Task: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
+    </Icon>
+  );
+};
+
+export default Task;

frontend/src/shared/icons/User.tsx

@@ -1,21 +1,12 @@
 import React from 'react';
+import Icon, { IconProps } from './Icon';
 
-type Props = {
+const User: React.FC<IconProps> = ({ width = '16px', height = '16px', className, onClick }) => {
-  size: number | string;
-  color: string;
-};
-
-const User = ({ size, color }: Props) => {
   return (
-    <svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16">
+    <Icon onClick={onClick} width={width} height={height} className={className} viewBox="0 0 448 512">
-      <path d="M9 11.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z" />
+      <path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z" />
-    </svg>
+    </Icon>
   );
 };
 
-User.defaultProps = {
-  size: 16,
-  color: '#000',
-};
-
 export default User;

frontend/src/shared/icons/index.ts

@@ -1,8 +1,15 @@
 import Cross from './Cross';
 import Cog from './Cog';
+import At from './At';
+import Task from './Task';
+import Smile from './Smile';
+import Paperclip from './Paperclip';
+import Calendar from './Calendar';
+import Clone from './Clone';
 import Sort from './Sort';
 import Filter from './Filter';
 import DoubleChevronUp from './DoubleChevronUp';
+import Share from './Share';
 import Crown from './Crown';
 import BarChart from './BarChart';
 import UserPlus from './UserPlus';
@@ -68,8 +75,14 @@ export {
   Square,
   Filter,
   Sort,
+  At,
+  Smile,
   DoubleChevronUp,
   UserPlus,
   Crown,
   ToggleOn,
+  Calendar,
+  Clone,
+  Paperclip,
+  Share,
 };

frontend/src/shared/undraw/NoData.tsx

@@ -18,9 +18,9 @@ const AccessAccount = ({ width, height }: Props) => {
           gradientTransform="translate(-3.62 1.57)"
           gradientUnits="userSpaceOnUse"
         >
-          <stop offset="0" stop-color="gray" stop-opacity=".25" />
+          <stop offset="0" stopColor="gray" stopOpacity=".25" />
-          <stop offset=".54" stop-color="gray" stop-opacity=".12" />
+          <stop offset=".54" stopColor="gray" stopOpacity=".12" />
-          <stop offset="1" stop-color="gray" stop-opacity=".1" />
+          <stop offset="1" stopColor="gray" stopOpacity=".1" />
         </linearGradient>
         <linearGradient
           id="b"

frontend/src/shared/utils/editorTheme.ts

@@ -0,0 +1,86 @@
+import theme from 'App/ThemeStyles';
+
+const colors = {
+  almostBlack: '#181A1B',
+  lightBlack: '#2F3336',
+  almostWhite: '#E6E6E6',
+  white: '#FFF',
+  white10: 'rgba(255, 255, 255, 0.1)',
+  black: '#000',
+  black10: 'rgba(0, 0, 0, 0.1)',
+  primary: '#1AB6FF',
+  greyLight: '#F4F7FA',
+  grey: '#E8EBED',
+  greyMid: '#C5CCD3',
+  greyDark: '#DAE1E9',
+};
+
+export const base = {
+  ...colors,
+  fontFamily: "'Droid Sans', sans-serif",
+  fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
+  fontWeight: 400,
+  zIndex: 10000,
+  link: colors.primary,
+  placeholder: '#B1BECC',
+  textSecondary: '#4E5C6E',
+  textLight: colors.white,
+  textHighlight: '#b3e7ff',
+  selected: colors.primary,
+  codeComment: '#6a737d',
+  codePunctuation: '#5e6687',
+  codeNumber: '#d73a49',
+  codeProperty: '#c08b30',
+  codeTag: '#3d8fd1',
+  codeString: '#032f62',
+  codeSelector: '#6679cc',
+  codeAttr: '#c76b29',
+  codeEntity: '#22a2c9',
+  codeKeyword: '#d73a49',
+  codeFunction: '#6f42c1',
+  codeStatement: '#22a2c9',
+  codePlaceholder: '#3d8fd1',
+  codeInserted: '#202746',
+  codeImportant: '#c94922',
+
+  blockToolbarBackground: colors.white,
+  blockToolbarTrigger: colors.greyMid,
+  blockToolbarTriggerIcon: colors.white,
+  blockToolbarItem: colors.almostBlack,
+  blockToolbarText: colors.almostBlack,
+  blockToolbarHoverBackground: colors.greyLight,
+  blockToolbarDivider: colors.greyMid,
+
+  noticeInfoBackground: '#F5BE31',
+  noticeInfoText: colors.almostBlack,
+  noticeTipBackground: '#9E5CF7',
+  noticeTipText: colors.white,
+  noticeWarningBackground: '#FF5C80',
+  noticeWarningText: colors.white,
+};
+export const dark = {
+  ...base,
+  background: 'transparent',
+  text: `rgba(${theme.colors.text.primary})`,
+  code: `rgba(${theme.colors.text.primary})`,
+  cursor: `rgba(${theme.colors.text.primary})`,
+  divider: '#4E5C6E',
+  placeholder: '#52657A',
+
+  toolbarBackground: colors.white,
+  toolbarInput: colors.black10,
+  toolbarItem: colors.lightBlack,
+
+  tableDivider: colors.lightBlack,
+  tableSelected: colors.primary,
+  tableSelectedBackground: '#002333',
+
+  quote: colors.greyDark,
+  codeBackground: colors.black,
+  codeBorder: colors.lightBlack,
+  codeString: '#3d8fd1',
+  horizontalRule: colors.lightBlack,
+  imageErrorBackground: 'rgba(0, 0, 0, 0.5)',
+};
+
+export default dark;

frontend/src/shared/utils/noop.ts

@@ -0,0 +1 @@
+export default function NOOP() {} // eslint-disable-line @typescript-eslint/no-empty-function

frontend/src/shared/utils/sorting.ts

@@ -0,0 +1,132 @@
+import moment from 'moment';
+
+export enum TaskSortingType {
+  NONE,
+  COMPLETE,
+  DUE_DATE,
+  MEMBERS,
+  LABELS,
+  TASK_TITLE,
+}
+
+export enum TaskSortingDirection {
+  ASC,
+  DESC,
+}
+
+export type TaskSorting = {
+  type: TaskSortingType;
+  direction: TaskSortingDirection;
+};
+
+export function sortString(a: string, b: string) {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+}
+
+export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
+  if (taskSorting.type === TaskSortingType.TASK_TITLE) {
+    if (a.name < b.name) {
+      return -1;
+    }
+    if (a.name > b.name) {
+      return 1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.DUE_DATE) {
+    if (a.dueDate && !b.dueDate) {
+      return -1;
+    }
+    if (b.dueDate && !a.dueDate) {
+      return 1;
+    }
+    return moment(a.dueDate).diff(moment(b.dueDate));
+  }
+  if (taskSorting.type === TaskSortingType.COMPLETE) {
+    if (a.complete && !b.complete) {
+      return -1;
+    }
+    if (b.complete && !a.complete) {
+      return 1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.LABELS) {
+    // sorts non-empty labels by name, then by empty label color name
+    let aLabels = [];
+    let bLabels = [];
+    let aLabelsEmpty = [];
+    let bLabelsEmpty = [];
+    if (a.labels) {
+      for (const aLabel of a.labels) {
+        if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
+          aLabels.push(aLabel.projectLabel.name);
+        } else {
+          aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    if (b.labels) {
+      for (const bLabel of b.labels) {
+        if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
+          bLabels.push(bLabel.projectLabel.name);
+        } else {
+          bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
+      if (aLabelsEmpty.length > bLabelsEmpty.length) {
+        if (bLabels.length !== 0) {
+          return 1;
+        }
+        return -1;
+      }
+    }
+    if (aLabels.length < bLabels.length) {
+      return 1;
+    }
+    if (aLabels.length > bLabels.length) {
+      return -1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.MEMBERS) {
+    let aMembers = [];
+    let bMembers = [];
+    if (a.assigned) {
+      for (const aMember of a.assigned) {
+        if (aMember.fullName) {
+          aMembers.push(aMember.fullName);
+        }
+      }
+    }
+    if (b.assigned) {
+      for (const bMember of b.assigned) {
+        if (bMember.fullName) {
+          bMembers.push(bMember.fullName);
+        }
+      }
+    }
+    aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    if (aMembers.length < bMembers.length) {
+      return 1;
+    }
+    if (aMembers.length > bMembers.length) {
+      return -1;
+    }
+    return 0;
+  }
+  return 0;
+}

frontend/src/types.d.ts

@@ -64,6 +64,7 @@ type Task = {
   position: number;
   dueDate?: string;
   complete?: boolean;
+  completedAt?: string | null;
   labels: TaskLabel[];
   description?: string | null;
   assigned?: Array<TaskUser>;

frontend/src/wdy.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-if (process.env.NODE_ENV === 'development') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
-  whyDidYouRender(React, {
-    trackAllPureComponents: true,
-  });
-}