fix: fix flashing on pollInterval

redesigned the project sharing popup to be a multi select dropdown
that populates the options by using the input as a fuzzy search filter
on the current users & invited users.

users can now also be directly invited by email from the project share
window. if invited this way, then the user will receive an email
that sends them to a registration page, then a confirmation page.

the initial registration was always redone so that it uses a similar
system to the above in that it now will accept the first registered
user if there are no other accounts (besides 'system').

.tmuxinator.yml

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

conf/taskcafe.example.toml

@@ -17,8 +17,9 @@ user = 'taskcafe'
 password = 'taskcafe_test'
 
 [smtp]
-username = 'admin@example.com'
-password = 'example'
-server = 'mail.example.com'
-port = 465
-connection_security = 'STARTTLS'
+username = 'taskcafe@example.com'
+password = ''
+from = 'no-reply@taskcafe.com'
+host = 'localhost'
+port = 11500
+skip_verify = false

frontend/package.json

@@ -9,10 +9,13 @@
     "@types/axios": "^0.14.0",
     "@types/color": "^3.0.1",
     "@types/date-fns": "^2.6.0",
+    "@types/dompurify": "^2.0.4",
+    "@types/emoji-mart": "^3.0.4",
     "@types/jest": "^24.0.0",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.0.0",
+    "@types/query-string": "^6.3.0",
     "@types/react": "^16.9.21",
     "@types/react-beautiful-dnd": "^12.1.1",
     "@types/react-datepicker": "^2.11.0",
@@ -34,18 +37,24 @@
     "color": "^3.1.2",
     "date-fns": "^2.14.0",
     "dayjs": "^1.9.1",
+    "dompurify": "^2.2.6",
+    "emoji-mart": "^3.0.0",
+    "emoticon": "^3.2.0",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "history": "^4.10.1",
     "immer": "^6.0.3",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.20",
+    "node-emoji": "^1.10.0",
     "prop-types": "^15.7.2",
+    "query-string": "^6.13.7",
     "react": "^16.12.0",
     "react-autosize-textarea": "^7.0.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-datepicker": "^2.14.1",
     "react-dom": "^16.12.0",
+    "react-emoji-render": "^1.2.4",
     "react-hook-form": "^6.0.6",
     "react-markdown": "^4.3.1",
     "react-router": "^5.1.2",

frontend/src/Admin/index.tsx

@@ -82,7 +82,7 @@ const AddUserInput = styled(Input)`
 `;
 
 const InputError = styled.span`
-  color: rgba(${props => props.theme.colors.danger});
+  color: ${props => props.theme.colors.danger};
   font-size: 12px;
 `;
 
@@ -174,7 +174,7 @@ const AdminRoute = () => {
   useEffect(() => {
     document.title = 'Admin | Taskcafé';
   }, []);
-  const { loading, data } = useUsersQuery();
+  const { loading, data } = useUsersQuery({ fetchPolicy: 'cache-and-network' });
   const { showPopup, hidePopup } = usePopup();
   const { user } = useCurrentUser();
   const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
@@ -182,7 +182,7 @@ const AdminRoute = () => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
         produce(cache, draftCache => {
           draftCache.invitedUsers = cache.invitedUsers.filter(
-            u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
+            u => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
           );
         }),
       );
@@ -192,7 +192,7 @@ const AdminRoute = () => {
     update: (client, response) => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
         produce(cache, draftCache => {
-          draftCache.users = cache.users.filter(u => u.id !== response.data.deleteUserAccount.userAccount.id);
+          draftCache.users = cache.users.filter(u => u.id !== response.data?.deleteUserAccount.userAccount.id);
         }),
       );
     },
@@ -203,7 +203,7 @@ const AdminRoute = () => {
         query: UsersDocument,
       });
       const newData = produce(cacheData, (draftState: any) => {
-        draftState.users = [...draftState.users, { ...createData.data.createUserAccount }];
+        draftState.users = [...draftState.users, { ...createData.data?.createUserAccount }];
       });
 
       client.writeQuery({
@@ -214,9 +214,6 @@ const AdminRoute = () => {
       });
     },
   });
-  if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
-  }
   if (data && user) {
     if (user.roles.org !== 'admin') {
       return <Redirect to="/" />;
@@ -259,7 +256,7 @@ const AdminRoute = () => {
       </>
     );
   }
-  return <span>error</span>;
+  return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
 };
 
 export default AdminRoute;

frontend/src/App/Routes.tsx

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

frontend/src/App/ThemeStyles.ts

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

frontend/src/App/TopNavbar.tsx

@@ -20,6 +20,7 @@ import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
 import NOOP from 'shared/utils/noop';
 import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
+import theme from './ThemeStyles';
 
 const TeamContainer = styled.div`
   display: flex;
@@ -62,7 +63,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
   opacity: 1;
   border-radius: 3px;
   &:before {
-    background: rgba(${props => props.theme.colors.bg.secondary});
+    background: ${props => props.theme.colors.bg.secondary};
     bottom: 0;
     content: '';
     left: 0;
@@ -114,7 +115,7 @@ const TeamProjectContainer = styled.div`
   margin: 0 4px 4px 0;
   min-width: 0;
   &:hover ${TeamProjectTitle} {
-    color: rgba(${props => props.theme.colors.text.secondary});
+    color: ${props => props.theme.colors.text.secondary};
   }
   &:hover ${TeamProjectAvatar} {
     opacity: 1;
@@ -124,15 +125,13 @@ const TeamProjectContainer = styled.div`
   }
 `;
 
-const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+const colors = [theme.colors.primary, theme.colors.secondary];
 
 const ProjectFinder = () => {
-  const { loading, data } = useGetProjectsQuery();
-  if (loading) {
-    return <span>loading</span>;
-  }
+  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'cache-and-network' });
   if (data) {
     const { projects, teams } = data;
+    const personalProjects = data.projects.filter(p => p.team === null);
     const projectTeams = teams.map(team => {
       return {
         id: team.id,
@@ -142,6 +141,22 @@ const ProjectFinder = () => {
     });
     return (
       <>
+        <TeamContainer>
+          <TeamTitle>Personal</TeamTitle>
+          <TeamProjects>
+            {personalProjects.map((project, idx) => (
+              <TeamProjectContainer key={project.id}>
+                <TeamProjectLink to={`/projects/${project.id}`}>
+                  <TeamProjectBackground color={colors[idx % 5]} />
+                  <TeamProjectAvatar color={colors[idx % 5]} />
+                  <TeamProjectContent>
+                    <TeamProjectTitle>{project.name}</TeamProjectTitle>
+                  </TeamProjectContent>
+                </TeamProjectLink>
+              </TeamProjectContainer>
+            ))}
+          </TeamProjects>
+        </TeamContainer>
         {projectTeams.map(team => (
           <TeamContainer key={team.id}>
             <TeamTitle>{team.name}</TeamTitle>
@@ -163,10 +178,10 @@ const ProjectFinder = () => {
       </>
     );
   }
-  return <span>error</span>;
+  return <span>loading</span>;
 };
 type ProjectPopupProps = {
-  history: History<History.PoorMansUnknown>;
+  history: any;
   name: string;
   projectID: string;
 };
@@ -181,7 +196,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
 
       const newData = produce(cacheData, (draftState: any) => {
         draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data.deleteProject.project.id,
+          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
         );
       });
 
@@ -328,7 +343,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
             />
           ))}
         </NotificationPopup>,
-        { width: 415, borders: false, diamondColor: '#7367f0' },
+        { width: 415, borders: false, diamondColor: theme.colors.primary },
       );
     }
   };

frontend/src/App/index.tsx

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

frontend/src/Auth/index.tsx

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

frontend/src/Confirm/index.tsx

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

frontend/src/Install/index.tsx

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

frontend/src/Outline/DragDebug.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { DragDebugWrapper } from './Styles';
-
-type DragDebugProps = {
-  zone: ImpactZone | null;
-  depthTarget: number;
-  draggedNodes: Array<string> | null;
-};
-
-const DragDebug: React.FC<DragDebugProps> = ({ zone, depthTarget, draggedNodes }) => {
-  let aboveID = null;
-  let belowID = null;
-  if (zone) {
-    aboveID = zone.above ? zone.above.node.id : null;
-    belowID = zone.below ? zone.below.node.id : null;
-  }
-  return (
-    <DragDebugWrapper>{`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
-      draggedNodes ? draggedNodes.toString() : null
-    }`}</DragDebugWrapper>
-  );
-};
-
-export default DragDebug;

frontend/src/Outline/DragIndicator.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { getDimensions } from './utils';
-import { DragIndicatorBar } from './Styles';
-
-type DragIndicatorProps = {
-  container: React.RefObject<HTMLDivElement>;
-  zone: ImpactZone;
-  depthTarget: number;
-};
-
-const DragIndicator: React.FC<DragIndicatorProps> = ({ container, zone, depthTarget }) => {
-  let top = 0;
-  let width = 0;
-  if (zone.below === null) {
-    if (zone.above) {
-      const entry = getDimensions(zone.above.dimensions.entry);
-      const children = getDimensions(zone.above.dimensions.children);
-      if (children) {
-        top = children.top;
-        width = children.width - depthTarget * 35;
-      } else if (entry) {
-        top = entry.bottom;
-        width = entry.width - depthTarget * 35;
-      }
-    }
-  } else if (zone.below) {
-    const entry = getDimensions(zone.below.dimensions.entry);
-    if (entry) {
-      top = entry.top;
-      width = entry.width - depthTarget * 35;
-    }
-  }
-  let left = 0;
-  if (container && container.current) {
-    left = container.current.getBoundingClientRect().left + (depthTarget - 1) * 35;
-    width = container.current.getBoundingClientRect().width - depthTarget * 35;
-  }
-  return <DragIndicatorBar top={top} left={left} width={width} />;
-};
-
-export default DragIndicator;

frontend/src/Outline/Dragger.tsx

@@ -1,242 +0,0 @@
-import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
-import { Dot } from 'shared/icons';
-import styled from 'styled-components';
-import {
-  findNextDraggable,
-  getDimensions,
-  getTargetDepth,
-  getNodeAbove,
-  getBelowParent,
-  findNodeAbove,
-  getNodeOver,
-  getLastChildInBranch,
-  findNodeDepth,
-} from './utils';
-import { useDrag } from './useDrag';
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 9px;
-  background: rgba(${p => p.theme.colors.primary});
-  svg {
-    fill: rgba(${p => p.theme.colors.text.primary});
-    stroke: rgba(${p => p.theme.colors.text.primary});
-  }
-`;
-
-type DraggerProps = {
-  container: React.RefObject<HTMLDivElement>;
-  draggedNodes: { nodes: Array<string>; first?: OutlineNode | null };
-  isDragging: boolean;
-  onDragEnd: (zone: ImpactZone) => void;
-  initialPos: { x: number; y: number };
-};
-
-const Dragger: React.FC<DraggerProps> = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
-  const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
-  const { outline, impact, setImpact } = useDrag();
-  const $handle = useRef<HTMLDivElement>(null);
-  const handleMouseUp = useCallback(() => {
-    onDragEnd(impact ? impact.zone : { below: null, above: null });
-  }, [impact]);
-  const handleMouseMove = useCallback(
-    e => {
-      e.preventDefault();
-      const { clientX, clientY, pageX, pageY } = e;
-      setPos({ x: clientX, y: clientY });
-      const { curDepth, curPosition, curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
-      let depthTarget: number = 0;
-      let aboveNode: null | OutlineNode = null;
-      let belowNode: null | OutlineNode = null;
-
-      if (curPosition === 'before') {
-        belowNode = curDraggable;
-      } else {
-        aboveNode = curDraggable;
-      }
-
-      // if belowNode has the depth of 1, then the above element will be a part of a different branch
-
-      const { relationships, nodes } = outline.current;
-      if (!belowNode || !aboveNode) {
-        if (belowNode) {
-          aboveNode = findNodeAbove(outline.current, curDepth, belowNode);
-        } else if (aboveNode) {
-          let targetBelowNode: RelationshipChild | null = null;
-          const parent = relationships.get(aboveNode.parent);
-          if (aboveNode.children !== 0 && !aboveNode.collapsed) {
-            const abr = relationships.get(aboveNode.id);
-            if (abr) {
-              const newTarget = abr.children[0];
-              if (newTarget) {
-                targetBelowNode = newTarget;
-              }
-            }
-          } else if (parent) {
-            const aboveNodeIndex = parent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
-            if (aboveNodeIndex !== -1) {
-              if (aboveNodeIndex === parent.children.length - 1) {
-                targetBelowNode = getBelowParent(aboveNode, outline.current);
-              } else {
-                const nextChild = parent.children[aboveNodeIndex + 1];
-                targetBelowNode = nextChild ?? null;
-              }
-            }
-          }
-          if (targetBelowNode) {
-            const depthNodes = nodes.get(targetBelowNode.depth);
-            if (depthNodes) {
-              belowNode = depthNodes.get(targetBelowNode.id) ?? null;
-            }
-          }
-        }
-      }
-
-      // if outside outline, get either first or last item in list based on mouse Y
-      if (!aboveNode && !belowNode) {
-        if (container && container.current) {
-          const bounds = container.current.getBoundingClientRect();
-          if (clientY < bounds.top + bounds.height / 2) {
-            const rootChildren = outline.current.relationships.get('root');
-            const rootDepth = outline.current.nodes.get(1);
-            if (rootChildren && rootDepth) {
-              const firstChild = rootChildren.children[0];
-              belowNode = rootDepth.get(firstChild.id) ?? null;
-              aboveNode = null;
-            }
-          } else {
-            // TODO: enhance to actually get last child item, not last top level branch
-            const rootChildren = outline.current.relationships.get('root');
-            const rootDepth = outline.current.nodes.get(1);
-            if (rootChildren && rootDepth) {
-              const lastChild = rootChildren.children[rootChildren.children.length - 1];
-              const lastParentNode = rootDepth.get(lastChild.id) ?? null;
-
-              if (lastParentNode) {
-                const lastBranchChild = getLastChildInBranch(outline.current, lastParentNode);
-                if (lastBranchChild) {
-                  const lastChildDepth = outline.current.nodes.get(lastBranchChild.depth);
-                  if (lastChildDepth) {
-                    aboveNode = lastChildDepth.get(lastBranchChild.id) ?? null;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      if (aboveNode) {
-        const { ancestors } = findNodeDepth(outline.current.published, aboveNode.id);
-        for (let i = 0; i < draggedNodes.nodes.length; i++) {
-          const nodeID = draggedNodes.nodes[i];
-          if (ancestors.find(c => c === nodeID)) {
-            if (draggedNodes.first) {
-              belowNode = draggedNodes.first;
-              aboveNode = findNodeAbove(outline.current, aboveNode ? aboveNode.depth : 1, draggedNodes.first);
-            } else {
-              const { depth } = findNodeDepth(outline.current.published, nodeID);
-              const nodeDepth = outline.current.nodes.get(depth);
-              const targetNode = nodeDepth ? nodeDepth.get(nodeID) : null;
-              if (targetNode) {
-                belowNode = targetNode;
-
-                aboveNode = findNodeAbove(outline.current, depth, targetNode);
-              }
-            }
-          }
-        }
-      }
-
-      // calculate available depths
-
-      let minDepth = 1;
-      let maxDepth = 2;
-      if (aboveNode) {
-        const aboveParent = relationships.get(aboveNode.parent);
-        if (aboveNode.children !== 0 && !aboveNode.collapsed) {
-          minDepth = aboveNode.depth + 1;
-          maxDepth = aboveNode.depth + 1;
-        } else if (aboveParent) {
-          minDepth = aboveNode.depth;
-          maxDepth = aboveNode.depth + 1;
-          const aboveNodeIndex = aboveParent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
-          if (aboveNodeIndex === aboveParent.children.length - 1) {
-            minDepth = belowNode ? belowNode.depth : minDepth;
-          }
-        }
-      }
-      if (aboveNode) {
-        const dimensions = outline.current.dimensions.get(aboveNode.id);
-        const entry = getDimensions(dimensions?.entry);
-        if (entry) {
-          depthTarget = getTargetDepth(clientX, entry.left, { min: minDepth, max: maxDepth });
-        }
-      }
-
-      let aboveImpact: null | ImpactZoneData = null;
-      let belowImpact: null | ImpactZoneData = null;
-      if (aboveNode) {
-        const aboveDim = outline.current.dimensions.get(aboveNode.id);
-        if (aboveDim) {
-          aboveImpact = {
-            node: aboveNode,
-            dimensions: aboveDim,
-          };
-        }
-      }
-      if (belowNode) {
-        const belowDim = outline.current.dimensions.get(belowNode.id);
-        if (belowDim) {
-          belowImpact = {
-            node: belowNode,
-            dimensions: belowDim,
-          };
-        }
-      }
-
-      setImpact({
-        zone: {
-          above: aboveImpact,
-          below: belowImpact,
-        },
-        depth: depthTarget,
-      });
-    },
-    [outline.current.nodes],
-  );
-  useEffect(() => {
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, []);
-  const styles = useMemo(() => {
-    const position: 'absolute' | 'relative' = isDragging ? 'absolute' : 'relative';
-    return {
-      cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
-      transform: `translate(${pos.x - 10}px, ${pos.y - 4}px)`,
-      transition: isDragging ? 'none' : 'transform 500ms',
-      zIndex: isDragging ? 2 : 1,
-      position,
-    };
-  }, [isDragging, pos]);
-
-  return (
-    <>
-      {pos && (
-        <Container ref={$handle} style={styles}>
-          <Dot width={18} height={18} />
-        </Container>
-      )}
-    </>
-  );
-};
-
-export default Dragger;

frontend/src/Outline/Entry.tsx

@@ -1,155 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { Dot, CaretDown, CaretRight } from 'shared/icons';
-
-import { EntryChildren, EntryWrapper, EntryContent, EntryInnerContent, EntryHandle, ExpandButton } from './Styles';
-import { useDrag } from './useDrag';
-
-function getCaretPosition(editableDiv: any) {
-  let caretPos = 0;
-  let sel: any = null;
-  let range: any = null;
-  if (window.getSelection) {
-    sel = window.getSelection();
-    if (sel && sel.rangeCount) {
-      range = sel.getRangeAt(0);
-      if (range.commonAncestorContainer.parentNode === editableDiv) {
-        caretPos = range.endOffset;
-      }
-    }
-  }
-  return caretPos;
-}
-
-type EntryProps = {
-  id: string;
-  collapsed?: boolean;
-  onToggleCollapse: (id: string, collapsed: boolean) => void;
-  parentID: string;
-  onStartDrag: (e: { id: string; clientX: number; clientY: number }) => void;
-  onStartSelect: (e: { id: string; depth: number }) => void;
-  isRoot?: boolean;
-  selection: null | Array<{ id: string }>;
-  draggedNodes: null | Array<string>;
-  entries: Array<ItemElement>;
-  onCancelDrag: () => void;
-  position: number;
-  chain?: Array<string>;
-  depth?: number;
-};
-
-const Entry: React.FC<EntryProps> = ({
-  id,
-  parentID,
-  isRoot = false,
-  selection,
-  onToggleCollapse,
-  onStartSelect,
-  position,
-  onCancelDrag,
-  onStartDrag,
-  collapsed = false,
-  draggedNodes,
-  entries,
-  chain = [],
-  depth = 0,
-}) => {
-  const $entry = useRef<HTMLDivElement>(null);
-  const $children = useRef<HTMLDivElement>(null);
-  const { setNodeDimensions, clearNodeDimensions } = useDrag();
-  useEffect(() => {
-    if (isRoot) return;
-    if ($entry && $entry.current) {
-      setNodeDimensions(id, {
-        entry: $entry,
-        children: entries.length !== 0 ? $children : null,
-      });
-    }
-    return () => {
-      clearNodeDimensions(id);
-    };
-  }, [position, depth, entries]);
-  let showHandle = true;
-  if (draggedNodes && draggedNodes.length === 1 && draggedNodes.find(c => c === id)) {
-    showHandle = false;
-  }
-  let isSelected = false;
-  if (selection && selection.find(c => c.id === id)) {
-    isSelected = true;
-  }
-  let onSaveTimer: any = null;
-  const onSaveTimeout = 300;
-  return (
-    <EntryWrapper isSelected={isSelected} isDragging={!showHandle}>
-      {!isRoot && (
-        <EntryContent>
-          {entries.length !== 0 && (
-            <ExpandButton onClick={() => onToggleCollapse(id, !collapsed)}>
-              {collapsed ? <CaretRight width={20} height={20} /> : <CaretDown width={20} height={20} />}
-            </ExpandButton>
-          )}
-          {showHandle && (
-            <EntryHandle
-              onMouseUp={() => onCancelDrag()}
-              onMouseDown={e => {
-                onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
-              }}
-            >
-              <Dot width={18} height={18} />
-            </EntryHandle>
-          )}
-          <EntryInnerContent
-            onMouseDown={() => {
-              onStartSelect({ id, depth });
-            }}
-            onKeyDown={e => {
-              if (e.key === 'z' && e.ctrlKey) {
-                if ($entry && $entry.current) {
-                  console.log(getCaretPosition($entry.current));
-                }
-              } else {
-                clearTimeout(onSaveTimer);
-                if ($entry && $entry.current) {
-                  onSaveTimer = setTimeout(() => {
-                    if ($entry && $entry.current) {
-                      console.log($entry.current.textContent);
-                    }
-                  }, onSaveTimeout);
-                }
-              }
-            }}
-            contentEditable
-            ref={$entry}
-          >
-            {`${id.toString()} - ${position}`}
-          </EntryInnerContent>
-        </EntryContent>
-      )}
-      {entries.length !== 0 && !collapsed && (
-        <EntryChildren ref={$children} isRoot={isRoot}>
-          {entries
-            .sort((a, b) => a.position - b.position)
-            .map(entry => (
-              <Entry
-                parentID={id}
-                key={entry.id}
-                position={entry.position}
-                depth={depth + 1}
-                draggedNodes={draggedNodes}
-                collapsed={entry.collapsed}
-                id={entry.id}
-                onStartSelect={onStartSelect}
-                onStartDrag={onStartDrag}
-                onCancelDrag={onCancelDrag}
-                entries={entry.children ?? []}
-                chain={[...chain, id]}
-                selection={selection}
-                onToggleCollapse={onToggleCollapse}
-              />
-            ))}
-        </EntryChildren>
-      )}
-    </EntryWrapper>
-  );
-};
-
-export default Entry;

frontend/src/Outline/Styles.ts

@@ -1,164 +0,0 @@
-import styled, { css } from 'styled-components';
-import { mixin } from 'shared/utils/styles';
-
-export const EntryWrapper = styled.div<{ isDragging: boolean; isSelected: boolean }>`
-  position: relative;
-  ${props =>
-    props.isDragging &&
-    css`
-      &:before {
-        border-radius: 3px;
-        content: '';
-        position: absolute;
-        top: 2px;
-        right: -5px;
-        left: -5px;
-        bottom: -2px;
-        background-color: #eceef0;
-      }
-    `}
-  ${props =>
-    props.isSelected &&
-    css`
-      &:before {
-        border-radius: 3px;
-        content: '';
-        position: absolute;
-        top: 2px;
-        right: -5px;
-        bottom: -2px;
-        left: -5px;
-        background-color: rgba(${props.theme.colors.primary}, 0.75);
-      }
-    `}
-`;
-
-export const EntryChildren = styled.div<{ isRoot: boolean }>`
-  position: relative;
-  ${props =>
-    !props.isRoot &&
-    css`
-      margin-left: 10px;
-      padding-left: 25px;
-      border-left: 1px solid rgba(${props.theme.colors.text.primary}, 0.6);
-    `}
-`;
-
-export const PageContent = styled.div`
-  min-height: calc(100vh - 146px);
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-shadow: none;
-  user-select: none;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 700px;
-  padding-left: 56px;
-  padding-right: 56px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  text-size-adjust: none;
-`;
-
-export const DragHandle = styled.div<{ top: number; left: number }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  left: 0;
-  top: 0;
-  transform: translate3d(${props => props.left}px, ${props => props.top}px, 0);
-  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
-  width: 18px;
-  height: 18px;
-  color: rgb(75, 81, 85);
-  border-radius: 9px;
-`;
-export const RootWrapper = styled.div``;
-
-export const EntryHandle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 501px;
-  top: 7px;
-  width: 18px;
-  height: 18px;
-  color: rgba(${p => p.theme.colors.text.primary});
-  border-radius: 9px;
-  &:hover {
-    background: rgba(${p => p.theme.colors.primary});
-  }
-  svg {
-    fill: rgba(${p => p.theme.colors.text.primary});
-    stroke: rgba(${p => p.theme.colors.text.primary});
-  }
-`;
-
-export const EntryInnerContent = styled.div`
-  padding-top: 4px;
-  font-size: 15px;
-  white-space: pre-wrap;
-  line-height: 24px;
-  min-height: 24px;
-  overflow-wrap: break-word;
-  position: relative;
-  user-select: text;
-  color: rgba(${p => p.theme.colors.text.primary});
-  &::selection {
-    background: #a49de8;
-  }
-  &:focus {
-    outline: 0;
-  }
-`;
-
-export const DragDebugWrapper = styled.div`
-  position: absolute;
-  left: 42px;
-  bottom: 24px;
-  color: #fff;
-`;
-
-export const DragIndicatorBar = styled.div<{ left: number; top: number; width: number }>`
-  position: absolute;
-  width: ${props => props.width}px;
-  top: ${props => props.top}px;
-  left: ${props => props.left}px;
-  height: 4px;
-  border-radius: 3px;
-  background: rgb(204, 204, 204);
-`;
-
-export const ExpandButton = styled.div`
-  top: 6px;
-  cursor: default;
-  color: transparent;
-  position: absolute;
-  top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  left: 478px;
-  width: 20px;
-  height: 20px;
-  svg {
-    fill: transparent;
-  }
-`;
-export const EntryContent = styled.div`
-  position: relative;
-  margin-left: -500px;
-  padding-left: 524px;
-
-  &:hover ${ExpandButton} svg {
-    fill: rgb(${props => props.theme.colors.text.primary});
-  }
-`;
-
-export const PageContainer = styled.div`
-  overflow: scroll;
-`;

frontend/src/Outline/index.tsx

@@ -1,504 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback, useContext, memo, createRef } from 'react';
-import { DotCircle } from 'shared/icons';
-import styled from 'styled-components/macro';
-import GlobalTopNavbar from 'App/TopNavbar';
-import _ from 'lodash';
-import produce from 'immer';
-import Entry from './Entry';
-import DragIndicator from './DragIndicator';
-import Dragger from './Dragger';
-import DragDebug from './DragDebug';
-import { DragContext } from './useDrag';
-
-import {
-  PageContainer,
-  DragDebugWrapper,
-  DragIndicatorBar,
-  PageContent,
-  EntryChildren,
-  EntryInnerContent,
-  EntryWrapper,
-  EntryContent,
-  RootWrapper,
-  EntryHandle,
-} from './Styles';
-import {
-  transformToTree,
-  findNode,
-  findNodeDepth,
-  getNumberOfChildren,
-  validateDepth,
-  getDimensions,
-  findNextDraggable,
-  getNodeOver,
-  getCorrectNode,
-  findCommonParent,
-} from './utils';
-import NOOP from 'shared/utils/noop';
-
-type OutlineCommand = {
-  nodes: Array<{
-    id: string;
-    prev: { position: number; parent: string | null };
-    next: { position: number; parent: string | null };
-  }>;
-};
-
-type ItemCollapsed = {
-  id: string;
-  collapsed: boolean;
-};
-
-const listItems: Array<ItemElement> = [
-  { id: 'root', position: 4096, parent: null, collapsed: false },
-  { id: 'entry-1', position: 4096, parent: 'root', collapsed: false },
-  { id: 'entry-1_3', position: 4096 * 3, parent: 'entry-1', collapsed: false },
-  { id: 'entry-1_3_1', position: 4096, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_2', position: 4096 * 2, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_3', position: 4096 * 3, parent: 'entry-1_3', collapsed: false },
-  { id: 'entry-1_3_3_1', position: 4096 * 1, parent: 'entry-1_3_3', collapsed: false },
-  { id: 'entry-1_3_3_1_1', position: 4096 * 1, parent: 'entry-1_3_3_1', collapsed: false },
-  { id: 'entry-2', position: 4096 * 2, parent: 'root', collapsed: false },
-  { id: 'entry-3', position: 4096 * 3, parent: 'root', collapsed: false },
-  { id: 'entry-4', position: 4096 * 4, parent: 'root', collapsed: false },
-  { id: 'entry-5', position: 4096 * 5, parent: 'root', collapsed: false },
-];
-
-const Outline: React.FC = () => {
-  const [items, setItems] = useState(listItems);
-  const [selecting, setSelecting] = useState<{
-    isSelecting: boolean;
-    node: { id: string; depth: number } | null;
-  }>({ isSelecting: false, node: null });
-  const [selection, setSelection] = useState<null | { nodes: Array<{ id: string }>; first?: OutlineNode | null }>(null);
-  const [dragging, setDragging] = useState<{
-    show: boolean;
-    draggedNodes: null | Array<string>;
-    initialPos: { x: number; y: number };
-  }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-  const [impact, setImpact] = useState<null | {
-    listPosition: number;
-    zone: ImpactZone;
-    depthTarget: number;
-  }>(null);
-  const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
-    {
-      isSelecting: false,
-      node: null,
-      hasSelection: false,
-    },
-  );
-  const impactRef = useRef<null | { listPosition: number; depth: number; zone: ImpactZone }>(null);
-  useEffect(() => {
-    if (impact) {
-      impactRef.current = { zone: impact.zone, depth: impact.depthTarget, listPosition: impact.listPosition };
-    }
-  }, [impact]);
-  useEffect(() => {
-    selectRef.current.isSelecting = selecting.isSelecting;
-    selectRef.current.node = selecting.node;
-  }, [selecting]);
-
-  const $content = useRef<HTMLDivElement>(null);
-  const outline = useRef<OutlineData>({
-    published: new Map<string, string>(),
-    dimensions: new Map<string, NodeDimensions>(),
-    nodes: new Map<number, Map<string, OutlineNode>>(),
-    relationships: new Map<string, NodeRelationships>(),
-  });
-
-  const tree = transformToTree(_.cloneDeep(items));
-  let root: any = null;
-  if (tree.length === 1) {
-    root = tree[0];
-  }
-  const outlineHistory = useRef<{ commands: Array<OutlineCommand>; current: number }>({ current: -1, commands: [] });
-
-  useEffect(() => {
-    outline.current.relationships = new Map<string, NodeRelationships>();
-    outline.current.published = new Map<string, string>();
-    outline.current.nodes = new Map<number, Map<string, OutlineNode>>();
-    const collapsedMap = items.reduce((map, next) => {
-      if (next.collapsed) {
-        map.set(next.id, true);
-      }
-      return map;
-    }, new Map<string, boolean>());
-    items.forEach(item => outline.current.published.set(item.id, item.parent ?? 'root'));
-
-    for (let i = 0; i < items.length; i++) {
-      const { collapsed, position, id, parent: curParent } = items[i];
-      if (id === 'root') {
-        continue;
-      }
-      const parent = curParent ?? 'root';
-      outline.current.published.set(id, parent ?? 'root');
-      const { depth, ancestors } = findNodeDepth(outline.current.published, id);
-      const collapsedParent = ancestors.slice(0, -1).find(a => collapsedMap.get(a));
-      if (collapsedParent) {
-        continue;
-      }
-      const children = getNumberOfChildren(root, ancestors);
-      if (!outline.current.nodes.has(depth)) {
-        outline.current.nodes.set(depth, new Map<string, OutlineNode>());
-      }
-      const targetDepthNodes = outline.current.nodes.get(depth);
-      if (targetDepthNodes) {
-        targetDepthNodes.set(id, {
-          id,
-          children,
-          position,
-          depth,
-          ancestors,
-          collapsed,
-          parent,
-        });
-      }
-      if (!outline.current.relationships.has(parent)) {
-        outline.current.relationships.set(parent, {
-          self: {
-            depth: depth - 1,
-            id: parent,
-          },
-          children: [],
-          numberOfSubChildren: 0,
-        });
-      }
-      const nodeRelations = outline.current.relationships.get(parent);
-      if (nodeRelations) {
-        outline.current.relationships.set(parent, {
-          self: nodeRelations.self,
-          numberOfSubChildren: nodeRelations.numberOfSubChildren + children,
-          children: [...nodeRelations.children, { id, position, depth, children }].sort(
-            (a, b) => a.position - b.position,
-          ),
-        });
-      }
-    }
-  }, [items]);
-  const handleKeyDown = useCallback(e => {
-    if (e.code === 'KeyZ' && e.ctrlKey) {
-      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current];
-      if (currentCommand) {
-        setItems(prevItems =>
-          produce(prevItems, draftItems => {
-            currentCommand.nodes.forEach(node => {
-              const idx = prevItems.findIndex(c => c.id === node.id);
-              if (idx !== -1) {
-                draftItems[idx].parent = node.prev.parent;
-                draftItems[idx].position = node.prev.position;
-              }
-            });
-            outlineHistory.current.current--;
-          }),
-        );
-      }
-    } else if (e.code === 'KeyY' && e.ctrlKey) {
-      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current + 1];
-      if (currentCommand) {
-        setItems(prevItems =>
-          produce(prevItems, draftItems => {
-            currentCommand.nodes.forEach(node => {
-              const idx = prevItems.findIndex(c => c.id === node.id);
-              if (idx !== -1) {
-                draftItems[idx].parent = node.next.parent;
-                draftItems[idx].position = node.next.position;
-              }
-            });
-            outlineHistory.current.current++;
-          }),
-        );
-      }
-    }
-  }, []);
-
-  const handleMouseUp = useCallback(
-    e => {
-      if (selectRef.current.hasSelection && !selectRef.current.isSelecting) {
-        setSelection(null);
-      }
-      if (selectRef.current.isSelecting) {
-        setSelecting({ isSelecting: false, node: null });
-      }
-    },
-    [dragging, selecting],
-  );
-  const handleMouseMove = useCallback(e => {
-    if (selectRef.current.isSelecting && selectRef.current.node) {
-      const { clientX, clientY } = e;
-      const dimensions = outline.current.dimensions.get(selectRef.current.node.id);
-      if (dimensions) {
-        const entry = getDimensions(dimensions.entry);
-        if (entry) {
-          const isAbove = clientY < entry.top;
-          const isBelow = clientY > entry.bottom;
-          if (!isAbove && !isBelow && selectRef.current.hasSelection) {
-            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
-            const aboveNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
-            if (aboveNode) {
-              setSelection({ nodes: [{ id: selectRef.current.node.id }], first: aboveNode });
-              selectRef.current.hasSelection = false;
-            }
-          }
-          if (isAbove || isBelow) {
-            e.preventDefault();
-            const { curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
-            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
-            const selectedNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
-            let aboveNode: OutlineNode | undefined | null = null;
-            let belowNode: OutlineNode | undefined | null = null;
-            if (isBelow) {
-              aboveNode = selectedNode;
-              belowNode = curDraggable;
-            } else {
-              aboveNode = curDraggable;
-              belowNode = selectedNode;
-            }
-            if (aboveNode && belowNode) {
-              const aboveDim = outline.current.dimensions.get(aboveNode.id);
-              const belowDim = outline.current.dimensions.get(belowNode.id);
-              if (aboveDim && belowDim) {
-                const aboveDimBounds = getDimensions(aboveDim.entry);
-                const belowDimBounds = getDimensions(belowDim.children ? belowDim.children : belowDim.entry);
-                const aboveDimY = aboveDimBounds ? aboveDimBounds.bottom : 0;
-                const belowDimY = belowDimBounds ? belowDimBounds.top : 0;
-                const inbetweenNodes: Array<{ id: string }> = [];
-                for (const [id, dimension] of outline.current.dimensions.entries()) {
-                  if (id === aboveNode.id || id === belowNode.id) {
-                    inbetweenNodes.push({ id });
-                    continue;
-                  }
-                  const targetNodeBounds = getDimensions(dimension.entry);
-                  if (targetNodeBounds) {
-                    if (
-                      Math.round(aboveDimY) <= Math.round(targetNodeBounds.top) &&
-                      Math.round(belowDimY) >= Math.round(targetNodeBounds.bottom)
-                    ) {
-                      inbetweenNodes.push({ id });
-                    }
-                  }
-                }
-                const filteredNodes = inbetweenNodes.filter(n => {
-                  const parent = outline.current.published.get(n.id);
-                  if (parent) {
-                    const foundParent = inbetweenNodes.find(c => c.id === parent);
-                    if (foundParent) {
-                      return false;
-                    }
-                  }
-                  return true;
-                });
-                selectRef.current.hasSelection = true;
-                setSelection({ nodes: filteredNodes, first: aboveNode });
-              }
-            }
-          }
-        }
-      }
-    }
-  }, []);
-  useEffect(() => {
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.addEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
-  if (!root) {
-    return null;
-  }
-  return (
-    <>
-      <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
-      <DragContext.Provider
-        value={{
-          outline,
-          impact,
-          setImpact: data => {
-            if (data) {
-              const { zone, depth } = data;
-              let listPosition = 65535;
-              if (zone.above && zone.above.node.depth + 1 <= depth && zone.above.node.collapsed) {
-                const aboveChildren = items
-                  .filter(i => (zone.above ? i.parent === zone.above.node.id : false))
-                  .sort((a, b) => a.position - b.position);
-                const lastChild = aboveChildren[aboveChildren.length - 1];
-                if (lastChild) {
-                  listPosition = lastChild.position * 2.0;
-                }
-              } else {
-                console.log(zone.above);
-                console.log(zone.below);
-                const correctNode = getCorrectNode(outline.current, zone.above ? zone.above.node : null, depth);
-                console.log(correctNode);
-                const listAbove = validateDepth(correctNode, depth);
-                const listBelow = validateDepth(zone.below ? zone.below.node : null, depth);
-                console.log(listAbove, listBelow);
-                if (listAbove && listBelow) {
-                  listPosition = (listAbove.position + listBelow.position) / 2.0;
-                } else if (listAbove && !listBelow) {
-                  listPosition = listAbove.position * 2.0;
-                } else if (!listAbove && listBelow) {
-                  listPosition = listBelow.position / 2.0;
-                }
-              }
-
-              if (!zone.above && zone.below) {
-                const newPosition = zone.below.node.position / 2.0;
-                setImpact(() => ({
-                  zone,
-                  listPosition: newPosition,
-                  depthTarget: depth,
-                }));
-              }
-              if (zone.above) {
-                // console.log(`prev=${prev} next=${next} targetPosition=${targetPosition}`);
-                // let targetID = depthTarget === 1 ? 'root' : node.ancestors[depthTarget - 1];
-                // targetID = targetID ?? node.id;
-                setImpact(() => ({
-                  zone,
-                  listPosition,
-                  depthTarget: depth,
-                }));
-              }
-            } else {
-              setImpact(null);
-            }
-          },
-          setNodeDimensions: (nodeID, ref) => {
-            outline.current.dimensions.set(nodeID, ref);
-          },
-          clearNodeDimensions: nodeID => {
-            outline.current.dimensions.delete(nodeID);
-          },
-        }}
-      >
-        <>
-          <PageContainer>
-            <PageContent>
-              <RootWrapper ref={$content}>
-                <Entry
-                  onStartSelect={({ id, depth }) => {
-                    setSelection(null);
-                    setSelecting({ isSelecting: true, node: { id, depth } });
-                  }}
-                  onToggleCollapse={(id, collapsed) => {
-                    setItems(prevItems =>
-                      produce(prevItems, draftItems => {
-                        const idx = prevItems.findIndex(c => c.id === id);
-                        if (idx !== -1) {
-                          draftItems[idx].collapsed = collapsed;
-                        }
-                      }),
-                    );
-                  }}
-                  id="root"
-                  parentID="root"
-                  isRoot
-                  selection={selection ? selection.nodes : null}
-                  draggedNodes={dragging.draggedNodes}
-                  position={root.position}
-                  entries={root.children}
-                  onCancelDrag={() => {
-                    setImpact(null);
-                    setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-                  }}
-                  onStartDrag={e => {
-                    if (e.id !== 'root') {
-                      if (selectRef.current.hasSelection && selection && selection.nodes.find(c => c.id === e.id)) {
-                        setImpact(null);
-                        setDragging({
-                          show: true,
-                          draggedNodes: [...selection.nodes.map(c => c.id)],
-                          initialPos: { x: e.clientX, y: e.clientY },
-                        });
-                      } else {
-                        setImpact(null);
-                        setDragging({ show: true, draggedNodes: [e.id], initialPos: { x: e.clientX, y: e.clientY } });
-                      }
-                    }
-                  }}
-                />
-              </RootWrapper>
-            </PageContent>
-          </PageContainer>
-          {dragging.show && dragging.draggedNodes && (
-            <Dragger
-              container={$content}
-              initialPos={dragging.initialPos}
-              draggedNodes={{ nodes: dragging.draggedNodes, first: selection ? selection.first : null }}
-              isDragging={dragging.show}
-              onDragEnd={() => {
-                if (dragging.draggedNodes && impactRef.current) {
-                  const { zone, depth, listPosition } = impactRef.current;
-                  const noZone = !zone.above && !zone.below;
-                  if (!noZone) {
-                    let parentID = 'root';
-                    if (zone.above) {
-                      parentID = zone.above.node.ancestors[depth - 1];
-                    }
-                    let reparent = true;
-                    for (let i = 0; i < dragging.draggedNodes.length; i++) {
-                      const draggedID = dragging.draggedNodes[i];
-                      const prevItem = items.find(i => i.id === draggedID);
-                      if (prevItem && prevItem.position === listPosition && prevItem.parent === parentID) {
-                        reparent = false;
-                        break;
-                      }
-                    }
-                    // TODO: set reparent if list position changed but parent did not
-                    //
-
-                    if (reparent) {
-                      // UPDATE OUTLINE DATA AFTER NODE MOVE
-                      setItems(itemsPrev =>
-                        produce(itemsPrev, draftItems => {
-                          if (dragging.draggedNodes) {
-                            const command: OutlineCommand = { nodes: [] };
-                            outlineHistory.current.current += 1;
-                            dragging.draggedNodes.forEach(n => {
-                              const curDragging = itemsPrev.findIndex(i => i.id === n);
-                              command.nodes.push({
-                                id: n,
-                                prev: {
-                                  parent: draftItems[curDragging].parent,
-                                  position: draftItems[curDragging].position,
-                                },
-                                next: {
-                                  parent: parentID,
-                                  position: listPosition,
-                                },
-                              });
-                              draftItems[curDragging].parent = parentID;
-                              draftItems[curDragging].position = listPosition;
-                            });
-                            outlineHistory.current.commands[outlineHistory.current.current] = command;
-                            if (outlineHistory.current.commands[outlineHistory.current.current + 1]) {
-                              outlineHistory.current.commands.splice(outlineHistory.current.current + 1);
-                            }
-                          }
-                        }),
-                      );
-                    }
-                  }
-                }
-                setImpact(null);
-                setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
-              }}
-            />
-          )}
-        </>
-      </DragContext.Provider>
-      {impact && <DragIndicator depthTarget={impact.depthTarget} container={$content} zone={impact.zone} />}
-      {impact && (
-        <DragDebug zone={impact.zone ?? null} draggedNodes={dragging.draggedNodes} depthTarget={impact.depthTarget} />
-      )}
-    </>
-  );
-};
-
-export default Outline;

frontend/src/Outline/useDrag.ts

@@ -1,22 +0,0 @@
-import React, { useContext } from 'react';
-
-type DragContextData = {
-  impact: null | { zone: ImpactZone; depthTarget: number };
-  outline: React.MutableRefObject<OutlineData>;
-  setNodeDimensions: (
-    nodeID: string,
-    ref: { entry: React.RefObject<HTMLElement>; children: React.RefObject<HTMLElement> | null },
-  ) => void;
-  clearNodeDimensions: (nodeID: string) => void;
-  setImpact: (data: ImpactData | null) => void;
-};
-
-export const DragContext = React.createContext<DragContextData | null>(null);
-
-export const useDrag = () => {
-  const ctx = useContext(DragContext);
-  if (ctx) {
-    return ctx;
-  }
-  throw new Error('context is null');
-};

frontend/src/Outline/utils.ts

@@ -1,361 +0,0 @@
-import _ from 'lodash';
-
-export function getCorrectNode(data: OutlineData, node: OutlineNode | null, depth: number) {
-  if (node) {
-    console.log(depth, node);
-    if (depth === node.depth) {
-      return node;
-    }
-    const parent = node.ancestors[depth];
-    console.log('parent', parent);
-    if (parent) {
-      const parentNode = data.relationships.get(parent);
-      if (parentNode) {
-        const parentDepth = parentNode.self.depth;
-        const nodeDepth = data.nodes.get(parentDepth);
-        return nodeDepth ? nodeDepth.get(parent) : null;
-      }
-    }
-  }
-  return null;
-}
-export function validateDepth(node: OutlineNode | null | undefined, depth: number) {
-  if (node) {
-    return node.depth === depth ? node : null;
-  }
-  return null;
-}
-
-export function getNodeAbove(node: OutlineNode, startingParent: RelationshipChild, outline: OutlineData) {
-  let hasChildren = true;
-  let nodeAbove: null | RelationshipChild = null;
-  let aboveTargetID = startingParent.id;
-  while (hasChildren) {
-    const targetParent = outline.relationships.get(aboveTargetID);
-    if (targetParent) {
-      const parentNodes = outline.nodes.get(targetParent.self.depth);
-      const parentNode = parentNodes ? parentNodes.get(targetParent.self.id) : null;
-      if (targetParent.children.length === 0) {
-        if (parentNode) {
-          nodeAbove = {
-            id: parentNode.id,
-            depth: parentNode.depth,
-            position: parentNode.position,
-            children: parentNode.children,
-          };
-          console.log('node above', nodeAbove);
-        }
-        hasChildren = false;
-        continue;
-      }
-      nodeAbove = targetParent.children[targetParent.children.length - 1];
-      if (targetParent.numberOfSubChildren === 0) {
-        hasChildren = false;
-      } else {
-        aboveTargetID = nodeAbove.id;
-      }
-    } else {
-      const target = outline.relationships.get(node.ancestors[0]);
-      if (target) {
-        const targetChild = target.children.find(i => i.id === aboveTargetID);
-        if (targetChild) {
-          nodeAbove = targetChild;
-        }
-        hasChildren = false;
-      }
-    }
-  }
-  console.log('final node above', nodeAbove);
-  return nodeAbove;
-}
-
-export function getBelowParent(node: OutlineNode, outline: OutlineData) {
-  const { relationships, nodes } = outline;
-  const parentDepth = nodes.get(node.depth - 1);
-  const parent = parentDepth ? parentDepth.get(node.parent) : null;
-  if (parent) {
-    const grandfather = relationships.get(parent.parent);
-    if (grandfather) {
-      const parentIndex = grandfather.children.findIndex(c => c.id === parent.id);
-      if (parentIndex !== -1) {
-        if (parentIndex === grandfather.children.length - 1) {
-          const root = relationships.get(node.ancestors[0]);
-          if (root) {
-            const ancestorIndex = root.children.findIndex(c => c.id === node.ancestors[1]);
-            if (ancestorIndex !== -1) {
-              const nextAncestor = root.children[ancestorIndex + 1];
-              if (nextAncestor) {
-                return nextAncestor;
-              }
-            }
-          }
-        } else {
-          const nextChild = grandfather.children[parentIndex + 1];
-          if (nextChild) {
-            return nextChild;
-          }
-        }
-      }
-    }
-  }
-  return null;
-}
-
-export function getDimensions(ref: React.RefObject<HTMLElement> | null | undefined) {
-  if (ref && ref.current) {
-    return ref.current.getBoundingClientRect();
-  }
-  return null;
-}
-
-export function getTargetDepth(mouseX: number, handleLeft: number, availableDepths: { min: number; max: number }) {
-  if (mouseX > handleLeft) {
-    return availableDepths.max;
-  }
-  let curDepth = availableDepths.max - 1;
-  for (let x = availableDepths.min; x < availableDepths.max; x++) {
-    const breakpoint = handleLeft - x * 35;
-    // console.log(`mouseX=${mouseX} breakpoint=${breakpoint} x=${x} curDepth=${curDepth}`);
-    if (mouseX > breakpoint) {
-      return curDepth;
-    }
-    curDepth -= 1;
-  }
-
-  return availableDepths.min;
-}
-
-export function findNextDraggable(pos: { x: number; y: number }, outline: OutlineData, curDepth: number) {
-  let index = 0;
-  const currentDepthNodes = outline.nodes.get(curDepth);
-  let nodeAbove: null | RelationshipChild = null;
-  if (!currentDepthNodes) {
-    return null;
-  }
-  for (const [id, node] of currentDepthNodes) {
-    const dimensions = outline.dimensions.get(id);
-    const target = dimensions ? getDimensions(dimensions.entry) : null;
-    const children = dimensions ? getDimensions(dimensions.children) : null;
-    if (target) {
-      console.log(
-        `[${id}] ${pos.y} <= ${target.bottom} = ${pos.y <= target.bottom} / ${pos.y} >= ${target.top} = ${pos.y >=
-          target.top}`,
-      );
-      if (pos.y <= target.bottom && pos.y >= target.top) {
-        const middlePoint = target.top + target.height / 2;
-        const position: ImpactPosition = pos.y > middlePoint ? 'after' : 'before';
-        return {
-          found: true,
-          node,
-          position,
-        };
-      }
-    }
-    if (children) {
-      console.log(
-        `[${id}] ${pos.y} <= ${children.bottom} = ${pos.y <= children.bottom} / ${pos.y} >= ${children.top} = ${pos.y >=
-          children.top}`,
-      );
-      if (pos.y <= children.bottom && pos.y >= children.top) {
-        const position: ImpactPosition = 'after';
-        return { found: false, node, position };
-      }
-    }
-    index += 1;
-  }
-  return null;
-}
-
-export function transformToTree(arr: any) {
-  const nodes: any = {};
-  return arr.filter(function(obj: any) {
-    var id = obj['id'],
-      parentId = obj['parent'];
-
-    nodes[id] = _.defaults(obj, nodes[id], { children: [] });
-    parentId && (nodes[parentId] = nodes[parentId] || { children: [] })['children'].push(obj);
-
-    return !parentId;
-  });
-}
-
-export function findNode(parentID: string, nodeID: string, data: OutlineData) {
-  const nodeRelations = data.relationships.get(parentID);
-  if (nodeRelations) {
-    const nodeDepth = data.nodes.get(nodeRelations.self.depth + 1);
-    if (nodeDepth) {
-      const node = nodeDepth.get(nodeID);
-      return node ?? null;
-    }
-  }
-  return null;
-}
-
-export function findNodeDepth(published: Map<string, string>, id: string) {
-  let currentID = id;
-  let breaker = 0;
-  let depth = 0;
-  let ancestors = [id];
-  while (currentID !== 'root') {
-    const nextID = published.get(currentID);
-    if (nextID) {
-      ancestors = [nextID, ...ancestors];
-      currentID = nextID;
-      depth += 1;
-      breaker += 1;
-      if (breaker > 100) {
-        throw new Error('node depth breaker was thrown');
-      }
-    } else {
-      throw new Error('unable to find nextID');
-    }
-  }
-  return { depth, ancestors };
-}
-
-export function getNumberOfChildren(root: ItemElement, ancestors: Array<string>) {
-  let currentBranch = root;
-  for (let i = 1; i < ancestors.length; i++) {
-    const nextBranch = currentBranch.children ? currentBranch.children.find(c => c.id === ancestors[i]) : null;
-    if (nextBranch) {
-      currentBranch = nextBranch;
-    } else {
-      throw new Error('unable to find next branch');
-    }
-  }
-  return currentBranch.children ? currentBranch.children.length : 0;
-}
-
-export function findNodeAbove(outline: OutlineData, curDepth: number, belowNode: OutlineNode) {
-  let targetAboveNode: null | RelationshipChild = null;
-  if (curDepth === 1) {
-    const relations = outline.relationships.get(belowNode.ancestors[0]);
-    if (relations) {
-      const parentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.ancestors[1]);
-      if (parentIndex !== -1) {
-        const aboveParent = relations.children[parentIndex - 1];
-        if (parentIndex === 0) {
-          targetAboveNode = null;
-        } else {
-          targetAboveNode = getNodeAbove(belowNode, aboveParent, outline);
-        }
-      }
-    }
-  } else {
-    const relations = outline.relationships.get(belowNode.parent);
-    if (relations) {
-      const currentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.id);
-      // is first child, so use parent
-      if (currentIndex === 0) {
-        const parentNodes = outline.nodes.get(belowNode.depth - 1);
-        const parentNode = parentNodes ? parentNodes.get(belowNode.parent) : null;
-        if (parentNode) {
-          targetAboveNode = {
-            id: belowNode.parent,
-            depth: belowNode.depth - 1,
-            position: parentNode.position,
-            children: parentNode.children,
-          };
-        }
-      } else if (currentIndex !== -1) {
-        // is not first child, so first prev sibling
-        const aboveParentNode = relations.children[currentIndex - 1];
-        if (aboveParentNode) {
-          targetAboveNode = getNodeAbove(belowNode, aboveParentNode, outline);
-          if (targetAboveNode === null) {
-            targetAboveNode = aboveParentNode;
-          }
-        }
-      }
-    }
-  }
-  if (targetAboveNode) {
-    const depthNodes = outline.nodes.get(targetAboveNode.depth);
-    if (depthNodes) {
-      return depthNodes.get(targetAboveNode.id) ?? null;
-    }
-  }
-  return null;
-}
-
-export function getNodeOver(mouse: { x: number; y: number }, outline: OutlineData) {
-  let curDepth = 1;
-  let curDraggables: any;
-  let curDraggable: any;
-  let curPosition: ImpactPosition = 'after';
-  while (outline.nodes.size + 1 > curDepth) {
-    curDraggables = outline.nodes.get(curDepth);
-    if (curDraggables) {
-      const nextDraggable = findNextDraggable(mouse, outline, curDepth);
-      if (nextDraggable) {
-        curDraggable = nextDraggable.node;
-        curPosition = nextDraggable.position;
-        if (nextDraggable.found) {
-          break;
-        }
-        curDepth += 1;
-      } else {
-        break;
-      }
-    }
-  }
-  return {
-    curDepth,
-    curDraggable,
-    curPosition,
-  };
-}
-
-export function findCommonParent(outline: OutlineData, aboveNode: OutlineNode, belowNode: OutlineNode) {
-  let aboveParentID = null;
-  let depth = 0;
-  for (let aIdx = aboveNode.ancestors.length - 1; aIdx !== 0; aIdx--) {
-    depth = aIdx;
-    const aboveNodeParent = aboveNode.ancestors[aIdx];
-    for (let bIdx = belowNode.ancestors.length - 1; bIdx !== 0; bIdx--) {
-      if (belowNode.ancestors[bIdx] === aboveNodeParent) {
-        aboveParentID = aboveNodeParent;
-      }
-    }
-  }
-  if (aboveParentID) {
-    const parent = outline.relationships.get(aboveParentID) ?? null;
-    if (parent) {
-      return {
-        parent,
-        depth,
-      };
-    }
-    return null;
-  }
-  return null;
-}
-
-export function getLastChildInBranch(outline: OutlineData, lastParentNode: OutlineNode) {
-  let curParentRelation = outline.relationships.get(lastParentNode.id);
-  if (!curParentRelation) {
-    return { id: lastParentNode.id, depth: 1 };
-  }
-  let hasChildren = lastParentNode.children !== 0;
-  let depth = 1;
-  let finalID: null | string = null;
-  while (hasChildren) {
-    if (curParentRelation) {
-      const lastChild = curParentRelation.children.sort((a, b) => a.position - b.position)[
-        curParentRelation.children.length - 1
-      ];
-      depth += 1;
-      if (lastChild.children === 0) {
-        finalID = lastChild.id;
-        break;
-      }
-      curParentRelation = outline.relationships.get(lastChild.id);
-    } else {
-      hasChildren = false;
-    }
-  }
-  if (finalID !== null) {
-    return { id: finalID, depth };
-  }
-  return null;
-}

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

@@ -12,7 +12,7 @@ const FilterMember = styled(Member)`
   margin: 2px 0;
   &:hover {
     cursor: pointer;
-    background: rgba(${props => props.theme.colors.primary});
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -71,7 +71,7 @@ export const ActionItem = styled.li`
   align-items: center;
   font-size: 14px;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -80,7 +80,7 @@ export const ActionTitle = styled.span`
 `;
 
 const ActionItemSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   font-size: 12px;
   padding-left: 4px;
   padding-right: 4px;

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

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

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

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

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

@@ -136,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   font-size: 15px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 
   &:not(:last-of-type) {
     margin-right: 16px;
   }
 
   &:hover {
-    color: rgba(${props => props.theme.colors.text.secondary});
+    color: ${props => props.theme.colors.text.secondary};
   }
   ${props =>
     props.disabled &&
@@ -280,7 +280,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
-              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data.deleteTaskGroup.taskGroup.id,
+              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
             );
           }),
         { projectID },
@@ -296,9 +296,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data.createTask.taskGroup.id);
+            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
             if (idx !== -1) {
-              draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
+              if (newTaskData.data) {
+                draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
+              }
             }
           }),
         { projectID },
@@ -313,7 +315,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
+            if (newTaskGroupData.data) {
+              draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
+            }
           }),
         { projectID },
       );
@@ -332,7 +336,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         cache =>
           produce(cache, draftCache => {
             const idx = cache.findProject.taskGroups.findIndex(
-              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
+              t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
             );
             if (idx !== -1) {
               draftCache.findProject.taskGroups[idx].tasks = [];
@@ -348,7 +352,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+            if (resp.data) {
+              draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+            }
           }),
         { projectID },
       );
@@ -364,19 +370,24 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
-            if (previousTaskGroupID !== task.taskGroup.id) {
-              const { taskGroups } = cache.findProject;
-              const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
-              const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
-              if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
-                draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
-                  (t: Task) => t.id !== task.id,
-                );
-                draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
-                  ...taskGroups[newTaskGroupIdx].tasks,
-                  { ...task },
-                ];
+            if (newTask.data) {
+              const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
+              if (previousTaskGroupID !== task.taskGroup.id) {
+                const { taskGroups } = cache.findProject;
+                const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
+                const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
+                if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
+                  const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(t => t.id === task.id);
+                  draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
+                    (t: Task) => t.id !== task.id,
+                  );
+                  if (previousTask) {
+                    draftCache.findProject.taskGroups[newTaskGroupIdx].tasks = [
+                      ...taskGroups[newTaskGroupIdx].tasks,
+                      { ...previousTask },
+                    ];
+                  }
+                }
               }
             }
           }),
@@ -448,9 +459,6 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     }
   };
 
-  if (loading) {
-    return <BoardLoading />;
-  }
   const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
     if (filter.status === TaskStatus.COMPLETE) {
       return 'Complete';
@@ -807,7 +815,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
     );
   }
 
-  return <span>Error</span>;
+  return <BoardLoading />;
 };
 
 export default ProjectBoard;

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

@@ -21,6 +21,9 @@ import {
   useCreateTaskChecklistItemMutation,
   FindTaskDocument,
   FindTaskQuery,
+  useCreateTaskCommentMutation,
+  useDeleteTaskCommentMutation,
+  useUpdateTaskCommentMutation,
 } from 'shared/generated/graphql';
 import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
@@ -33,6 +36,73 @@ import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
 import NOOP from 'shared/utils/noop';
 
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: ${props => props.theme.colors.primary};
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const WarningLabel = styled.p`
+  font-size: 14px;
+  margin: 8px 12px;
+`;
+const DeleteConfirm = styled(Button)`
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 6px;
+`;
+
+type TaskCommentActionsProps = {
+  onDeleteComment: () => void;
+  onEditComment: () => void;
+};
+const TaskCommentActions: React.FC<TaskCommentActionsProps> = ({ onDeleteComment, onEditComment }) => {
+  const { setTab } = usePopup();
+  return (
+    <>
+      <Popup tab={0} title={null}>
+        <ActionsList>
+          <ActionItem>
+            <ActionTitle>Pin to top</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => onEditComment()}>
+            <ActionTitle>Edit comment</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(1)}>
+            <ActionTitle>Delete comment</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+      <Popup tab={1} title="Delete comment?">
+        <WarningLabel>Deleting a comment can not be undone.</WarningLabel>
+        <DeleteConfirm onClick={() => onDeleteComment()} color="danger">
+          Delete comment
+        </DeleteConfirm>
+      </Popup>
+    </>
+  );
+};
+
 const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
   const total = checklists.reduce((prev: any, next: any) => {
     return (
@@ -130,6 +200,40 @@ const Details: React.FC<DetailsProps> = ({
   const { user } = useCurrentUser();
   const { showPopup, hidePopup } = usePopup();
   const history = useHistory();
+  const [deleteTaskComment] = useDeleteTaskCommentMutation({
+    update: (client, response) => {
+      updateApolloCache<FindTaskQuery>(
+        client,
+        FindTaskDocument,
+        cache =>
+          produce(cache, draftCache => {
+            if (response.data) {
+              draftCache.findTask.comments = cache.findTask.comments.filter(
+                c => c.id !== response.data?.deleteTaskComment.commentID,
+              );
+            }
+          }),
+        { taskID },
+      );
+    },
+  });
+  const [createTaskComment] = useCreateTaskCommentMutation({
+    update: (client, response) => {
+      updateApolloCache<FindTaskQuery>(
+        client,
+        FindTaskDocument,
+        cache =>
+          produce(cache, draftCache => {
+            if (response.data) {
+              draftCache.findTask.comments.push({
+                ...response.data.createTaskComment.comment,
+              });
+            }
+          }),
+        { taskID },
+      );
+    },
+  });
   const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
   const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
     update: (client, response) => {
@@ -138,21 +242,23 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            const { prevChecklistID, checklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
-            if (checklistID !== prevChecklistID) {
-              const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
-              const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
-              if (oldIdx > -1 && newIdx > -1) {
-                const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
-                if (item) {
-                  draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
-                    i => i.id !== checklistItem.id,
-                  );
-                  draftCache.findTask.checklists[newIdx].items.push({
-                    ...item,
-                    position: checklistItem.position,
-                    taskChecklistID: checklistID,
-                  });
+            if (response.data) {
+              const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
+              if (taskChecklistID !== prevChecklistID) {
+                const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
+                const newIdx = cache.findTask.checklists.findIndex(c => c.id === taskChecklistID);
+                if (oldIdx > -1 && newIdx > -1) {
+                  const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
+                  if (item) {
+                    draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
+                      i => i.id !== checklistItem.id,
+                    );
+                    draftCache.findTask.checklists[newIdx].items.push({
+                      ...item,
+                      position: checklistItem.position,
+                      taskChecklistID,
+                    });
+                  }
                 }
               }
             }
@@ -188,7 +294,7 @@ const Details: React.FC<DetailsProps> = ({
           produce(cache, draftCache => {
             const { checklists } = cache.findTask;
             draftCache.findTask.checklists = checklists.filter(
-              c => c.id !== deleteData.data.deleteTaskChecklist.taskChecklist.id,
+              c => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
             );
             const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
             draftCache.findTask.badges.checklist = {
@@ -212,8 +318,10 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            const item = createData.data.createTaskChecklist;
-            draftCache.findTask.checklists.push({ ...item });
+            if (createData.data) {
+              const item = createData.data.createTaskChecklist;
+              draftCache.findTask.checklists.push({ ...item });
+            }
           }),
         { taskID },
       );
@@ -227,36 +335,14 @@ const Details: React.FC<DetailsProps> = ({
         FindTaskDocument,
         cache =>
           produce(cache, draftCache => {
-            const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
-            const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (targetIdx > -1) {
-              draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
-                c => item.id !== c.id,
-              );
-            }
-            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
-            draftCache.findTask.badges.checklist = {
-              __typename: 'ChecklistBadge',
-              complete,
-              total,
-            };
-          }),
-        { taskID },
-      );
-    },
-  });
-  const [createTaskChecklistItem] = useCreateTaskChecklistItemMutation({
-    update: (client, newTaskItem) => {
-      updateApolloCache<FindTaskQuery>(
-        client,
-        FindTaskDocument,
-        cache =>
-          produce(cache, draftCache => {
-            const item = newTaskItem.data.createTaskChecklistItem;
-            const { checklists } = cache.findTask;
-            const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
-            if (idx !== -1) {
-              draftCache.findTask.checklists[idx].items.push({ ...item });
+            if (deleteData.data) {
+              const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
+              const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
+              if (targetIdx > -1) {
+                draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
+                  c => item.id !== c.id,
+                );
+              }
               const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
               draftCache.findTask.badges.checklist = {
                 __typename: 'ChecklistBadge',
@@ -269,7 +355,37 @@ const Details: React.FC<DetailsProps> = ({
       );
     },
   });
-  const { loading, data, refetch } = useFindTaskQuery({ variables: { taskID } });
+  const [createTaskChecklistItem] = useCreateTaskChecklistItemMutation({
+    update: (client, newTaskItem) => {
+      updateApolloCache<FindTaskQuery>(
+        client,
+        FindTaskDocument,
+        cache =>
+          produce(cache, draftCache => {
+            if (newTaskItem.data) {
+              const item = newTaskItem.data.createTaskChecklistItem;
+              const { checklists } = cache.findTask;
+              const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
+              if (idx !== -1) {
+                draftCache.findTask.checklists[idx].items.push({ ...item });
+                const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
+                draftCache.findTask.badges.checklist = {
+                  __typename: 'ChecklistBadge',
+                  complete,
+                  total,
+                };
+              }
+            }
+          }),
+        { taskID },
+      );
+    },
+  });
+  const { loading, data, refetch } = useFindTaskQuery({
+    variables: { taskID },
+    pollInterval: 3000,
+    fetchPolicy: 'cache-and-network',
+  });
   const [setTaskComplete] = useSetTaskCompleteMutation();
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation({
     onCompleted: () => {
@@ -289,9 +405,8 @@ const Details: React.FC<DetailsProps> = ({
       refreshCache();
     },
   });
-  if (loading) {
-    return null;
-  }
+  const [updateTaskComment] = useUpdateTaskCommentMutation();
+  const [editableComment, setEditableComment] = useState<null | string>(null);
   if (!data) {
     return null;
   }
@@ -305,8 +420,31 @@ const Details: React.FC<DetailsProps> = ({
         renderContent={() => {
           return (
             <TaskDetails
+              onCancelCommentEdit={() => setEditableComment(null)}
+              onUpdateComment={(commentID, message) => {
+                updateTaskComment({ variables: { commentID, message } });
+              }}
+              editableComment={editableComment}
               me={data.me.user}
+              onCommentShowActions={(commentID, $targetRef) => {
+                showPopup(
+                  $targetRef,
+                  <TaskCommentActions
+                    onDeleteComment={() => {
+                      deleteTaskComment({ variables: { commentID } });
+                      hidePopup();
+                    }}
+                    onEditComment={() => {
+                      setEditableComment(commentID);
+                      hidePopup();
+                    }}
+                  />,
+                );
+              }}
               task={data.findTask}
+              onCreateComment={(task, message) => {
+                createTaskComment({ variables: { taskID: task.id, message } });
+              }}
               onChecklistDrop={checklist => {
                 updateTaskChecklistLocation({
                   variables: { taskChecklistID: checklist.id, position: checklist.position },

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

@@ -36,7 +36,9 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
+            if (newLabelData.data) {
+              draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
+            }
           }),
         {
           projectID,
@@ -53,7 +55,7 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.labels = cache.findProject.labels.filter(
-              label => label.id !== newLabelData.data.deleteProjectLabel.id,
+              label => label.id !== newLabelData.data?.deleteProjectLabel.id,
             );
           }),
         { projectID },

frontend/src/Projects/Project/index.tsx

@@ -32,7 +32,6 @@ import {
   FindProjectDocument,
   FindProjectQuery,
 } from 'shared/generated/graphql';
-
 import produce from 'immer';
 import UserContext, { useCurrentUser } from 'App/context';
 import Input from 'shared/components/Input';
@@ -48,6 +47,7 @@ import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
+import { mixin } from '../../shared/utils/styles';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
@@ -71,7 +71,7 @@ const UserMember = styled(Member)`
   padding: 4px 0;
   cursor: pointer;
   &:hover {
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
   }
   border-radius: 6px;
 `;
@@ -134,7 +134,6 @@ type MemberFilterOptions = {
 };
 
 const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
-  console.log(input.trim().length < 3);
   if (input && input.trim().length < 3) {
     return [];
   }
@@ -162,12 +161,10 @@ const fetchMembers = async (client: any, projectID: string, options: MemberFilte
 
   let results: any = [];
   const emails: Array<string> = [];
-  console.log(res.data && res.data.searchMembers);
   if (res.data && res.data.searchMembers) {
     results = [
       ...res.data.searchMembers.map((m: any) => {
         if (m.status === 'INVITED') {
-          console.log(`${m.id} is added`);
           return {
             label: m.id,
             value: {
@@ -179,17 +176,15 @@ const fetchMembers = async (client: any, projectID: string, options: MemberFilte
               },
             },
           };
-        } else {
-          console.log(`${m.user.email} is added`);
-          emails.push(m.user.email);
-          return {
-            label: m.user.fullName,
-            value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-          };
         }
+
+        emails.push(m.user.email);
+        return {
+          label: m.user.fullName,
+          value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
+        };
       }),
     ];
-    console.log(results);
   }
 
   if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
@@ -242,7 +237,6 @@ const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
 `;
 
 const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  console.log(data);
   return !isDisabled ? (
     <OptionWrapper {...innerProps} isFocused={isFocused}>
       <TaskAssignee
@@ -422,14 +416,16 @@ const Project = () => {
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-              tg => tg.tasks.findIndex(t => t.id === resp.data.deleteTask.taskID) !== -1,
-            );
+            if (resp.data) {
+              const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
+                tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
+              );
 
-            if (taskGroupIdx !== -1) {
-              draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
-                taskGroupIdx
-              ].tasks.filter(t => t.id !== resp.data.deleteTask.taskID);
+              if (taskGroupIdx !== -1) {
+                draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
+                  taskGroupIdx
+                ].tasks.filter(t => t.id !== resp.data?.deleteTask.taskID);
+              }
             }
           }),
         { projectID },
@@ -440,6 +436,7 @@ const Project = () => {
 
   const { loading, data, error } = useFindProjectQuery({
     variables: { projectID },
+    pollInterval: 3000,
   });
 
   const [updateProjectName] = useUpdateProjectNameMutation({
@@ -449,7 +446,7 @@ const Project = () => {
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.name = newName.data.updateProjectName.name;
+            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
           }),
         { projectID },
       );
@@ -463,14 +460,16 @@ const Project = () => {
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.members = [
-              ...cache.findProject.members,
-              ...response.data.inviteProjectMembers.members,
-            ];
-            draftCache.findProject.invitedMembers = [
-              ...cache.findProject.invitedMembers,
-              ...response.data.inviteProjectMembers.invitedMembers,
-            ];
+            if (response.data) {
+              draftCache.findProject.members = [
+                ...cache.findProject.members,
+                ...response.data.inviteProjectMembers.members,
+              ];
+              draftCache.findProject.invitedMembers = [
+                ...cache.findProject.invitedMembers,
+                ...response.data.inviteProjectMembers.invitedMembers,
+              ];
+            }
           }),
         { projectID },
       );
@@ -484,7 +483,7 @@ const Project = () => {
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
+              m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
             );
           }),
         { projectID },
@@ -499,7 +498,7 @@ const Project = () => {
         cache =>
           produce(cache, draftCache => {
             draftCache.findProject.members = cache.findProject.members.filter(
-              m => m.id !== response.data.deleteProjectMember.member.id,
+              m => m.id !== response.data?.deleteProjectMember.member.id,
             );
           }),
         { projectID },
@@ -518,14 +517,6 @@ const Project = () => {
       document.title = `${data.findProject.name} | Taskcafé`;
     }
   }, [data]);
-  if (loading) {
-    return (
-      <>
-        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
-        <BoardLoading />
-      </>
-    );
-  }
   if (error) {
     history.push('/projects');
   }
@@ -638,7 +629,12 @@ const Project = () => {
       </>
     );
   }
-  return <div>Error</div>;
+  return (
+    <>
+      <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
+      <BoardLoading />
+    </>
+  );
 };
 
 export default Project;

frontend/src/Projects/index.tsx

@@ -20,6 +20,8 @@ import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
+import theme from 'App/ThemeStyles';
+import { mixin } from '../shared/utils/styles';
 
 type CreateTeamData = { teamName: string };
 
@@ -54,7 +56,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
 };
 
 const ProjectAddTile = styled.div`
-  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
   background-size: cover;
   background-position: 50%;
   color: #fff;
@@ -176,7 +178,7 @@ const SectionActionLink = styled(Link)`
 
 const ProjectSectionTitle = styled.h3`
   font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 const ProjectsContainer = styled.div`
@@ -200,7 +202,7 @@ type ShowNewProject = {
 
 const Projects = () => {
   const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
+  const { loading, data } = useGetProjectsQuery({ pollInterval: 3000, fetchPolicy: 'cache-and-network' });
   useEffect(() => {
     document.title = 'Taskcafé';
   }, []);
@@ -208,7 +210,9 @@ const Projects = () => {
     update: (client, newProject) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
         produce(cache, draftCache => {
-          draftCache.projects.push({ ...newProject.data.createProject });
+          if (newProject.data) {
+            draftCache.projects.push({ ...newProject.data.createProject });
+          }
         }),
       );
     },
@@ -220,16 +224,15 @@ const Projects = () => {
     update: (client, createData) => {
       updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
         produce(cache, draftCache => {
-          draftCache.teams.push({ ...createData.data.createTeam });
+          if (createData.data) {
+            draftCache.teams.push({ ...createData.data?.createTeam });
+          }
         }),
       );
     },
   });
-  if (loading) {
-    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
-  }
 
-  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+  const colors = theme.colors.multiColors;
   if (data && user) {
     const { projects, teams, organizations } = data;
     const organizationID = organizations[0].id ?? null;
@@ -389,7 +392,7 @@ const Projects = () => {
       </>
     );
   }
-  return <div>Error!</div>;
+  return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
 };
 
 export default Projects;

frontend/src/Register/Styles.ts

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

frontend/src/Register/index.tsx

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

frontend/src/Teams/Members/index.tsx

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

frontend/src/Teams/Projects/index.tsx

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

frontend/src/Teams/index.tsx

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
 import AddList from '.';
 
 export default {
@@ -7,7 +8,7 @@ export default {
   title: 'AddList',
   parameters: {
     backgrounds: [
-      { name: 'gray', value: '#262c49', default: true },
+      { name: 'gray', value: theme.colors.bg.secondary, default: true },
       { name: 'white', value: '#ffffff' },
     ],
   },

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

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

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

@@ -8,6 +8,7 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
+import { mixin } from 'shared/utils/styles';
 
 export const RoleCheckmark = styled(Checkmark)`
   padding-left: 4px;
@@ -58,12 +59,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
       ? css`
           user-select: none;
           pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
         `
       : css`
           cursor: pointer;
           &:hover {
-            background: rgb(115, 103, 240);
+            background: ${props.theme.colors.primary};
           }
         `}
 `;
@@ -74,7 +75,7 @@ export const Content = styled.div`
 
 export const CurrentPermission = styled.span`
   margin-left: 4px;
-  color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
+  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
 `;
 
 export const Separator = styled.div`
@@ -85,13 +86,13 @@ export const Separator = styled.div`
 
 export const WarningText = styled.span`
   display: flex;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
   padding: 6px;
 `;
 
 export const DeleteDescription = styled.div`
   font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const RemoveMemberButton = styled(Button)`
@@ -333,14 +334,14 @@ const MemberItemOption = styled(Button)`
 `;
 
 const MemberList = styled.div`
-  border-top: 1px solid rgba(${props => props.theme.colors.border});
+  border-top: 1px solid ${props => props.theme.colors.border};
 `;
 
 const MemberListItem = styled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+  border-bottom: 1px solid ${props => props.theme.colors.border};
   min-height: 40px;
   padding: 12px 0 12px 40px;
   position: relative;
@@ -364,11 +365,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;
 
 const MemberItemName = styled.p`
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${props => props.theme.colors.text.secondary};
 `;
 
 const MemberItemUsername = styled.p`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 const MemberListHeader = styled.div`
@@ -377,12 +378,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
   font-size: 18px;
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${props => props.theme.colors.text.secondary};
   margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
   font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 const FilterSearch = styled(Input)`
   margin: 0;
@@ -443,17 +444,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
   width: 100%;
   position: relative;
 
-  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
+  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
   &:hover {
-    color: rgba(115, 103, 240);
+    color: ${props => `${props.theme.colors.primary}`};
   }
   &:hover svg {
-    fill: rgba(115, 103, 240);
+    fill: ${props => props.theme.colors.primary};
   }
 `;
 const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
-stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
 `;
 
 const TabNavItemSpan = styled.span`
@@ -470,8 +471,8 @@ const TabNavLine = styled.span<{ top: number }>`
   transform: scaleX(1);
   top: ${props => props.top}px;
 
-  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
   display: block;
   position: absolute;
   transition: all 0.2s ease;

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

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
+import { mixin } from '../../utils/styles';
 
 const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
   position: relative;
@@ -8,7 +9,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
   justify-content: ${props => props.justifyTextContent};
   transition: all 0.2s ease;
   font-size: ${props => props.fontSize};
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${props => props.theme.colors.text.secondary};
   ${props =>
     props.hasIcon &&
     css`
@@ -36,35 +37,36 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
 `;
 
 const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
-  background: rgba(${props => props.theme.colors[props.color]});
+  background: ${props => props.theme.colors[props.color]};
   ${props =>
     props.hoverVariant === 'boxShadow' &&
     css`
       &:hover {
-        box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
+        box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
       }
     `}
 `;
+
 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid rgba(${props => props.theme.colors[props.color]});
+  border: 1px solid ${props => props.theme.colors[props.color]};
   background: transparent;
   ${props =>
     props.invert
       ? css`
-          background: rgba(${props.theme.colors[props.color]});
+          background: ${props.theme.colors[props.color]});
           & ${Text} {
-            color: rgba(${props.theme.colors.text.secondary});
+            color: ${props.theme.colors.text.secondary});
           }
           &:hover {
-            background: rgba(${props.theme.colors[props.color]}, 0.8);
+            background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
           }
         `
       : css`
           & ${Text} {
-            color: rgba(${props.theme.colors[props.color]});
+            color: ${props.theme.colors[props.color]});
           }
           &:hover {
-            background: rgba(${props.theme.colors[props.color]}, 0.08);
+            background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
           }
         `}
 `;
@@ -72,7 +74,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
 const Flat = styled(Base)`
   background: transparent;
   &:hover {
-    background: rgba(${props => props.theme.colors[props.color]}, 0.2);
+    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
   }
 `;
 
@@ -85,7 +87,7 @@ const LineX = styled.span<{ color: string }>`
   bottom: -2px;
   left: 50%;
   transform: translate(-50%);
-  background: rgba(${props => props.theme.colors[props.color]}, 1);
+  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
 `;
 
 const LineDown = styled(Base)`
@@ -94,7 +96,7 @@ const LineDown = styled(Base)`
   border-width: 0;
   border-style: solid;
   border-bottom-width: 2px;
-  border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);
+  border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
 
   &:hover ${LineX} {
     width: 100%;
@@ -107,8 +109,8 @@ const LineDown = styled(Base)`
 const Gradient = styled(Base)`
   background: linear-gradient(
     30deg,
-    rgba(${props => props.theme.colors[props.color]}, 1),
-    rgba(${props => props.theme.colors[props.color]}, 0.5)
+    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
+    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
   );
   text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
   &:hover {
@@ -117,7 +119,7 @@ const Gradient = styled(Base)`
 `;
 
 const Relief = styled(Base)`
-  background: rgba(${props => props.theme.colors[props.color]}, 1);
+  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
   -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
   box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);
 

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

@@ -5,8 +5,8 @@ import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
-    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
   z-index: ${props => props.zIndex};
   position: relative;
 `;
@@ -14,8 +14,8 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
   ${props =>
     props.color === 'success' &&
     css`
-      fill: rgba(${props.theme.colors.success});
-      stroke: rgba(${props.theme.colors.success});
+      fill: ${props.theme.colors.success};
+      stroke: ${props.theme.colors.success};
     `}
 `;
 export const ClockIcon = styled(Clock)<{ color: string }>`
@@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
   padding: 0;
   font-size: 14px;
   line-height: 18px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   &:focus {
     border: none;
     outline: none;
@@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
   padding: 0 4px 0 6px;
   vertical-align: top;
   white-space: nowrap;
-  ${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
+  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
 `;
 
 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@@ -101,7 +101,9 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
   position: relative;
 
   background-color: ${props =>
-    props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
+    props.isActive && !props.editable
+      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
+      : `${props.theme.colors.bg.secondary}`};
 `;
 
 export const ListCardInnerContainer = styled.div`
@@ -221,7 +223,7 @@ export const ListCardOperation = styled.span`
   top: 2px;
   z-index: 100;
   &:hover {
-    background-color: ${props => mixin.darken('#262c49', 0.25)};
+    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
   }
 `;
 
@@ -233,7 +235,7 @@ export const CardTitle = styled.span`
   word-wrap: break-word;
   line-height: 18px;
   font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 
   display: flex;
   align-items: center;
@@ -246,7 +248,7 @@ export const CardMembers = styled.div`
 `;
 
 export const CompleteIcon = styled(CheckCircle)`
-  fill: rgba(${props => props.theme.colors.success});
+  fill: ${props => props.theme.colors.success};
   margin-right: 4px;
   flex-shrink: 0;
 `;

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

@@ -22,7 +22,7 @@ export default {
 const Container = styled.div`
   width: 552px;
   margin: 25px;
-  border: 1px solid rgba(${props => props.theme.colors.bg.primary});
+  border: 1px solid ${props => props.theme.colors.bg.primary};
 `;
 
 const defaultItems = [

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

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

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

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

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

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

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

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

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

@@ -19,7 +19,7 @@ export default {
 };
 
 const Wrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
+  background: ${props => props.theme.colors.bg.primary};
   padding: 45px;
   margin: 25px;
   display: flex;

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

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

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

@@ -2,6 +2,7 @@ import React, { createRef, useState } from 'react';
 import styled from 'styled-components';
 import { action } from '@storybook/addon-actions';
 import DropdownMenu from '.';
+import theme from '../../../App/ThemeStyles';
 
 export default {
   component: DropdownMenu,
@@ -10,7 +11,7 @@ export default {
     backgrounds: [
       { name: 'white', value: '#ffffff' },
       { name: 'gray', value: '#f8f8f8' },
-      { name: 'darkBlue', value: '#262c49', default: true },
+      { name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
     ],
   },
 };

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

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

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

@@ -19,23 +19,23 @@ display: flex
   }
 
   & .react-datepicker-time__header {
-    color: rgba(${props => props.theme.colors.text.primary});
+    color: ${props => props.theme.colors.text.primary};
   }
   & .react-datepicker__time-list-item {
-    color: rgba(${props => props.theme.colors.text.primary});
+    color: ${props => props.theme.colors.text.primary};
   }
   & .react-datepicker__time-container .react-datepicker__time
   .react-datepicker__time-box ul.react-datepicker__time-list
   li.react-datepicker__time-list-item:hover {
-    color: rgba(${props => props.theme.colors.text.secondary});
-    background: rgba(${props => props.theme.colors.bg.secondary});
+    color: ${props => props.theme.colors.text.secondary};
+    background: ${props => props.theme.colors.bg.secondary};
   }
   & .react-datepicker__time-container .react-datepicker__time {
-    background: rgba(${props => props.theme.colors.bg.primary});
+    background: ${props => props.theme.colors.bg.primary};
   }
   & .react-datepicker--time-only {
-    background: rgba(${props => props.theme.colors.bg.primary});
-    border: 1px solid rgba(${props => props.theme.colors.border});
+    background: ${props => props.theme.colors.bg.primary};
+    border: 1px solid ${props => props.theme.colors.border};
   }
 
   & .react-datepicker * {
@@ -75,12 +75,12 @@ display: flex
   }
   & .react-datepicker__day--selected {
     border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__day--selected:hover {
     border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
     color: #fff;
   }
   & .react-datepicker__header {
@@ -88,7 +88,7 @@ display: flex
     border: none;
   }
   & .react-datepicker__header--time {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+    border-bottom: 1px solid ${props => props.theme.colors.border};
   }
 
 `;

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

@@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
   color: #c2c6dc;
 
   &:hover {
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
     color: #c2c6dc;
   }
 `;
@@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
   appearance: none;
 
   &:hover {
-    background: #262c49;
-    border: 1px solid rgba(115, 103, 240);
+    background: ${props => props.theme.colors.bg.secondary};
+    border: 1px solid ${props => props.theme.colors.primary};
     outline: none !important;
     box-shadow: none;
     color: #c2c6dc;
@@ -93,7 +93,7 @@ const HeaderButton = styled.button`
   border: none;
   border-radius: 3px;
   &:hover {
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
     color: #fff;
   }
 `;

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

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

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

@@ -19,7 +19,7 @@ export default {
 };
 
 const Wrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
+  background: ${props => props.theme.colors.bg.primary};
   padding: 45px;
   margin: 25px;
   display: flex;

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
 import Lists from '.';
 
 export default {
@@ -7,7 +8,7 @@ export default {
   title: 'Lists',
   parameters: {
     backgrounds: [
-      { name: 'gray', value: '#262c49', default: true },
+      { name: 'gray', value: theme.colors.bg.secondary, default: true },
       { name: 'white', value: '#ffffff' },
     ],
   },

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

@@ -22,10 +22,10 @@ export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; b
     width: ${props => props.size};
     height: ${props => props.size};
     margin: ${props => props.thickness};
-    border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
+    border: ${props => props.thickness} solid ${props => props.theme.colors[props.color]};
     border-radius: 50%;
     animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
+    border-color: ${props => props.theme.colors[props.color]} transparent transparent transparent;
   }
 
   & > div:nth-child(1) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LoadingSpinnerWrapper} from './Styles';
+import { LoadingSpinnerWrapper } from './Styles';
 
 type LoadingSpinnerProps = {
   color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
@@ -30,11 +30,11 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   borderSize = '80px',
 }) => {
   return (
-      <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
-        <div />
-        <div />
-        <div />
-      </LoadingSpinnerWrapper>
+    <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
+      <div />
+      <div />
+      <div />
+    </LoadingSpinnerWrapper>
   );
 };
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import ControlledInput from 'shared/components/ControlledInput';
+import theme from 'App/ThemeStyles';
 
 export const Container = styled.div<{
   invertY: boolean;
@@ -176,7 +177,7 @@ export const LabelIcon = styled.div`
   cursor: pointer;
 
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -233,8 +234,8 @@ export const FieldName = styled.input`
   font-weight: 400;
 
   &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-    background: ${mixin.darken('#262c49', 0.15)};
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
+    background: ${mixin.darken(theme.colors.bg.secondary, 0.15)};
   }
 `;
 
@@ -258,7 +259,7 @@ export const LabelBox = styled.span<{ color: string }>`
 `;
 
 export const SaveButton = styled.input`
-  background: rgb(115, 103, 240);
+  background: ${props => props.theme.colors.primary};
   box-shadow: none;
   border: none;
   color: #fff;
@@ -296,7 +297,7 @@ export const DeleteButton = styled.input`
 
   &:hover {
     color: #fff;
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
     border-color: transparent;
   }
 `;
@@ -317,7 +318,7 @@ export const CreateLabelButton = styled.button`
   cursor: pointer;
 
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 

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

@@ -4,6 +4,7 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
 import NOOP from 'shared/utils/noop';
 import produce from 'immer';
+import theme from 'App/ThemeStyles';
 import {
   Container,
   ContainerDiamond,
@@ -18,7 +19,7 @@ import {
 function getPopupOptions(options?: PopupOptions) {
   const popupOptions = {
     borders: true,
-    diamondColor: '#262c49',
+    diamondColor: theme.colors.bg.secondary,
     targetPadding: '10px',
     showDiamond: true,
     width: 316,

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

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

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

@@ -1,6 +1,4 @@
 import styled, { keyframes, css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea';
-import { mixin } from 'shared/utils/styles';
 
 export const Wrapper = styled.div<{ open: boolean }>`
   background: rgba(0, 0, 0, 0.55);
@@ -30,7 +28,7 @@ export const Container = styled.div<{ fixed: boolean; width: number; top: number
 
 export const SaveButton = styled.button`
   cursor: pointer;
-  background: rgb(115, 103, 240);
+  background: ${props => props.theme.colors.primary};
   box-shadow: none;
   border: none;
   color: #fff;

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

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

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

@@ -24,7 +24,7 @@ import {
 const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
 const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;
 
-const Register = ({ onSubmit }: RegisterProps) => {
+const Register = ({ onSubmit, registered = false }: RegisterProps) => {
   const [isComplete, setComplete] = useState(true);
   const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
   const loginSubmit = (data: RegisterFormData) => {
@@ -43,103 +43,112 @@ const Register = ({ onSubmit }: RegisterProps) => {
               <Taskcafe width={42} height={42} />
               <LogoTitle>Taskcafé</LogoTitle>
             </LogoWrapper>
-            <Title>Register</Title>
-            <SubTitle>Please create the system admin user</SubTitle>
-            <Form onSubmit={handleSubmit(loginSubmit)}>
-              <FormLabel htmlFor="fullname">
-                Full name
-                <FormTextInput
-                  type="text"
-                  id="fullname"
-                  name="fullname"
-                  ref={register({ required: 'Full name is required' })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.username && <FormError>{errors.username.message}</FormError>}
-              <FormLabel htmlFor="username">
-                Username
-                <FormTextInput
-                  type="text"
-                  id="username"
-                  name="username"
-                  ref={register({ required: 'Username is required' })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.username && <FormError>{errors.username.message}</FormError>}
-              <FormLabel htmlFor="email">
-                Email
-                <FormTextInput
-                  type="text"
-                  id="email"
-                  name="email"
-                  ref={register({
-                    required: 'Email is required',
-                    pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
-                  })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.email && <FormError>{errors.email.message}</FormError>}
-              <FormLabel htmlFor="initials">
-                Initials
-                <FormTextInput
-                  type="text"
-                  id="initials"
-                  name="initials"
-                  ref={register({
-                    required: 'Initials is required',
-                    pattern: {
-                      value: INITIALS_PATTERN,
-                      message: 'Initials must be between 2 to 3 characters.',
-                    },
-                  })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.initials && <FormError>{errors.initials.message}</FormError>}
-              <FormLabel htmlFor="password">
-                Password
-                <FormTextInput
-                  type="password"
-                  id="password"
-                  name="password"
-                  ref={register({ required: 'Password is required' })}
-                />
-                <FormIcon>
-                  <Lock width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.password && <FormError>{errors.password.message}</FormError>}
-              <FormLabel htmlFor="password_confirm">
-                Password (Confirm)
-                <FormTextInput
-                  type="password"
-                  id="password_confirm"
-                  name="password_confirm"
-                  ref={register({ required: 'Password (confirm) is required' })}
-                />
-                <FormIcon>
-                  <Lock width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
+            {registered ? (
+              <>
+                <Title>Thanks for registering</Title>
+                <SubTitle>Please check your inbox for a confirmation email.</SubTitle>
+              </>
+            ) : (
+              <>
+                <Title>Register</Title>
+                <SubTitle>Please create your user</SubTitle>
+                <Form onSubmit={handleSubmit(loginSubmit)}>
+                  <FormLabel htmlFor="fullname">
+                    Full name
+                    <FormTextInput
+                      type="text"
+                      id="fullname"
+                      name="fullname"
+                      ref={register({ required: 'Full name is required' })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.username && <FormError>{errors.username.message}</FormError>}
+                  <FormLabel htmlFor="username">
+                    Username
+                    <FormTextInput
+                      type="text"
+                      id="username"
+                      name="username"
+                      ref={register({ required: 'Username is required' })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.username && <FormError>{errors.username.message}</FormError>}
+                  <FormLabel htmlFor="email">
+                    Email
+                    <FormTextInput
+                      type="text"
+                      id="email"
+                      name="email"
+                      ref={register({
+                        required: 'Email is required',
+                        pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
+                      })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.email && <FormError>{errors.email.message}</FormError>}
+                  <FormLabel htmlFor="initials">
+                    Initials
+                    <FormTextInput
+                      type="text"
+                      id="initials"
+                      name="initials"
+                      ref={register({
+                        required: 'Initials is required',
+                        pattern: {
+                          value: INITIALS_PATTERN,
+                          message: 'Initials must be between 2 to 3 characters.',
+                        },
+                      })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.initials && <FormError>{errors.initials.message}</FormError>}
+                  <FormLabel htmlFor="password">
+                    Password
+                    <FormTextInput
+                      type="password"
+                      id="password"
+                      name="password"
+                      ref={register({ required: 'Password is required' })}
+                    />
+                    <FormIcon>
+                      <Lock width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.password && <FormError>{errors.password.message}</FormError>}
+                  <FormLabel htmlFor="password_confirm">
+                    Password (Confirm)
+                    <FormTextInput
+                      type="password"
+                      id="password_confirm"
+                      name="password_confirm"
+                      ref={register({ required: 'Password (confirm) is required' })}
+                    />
+                    <FormIcon>
+                      <Lock width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
 
-              <ActionButtons>
-                <RegisterButton type="submit" disabled={!isComplete}>
-                  Register
-                </RegisterButton>
-              </ActionButtons>
-            </Form>
+                  <ActionButtons>
+                    <RegisterButton type="submit" disabled={!isComplete}>
+                      Register
+                    </RegisterButton>
+                  </ActionButtons>
+                </Form>
+              </>
+            )}
           </LoginFormContainer>
         </LoginFormWrapper>
       </Column>

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

@@ -2,16 +2,17 @@ import React from 'react';
 import Select from 'react-select';
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
+import theme from 'App/ThemeStyles';
 
 function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
   if (isDisabled) {
     return null;
   }
   if (isSelected) {
-    return mixin.darken('#262c49', 0.25);
+    return mixin.darken(theme.colors.bg.secondary, 0.25);
   }
   if (isFocused) {
-    return mixin.darken('#262c49', 0.15);
+    return mixin.darken(theme.colors.bg.secondary, 0.15);
   }
   return null;
 }
@@ -20,35 +21,35 @@ export const colourStyles = {
   control: (styles: any, data: any) => {
     return {
       ...styles,
-      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
-      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
+      backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
+      boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
       borderRadius: '3px',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderImage: 'initial',
-      borderColor: '#414561',
+      borderColor: theme.colors.alternate,
       ':hover': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderImage: 'initial',
-        borderColor: '#414561',
+        borderColor: theme.colors.alternate,
       },
       ':active': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderImage: 'initial',
-        borderColor: 'rgb(115, 103, 240)',
+        borderColor: `${theme.colors.primary}`,
       },
     };
   },
   menu: (styles: any) => {
     return {
       ...styles,
-      backgroundColor: mixin.darken('#262c49', 0.15),
+      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
     };
   },
   dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@@ -61,11 +62,11 @@ export const colourStyles = {
       cursor: isDisabled ? 'not-allowed' : 'default',
       ':active': {
         ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
       },
       ':hover': {
         ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
+        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
       },
     };
   },
@@ -86,7 +87,7 @@ export const colourStyles = {
 const InputLabel = styled.span<{ width: string }>`
 width: ${props => props.width};
 padding-left: 0.7rem;
-color: rgba(115, 103, 240);
+color: ${props => props.theme.colors.primary};
 left: 0;
 top: 0;
 transition: all 0.2s ease;

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

@@ -17,7 +17,7 @@ const UserInfoInput = styled(Input)`
 
 const FormError = styled.span`
   font-size: 12px;
-  color: rgba(${props => props.theme.colors.warning});
+  color: ${props => props.theme.colors.warning};
 `;
 
 const ProfileContainer = styled.div`
@@ -152,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
   width: 100%;
   position: relative;
 
-  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
+  color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
   &:hover {
-    color: rgba(115, 103, 240);
+    color: ${props => props.theme.colors.primary};
   }
   &:hover svg {
-    fill: rgba(115, 103, 240);
+    fill: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -175,8 +175,8 @@ const TabNavLine = styled.span<{ top: number }>`
   transform: scaleX(1);
   top: ${props => props.top}px;
 
-  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
   display: block;
   position: absolute;
   transition: all 0.2s ease;

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

@@ -36,7 +36,7 @@ export const Wrapper = styled.div<{
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(${props => (props.backgroundURL ? props.theme.colors.text.primary : '0,0,0')});
+  color: ${props => (props.backgroundURL ? props.theme.colors.text.primary : 'rgb(0,0,0)')};
   background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
   background-position: center;
   background-size: contain;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TaskActivityData, ActivityType } from 'shared/generated/graphql';
+import dayjs from 'dayjs';
+
+type ActivityMessageProps = {
+  type: ActivityType;
+  data: Array<TaskActivityData>;
+};
+
+function getVariable(data: Array<TaskActivityData>, name: string) {
+  const target = data.find(d => d.name === name);
+  return target ? target.value : null;
+}
+
+function renderDate(timestamp: string | null) {
+  if (timestamp) {
+    return dayjs(timestamp).format('MMM D [at] h:mm A');
+  }
+  return null;
+}
+
+const ActivityMessage: React.FC<ActivityMessageProps> = ({ type, data }) => {
+  let message = '';
+  switch (type) {
+    case ActivityType.TaskAdded:
+      message = `added this task to ${getVariable(data, 'TaskGroup')}`;
+      break;
+    case ActivityType.TaskMoved:
+      message = `moved this task from ${getVariable(data, 'PrevTaskGroup')} to ${getVariable(data, 'CurTaskGroup')}`;
+      break;
+    case ActivityType.TaskDueDateAdded:
+      message = `set this task to be due ${renderDate(getVariable(data, 'DueDate'))}`;
+      break;
+    case ActivityType.TaskDueDateRemoved:
+      message = `removed the due date from this task`;
+      break;
+    case ActivityType.TaskDueDateChanged:
+      message = `changed the due date of this task to ${renderDate(getVariable(data, 'CurDueDate'))}`;
+      break;
+    case ActivityType.TaskMarkedComplete:
+      message = `marked this task complete`;
+      break;
+    case ActivityType.TaskMarkedIncomplete:
+      message = `marked this task incomplete`;
+      break;
+    default:
+      message = '<unknown type>';
+  }
+  return <>{message}</>;
+};
+
+export default ActivityMessage;

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

@@ -0,0 +1,133 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  CommentTextArea,
+  CommentEditorContainer,
+  CommentEditorActions,
+  CommentEditorActionIcon,
+  CommentEditorSaveButton,
+  CommentProfile,
+  CommentInnerWrapper,
+} from './Styles';
+import { usePopup } from 'shared/components/PopupMenu';
+import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { At, Paperclip, Smile } from 'shared/icons';
+import { Picker, Emoji } from 'emoji-mart';
+import Task from 'shared/icons/Task';
+
+type CommentCreatorProps = {
+  me?: TaskUser;
+  autoFocus?: boolean;
+  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  message?: string | null;
+  onCreateComment: (message: string) => void;
+  onCancelEdit?: () => void;
+};
+
+const CommentCreator: React.FC<CommentCreatorProps> = ({
+  me,
+  message,
+  onMemberProfile,
+  onCreateComment,
+  onCancelEdit,
+  autoFocus = false,
+}) => {
+  const $commentWrapper = useRef<HTMLDivElement>(null);
+  const $comment = useRef<HTMLTextAreaElement>(null);
+  const $emoji = useRef<HTMLDivElement>(null);
+  const $emojiCart = useRef<HTMLDivElement>(null);
+  const [comment, setComment] = useState(message ?? '');
+  const [showCommentActions, setShowCommentActions] = useState(autoFocus);
+  const { showPopup, hidePopup } = usePopup();
+  useEffect(() => {
+    if (autoFocus && $comment && $comment.current) {
+      $comment.current.select();
+    }
+  }, []);
+  useOnOutsideClick(
+    [$commentWrapper, $emojiCart],
+    showCommentActions,
+    () => {
+      if (onCancelEdit) {
+        onCancelEdit();
+      }
+      setShowCommentActions(false);
+    },
+    null,
+  );
+  return (
+    <CommentInnerWrapper ref={$commentWrapper}>
+      {me && onMemberProfile && (
+        <CommentProfile
+          member={me}
+          size={32}
+          onMemberProfile={$target => {
+            onMemberProfile($target, me.id);
+          }}
+        />
+      )}
+      <CommentEditorContainer>
+        <CommentTextArea
+          showCommentActions={showCommentActions}
+          placeholder="Write a comment..."
+          ref={$comment}
+          value={comment}
+          onChange={e => setComment(e.currentTarget.value)}
+          onFocus={() => {
+            setShowCommentActions(true);
+          }}
+        />
+        <CommentEditorActions visible={showCommentActions}>
+          <CommentEditorActionIcon>
+            <Paperclip width={12} height={12} />
+          </CommentEditorActionIcon>
+          <CommentEditorActionIcon>
+            <At width={12} height={12} />
+          </CommentEditorActionIcon>
+          <CommentEditorActionIcon
+            ref={$emoji}
+            onClick={() => {
+              showPopup(
+                $emoji,
+                <div ref={$emojiCart}>
+                  <Picker
+                    onClick={emoji => {
+                      console.log(emoji);
+                      if ($comment && $comment.current) {
+                        let textToInsert = `${emoji.colons} `;
+                        let cursorPosition = $comment.current.selectionStart;
+                        let textBeforeCursorPosition = $comment.current.value.substring(0, cursorPosition);
+                        let textAfterCursorPosition = $comment.current.value.substring(
+                          cursorPosition,
+                          $comment.current.value.length,
+                        );
+                        setComment(textBeforeCursorPosition + textToInsert + textAfterCursorPosition);
+                      }
+                      hidePopup();
+                    }}
+                    set="google"
+                  />
+                </div>,
+              );
+            }}
+          >
+            <Smile width={12} height={12} />
+          </CommentEditorActionIcon>
+          <CommentEditorActionIcon>
+            <Task width={12} height={12} />
+          </CommentEditorActionIcon>
+          <CommentEditorSaveButton
+            onClick={() => {
+              setShowCommentActions(false);
+              onCreateComment(comment);
+              setComment('');
+            }}
+          >
+            Save
+          </CommentEditorSaveButton>
+        </CommentEditorActions>
+      </CommentEditorContainer>
+    </CommentInnerWrapper>
+  );
+};
+
+export default CommentCreator;

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

@@ -3,8 +3,6 @@ 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 Container = styled.div`
   display: flex;
@@ -33,35 +31,35 @@ export const MarkCompleteButton = styled.button<{ invert: boolean }>`
   ${props =>
     props.invert
       ? css`
-          background: rgba(${props.theme.colors.success});
+          background: ${props.theme.colors.success};
           & svg {
-            fill: rgba(${props.theme.colors.text.secondary});
+            fill: ${props.theme.colors.text.secondary};
           }
           & span {
-            color: rgba(${props.theme.colors.text.secondary});
+            color: ${props.theme.colors.text.secondary};
           }
           &:hover {
-            background: rgba(${props.theme.colors.success}, 0.8);
+            background: ${mixin.rgba(props.theme.colors.success, 0.8)};
           }
         `
       : css`
           background: none;
-          border: 1px solid rgba(${props.theme.colors.text.secondary});
+          border: 1px solid ${props.theme.colors.text.secondary};
           & svg {
-            fill: rgba(${props.theme.colors.text.secondary});
+            fill: ${props.theme.colors.text.secondary};
           }
           & span {
-            color: rgba(${props.theme.colors.text.secondary});
+            color: ${props.theme.colors.text.secondary};
           }
           &:hover {
-            background: rgba(${props.theme.colors.success}, 0.08);
-            border: 1px solid rgba(${props.theme.colors.success});
+            background: ${mixin.rgba(props.theme.colors.success, 0.08)};
+            border: 1px solid ${props.theme.colors.success};
           }
           &:hover svg {
-            fill: rgba(${props.theme.colors.success});
+            fill: ${props.theme.colors.success};
           }
           &:hover span {
-            color: rgba(${props.theme.colors.success});
+            color: ${props.theme.colors.success};
           }
         `}
 `;
@@ -85,7 +83,7 @@ export const SidebarTitle = styled.div`
   font-size: 12px;
   min-height: 24px;
   margin-left: 8px;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   padding-top: 4px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -93,7 +91,7 @@ export const SidebarTitle = styled.div`
 
 export const SidebarButton = styled.div`
   font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   min-height: 32px;
   width: 100%;
 
@@ -168,7 +166,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)`
   }
 
   &:focus {
-    border-color: rgba(${props => props.theme.colors.primary});
+    border-color: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -176,7 +174,7 @@ export const DueDateTitle = styled.div`
   font-size: 12px;
   min-height: 24px;
   margin-left: 8px;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   padding-top: 8px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -187,7 +185,7 @@ export const AssignedUsersSection = styled.div`
   padding-right: 32px;
   padding-top: 24px;
   padding-bottom: 24px;
-  border-bottom: 1px solid #414561;
+  border-bottom: 1px solid ${props => props.theme.colors.alternate};
   display: flex;
   flex-direction: column;
 `;
@@ -205,10 +203,10 @@ export const AssignUserIcon = styled.div`
   justify-content: center;
   align-items: center;
   &:hover {
-    border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
+    border: 1px solid ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
   }
   &:hover svg {
-    fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
+    fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
   }
 `;
 
@@ -223,17 +221,17 @@ export const AssignUsersButton = styled.div`
   align-items: center;
   border: 1px solid transparent;
   &:hover {
-    border: 1px solid ${mixin.darken('#414561', 0.15)};
+    border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
   }
   &:hover ${AssignUserIcon} {
-    border: 1px solid #414561;
+    border: 1px solid ${props => props.theme.colors.alternate};
   }
 `;
 
 export const AssignUserLabel = styled.span`
   flex: 1 1 auto;
   line-height: 15px;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
 `;
 
 export const ExtraActionsSection = styled.div`
@@ -245,7 +243,7 @@ export const ExtraActionsSection = styled.div`
 `;
 
 export const ActionButtonsTitle = styled.h3`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -255,7 +253,7 @@ export const ActionButton = styled(Button)`
   margin-top: 8px;
   margin-left: -10px;
   padding: 8px 16px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
+  background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
   text-align: left;
   transition: transform 0.2s ease;
   & span {
@@ -264,7 +262,7 @@ export const ActionButton = styled(Button)`
   &:hover {
     box-shadow: none;
     transform: translateX(4px);
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
   }
 `;
 
@@ -283,10 +281,10 @@ export const HeaderActionIcon = styled.div`
 
   cursor: pointer;
   svg {
-    fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
+    fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
   }
   &:hover svg {
-    fill: rgba(${props => props.theme.colors.primary});
+    fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
   }
 `;
 
@@ -343,7 +341,7 @@ export const MetaDetail = styled.div`
 `;
 
 export const MetaDetailTitle = styled.h3`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -362,7 +360,7 @@ export const MetaDetailContent = styled.div`
 `;
 export const TaskDetailsAddLabel = styled.div`
   border-radius: 3px;
-  background: ${mixin.darken('#262c49', 0.15)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
   cursor: pointer;
   &:hover {
     opacity: 0.8;
@@ -377,7 +375,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 3px;
-  background: ${mixin.darken('#262c49', 0.15)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
   cursor: pointer;
   &:hover {
     opacity: 0.8;
@@ -452,11 +450,11 @@ export const TabBarSection = styled.div`
 `;
 
 export const TabBarItem = styled.div`
-  box-shadow: inset 0 -2px rgba(216, 93, 216);
+  box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
   padding: 12px 7px 14px 7px;
   margin-bottom: -1px;
   margin-right: 36px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const CommentContainer = styled.div`
@@ -477,6 +475,7 @@ export const CommentEditorContainer = styled.div`
   border: 1px solid #414561;
   display: flex;
   flex-direction: column;
+  background: #1f243e;
 `;
 export const CommentProfile = styled(TaskAssignee)`
   margin-right: 8px;
@@ -486,25 +485,27 @@ export const CommentProfile = styled(TaskAssignee)`
   align-items: normal;
 `;
 
-export const CommentTextArea = styled(TextareaAutosize)`
+export const CommentTextArea = styled(TextareaAutosize)<{ showCommentActions: boolean }>`
   width: 100%;
   line-height: 28px;
   padding: 4px 6px;
   border-radius: 6px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   background: #1f243e;
   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;
-  }
+  ${props =>
+    props.showCommentActions
+      ? css`
+          min-height: 80px;
+          max-height: none;
+          line-height: 20px;
+        `
+      : css`
+          height: 36px;
+        `}
 `;
 
 export const CommentEditorActions = styled.div<{ visible: boolean }>`
@@ -531,6 +532,18 @@ export const ActivitySection = styled.div`
   overflow-x: hidden;
 
   padding: 8px 26px;
+  display: flex;
+  flex-direction: column-reverse;
+`;
+
+export const ActivityItemCommentAction = styled.div`
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  svg {
+    fill: ${props => props.theme.colors.text.primary} !important;
+  }
 `;
 
 export const ActivityItem = styled.div`
@@ -539,30 +552,37 @@ export const ActivityItem = styled.div`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
+  display: flex;
+  &:hover ${ActivityItemCommentAction} {
+    display: flex;
+  }
 `;
 
-export const ActivityItemHeader = styled.div`
+export const ActivityItemHeader = styled.div<{ editable?: boolean }>`
   display: flex;
+  flex-direction: column;
+  padding-left: 8px;
+  ${props => props.editable && 'width: 100%;'}
 `;
 export const ActivityItemHeaderUser = styled(TaskAssignee)`
-  margin-right: 4px;
+  align-items: start;
 `;
 
 export const ActivityItemHeaderTitle = styled.div`
-  margin-left: 4px;
-  line-height: 18px;
   display: flex;
   align-items: center;
+  color: ${props => props.theme.colors.text.primary};
+  padding-bottom: 2px;
 `;
 
 export const ActivityItemHeaderTitleName = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
   font-weight: 500;
+  padding-right: 3px;
 `;
 
 export const ActivityItemTimestamp = styled.span<{ margin: number }>`
   font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.65);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
   margin-left: ${props => props.margin}px;
 `;
 
@@ -570,20 +590,48 @@ export const ActivityItemDetails = styled.div`
   margin-left: 32px;
 `;
 
-export const ActivityItemComment = styled.div`
+export const ActivityItemCommentContainer = styled.div``;
+export const ActivityItemComment = styled.div<{ editable: boolean }>`
   display: inline-flex;
+  flex-direction: column;
   border-radius: 3px;
   ${mixin.boxShadowCard}
   position: relative;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   padding: 8px 12px;
   margin: 4px 0;
-  background-color: ${mixin.darken('#262c49', 0.1)};
+  background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
+  ${props => props.editable && 'width: 100%;'}
+
+  & span {
+    display: flex;
+    align-items: center;
+  }
+  & ul {
+    list-style-type: disc;
+    margin: 8px 0;
+  }
+  & ul > li {
+    margin: 8px 8px 8px 24px;
+    margin-inline-start: 24px;
+    margin-inline-end: 8px;
+  }
+  & ul > li ul > li {
+    list-style: circle;
+  }
+`;
+
+export const ActivityItemCommentActions = styled.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 8px;
+  right: 0;
 `;
 
 export const ActivityItemLog = styled.span`
   margin-left: 2px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 
 export const ViewRawButton = styled.button`
@@ -594,9 +642,9 @@ export const ViewRawButton = styled.button`
   right: 4px;
   bottom: -24px;
   cursor: pointer;
-  color: rgba(${props => props.theme.colors.text.primary}, 0.25);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
   &:hover {
-    color: rgba(${props => props.theme.colors.text.primary});
+    color: ${props => props.theme.colors.text.primary};
   }
 `;
 

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

@@ -1,86 +0,0 @@
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-import Modal from 'shared/components/Modal';
-import TaskDetails from '.';
-
-export default {
-  component: TaskDetails,
-  title: 'TaskDetails',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff' },
-      { name: 'gray', value: '#cdd3e1', default: true },
-    ],
-  },
-};
-
-export const Default = () => {
-  const [description, setDescription] = useState('');
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      <Modal
-        width={1040}
-        onClose={action('on close')}
-        renderContent={() => {
-          return (
-            <TaskDetails
-              onDeleteItem={action('delete item')}
-              onChangeItemName={action('change item name')}
-              task={{
-                id: '1',
-                taskGroup: { name: 'General', id: '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,
-                assigned: [
-                  {
-                    id: '1',
-                    profileIcon: { bgColor: null, url: null, initials: null },
-                    fullName: 'Jordan Knott',
-                  },
-                ],
-              }}
-              onTaskNameChange={action('task name change')}
-              onTaskDescriptionChange={(_task, desc) => setDescription(desc)}
-              onDeleteTask={action('delete task')}
-              onCloseModal={action('close modal')}
-              onMemberProfile={action('profile')}
-              onOpenAddMemberPopup={action('open add member popup')}
-              onAddItem={action('add item')}
-              onToggleTaskComplete={action('toggle task complete')}
-              onToggleChecklistItem={action('toggle checklist item')}
-              onOpenAddLabelPopup={action('open add label popup')}
-              onChangeChecklistName={action('change checklist name')}
-              onDeleteChecklist={action('delete checklist')}
-              onOpenAddChecklistPopup={action(' open checklist')}
-              onOpenDueDatePopop={action('open due date popup')}
-              onChecklistDrop={action('on checklist drop')}
-              onChecklistItemDrop={action('on checklist item drop')}
-            />
-          );
-        }}
-      />
-    </>
-  );
-};

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

@@ -12,17 +12,32 @@ import {
   At,
   Smile,
 } from 'shared/icons';
+import { toArray } from 'react-emoji-render';
+import DOMPurify from 'dompurify';
+import TaskAssignee from 'shared/components/TaskAssignee';
+import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { usePopup } from 'shared/components/PopupMenu';
+import CommentCreator from 'shared/components/TaskDetails/CommentCreator';
+import { AngleDown } from 'shared/icons/AngleDown';
 import Editor from 'rich-markdown-editor';
 import dark from 'shared/utils/editorTheme';
 import styled from 'styled-components';
-
+import ReactMarkdown from 'react-markdown';
+import { Picker, Emoji } from 'emoji-mart';
+import 'emoji-mart/css/emoji-mart.css';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import dayjs from 'dayjs';
-
+import ActivityMessage from './ActivityMessage';
 import Task from 'shared/icons/Task';
 import {
+  ActivityItemHeader,
+  ActivityItemTimestamp,
+  ActivityItem,
+  ActivityItemCommentAction,
+  ActivityItemCommentActions,
   TaskDetailLabel,
   CommentContainer,
+  ActivityItemCommentContainer,
   MetaDetailContent,
   TaskDetailsAddLabelIcon,
   ActionButton,
@@ -58,18 +73,126 @@ import {
   TaskMember,
   TabBarSection,
   TabBarItem,
-  CommentTextArea,
-  CommentEditorContainer,
-  CommentEditorActions,
-  CommentEditorActionIcon,
-  CommentEditorSaveButton,
-  CommentProfile,
-  CommentInnerWrapper,
   ActivitySection,
   TaskDetailsEditor,
+  ActivityItemHeaderUser,
+  ActivityItemHeaderTitle,
+  ActivityItemHeaderTitleName,
+  ActivityItemComment,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import onDragEnd from './onDragEnd';
+import { plugin as em } from './remark';
+
+const parseEmojis = (value: string) => {
+  const emojisArray = toArray(value);
+
+  // toArray outputs React elements for emojis and strings for other
+  const newValue = emojisArray.reduce((previous: any, current: any) => {
+    if (typeof current === 'string') {
+      return previous + current;
+    }
+    return previous + current.props.children;
+  }, '');
+
+  return newValue;
+};
+
+type StreamCommentProps = {
+  comment?: TaskComment | null;
+  onUpdateComment: (message: string) => void;
+  onExtraActions: (commentID: string, $target: React.RefObject<HTMLElement>) => void;
+  onCancelCommentEdit: () => void;
+  editable: boolean;
+};
+const StreamComment: React.FC<StreamCommentProps> = ({
+  comment,
+  onExtraActions,
+  editable,
+  onUpdateComment,
+  onCancelCommentEdit,
+}) => {
+  const $actions = useRef<HTMLDivElement>(null);
+  if (comment) {
+    return (
+      <ActivityItem>
+        <ActivityItemHeaderUser size={32} member={comment.createdBy} />
+        <ActivityItemHeader editable={editable}>
+          <ActivityItemHeaderTitle>
+            <ActivityItemHeaderTitleName>{comment.createdBy.fullName}</ActivityItemHeaderTitleName>
+            <ActivityItemTimestamp margin={8}>
+              {dayjs(comment.createdAt).format('MMM D [at] h:mm A')}
+              {comment.updatedAt && ' (edited)'}
+            </ActivityItemTimestamp>
+          </ActivityItemHeaderTitle>
+          <ActivityItemCommentContainer>
+            <ActivityItemComment editable={editable}>
+              {editable ? (
+                <CommentCreator
+                  message={comment.message}
+                  autoFocus
+                  onCancelEdit={onCancelCommentEdit}
+                  onCreateComment={onUpdateComment}
+                />
+              ) : (
+                <ReactMarkdown escapeHtml={false} plugins={[em]}>
+                  {DOMPurify.sanitize(comment.message, { FORBID_TAGS: ['style', 'img'] })}
+                </ReactMarkdown>
+              )}
+            </ActivityItemComment>
+            <ActivityItemCommentActions>
+              <ActivityItemCommentAction
+                ref={$actions}
+                onClick={() => {
+                  onExtraActions(comment.id, $actions);
+                }}
+              >
+                <AngleDown width={18} height={18} />
+              </ActivityItemCommentAction>
+            </ActivityItemCommentActions>
+          </ActivityItemCommentContainer>
+        </ActivityItemHeader>
+      </ActivityItem>
+    );
+  }
+  return null;
+};
+
+type StreamActivityProps = {
+  activity?: TaskActivity | null;
+};
+const StreamActivity: React.FC<StreamActivityProps> = ({ activity }) => {
+  if (activity) {
+    return (
+      <ActivityItem>
+        <ActivityItemHeaderUser
+          size={32}
+          member={{
+            id: activity.causedBy.id,
+            fullName: activity.causedBy.fullName,
+            profileIcon: activity.causedBy.profileIcon
+              ? activity.causedBy.profileIcon
+              : {
+                  url: null,
+                  initials: activity.causedBy.fullName.charAt(0),
+                  bgColor: '#fff',
+                },
+          }}
+        />
+        <ActivityItemHeader>
+          <ActivityItemHeaderTitle>
+            <ActivityItemHeaderTitleName>{activity.causedBy.fullName}</ActivityItemHeaderTitleName>
+            <ActivityMessage type={activity.type} data={activity.data} />
+          </ActivityItemHeaderTitle>
+          <ActivityItemTimestamp margin={0}>
+            {dayjs(activity.createdAt).format('MMM D [at] h:mm A')}
+          </ActivityItemTimestamp>
+        </ActivityItemHeader>
+      </ActivityItem>
+    );
+  }
+  return null;
+};
 
 const ChecklistContainer = styled.div``;
 
@@ -114,8 +237,13 @@ type TaskDetailsProps = {
   onOpenAddLabelPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
   onOpenDueDatePopop: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
   onOpenAddChecklistPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
+  onCreateComment: (task: Task, message: string) => void;
+  onCommentShowActions: (commentID: string, $targetRef: React.RefObject<HTMLElement>) => void;
   onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  onCancelCommentEdit: () => void;
+  onUpdateComment: (commentID: string, message: string) => void;
   onChangeChecklistName: (checklistID: string, name: string) => void;
+  editableComment?: string | null;
   onDeleteChecklist: ($target: React.RefObject<HTMLElement>, checklistID: string) => void;
   onCloseModal: () => void;
   onChecklistDrop: (checklist: TaskChecklist) => void;
@@ -124,11 +252,15 @@ type TaskDetailsProps = {
 
 const TaskDetails: React.FC<TaskDetailsProps> = ({
   me,
+  onCancelCommentEdit,
   task,
+  editableComment = null,
   onDeleteChecklist,
   onTaskNameChange,
+  onCommentShowActions,
   onOpenAddChecklistPopup,
   onChangeChecklistName,
+  onCreateComment,
   onChecklistDrop,
   onChecklistItemDrop,
   onToggleTaskComplete,
@@ -137,6 +269,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   onDeleteItem,
   onDeleteTask,
   onCloseModal,
+  onUpdateComment,
   onOpenAddMemberPopup,
   onOpenAddLabelPopup,
   onOpenDueDatePopop,
@@ -156,12 +289,38 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   });
   const [saveTimeout, setSaveTimeout] = useState<any>(null);
   const [showRaw, setShowRaw] = useState(false);
-  const [showCommentActions, setShowCommentActions] = useState(false);
   const taskDescriptionRef = useRef(task.description ?? '');
   const $noMemberBtn = useRef<HTMLDivElement>(null);
   const $addMemberBtn = useRef<HTMLDivElement>(null);
   const $dueDateBtn = useRef<HTMLDivElement>(null);
 
+  const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];
+
+  if (task.activity) {
+    task.activity.forEach(activity => {
+      activityStream.push({
+        id: activity.id,
+        data: {
+          time: activity.createdAt,
+          type: 'activity',
+        },
+      });
+    });
+  }
+
+  if (task.comments) {
+    task.comments.forEach(comment => {
+      activityStream.push({
+        id: comment.id,
+        data: {
+          time: comment.createdAt,
+          type: 'comment',
+        },
+      });
+    });
+  }
+  activityStream.sort((a, b) => (dayjs(a.data.time).isAfter(dayjs(b.data.time)) ? 1 : -1));
+
   const saveDescription = () => {
     onTaskDescriptionChange(task, taskDescriptionRef.current);
   };
@@ -425,46 +584,29 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
           <TabBarSection>
             <TabBarItem>Activity</TabBarItem>
           </TabBarSection>
-          <ActivitySection />
+          <ActivitySection>
+            {activityStream.map(stream =>
+              stream.data.type === 'comment' ? (
+                <StreamComment
+                  onExtraActions={onCommentShowActions}
+                  onCancelCommentEdit={onCancelCommentEdit}
+                  onUpdateComment={message => onUpdateComment(stream.id, message)}
+                  editable={stream.id === editableComment}
+                  comment={task.comments && task.comments.find(comment => comment.id === stream.id)}
+                />
+              ) : (
+                <StreamActivity activity={task.activity && task.activity.find(activity => activity.id === stream.id)} />
+              ),
+            )}
+          </ActivitySection>
         </InnerContentContainer>
         <CommentContainer>
           {me && (
-            <CommentInnerWrapper>
-              <CommentProfile
-                member={me}
-                size={32}
-                onMemberProfile={$target => {
-                  onMemberProfile($target, me.id);
-                }}
-              />
-              <CommentEditorContainer>
-                <CommentTextArea
-                  disabled
-                  placeholder="Write a comment..."
-                  onFocus={() => {
-                    setShowCommentActions(true);
-                  }}
-                  onBlur={() => {
-                    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>
+            <CommentCreator
+              me={me}
+              onCreateComment={message => onCreateComment(task, message)}
+              onMemberProfile={onMemberProfile}
+            />
           )}
         </CommentContainer>
       </ContentContainer>

frontend/src/shared/components/TaskDetails/remark.js

@@ -0,0 +1,61 @@
+import visit from 'unist-util-visit';
+import emoji from 'node-emoji';
+import emoticon from 'emoticon';
+import { Emoji } from 'emoji-mart';
+import React from 'react';
+
+import ReactDOMServer from 'react-dom/server';
+
+const RE_EMOJI = /:\+1:|:-1:|:[\w-]+:/g;
+const RE_SHORT = /[$@|*'",;.=:\-)([\]\\/<>038BOopPsSdDxXzZ]{2,5}/g;
+
+const DEFAULT_SETTINGS = {
+  padSpaceAfter: false,
+  emoticon: false,
+};
+
+function plugin(options) {
+  const settings = Object.assign({}, DEFAULT_SETTINGS, options);
+  const pad = !!settings.padSpaceAfter;
+  const emoticonEnable = !!settings.emoticon;
+
+  function getEmojiByShortCode(match) {
+    // find emoji by shortcode - full match or with-out last char as it could be from text e.g. :-),
+    const iconFull = emoticon.find(e => e.emoticons.includes(match)); // full match
+    const iconPart = emoticon.find(e => e.emoticons.includes(match.slice(0, -1))); // second search pattern
+    const trimmedChar = iconPart ? match.slice(-1) : '';
+    const addPad = pad ? ' ' : '';
+    let icon = iconFull ? iconFull.emoji + addPad : iconPart && iconPart.emoji + addPad + trimmedChar;
+    return icon || match;
+  }
+
+  function getEmoji(match) {
+    console.log(match);
+    const got = emoji.get(match);
+    if (pad && got !== match) {
+      return got + ' ';
+    }
+
+    console.log(got);
+    return ReactDOMServer.renderToStaticMarkup(<Emoji set="google" emoji={match} size={16} />);
+  }
+
+  function transformer(tree) {
+    visit(tree, 'paragraph', function(node) {
+      console.log(tree);
+      // node.value = node.value.replace(RE_EMOJI, getEmoji);
+      node.type = 'html';
+      node.tagName = 'div';
+      node.value = node.children[0].value.replace(RE_EMOJI, getEmoji);
+
+      if (emoticonEnable) {
+        // node.value = node.value.replace(RE_SHORT, getEmojiByShortCode);
+      }
+      console.log(node);
+    });
+  }
+
+  return transformer;
+}
+
+export { plugin };

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

@@ -24,7 +24,7 @@ const Textarea = styled(TextareaAutosize)`
   font-size: 20px;
   padding: 3px 10px 3px 8px;
   &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
   }
 `;
 

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

@@ -11,7 +11,8 @@ export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
   z-index: ${props => props.zIndex};
   position: relative;
 
-  box-shadow: 0 0 0 2px rgba(16, 22, 58), inset 0 0 0 1px rgba(16, 22, 58, 0.07);
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.primary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
 `;
 
 export const NavbarWrapper = styled.div`
@@ -28,9 +29,9 @@ export const NavbarHeader = styled.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgb(16, 22, 58);
+  background: ${props => props.theme.colors.bg.primary};
   box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
 export const Breadcrumbs = styled.div`
   color: rgb(94, 108, 132);
@@ -124,7 +125,7 @@ export const ProjectTabs = styled.div`
 
 export const ProjectTab = styled(NavLink)`
   font-size: 80%;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   font-size: 15px;
   cursor: pointer;
   display: flex;
@@ -141,22 +142,22 @@ export const ProjectTab = styled(NavLink)`
   }
 
   &:hover {
-    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.text.secondary});
-    color: rgba(${props => props.theme.colors.text.secondary});
+    box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
   }
 
   &.active {
-    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
-    color: rgba(${props => props.theme.colors.secondary});
+    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
+    color: ${props => props.theme.colors.secondary};
   }
   &.active:hover {
-    box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
-    color: rgba(${props => props.theme.colors.secondary});
+    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
+    color: ${props => props.theme.colors.secondary};
   }
 `;
 
 export const ProjectName = styled.h1`
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   font-weight: 600;
   font-size: 20px;
   padding: 3px 10px 3px 8px;
@@ -185,7 +186,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
   font-size: 20px;
   padding: 3px 10px 3px 8px;
   &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
   }
 `;
 
@@ -203,7 +204,7 @@ export const ProjectSwitcher = styled.button`
   color: #c2c6dc;
   cursor: pointer;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -227,7 +228,7 @@ export const ProjectSettingsButton = styled.button`
   justify-content: center;
   cursor: pointer;
   &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
   }
 `;
 
@@ -243,7 +244,7 @@ export const ProjectFinder = styled(Button)`
 
 export const NavSeparator = styled.div`
   width: 1px;
-  background: rgba(${props => props.theme.colors.border});
+  background: ${props => props.theme.colors.border};
   height: 34px;
   margin: 0 20px;
 `;
@@ -260,11 +261,11 @@ export const LogoContainer = styled(Link)`
 
 export const TaskcafeTitle = styled.h2`
   margin-left: 5px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
   font-size: 20px;
 `;
 
 export const TaskcafeLogo = styled(Taskcafe)`
-  fill: rgba(${props => props.theme.colors.text.primary});
-  stroke: rgba(${props => props.theme.colors.text.primary});
+  fill: ${props => props.theme.colors.text.primary};
+  stroke: ${props => props.theme.colors.text.primary};
 `;

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

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import NormalizeStyles from 'App/NormalizeStyles';
 import BaseStyles from 'App/BaseStyles';
 import { action } from '@storybook/addon-actions';
-import DropdownMenu from 'shared/components/DropdownMenu';
 import TopNavbar from '.';
+import theme from '../../../App/ThemeStyles';
 
 export default {
   component: TopNavbar,
@@ -15,7 +15,7 @@ export default {
     backgrounds: [
       { name: 'white', value: '#ffffff' },
       { name: 'gray', value: '#f8f8f8' },
-      { name: 'darkBlue', value: '#262c49', default: true },
+      { name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
     ],
   },
 };

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

@@ -5,6 +5,7 @@ import ProfileIcon from 'shared/components/ProfileIcon';
 import { usePopup } from 'shared/components/PopupMenu';
 import { RoleCode } from 'shared/generated/graphql';
 import NOOP from 'shared/utils/noop';
+import { useHistory } from 'react-router';
 import {
   TaskcafeLogo,
   TaskcafeTitle,
@@ -30,7 +31,6 @@ import {
   ProjectMember,
   ProjectMembers,
 } from './Styles';
-import { useHistory } from 'react-router';
 
 type IconContainerProps = {
   disabled?: boolean;
@@ -309,7 +309,7 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer disabled onClick={NOOP}>
             <CheckCircle width={20} height={20} />
           </IconContainer>
-          <IconContainer onClick={() => history.push('/outline')}>
+          <IconContainer disabled onClick={NOOP}>
             <ListUnordered width={20} height={20} />
           </IconContainer>
           <IconContainer disabled onClick={onNotificationClick}>

frontend/src/shared/graphql/findTask.graphqls

@@ -10,6 +10,40 @@ query findTask($taskID: UUID!) {
       id
       name
     }
+    comments {
+      id
+      pinned
+      message
+      createdAt
+      updatedAt
+      createdBy {
+        id
+        fullName
+        profileIcon {
+          initials
+          bgColor
+          url
+        }
+      }
+    }
+    activity {
+      id
+      type
+      causedBy {
+        id
+        fullName
+        profileIcon {
+          initials
+          bgColor
+          url
+        }
+      }
+      createdAt
+      data {
+        name
+        value
+      }
+    }
     badges {
       checklist {
         total

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

@@ -0,0 +1,27 @@
+import gql from 'graphql-tag';
+
+const CREATE_TASK_MUTATION = gql`
+  mutation createTaskComment($taskID: UUID!, $message: String!) {
+    createTaskComment(input: { taskID: $taskID, message: $message }) {
+      taskID
+      comment {
+        id
+        message
+        pinned
+        createdAt
+        updatedAt
+        createdBy {
+          id
+          fullName
+          profileIcon {
+            initials
+            bgColor
+            url
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default CREATE_TASK_MUTATION;

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

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag';
+
+const CREATE_TASK_MUTATION = gql`
+  mutation deleteTaskComment($commentID: UUID!) {
+    deleteTaskComment(input: { commentID: $commentID }) {
+      commentID
+    }
+  }
+`;
+
+export default CREATE_TASK_MUTATION;

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

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag';
+
+const CREATE_TASK_MUTATION = gql`
+  mutation updateTaskComment($commentID: UUID!, $message: String!) {
+    updateTaskComment(input: { commentID: $commentID, message: $message }) {
+      comment {
+        id
+        updatedAt
+        message
+      }
+    }
+  }
+`;
+
+export default CREATE_TASK_MUTATION;

frontend/src/shared/hooks/onOutsideClick.ts

@@ -16,10 +16,14 @@ const useOnOutsideClick = (
 
     const handleMouseUp = (event: any) => {
       if (typeof $ignoredElementRefsMemoized !== 'undefined') {
-        const isAnyIgnoredElementAncestorOfTarget = $ignoredElementRefsMemoized.some(
-          ($elementRef: any) =>
-            $elementRef.current.contains($mouseDownTargetRef.current) || $elementRef.current.contains(event.target),
-        );
+        const isAnyIgnoredElementAncestorOfTarget = $ignoredElementRefsMemoized.some(($elementRef: any) => {
+          if ($elementRef && $elementRef.current) {
+            return (
+              $elementRef.current.contains($mouseDownTargetRef.current) || $elementRef.current.contains(event.target)
+            );
+          }
+          return false;
+        });
         if (event.button === 0 && !isAnyIgnoredElementAncestorOfTarget) {
           onOutsideClick();
         }

frontend/src/shared/icons/AngleDown.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
+import Icon, { IconProps } from './Icon';
 
-type Props = {
-  width: number | string;
-  height: number | string;
-  color: string;
+export const AngleDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
+    </Icon>
+  );
 };
 
-const AngleDown = ({ width, height, color }: Props) => {
+type Props = {
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+};
+
+const AngleDownOld = ({ width, height, color }: Props) => {
   return (
     <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
       <path
@@ -17,10 +26,10 @@ const AngleDown = ({ width, height, color }: Props) => {
   );
 };
 
-AngleDown.defaultProps = {
+AngleDownOld.defaultProps = {
   width: 24,
   height: 16,
   color: '#000',
 };
 
-export default AngleDown;
+export default AngleDownOld;

frontend/src/shared/icons/Icon.tsx

@@ -17,8 +17,8 @@ type Props = {
 };
 
 const Svg = styled.svg`
-  fill: rgba(${props => props.theme.colors.text.primary});
-  stroke: rgba(${props => props.theme.colors.text.primary});
+  fill: ${props => props.theme.colors.text.primary};
+  stroke: ${props => props.theme.colors.text.primary};
 `;
 
 const Icon: React.FC<Props> = ({ width, height, viewBox, className, onClick, children }) => {

frontend/src/shared/utils/cache.ts

@@ -9,7 +9,7 @@ export function updateApolloCache<T>(
   update: UpdateCacheFn<T>,
   variables?: object,
 ) {
-  let queryArgs: DataProxy.Query<any>;
+  let queryArgs: DataProxy.Query<any, any>;
   if (variables) {
     queryArgs = {
       query: document,

frontend/src/shared/utils/editorTheme.ts

@@ -61,9 +61,9 @@ export const base = {
 export const dark = {
   ...base,
   background: 'transparent',
-  text: `rgba(${theme.colors.text.primary})`,
-  code: `rgba(${theme.colors.text.primary})`,
-  cursor: `rgba(${theme.colors.text.primary})`,
+  text: `${theme.colors.text.primary}`,
+  code: `${theme.colors.text.primary}`,
+  cursor: `${theme.colors.text.primary}`,
   divider: '#4E5C6E',
   placeholder: '#52657A',
 

frontend/src/styled.d.ts

@@ -10,6 +10,7 @@ declare module 'styled-components' {
     };
     colors: {
       [key: string]: any;
+      multiColors: string[];
       primary: string;
       secondary: string;
       success: string;

frontend/src/taskcafe.d.ts

@@ -61,7 +61,7 @@ type User = TaskUser & {
 
 type RefreshTokenResponse = {
   accessToken: string;
-  isInstalled: boolean;
+  setup?: null | { confirmToken: string };
 };
 
 type LoginFormData = {
@@ -91,7 +91,14 @@ type ErrorOption =
       type: string;
     };
 
+type SetFailedFn = () => void;
+type ConfirmProps = {
+  hasConfirmToken: boolean;
+  onConfirmUser: (setFailed: SetFailedFn) => void;
+};
+
 type RegisterProps = {
+  registered?: boolean;
   onSubmit: (
     data: RegisterFormData,
     setComplete: (val: boolean) => void,

frontend/src/types.d.ts

@@ -1,3 +1,10 @@
+type ProjectLabel = {
+  id: string;
+  createdDate: string;
+  name?: string | null;
+  labelColor: LabelColor;
+};
+
 type ProfileIcon = {
   url?: string | null;
   initials?: string | null;
@@ -56,6 +63,39 @@ type TaskBadges = {
   checklist?: ChecklistBadge | null;
 };
 
+type TaskActivityData = {
+  name: string;
+  value: string;
+};
+
+type CausedBy = {
+  id: string;
+  fullName: string;
+  profileIcon?: null | ProfileIcon;
+};
+type TaskActivity = {
+  id: string;
+  type: any;
+  data: Array<TaskActivityData>;
+  causedBy: CausedBy;
+  createdAt: string;
+};
+
+type CreatedBy = {
+  id: string;
+  fullName: string;
+  profileIcon: ProfileIcon;
+};
+
+type TaskComment = {
+  id: string;
+  createdBy: CreatedBy;
+  createdAt: string;
+  updatedAt?: string | null;
+  pinned: boolean;
+  message: string;
+};
+
 type Task = {
   id: string;
   taskGroup: InnerTaskGroup;
@@ -69,6 +109,8 @@ type Task = {
   description?: string | null;
   assigned?: Array<TaskUser>;
   checklists?: Array<TaskChecklist> | null;
+  activity?: Array<TaskActivity> | null;
+  comments?: Array<TaskComment> | null;
 };
 
 type Project = {
@@ -89,10 +131,3 @@ type Team = {
   name: string;
   createdAt: string;
 };
-
-type ProjectLabel = {
-  id: string;
-  createdDate: string;
-  name?: string | null;
-  labelColor: LabelColor;
-};

go.mod

@@ -13,6 +13,7 @@ require (
 	github.com/lib/pq v1.3.0
 	github.com/lithammer/fuzzysearch v1.1.0
 	github.com/magefile/mage v1.9.0
+	github.com/matcornic/hermes/v2 v2.1.0
 	github.com/pelletier/go-toml v1.8.0 // indirect
 	github.com/pkg/errors v0.9.1
 	github.com/shurcooL/vfsgen v0.0.0-20180121065927-ffb13db8def0
@@ -22,4 +23,6 @@ require (
 	github.com/spf13/viper v1.4.0
 	github.com/vektah/gqlparser/v2 v2.0.1
 	golang.org/x/crypto v0.0.0-20200709230013-948cd5f35899
+	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
+	gopkg.in/mail.v2 v2.3.1
 )

go.sum

@@ -50,11 +50,17 @@ github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym
 github.com/ClickHouse/clickhouse-go v1.3.12/go.mod h1:EaI/sW7Azgz9UATzd5ZdZHRUhHgv5+JMS9NSr2smCJI=
 github.com/DataDog/sketches-go v0.0.0-20190923095040-43f19ad77ff7 h1:qELHH0AWCvf98Yf+CNIJx9vOZOfHFDDzgDRYsnNk/vs=
 github.com/DataDog/sketches-go v0.0.0-20190923095040-43f19ad77ff7/go.mod h1:Q5DbzQ+3AkgGwymQO7aZFNP7ns2lZKGtvRBzRXfdi60=
+github.com/Masterminds/semver v1.4.2 h1:WBLTQ37jOCzSLtXNdoo8bNM8876KhNqOKvrlGITgsTc=
+github.com/Masterminds/semver v1.4.2/go.mod h1:MB6lktGJrhw8PrUyiEoblNEGEQ+RzHPF078ddwwvV3Y=
+github.com/Masterminds/sprig v2.16.0+incompatible h1:QZbMUPxRQ50EKAq3LFMnxddMu88/EUUG3qmxwtDmPsY=
+github.com/Masterminds/sprig v2.16.0+incompatible/go.mod h1:y6hNFY5UBTIWBxnzTeuNhlNS5hqE0NB0E6fgfo2Br3o=
 github.com/Microsoft/go-winio v0.4.11/go.mod h1:VhR8bwka0BXejwEJY73c50VrPtXAaKcyvVC4A4RozmA=
 github.com/Microsoft/go-winio v0.4.14 h1:+hMXMk01us9KgxGb7ftKQt2Xpf5hH/yky+TDA+qxleU=
 github.com/Microsoft/go-winio v0.4.14/go.mod h1:qXqCSQ3Xa7+6tgxaGTIe4Kpcdsi+P8jBhyzoq1bpyYA=
 github.com/OneOfOne/xxhash v1.2.2 h1:KMrpdQIwFcEqXDklaen+P1axHaj9BSKzvpUUfnHldSE=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
+github.com/PuerkitoBio/goquery v1.5.0 h1:uGvmFXOA73IKluu/F84Xd1tt/z07GYm8X49XKHP7EJk=
+github.com/PuerkitoBio/goquery v1.5.0/go.mod h1:qD2PgZ9lccMbQlc7eEOjaeRlFQON7xY8kdmcsrnKqMg=
 github.com/RichardKnop/logging v0.0.0-20190827224416-1a693bdd4fae h1:DcFpTQBYQ9Ct2d6sC7ol0/ynxc2pO1cpGUM+f4t5adg=
 github.com/RichardKnop/logging v0.0.0-20190827224416-1a693bdd4fae/go.mod h1:rJJ84PyA/Wlmw1hO+xTzV2wsSUon6J5ktg0g8BF2PuU=
 github.com/RichardKnop/machinery v1.9.1 h1:Q4WInk0OWGMbXDH3Q8dm8uadN5Wcyquc+7IcM4p9ECs=
@@ -70,6 +76,10 @@ github.com/alecthomas/template v0.0.0-20160405071501-a0175ee3bccc/go.mod h1:LOuy
 github.com/alecthomas/units v0.0.0-20151022065526-2efee857e7cf/go.mod h1:ybxpYRFXyAe+OPACYpWeL0wqObRcbAqCMya13uyzqw0=
 github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883 h1:bvNMNQO63//z+xNgfBlViaCIJKLlCJ6/fmUseuG0wVQ=
 github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883/go.mod h1:rCTlJbsFo29Kk6CurOXKm700vrz8f0KW0JNfpkRJY/8=
+github.com/andybalholm/cascadia v1.0.0 h1:hOCXnnZ5A+3eVDX8pvgl4kofXv2ELss0bKcqRySc45o=
+github.com/andybalholm/cascadia v1.0.0/go.mod h1:GsXiBklL0woXo1j/WYWtSYYC4ouU9PqHO0sqidkEA4Y=
+github.com/aokoli/goutils v1.0.1 h1:7fpzNGoJ3VA8qcrm++XEE1QUe0mIwNeLa02Nwq7RDkg=
+github.com/aokoli/goutils v1.0.1/go.mod h1:SijmP0QR8LtwsmDs8Yii5Z/S4trXFGFC2oO5g9DP+DQ=
 github.com/apache/thrift v0.12.0/go.mod h1:cp2SuWMxlEZw2r+iP2GNCdIi4C1qmUzdZFSVb+bacwQ=
 github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0 h1:jfIu9sQUG6Ig+0+Ap1h4unLjW6YQJpKZVmUzxsD4E/Q=
 github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0/go.mod h1:t2tdKJDJF9BV14lnkjHmOQgcvEKgtqs5a1N3LNdJhGE=
@@ -151,6 +161,7 @@ github.com/go-chi/chi v3.3.2+incompatible/go.mod h1:eB3wogJHnLi3x/kFX2A+IbTBlXxm
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
+github.com/go-gomail/gomail v0.0.0-20160411212932-81ebce5c23df/go.mod h1:GJr+FCSXshIwgHBtLglIg9M2l2kQSi6QjVAngtzI08Y=
 github.com/go-kit/kit v0.8.0/go.mod h1:xBxKIO96dXMWWy0MnWVtmwkA9/13aqxPnvrjFYMA2as=
 github.com/go-logfmt/logfmt v0.3.0/go.mod h1:Qt1PoO58o5twSAckw1HlFXLmHsOX5/0LbT9GBnD5lWE=
 github.com/go-logfmt/logfmt v0.4.0/go.mod h1:3RMwSq7FuexP4Kalkev3ejPJsZTpXXBr9+V4qmtdjCk=
@@ -258,6 +269,7 @@ github.com/google/pprof v0.0.0-20200430221834-fc25d7d30c6d/go.mod h1:ZgVRPoUq/hf
 github.com/google/pprof v0.0.0-20200507031123-427632fa3b1c/go.mod h1:ZgVRPoUq/hfqzAqh7sHMqb3I9Rq5C59dIz2SbBwJ4eM=
 github.com/google/pprof v0.0.0-20200708004538-1a94d8640e99/go.mod h1:ZgVRPoUq/hfqzAqh7sHMqb3I9Rq5C59dIz2SbBwJ4eM=
 github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI=
+github.com/google/uuid v1.0.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.1.1 h1:Gkbcsh/GbpXz7lPftLA3P6TYMwjCLYm83jiFQZF/3gY=
 github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/googleapis/gax-go/v2 v2.0.4/go.mod h1:0Wqv26UfaUD9n4G6kQubkQ+KchISgw+vpHVxEJEs9eg=
@@ -265,6 +277,8 @@ github.com/googleapis/gax-go/v2 v2.0.5 h1:sjZBwGj9Jlw33ImPtvFviGYvseOtDM7hkSKB7+
 github.com/googleapis/gax-go/v2 v2.0.5/go.mod h1:DWXyrwAJ9X0FpwwEdw+IPEYBICEFu5mhpdKc/us6bOk=
 github.com/gorilla/context v0.0.0-20160226214623-1ea25387ff6f/go.mod h1:kBGZzfjB9CEq2AlWe17Uuf7NDRt0dE0s8S51q0aT7Yg=
 github.com/gorilla/context v1.1.1/go.mod h1:kBGZzfjB9CEq2AlWe17Uuf7NDRt0dE0s8S51q0aT7Yg=
+github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
+github.com/gorilla/css v1.0.0/go.mod h1:Dn721qIggHpt4+EFCcTLTU/vk5ySda2ReITrtgBl60c=
 github.com/gorilla/handlers v1.4.2/go.mod h1:Qkdc/uu4tH4g6mTK6auzZ766c4CA0Ng8+o/OAirnOIQ=
 github.com/gorilla/mux v1.6.1/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
 github.com/gorilla/mux v1.6.2/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
@@ -291,7 +305,11 @@ github.com/hashicorp/hcl v1.0.0 h1:0Anlzjpi4vEasTeNFn2mLJgTSwt0+6sfsiTG8qcWGx4=
 github.com/hashicorp/hcl v1.0.0/go.mod h1:E5yfLk+7swimpb2L/Alb/PJmXilQ/rhwaUYs4T20WEQ=
 github.com/hpcloud/tail v1.0.0 h1:nfCOvKYfkgYP8hkirhJocXT2+zOD8yUNjXaWfTlyFKI=
 github.com/hpcloud/tail v1.0.0/go.mod h1:ab1qPbhIpdTxEkNHXyeSf5vhxWSCs/tWer42PpOxQnU=
+github.com/huandu/xstrings v1.2.0 h1:yPeWdRnmynF7p+lLYz0H2tthW9lqhMJrQV/U7yy4wX0=
+github.com/huandu/xstrings v1.2.0/go.mod h1:DvyZB1rfVYsBIigL8HwpZgxHwXozlTgGqn63UyNX5k4=
 github.com/ianlancetaylor/demangle v0.0.0-20181102032728-5e5cf60278f6/go.mod h1:aSSvb/t6k1mPoxDqO4vJh6VOCGPwU4O0C2/Eqndh1Sc=
+github.com/imdario/mergo v0.3.6 h1:xTNEAn+kxVO7dTZGu0CegyqKZmoWFI0rF8UxjlB2d28=
+github.com/imdario/mergo v0.3.6/go.mod h1:2EnlNZ0deacrJVfApfmtdGgDfMuh/nq6Ok1EcJh5FfA=
 github.com/inconshreveable/mousetrap v1.0.0 h1:Z8tu5sraLXCXIcARxBp/8cbvlwVa7Z1NHg9XEKhtSvM=
 github.com/inconshreveable/mousetrap v1.0.0/go.mod h1:PxqpIevigyE2G7u3NXJIT2ANytuPF1OarO4DADm73n8=
 github.com/jackc/chunkreader v1.0.0/go.mod h1:RT6O25fNZIuasFJRyZ4R/Y2BbhasbmZXF9QQ7T3kePo=
@@ -318,6 +336,8 @@ github.com/jackc/pgx/v4 v4.0.0-20190421002000-1b8f0016e912/go.mod h1:no/Y67Jkk/9
 github.com/jackc/pgx/v4 v4.0.0-pre1.0.20190824185557-6972a5742186/go.mod h1:X+GQnOEnf1dqHGpw7JmHqHc1NxDoalibchSk9/RWuDc=
 github.com/jackc/puddle v0.0.0-20190413234325-e4ced69a3a2b/go.mod h1:m4B5Dj62Y0fbyuIc15OsIqK0+JU8nkqQjsgx7dvjSWk=
 github.com/jackc/puddle v0.0.0-20190608224051-11cab39313c9/go.mod h1:m4B5Dj62Y0fbyuIc15OsIqK0+JU8nkqQjsgx7dvjSWk=
+github.com/jaytaylor/html2text v0.0.0-20180606194806-57d518f124b0 h1:xqgexXAGQgY3HAjNPSaCqn5Aahbo5TKsmhp8VRfr1iQ=
+github.com/jaytaylor/html2text v0.0.0-20180606194806-57d518f124b0/go.mod h1:CVKlgaMiht+LXvHG173ujK6JUhZXKb2u/BQtjPDIvyk=
 github.com/jmespath/go-jmespath v0.0.0-20180206201540-c2b33e8439af h1:pmfjZENx5imkbgOkpRUYLnmbU7UEFbjtDA2hxJ1ichM=
 github.com/jmespath/go-jmespath v0.0.0-20180206201540-c2b33e8439af/go.mod h1:Nht3zPeWKUH0NzdCt2Blrr5ys8VGpn0CEB0cQHVjt7k=
 github.com/jmespath/go-jmespath v0.3.0 h1:OS12ieG61fsCg5+qLJ+SsW9NicxNkg3b25OyT2yCeUc=
@@ -368,6 +388,8 @@ github.com/magiconair/properties v1.8.0/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czP
 github.com/markbates/oncer v0.0.0-20181203154359-bf2de49a0be2/go.mod h1:Ld9puTsIW75CHf65OeIOkyKbteujpZVXDpWK6YGZbxE=
 github.com/markbates/pkger v0.15.1/go.mod h1:0JoVlrol20BSywW79rN3kdFFsE5xYM+rSCQDXbLhiuI=
 github.com/markbates/safe v1.0.1/go.mod h1:nAqgmRi7cY2nqMc92/bSEeQA+R4OheNU2T1kNSCBdG0=
+github.com/matcornic/hermes/v2 v2.1.0 h1:9TDYFBPFv6mcXanaDmRDEp/RTWj0dTTi+LpFnnnfNWc=
+github.com/matcornic/hermes/v2 v2.1.0/go.mod h1:2+ziJeoyRfaLiATIL8VZ7f9hpzH4oDHqTmn0bhrsgVI=
 github.com/matryer/moq v0.0.0-20200106131100-75d0ddfc0007 h1:reVOUXwnhsYv/8UqjvhrMOu5CNT9UapHFLbQ2JcXsmg=
 github.com/matryer/moq v0.0.0-20200106131100-75d0ddfc0007/go.mod h1:9ELz6aaclSIGnZBoaSLZ3NAl1VTufbOrXBPvtcy6WiQ=
 github.com/mattn/go-colorable v0.1.1/go.mod h1:FuOcm+DKB9mbwrcAfNl7/TZVBZ6rcnceauSikq3lYCQ=
@@ -376,6 +398,8 @@ github.com/mattn/go-isatty v0.0.5/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hd
 github.com/mattn/go-isatty v0.0.7/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hdxcsrc5s=
 github.com/mattn/go-isatty v0.0.8/go.mod h1:Iq45c/XA43vh69/j3iqttzPXn0bhXyGjM0Hdxcsrc5s=
 github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
+github.com/mattn/go-runewidth v0.0.3 h1:a+kO+98RDGEfo6asOGMmpodZq4FNtnGP54yps8BzLR4=
+github.com/mattn/go-runewidth v0.0.3/go.mod h1:LwmH8dsx7+W8Uxz3IHJYH5QSwggIsqBzpuz5H//U1FU=
 github.com/mattn/go-sqlite3 v1.9.0 h1:pDRiWfl+++eC2FEFRy6jXmQlvp4Yh3z1MJKg4UeYM/4=
 github.com/mattn/go-sqlite3 v1.9.0/go.mod h1:FPy6KqzDD04eiIsT53CuJW3U88zkxoIYsOqkbpncsNc=
 github.com/mattn/go-sqlite3 v1.10.0 h1:jbhqpg7tQe4SupckyijYiy0mJJ/pRyHvXf7JdWK860o=
@@ -394,6 +418,8 @@ github.com/nakagami/firebirdsql v0.0.0-20190310045651-3c02a58cfed8/go.mod h1:86w
 github.com/neo4j-drivers/gobolt v1.7.4/go.mod h1:O9AUbip4Dgre+CD3p40dnMD4a4r52QBIfblg5k7CTbE=
 github.com/neo4j/neo4j-go-driver v1.7.4/go.mod h1:aPO0vVr+WnhEJne+FgFjfsjzAnssPFLucHgGZ76Zb/U=
 github.com/oklog/ulid v1.3.1/go.mod h1:CirwcVhetQ6Lv90oh/F+FBtV6XMibvdAFo93nm5qn4U=
+github.com/olekukonko/tablewriter v0.0.1 h1:b3iUnf1v+ppJiOfNX4yxxqfWKMQPZR5yoh8urCTFX88=
+github.com/olekukonko/tablewriter v0.0.1/go.mod h1:vsDQFd/mU46D+Z4whnwzcISnGGzXWMclvtLoiIKAKIo=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.7.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.10.1 h1:q/mM8GF/n0shIN8SaAZ0V+jnLPzen6WIVZdiwrRlMlo=
@@ -482,6 +508,8 @@ github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/spf13/viper v1.4.0 h1:yXHLWeravcrgGyFSyCgdYpXQ9dR9c/WED3pg1RhxqEU=
 github.com/spf13/viper v1.4.0/go.mod h1:PTJ7Z/lr49W6bUbkmS1V3by4uWynFiR9p7+dSq/yZzE=
+github.com/ssor/bom v0.0.0-20170718123548-6386211fdfcf h1:pvbZ0lM0XWPBqUKqFU8cmavspvIl9nulOYwdy6IFRRo=
+github.com/ssor/bom v0.0.0-20170718123548-6386211fdfcf/go.mod h1:RJID2RhlZKId02nZ62WenDCkgHFerpIOmW0iT7GKmXM=
 github.com/streadway/amqp v1.0.0 h1:kuuDrUJFZL1QYL9hUNuCxNObNzB0bV/ZG5jV3RWAQgo=
 github.com/streadway/amqp v1.0.0/go.mod h1:AZpEONHx3DKn8O/DFsRAY58/XVQiIPMTMB1SddzLXVw=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@@ -505,6 +533,10 @@ github.com/ugorji/go v1.1.4/go.mod h1:uQMGLiO92mf5W77hV/PUCpI3pbzQx3CRekS0kk+RGr
 github.com/urfave/cli v1.22.4/go.mod h1:Gos4lmkARVdJ6EkW0WaNv/tZAAMe9V7XWyB60NtXRu0=
 github.com/urfave/cli/v2 v2.1.1 h1:Qt8FeAtxE/vfdrLmR3rxR6JRE0RoVmbXu8+6kZtYU4k=
 github.com/urfave/cli/v2 v2.1.1/go.mod h1:SE9GqnLQmjVa0iPEY0f1w3ygNIYcIJ0OKPMoW2caLfQ=
+github.com/vanng822/css v0.0.0-20190504095207-a21e860bcd04 h1:L0rPdfzq43+NV8rfIx2kA4iSSLRj2jN5ijYHoeXRwvQ=
+github.com/vanng822/css v0.0.0-20190504095207-a21e860bcd04/go.mod h1:tcnB1voG49QhCrwq1W0w5hhGasvOg+VQp9i9H1rCM1w=
+github.com/vanng822/go-premailer v0.0.0-20191214114701-be27abe028fe h1:9YnI5plmy+ad6BM+JCLJb2ZV7/TNiE5l7SNKfumYKgc=
+github.com/vanng822/go-premailer v0.0.0-20191214114701-be27abe028fe/go.mod h1:JTFJA/t820uFDoyPpErFQ3rb3amdZoPtxcKervG0OE4=
 github.com/vektah/dataloaden v0.2.1-0.20190515034641-a19b9a6e7c9e h1:+w0Zm/9gaWpEAyDlU1eKOuk5twTjAjuevXqcJJw8hrg=
 github.com/vektah/dataloaden v0.2.1-0.20190515034641-a19b9a6e7c9e/go.mod h1:/HUdMve7rvxZma+2ZELQeNh88+003LL7Pf/CZ089j8U=
 github.com/vektah/gqlparser/v2 v2.0.1 h1:xgl5abVnsd4hkN9rk65OJID9bfcLSMuTaTcZj777q1o=
@@ -543,6 +575,7 @@ go.uber.org/multierr v1.1.0/go.mod h1:wR5kodmAFQ0UK8QlbwjlSNy0Z68gJhDJUG5sjR94q/
 go.uber.org/zap v1.9.1/go.mod h1:vwi/ZaCAaUcBkycHslxD9B2zi4UTXhF60s6SWpuDF0Q=
 go.uber.org/zap v1.10.0/go.mod h1:vwi/ZaCAaUcBkycHslxD9B2zi4UTXhF60s6SWpuDF0Q=
 golang.org/x/crypto v0.0.0-20180904163835-0709b304e793/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
+golang.org/x/crypto v0.0.0-20181029175232-7e6ffbd03851/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190325154230-a5d413f7728c/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190411191339-88737f569e3a/go.mod h1:WFFai1msRO1wXaEeE5yQxYXgSfI8pQAWXbQop6sCtWE=
@@ -594,6 +627,7 @@ golang.org/x/mod v0.2.0 h1:KU7oHjnv3XNWfa5COkzUifxZmxp1TyI7ImMXqFxLwvQ=
 golang.org/x/mod v0.2.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.3.0 h1:RM4zey1++hCTbCVQfnWeKs9/IEsaBLA8vTkd0WVtmH4=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/net v0.0.0-20180218175443-cbe0f9307d01/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180906233101-161cd47e91fd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -657,6 +691,7 @@ golang.org/x/sys v0.0.0-20181116152217-5ac8a444bdc5/go.mod h1:STP8DvDyc/dI5b8T5h
 golang.org/x/sys v0.0.0-20181122145206-62eef0e2fa9b/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190222072716-a9d3bda3a223/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190225065934-cc5685c2db12/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190403152447-81d4e9dc473e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -856,6 +891,8 @@ google.golang.org/protobuf v1.24.0/go.mod h1:r/3tXBNzIEhYS9I1OUVjXDlt8tc493IdKGj
 google.golang.org/protobuf v1.25.0 h1:Ejskq+SyPohKW+1uil0JJMtmHCgJPJ/qWTxr8qp+R4c=
 google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlbajtzgsN7c=
 gopkg.in/alecthomas/kingpin.v2 v2.2.6/go.mod h1:FMv+mEhP44yOT+4EoQTLFTRgOQ1FBLkstjWtayDeSgw=
+gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc h1:2gGKlE2+asNV9m7xrywl36YYNnBG5ZQ0r/BOOxqPpmk=
+gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc/go.mod h1:m7x9LTH6d71AHyAX77c9yqWCCa3UKHcVEj9y7hAtKDk=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15 h1:YR8cESwS4TdDjEe65xsg0ogRM/Nc3DYOhEAlW+xobZo=
@@ -865,6 +902,8 @@ gopkg.in/fsnotify.v1 v1.4.7 h1:xOHLXZwVvI9hhs+cLKq5+I5onOuwQLhQwiu63xxlHs4=
 gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
 gopkg.in/inconshreveable/log15.v2 v2.0.0-20180818164646-67afb5ed74ec/go.mod h1:aPpfJ7XW+gOuirDoZ8gHhLh3kZ1B08FtV2bbmy7Jv3s=
 gopkg.in/inf.v0 v0.9.1/go.mod h1:cWUDdTG/fYaXco+Dcufb5Vnc6Gp2YChqWtbxRZE0mXw=
+gopkg.in/mail.v2 v2.3.1 h1:WYFn/oANrAGP2C0dcV6/pbkPzv8yGzqTjPmTeO7qoXk=
+gopkg.in/mail.v2 v2.3.1/go.mod h1:htwXN1Qh09vZJ1NVKxQqHPBaCBbzKhp5GzuJEA4VJWw=
 gopkg.in/resty.v1 v1.12.0/go.mod h1:mDo4pnntr5jdWRML875a/NmxYqAlA73dVijT2AXvQQo=
 gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7 h1:uRGJdciOHaEIrze2W8Q3AKkepLTh2hOroT7a+7czfdQ=
 gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7/go.mod h1:dt/ZhP58zS4L8KSrWDmTeBkI65Dw0HsyUHuEVlX15mw=